Refactored frontend

src/views/catalog/Catalog.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useContext } from "react";
+import StoreContext from "../../ctx/StoreContext.jsx";
+import JobContext from "../../ctx/JobContext.jsx";
+import CatalogBox from "./CatalogBox.jsx";
+import CatalogSearch from "./CatalogSearch.jsx";
+
+import TextField from "@mui/material/TextField";
+
+
+
+export default function Catalog() {
+  const {
+    state: jobState,
+    dispatch: jobDispatch,
+    jobUpdate,
+    jobCreate,
+  } = useContext(JobContext);
+
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  const handleSearchChange = (e) =>
+    updateStore({ catalogSearch: e.target.value });
+
+  const handleSearchClear = () => updateStore({ catalogSearch: "" });
+
+  useEffect(() => {
+    return function unmount() {
+      handleSearchClear();
+    };
+  }, []);
+
+  return (
+    <div className="catalog">
+      <CatalogSearch
+        onChange={handleSearchChange}
+        onClear={handleSearchClear}
+        clearOnUnmount
+      />
+      <h6>{store.catalogSearch}</h6>
+      {store.catalog.map((v, i) => (
+        <CatalogBox key={i} catalogTest={v} />
+      ))}
+    </div>
+  );
+}

src/views/catalog/CatalogBox.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useContext } from "react";
+import StoreContext from "../../ctx/StoreContext.jsx";
+import JobContext from "../../ctx/JobContext.jsx";
+
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Typography from "@mui/material/Typography";
+
+import IconButton from "@mui/material/IconButton";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+
+export default function CatalogBox(props) {
+  const { catalogTest } = props;
+
+  const {
+    name: testName,
+    class: testClass,
+    repo: testRepo,
+    isCompound,
+    type: testType,
+  } = catalogTest;
+
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  const { state: jobState, jobBuilder } = useContext(JobContext);
+
+  const [open, setOpen] = useState(false);
+
+  const toggleOpen = () => setOpen(!open);
+
+  const runTest = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    jobBuilder([catalogTest]);
+  };
+
+  function Actions() {
+    return (
+      <React.Fragment>
+        <IconButton
+          color="success"
+          aria-label="play"
+          component="span"
+          onClick={runTest}
+        >
+          <PlayArrowIcon />
+        </IconButton>
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <Accordion
+      expanded={open}
+      disableGutters={true}
+      onChange={toggleOpen}
+      square
+    >
+      <AccordionSummary
+        style={{
+          backgroundColor: "rgba(0, 0, 0, .03)",
+          flexWrap: "wrap",
+        }}
+      >
+        <Typography
+          component={"span"}
+          style={{ wordBreak: "break-word", margin: "auto 0" }}
+        >
+          {`${testClass}#`}
+          <Box fontWeight="bold" display="inline">
+            {testName}
+          </Box>
+          <br />
+        </Typography>
+
+        <Stack
+          sx={{ ml: "auto", display: { md: "none", lg: "none", xl: "none" } }}
+        >
+          <Actions />
+        </Stack>
+        <Stack
+          direction="row"
+          sx={{
+            ml: "auto",
+            display: { xs: "none", sm: "none", md: "flex", lg: "flex" },
+          }}
+        >
+          <Actions />
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
+          {JSON.stringify(catalogTest)}
+        </Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/views/catalog/CatalogSearch.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+import Paper from "@mui/material/Paper";
+import InputBase from "@mui/material/InputBase";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import SearchIcon from "@mui/icons-material/Search";
+import DirectionsIcon from "@mui/icons-material/Directions";
+import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
+
+export default function CatalogSearch(props) {
+  const { onChange, onClear } = props;
+
+  const searchRef = useRef(null);
+
+  const handleClear = () => {
+    searchRef.current.children[0].value = null;
+    searchRef.current.children[0].focus();
+    onClear();
+  };
+
+  return (
+    <Paper component="form" sx={{ display: "flex", alignItems: "center" }}>
+      <InputBase
+        ref={searchRef}
+        sx={{ ml: 1, flex: 1 }}
+        placeholder="Search Catalog"
+        inputProps={{ "aria-label": `search catalog` }}
+        onChange={onChange}
+        fullWidth
+      />
+      <Divider sx={{ height: 26, m: 0.5 }} orientation="vertical" />
+      <IconButton
+        sx={{ p: "10px", mr: 0.5 }}
+        aria-label="clear"
+        onClick={handleClear}
+      >
+        <ClearOutlinedIcon />
+      </IconButton>
+    </Paper>
+  );
+}