export default()

in source/frontend/src/components/Drawer/ResourceSelector/TreeMenuResourceTypeMenu.js [16:76]
59 lines of code
1 McCabe index (conditional complexity)

export default () => {
  const [error, setError] = React.useState();
  const [clicked, setClicked] = React.useState();
  const [{ resources, filters }, resourceDispatch] = useResourceState();
  const [{ graphResources }, dispatch] = useGraphState();
  const [{ costPreferences }, costDispatch] = useCostsState();

  const handleTypeSelect = (nodeId) => {
    setClicked(nodeId);
    filterResources({ resourceType: nodeId }, filters, costPreferences)
      .then(handleResponse)      
      .then((response) => {
        setClicked();
        dispatch({
          type: 'clearGraph',
        });
        dispatch({
          type: 'updateGraphResources',
          graphResources: response.body,
        });
      })
      .catch((err) => {
        setClicked();
        setError(err);
      });
  };

  return (
    <ExpandableSection
      className='first-level'
      variant='navigation'
      header={`Types`}>
      {buildResourceTypes(resources).map((resource, index) => {
        return (
          <ExpandableSection
            key={index}
            className='first-level'
            variant='navigation'
            header={resource.label}>
            <ColumnLayout columns={1} disableGutters>
              {resource.nodes.map((subResource, subIndex) => {
                return (
                  <Button
                    loading={R.equals(subResource.filter.resourceType, clicked)}
                    key={subIndex}
                    variant='link'
                    onClick={(event) =>
                      handleTypeSelect(subResource.filter.resourceType)
                    }
                    className='sidepanel-button'>
                    {subResource.label}
                  </Button>
                );
              })}
            </ColumnLayout>
          </ExpandableSection>
        );
      })}
    </ExpandableSection>
  );
};