export default()

in source/frontend/src/components/Header/Search/SearchBar.js [39:136]


export default ({ setLoading }) => {
  const [{ graphResources }, dispatch] = useGraphState();
  const [{ costPreferences }, costDispatch] = useCostsState();
  const [{ resources }, resourceDispatch] = useResourceState();
  const [error, setError] = useState(false);
  const [selectedOption, setSelectedOption] = React.useState('');
  const classes = useStyles();
  const byType = R.groupBy((e) => e.label);

  const getNodes = () => {
    const groups = byType(R.pathOr([], ['nodes'], resources));
    return R.map((e) => {
      return {
        label: e,
        id: e,
        options: R.map((v) => {
          return {
            label: v.title,
            id: v.id,
            labelTag: v.label,
            tags: [v.accountId, v.region],
            value: R.toString(v),
          };
        }, groups[`${e}`]),
      };
    }, Object.keys(groups));
  };

  const nodeSelected = (nodeId) => {
    setLoading(true);

    sendGetRequests(
      R.map(
        (e) =>
          wrapGetLinkedNodesHierachyRequest(
            getLinkedNodesHierarchy,
            {
              id: e,
            },
            e,
            costPreferences,
            graphResources
          )
            .then((node) =>
              handleSelectedResource(
                processHierarchicalNodeData(
                  R.pathOr(
                    [],
                    ['body', 'data', 'getLinkedNodesHierarchy'],
                    node
                  ),
                  e,
                  costPreferences
                ),
                e,
                graphResources
              )
            )
            .catch((err) => {
              console.error(err);
              setLoading(false);
              setError(err);
            }),
        [nodeId.id]
      )
    )
      .then((e) => Promise.all(e))
      .then(R.flatten)
      .then((nodes) => {
        dispatch({
          type: 'updateGraphResources',
          graphResources: nodes,
        });
        setLoading(false)
      })
  };

  return (
    <div id='searchBar' className={classes.div}>
      <Select
        virtualScroll
        placeholder='Find a resource'
        selectedOption={selectedOption}
        onChange={({ detail }) => nodeSelected(detail.selectedOption)}
        options={getNodes()}
        filteringType='auto'
        selectedAriaLabel='Selected'
      />

      {error && (
        <Flashbar
          type='error'
          message='We could not load the search configuration. It could be a temporary issue. Try reloading the page'
        />
      )}
    </div>
  );
};