From 94e3a4b6472f93232acce9b358f7e5d794035988 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Tue, 10 Dec 2024 10:28:58 +0100
Subject: [PATCH] feat(frontend): add router query for visual editor flows

---
 .../components/visual-editor/v2/Diagrams.tsx    | 17 +++++++++++++++--
 .../pages/visual-editor/flows/[id]/index.tsx    | 11 +++++++++++
 .../src/pages/visual-editor/flows/index.tsx     | 11 +++++++++++
 .../index.tsx}                                  |  0
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/visual-editor/flows/[id]/index.tsx
 create mode 100644 frontend/src/pages/visual-editor/flows/index.tsx
 rename frontend/src/pages/{visual-editor.tsx => visual-editor/index.tsx} (100%)

diff --git a/frontend/src/components/visual-editor/v2/Diagrams.tsx b/frontend/src/components/visual-editor/v2/Diagrams.tsx
index 3d309d6b..410b9838 100644
--- a/frontend/src/components/visual-editor/v2/Diagrams.tsx
+++ b/frontend/src/components/visual-editor/v2/Diagrams.tsx
@@ -29,6 +29,7 @@ import {
   DiagramModel,
   DiagramModelGenerics,
 } from "@projectstorm/react-diagrams";
+import { useRouter } from "next/router";
 import {
   SyntheticEvent,
   useCallback,
@@ -52,7 +53,7 @@ import useDebouncedUpdate from "@/hooks/useDebouncedUpdate";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useSearch } from "@/hooks/useSearch";
 import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format, QueryType } from "@/services/types";
+import { EntityType, Format, QueryType, RouterType } from "@/services/types";
 import { IBlock } from "@/types/block.types";
 import { ICategory } from "@/types/category.types";
 import { BlockPorts } from "@/types/visual-editor.types";
@@ -65,6 +66,8 @@ import { AdvancedLinkModel } from "./AdvancedLink/AdvancedLinkModel";
 
 const Diagrams = () => {
   const { t } = useTranslate();
+  const router = useRouter();
+  const flowId = router.query.id?.toString();
   const [model, setModel] = useState<
     DiagramModel<DiagramModelGenerics> | undefined
   >();
@@ -95,7 +98,9 @@ const Diagrams = () => {
     },
     {
       onSuccess([{ id, zoom, offset }]) {
-        if (id) {
+        if (flowId) {
+          setSelectedCategoryId?.(flowId);
+        } else if (id) {
           setSelectedCategoryId?.(id);
           if (engine?.getModel()) {
             setViewerOffset(offset || [0, 0]);
@@ -161,6 +166,8 @@ const Diagrams = () => {
       if (id) {
         setSelectedCategoryId?.(id);
         setSelectedBlockId(undefined); // Reset selected block when switching categories, resetting edit & remove buttons
+
+        router.push(`/${RouterType.VISUAL_EDITOR}/flows/${id}`);
       }
     }
   };
@@ -181,6 +188,12 @@ const Diagrams = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    setSelectedCategoryId(flowId || "");
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flowId]);
+
   useEffect(() => {
     const { canvas, model, engine } = buildDiagram({
       zoom: currentCategory?.zoom || 100,
diff --git a/frontend/src/pages/visual-editor/flows/[id]/index.tsx b/frontend/src/pages/visual-editor/flows/[id]/index.tsx
new file mode 100644
index 00000000..168060fe
--- /dev/null
+++ b/frontend/src/pages/visual-editor/flows/[id]/index.tsx
@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import VisualEditorPage from "../..";
+
+export default VisualEditorPage;
diff --git a/frontend/src/pages/visual-editor/flows/index.tsx b/frontend/src/pages/visual-editor/flows/index.tsx
new file mode 100644
index 00000000..b9f909bd
--- /dev/null
+++ b/frontend/src/pages/visual-editor/flows/index.tsx
@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import VisualEditorPage from "..";
+
+export default VisualEditorPage;
diff --git a/frontend/src/pages/visual-editor.tsx b/frontend/src/pages/visual-editor/index.tsx
similarity index 100%
rename from frontend/src/pages/visual-editor.tsx
rename to frontend/src/pages/visual-editor/index.tsx