refactor: Create SearchHeader

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx

@@ -2,8 +2,9 @@ import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
+import { IndexedNode } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
-import { useSearch } from "hooks/useSearch";
+import { SearchResult, useSearch } from "hooks/useSearch";
 import { debounce } from "lodash";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useMemo, useState } from "react";
@@ -20,7 +21,11 @@ interface SearchNodes {
   facets: typeof DATA_FACETS;
 }
 
-const Search: React.FC = () => {
+interface SearchHeaderProps {
+  onChange: React.Dispatch<React.SetStateAction<SearchResult<IndexedNode>[]>>;
+}
+
+const SearchHeader: React.FC<SearchHeaderProps> = ({ onChange }) => {
   const [orderedFlow, setOrderedFlow] = useStore((state) => [
     state.orderedFlow,
     state.setOrderedFlow,
@@ -44,6 +49,10 @@ const Search: React.FC = () => {
     keys: formik.values.facets,
   });
 
+  useEffect(() => {
+    onChange(results);
+  }, [onChange, results]);
+
   const debouncedSearch = useMemo(
     () =>
       debounce((pattern: string) => {
@@ -62,53 +71,57 @@ const Search: React.FC = () => {
   }, [formik.values.pattern, lastSearchedTerm]);
 
   return (
-    <Container component={Box} p={3}>
-      <form onSubmit={formik.handleSubmit}>
-        <Typography
-          component={"label"}
-          htmlFor="pattern"
-          variant="h3"
-          mb={1}
-          display={"block"}
-        >
-          Search this flow and internal portals
-        </Typography>
-        <Box
-          sx={{ display: "flex", position: "relative", alignItems: "center" }}
-        >
-          <Input
-            id="pattern"
-            name="pattern"
-            value={formik.values.pattern}
-            onChange={(e) => {
-              formik.setFieldValue("pattern", e.target.value);
-              formik.handleSubmit();
-            }}
-            inputProps={{ spellCheck: false }}
-          />
-          {isSearching && (
-            <CircularProgress
-              size={25}
-              sx={(theme) => ({
-                position: "absolute",
-                right: theme.spacing(1.5),
-                zIndex: 1,
-              })}
-            />
-          )}
-        </Box>
-        <ChecklistItem
-          label="Search only data fields"
-          id={"search-data-field-facet"}
-          checked
-          inputProps={{ disabled: true }}
-          onChange={() => {}}
-          variant="compact"
+    <form onSubmit={formik.handleSubmit}>
+      <Typography
+        component={"label"}
+        htmlFor="pattern"
+        variant="h3"
+        mb={1}
+        display={"block"}
+      >
+        Search this flow and internal portals
+      </Typography>
+      <Box sx={{ display: "flex", position: "relative", alignItems: "center" }}>
+        <Input
+          id="pattern"
+          name="pattern"
+          value={formik.values.pattern}
+          onChange={(e) => {
+            formik.setFieldValue("pattern", e.target.value);
+            formik.handleSubmit();
+          }}
+          inputProps={{ spellCheck: false }}
         />
-        <Box pt={3}>
-          {formik.values.pattern && <NodeSearchResults results={results} />}
-        </Box>
-      </form>
+        {isSearching && (
+          <CircularProgress
+            size={25}
+            sx={(theme) => ({
+              position: "absolute",
+              right: theme.spacing(1.5),
+              zIndex: 1,
+            })}
+          />
+        )}
+      </Box>
+      <ChecklistItem
+        label="Search only data fields"
+        id={"search-data-field-facet"}
+        checked
+        inputProps={{ disabled: true }}
+        onChange={() => {}}
+        variant="compact"
+      />
+    </form>
+  );
+};
+
+const Search: React.FC = () => {
+  const [results, setResults] = useState<SearchResult<IndexedNode>[]>([]);
+
+  return (
+    <Container component={Box} p={3}>
+      <SearchHeader onChange={setResults} />
+      <NodeSearchResults results={results} />
     </Container>
   );
 };