From d07cce603add42f58eb8a5c25a1dc454f9963180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Fri, 30 Aug 2024 17:54:34 +0800
Subject: [PATCH] chore: update SaveFlowModal component to use useRouter hook
 and add useEffect for id state

---
 .../flow/canvas-modal/save-flow-modal.tsx     | 23 ++++++++-----
 web/locales/en/flow.ts                        |  1 +
 web/locales/zh/flow.ts                        |  1 +
 web/pages/construct/flow/canvas/index.tsx     | 33 +++++++++++--------
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/web/components/flow/canvas-modal/save-flow-modal.tsx b/web/components/flow/canvas-modal/save-flow-modal.tsx
index ba37afcf5..43d43ac61 100644
--- a/web/components/flow/canvas-modal/save-flow-modal.tsx
+++ b/web/components/flow/canvas-modal/save-flow-modal.tsx
@@ -2,8 +2,8 @@ import { addFlow, apiInterceptors, updateFlowById } from '@/client/api';
 import { IFlowData, IFlowUpdateParam } from '@/types/flow';
 import { mapHumpToUnderline } from '@/utils/flow';
 import { Button, Checkbox, Form, Input, Modal, Space, message } from 'antd';
-import { useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactFlowInstance } from 'reactflow';
 
@@ -22,13 +22,18 @@ export const SaveFlowModal: React.FC<Props> = ({
   flowInfo,
   setIsSaveFlowModalOpen,
 }) => {
-  const [deploy, setDeploy] = useState(true);
   const { t } = useTranslation();
-  const searchParams = useSearchParams();
-  const id = searchParams?.get('id') || '';
+  const router = useRouter();
   const [form] = Form.useForm<IFlowUpdateParam>();
   const [messageApi, contextHolder] = message.useMessage();
 
+  const [deploy, setDeploy] = useState(true);
+  const [id, setId] = useState(router.query.id || '');
+
+  useEffect(() => {
+    setId(router.query.id || '');
+  }, [router.query.id]);
+
   function onLabelChange(e: React.ChangeEvent<HTMLInputElement>) {
     const label = e.target.value;
     // replace spaces with underscores, convert uppercase letters to lowercase, remove characters other than digits, letters, _, and -.
@@ -45,12 +50,12 @@ export const SaveFlowModal: React.FC<Props> = ({
 
     if (id) {
       const [, , res] = await apiInterceptors(
-        updateFlowById(id, {
+        updateFlowById(id.toString(), {
           name,
           label,
           description,
           editable,
-          uid: id,
+          uid: id.toString(),
           flow_data: reactFlowObject,
           state,
         }),
@@ -72,10 +77,10 @@ export const SaveFlowModal: React.FC<Props> = ({
           state,
         }),
       );
+
       if (res?.uid) {
         messageApi.success(t('save_flow_success'));
-        const history = window.history;
-        history.pushState(null, '', `/flow/canvas?id=${res.uid}`);
+        router.push(`/construct/flow/canvas?id=${res.uid}`, undefined, { shallow: true });
       }
     }
     setIsSaveFlowModalOpen(false);
diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts
index 18740bf5e..fffe4a6a3 100644
--- a/web/locales/en/flow.ts
+++ b/web/locales/en/flow.ts
@@ -16,4 +16,5 @@ export const FlowEn = {
   Export_File_Format: 'File_Format',
   Yes: 'Yes',
   No: 'No',
+  Please_Add_Nodes_First: 'Please add nodes first',
 };
diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts
index fda54cd50..9ce76d733 100644
--- a/web/locales/zh/flow.ts
+++ b/web/locales/zh/flow.ts
@@ -16,4 +16,5 @@ export const FlowZn = {
   Export_File_Format: '文件格式',
   Yes: '是',
   No: '否',
+  Please_Add_Nodes_First: '请先添加节点',
 };
diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx
index c533290aa..5e5676c66 100644
--- a/web/pages/construct/flow/canvas/index.tsx
+++ b/web/pages/construct/flow/canvas/index.tsx
@@ -30,6 +30,7 @@ const edgeTypes = { buttonedge: ButtonEdge };
 
 const Canvas: React.FC = () => {
   const { t } = useTranslation();
+  const [messageApi, contextHolder] = message.useMessage();
 
   const searchParams = useSearchParams();
   const id = searchParams?.get('id') || '';
@@ -152,22 +153,24 @@ const Canvas: React.FC = () => {
   function onSave() {
     const flowData = reactFlow.toObject() as IFlowData;
     const [check, node, message] = checkFlowDataRequied(flowData);
+
+    if (!node) {
+      messageApi.open({
+        type: 'warning',
+        content: t('Please_Add_Nodes_First'),
+      });
+      return;
+    }
+
     if (!check && message) {
       setNodes(nds =>
-        nds.map(item => {
-          if (item.id === node?.id) {
-            item.data = {
-              ...item.data,
-              invalid: true,
-            };
-          } else {
-            item.data = {
-              ...item.data,
-              invalid: false,
-            };
-          }
-          return item;
-        }),
+        nds.map(item => ({
+          ...item,
+          data: {
+            ...item.data,
+            invalid: item.id === node?.id,
+          },
+        })),
       );
       return notification.error({
         message: 'Error',
@@ -274,6 +277,8 @@ const Canvas: React.FC = () => {
         isImportModalOpen={isImportModalOpen}
         setIsImportFlowModalOpen={setIsImportFlowModalOpen}
       />
+
+      {contextHolder}
     </>
   );
 };