IOCListView.js

import { IconButton, makeStyles, Modal, Paper, useTheme } from "@material-ui/core";
import { AddBox } from "@material-ui/icons";
import React, { useEffect, useState } from "react"
import { useGetIOCs } from "../../api/Hooks";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import { SearchableIOCList } from "../../components/IOC/IOCList";
import { CreateIOC } from "../../components/IOC/CreateIOC";
import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";

export function IOCListView() {
  const [iocs, getIOCs] = useGetIOCs();
  const [iocFormOpen, setIOCFormOpen] = useState(false);
  useEffect(getIOCs, [getIOCs]);

  const theme = useTheme();
  const title = "IOCs";
  const button = (
    <IconButton color="inherit" onClick={() => { setIOCFormOpen(true) }}>
      <AddBox style={{ fill: theme.palette.primary.contrastText }} />
    </IconButton>
  );
  useGlobalAppBar(title, button);

  const closeModal = () => {
    setIOCFormOpen(false);
  }

  let content = <h1>Loading IOCs...</h1>
  if (iocs && !iocs.isPromise) {
    const abcIOCs = iocs.sort((a, b) => a.name.localeCompare(b.name));
    content = <SearchableIOCList iocs={abcIOCs} />;
  }

  return (
    <div>
      {content}
      <SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
          <CreateIOC submitCallback={closeModal} />
      </SimpleModal>
    </div>
  );
}