From 53441f69ab56090eb8d67d478ee00d70bdcd8501 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 10 Sep 2024 12:47:38 +0100
Subject: [PATCH] wip: Pickup work from old branch

---
 .../Sidebar/Search/NodeSearchResults.test.tsx |  7 ++++
 .../Sidebar/Search/SearchResultCard.tsx       | 11 ++---
 .../src/pages/FlowEditor/lib/store/editor.ts  | 41 ++++++++++++++++++-
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/NodeSearchResults.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/NodeSearchResults.test.tsx
index 042d9b4755..33a9c26332 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/NodeSearchResults.test.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/NodeSearchResults.test.tsx
@@ -1,11 +1,18 @@
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { setup } from "testUtils";
+import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
 import { flow, results } from "./mocks/simple";
 import { NodeSearchResults } from "./NodeSearchResults";
 
+vi.mock("react-navi", () => ({
+  useNavigation: () => ({
+    navigate: vi.fn(),
+  }),
+}));
+
 beforeAll(() => useStore.setState({ flow }));
 
 it("Displays a warning if no results are returned", () => {
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard.tsx
index 30f5621d2a..5e36b030f7 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard.tsx
@@ -9,6 +9,7 @@ import { capitalize, get } from "lodash";
 import { SLUGS } from "pages/FlowEditor/data/types";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
+import { useNavigation } from "react-navi";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 import { Headline } from "./Headline";
@@ -55,12 +56,12 @@ export const SearchResultCard: React.FC<{
   const { Icon, componentType, title, key, headline } =
     getDisplayDetailsForResult(result); // TODO - display portal wrapper
 
+  const getURLForNode = useStore((state) => state.getURLForNode);
+  const { navigate } = useNavigation();
+
   const handleClick = () => {
-    console.log("todo!");
-    console.log({ nodeId: result.item.id });
-    // get path for node
-    // generate url from path
-    // navigate to url
+    const url = getURLForNode(result.item.id);
+    navigate(url);
   };
 
   return (
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index 0847623628..eab85b7a8e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -1,6 +1,10 @@
 import { gql } from "@apollo/client";
-import { sortFlow } from "@opensystemslab/planx-core";
-import { FlowGraph, OrderedFlow } from "@opensystemslab/planx-core/types";
+import { getPathForNode, sortFlow } from "@opensystemslab/planx-core";
+import {
+  ComponentType,
+  FlowGraph,
+  OrderedFlow,
+} from "@opensystemslab/planx-core/types";
 import {
   add,
   clone,
@@ -107,6 +111,7 @@ export interface EditorStore extends Store.Store {
     name: string;
     href: string;
   }) => void;
+  getURLForNode: (nodeId: string) => string;
 }
 
 export const editorStore: StateCreator<
@@ -487,4 +492,36 @@ export const editorStore: StateCreator<
     externalPortals[id] = { name, href };
     set({ externalPortals });
   },
+
+  getURLForNode: (nodeId) => {
+    const { orderedFlow: flow, flowSlug, teamSlug } = get();
+    if (!flow) throw Error("Missing ordered flow!");
+
+    const [node, parent, grandparent, ...rest] = getPathForNode({
+      nodeId,
+      flow,
+    });
+    console.log({ node, parent, grandparent, rest });
+    const internalPortals = rest.filter(
+      ({ type }) => type === ComponentType.InternalPortal,
+    );
+    console.log({ internalPortals });
+
+    // based on node type, construct URL
+    // Answer nodes use parent and grandparent
+    let urlPath = `/${teamSlug}/${flowSlug}`;
+    if (internalPortals.length) {
+      const portalPath = internalPortals.map(({ id }) => id).join(",");
+      urlPath += `/${portalPath}`;
+    }
+
+    if (node.type === ComponentType.Answer) {
+      urlPath += `/nodes/${grandparent.id}/nodes/${parent.id}/edit`;
+    } else {
+      urlPath += `/nodes/${parent.id}/nodes/${node.id}/edit`;
+    }
+
+    console.log(urlPath);
+    return urlPath;
+  },
 });