feat: Initial frontend search proof of concept with Fuse.js (#3435)

Co-authored-by: Ian Jones <[email protected]>

editor.planx.uk/package.json

@@ -14,7 +14,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "^0.8.3",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#dd24b0a",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#0336fd4",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",
@@ -51,6 +51,7 @@
     "dompurify": "^3.0.6",
     "dotenv": "^16.4.5",
     "formik": "^2.4.5",
+    "fuse.js": "^7.0.0",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "immer": "^9.0.21",

editor.planx.uk/src/hooks/useSearch.ts

@@ -0,0 +1,53 @@
+import Fuse, { IFuseOptions } from "fuse.js";
+import { useEffect, useMemo, useState } from "react";
+
+interface UseSearchProps<T extends object> {
+  list: T[];
+  keys: string[];
+}
+
+export interface SearchResult<T extends object> {
+  item: T;
+  key: string;
+  matchIndices?: [number, number][];
+}
+
+export type SearchResults<T extends object> = SearchResult<T>[];
+
+export const useSearch = <T extends object>({
+  list,
+  keys,
+}: UseSearchProps<T>) => {
+  const [pattern, setPattern] = useState("");
+  const [results, setResults] = useState<SearchResults<T>>([]);
+
+  const fuseOptions: IFuseOptions<T> = useMemo(
+    () => ({
+      useExtendedSearch: true,
+      includeMatches: true,
+      minMatchCharLength: 3,
+      keys,
+    }),
+    [keys],
+  );
+
+  const fuse = useMemo(
+    () => new Fuse<T>(list, fuseOptions),
+    [list, fuseOptions],
+  );
+
+  useEffect(() => {
+    const fuseResults = fuse.search(pattern);
+    setResults(
+      fuseResults.map((result) => ({
+        item: result.item,
+        key: result.matches?.[0].key || "",
+        // We only display the first match
+        matchIndices:
+          (result.matches?.[0].indices as [number, number][]) || undefined,
+      })),
+    );
+  }, [pattern]);
+
+  return { results, search: setPattern };
+};

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx

@@ -14,7 +14,10 @@ import Hanger from "./Hanger";
 import Question from "./Question";
 
 const ExternalPortal: React.FC<any> = (props) => {
-  const copyNode = useStore((state) => state.copyNode);
+  const [copyNode, addExternalPortal] = useStore((state) => [
+    state.copyNode,
+    state.addExternalPortal,
+  ]);
   const [href, setHref] = useState("Loading...");
 
   const { data, loading } = useQuery(
@@ -23,6 +26,7 @@ const ExternalPortal: React.FC<any> = (props) => {
         flows_by_pk(id: $id) {
           id
           slug
+          name
           team {
             slug
           }
@@ -31,8 +35,17 @@ const ExternalPortal: React.FC<any> = (props) => {
     `,
     {
       variables: { id: props.data.flowId },
-      onCompleted: (data) =>
-        setHref([data.flows_by_pk.team.slug, data.flows_by_pk.slug].join("/")),
+      onCompleted: (data) => {
+        const href = [data.flows_by_pk.team.slug, data.flows_by_pk.slug].join(
+          "/",
+        );
+        setHref(href);
+        addExternalPortal({
+          id: props.data.flowId,
+          name: data.flows_by_pk.name,
+          href,
+        });
+      },
     },
   );