export default function App()

in shells/dev/relay-app/FriendsList/App.js [40:108]
58 lines of code
2 McCabe index (conditional complexity)

export default function App(props: Props) {
  // Add initial environment to environmentList
  const [environmentList, updateEnvironmentList] = useState({
    'Example Environment': initialEnvironment,
  });
  const [currentEnvironment, setCurrentEnvironment] = useState(
    initialEnvironment
  );

  const createUpdateEnvironmentList = useCallback(() => {
    const newEnvironment = createNewEnvironment(
      'Example Environment ' + Object.keys(environmentList).length
    );

    updateEnvironmentList({
      ...environmentList,
      [newEnvironment.configName]: newEnvironment,
    });
  }, [environmentList]);

  const selectNewEnvironment = useCallback(
    e => {
      setCurrentEnvironment(environmentList[e.target.value]);
    },
    [environmentList]
  );

  return (
    <Fragment>
      <div className="addEnvironment">
        <h1>Example Relay App</h1>
        <button onClick={createUpdateEnvironmentList}>
          Create Environment
        </button>
        <select onChange={selectNewEnvironment}>
          {Object.keys(environmentList).map(key => (
            <option>{key}</option>
          ))}
        </select>
      </div>
      <QueryRenderer
        environment={currentEnvironment}
        query={graphql`
          query AppQuery {
            user: node(id: "my-id") {
              ... on User {
                name
                ...Friends_user
              }
            }
          }
        `}
        variables={{}}
        // eslint-disable-next-line no-shadow
        render={({ props }) => {
          if (props) {
            return (
              <Fragment>
                <div>Hello, {props.user.name}!</div>
                <Friends user={props.user} />
              </Fragment>
            );
          }
          return 'Data is not ready.';
        }}
      />
    </Fragment>
  );
}