feat: fetch flow (#1068)

### What problem does this PR solve?
feat: fetch flow #918 
feat: save graph

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/flow-hooks.ts

@@ -1,5 +1,9 @@
+import { DSL, IFlow } from '@/interfaces/database/flow';
+import i18n from '@/locales/config';
 import flowService from '@/services/flow-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { message } from 'antd';
+import { useParams } from 'umi';
 
 export const useFetchFlowTemplates = () => {
   const { data } = useQuery({
@@ -15,7 +19,7 @@ export const useFetchFlowTemplates = () => {
   return data;
 };
 
-export const useFetchFlowList = () => {
+export const useFetchFlowList = (): { data: IFlow[]; loading: boolean } => {
   const { data, isFetching: loading } = useQuery({
     queryKey: ['fetchFlowList'],
     initialData: [],
@@ -29,6 +33,21 @@ export const useFetchFlowList = () => {
   return { data, loading };
 };
 
+export const useFetchFlow = (): { data: IFlow; loading: boolean } => {
+  const { id } = useParams();
+  const { data, isFetching: loading } = useQuery({
+    queryKey: ['flowDetail'],
+    initialData: {} as IFlow,
+    queryFn: async () => {
+      const { data } = await flowService.getCanvas({}, id);
+
+      return data?.data ?? {};
+    },
+  });
+
+  return { data, loading };
+};
+
 export const useSetFlow = () => {
   const queryClient = useQueryClient();
   const {
@@ -37,9 +56,12 @@ export const useSetFlow = () => {
     mutateAsync,
   } = useMutation({
     mutationKey: ['setFlow'],
-    mutationFn: async (params: any) => {
+    mutationFn: async (params: { id?: string; title?: string; dsl?: DSL }) => {
       const { data } = await flowService.setCanvas(params);
       if (data.retcode === 0) {
+        message.success(
+          i18n.t(`message.${params?.id ? 'modified' : 'created'}`),
+        );
         queryClient.invalidateQueries({ queryKey: ['fetchFlowList'] });
       }
       return data?.retcode;