chore: update SaveFlowModal component to use useRouter hook and add useEffect for id state

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);

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',
 };

web/locales/zh/flow.ts

@@ -16,4 +16,5 @@ export const FlowZn = {
   Export_File_Format: '文件格式',
   Yes: '是',
   No: '否',
+  Please_Add_Nodes_First: '请先添加节点',
 };

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}
     </>
   );
 };