Giters

wix-incubator / vscode-glean

The extension provides refactoring tools for your React codebase

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

In simple component, seems like parameters not extracted

pkellner opened this issue · comments

commented

I'm having trouble figuring out if this is a limitation of glean or there is something else going on. Below is a simple component with an extra layer of nesting.

When I "Extract Component" the sessions.map(... piece (surrounded by the div), it extracts id and title but leaves out the array sessions so that the refactoring fails. (code pasted below below).

const data = [
  {
    id: "1269",
    first: "Ronald",
    last: "Reagan",
    sessions: [
      {
        id: "32",
        title: "Rails powered by GlassFish",
        room: {
          name: "Cornell Hall",
        },
      },
    ],
  },
  {
    id: "8590",
    first: "Jimmy",
    last: "Carter",
    sessions: [
      {
        id: "1011",
        title: "Decomposing applications for scalability and deployability",
        room: {
          name: "4306",
        },
      },
    ],
  },
];

const IndexPage = () => {
  return (
    <div>
      {data.map(function ({ id, first, last, sessions }) {
        return (
          <div key={id}>
            {first} {last}
            <div>
              {sessions.map(function ({ id, title }) {
                return (
                  <div key={id}>
                    <div>&nbsp;{title}</div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default IndexPage;

Extracted Component:

const IndexPage = () => {
  return (
    <div>
      {data.map(function ({ id, first, last, sessions }) {
        return (
          <div key={id}>
            {first} {last}
            <Sessions id={id} title={title} />
          </div>
        );
      })}
    </div>
  );
};

export default IndexPage;

function Sessions({ id, title }) {
  return (
    <div>
      {sessions.map(function ({ id, title }) {
        return (
          <div key={id}>
            <div>&nbsp;{title}</div>
          </div>
        );
      })}
    </div>
  );
}
commented

Hey! @pkellner Ill have a look ASAP. Thanks for the isseu!

commented