From 9f4f28edafd1c8adbe008158118b84c2f5e47539 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Sat, 29 Jun 2024 23:23:22 +0800
Subject: [PATCH] fix: api watch data

---
 .env                                |  1 +
 config/proxy.ts                     | 12 ++++++++++++
 src/components/seal-table/index.tsx |  2 +-
 src/hooks/use-chunk-request.ts      | 14 ++++++++++++--
 src/hooks/use-event-source.ts       |  2 +-
 src/hooks/use-update-chunk-list.ts  |  3 ++-
 src/pages/llmodels/index.tsx        | 10 +++-------
 src/utils/fetch-chunk-data.ts       | 16 ++++++++++++++++
 8 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/.env b/.env
index 00ee76b1..ed601d8e 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
 PORT=9000
+UMI_DEV_SERVER_COMPRESS=none
diff --git a/config/proxy.ts b/config/proxy.ts
index 6e5586c2..410b2205 100644
--- a/config/proxy.ts
+++ b/config/proxy.ts
@@ -11,6 +11,18 @@ export default function createProxyTable(target?: string) {
         secure: false,
         ws: true,
         pathRewrite: (pth: string) => pth.replace(`/^/${api}/`, `/${api}`),
+        // onProxyRes: (proxyRes: any, req: any, res: any) => {
+        //   if (req.headers.accept === 'text/event-stream') {
+        //     res.writeHead(res.statusCode, {
+        //       'Content-Type': 'text/event-stream',
+        //       'Cache-Control': 'no-transform',
+        //       Connection: 'keep-alive',
+        //       'X-Accel-Buffering': 'no',
+        //       'Access-Control-Allow-Origin': '*'
+        //     });
+        //     proxyRes.pipe(res);
+        //   }
+        // },
         headers: {
           origin: newTarget,
           Connection: 'keep-alive'
diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx
index 701ac839..cc57874e 100644
--- a/src/components/seal-table/index.tsx
+++ b/src/components/seal-table/index.tsx
@@ -99,7 +99,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
               columnProps as SealColumnProps;
             if (React.isValidElement(child)) {
               return (
-                <Col span={span}>
+                <Col span={span} key={i}>
                   <TableHeader
                     title={title}
                     style={headerStyle}
diff --git a/src/hooks/use-chunk-request.ts b/src/hooks/use-chunk-request.ts
index 953ecfc9..52dcf53b 100644
--- a/src/hooks/use-chunk-request.ts
+++ b/src/hooks/use-chunk-request.ts
@@ -125,11 +125,21 @@ const useSetChunkRequest = () => {
   };
 
   const resetResultSchema = (result: any[]) => {
+    //  ============ handle list data ============
+    // return _.map(result, (data: any) => {
+    //   if (data.type === WatchEventType.DELETE) {
+    //     data.ids = _.map(data.items, (item: any) => item.id);
+    //   }
+    //   data.collection = data.items || [];
+    //   return data;
+    // });
+    // ============ handle list data ============
+
     return _.map(result, (data: any) => {
       if (data.type === WatchEventType.DELETE) {
-        data.ids = _.map(data.items, (item: any) => item.id);
+        data.ids = data.data?.id ? [data.data.id] : [];
       }
-      data.collection = data.items || [];
+      data.collection = data.data ? [data.data] : [];
       return data;
     });
   };
diff --git a/src/hooks/use-event-source.ts b/src/hooks/use-event-source.ts
index 9ce9809d..cd543d18 100644
--- a/src/hooks/use-event-source.ts
+++ b/src/hooks/use-event-source.ts
@@ -37,8 +37,8 @@ export default function useEventSource() {
 
     eventSourceRef.current.onmessage = (res: any) => {
       try {
+        console.log('event source message: ', { res, resData: res });
         const data = JSON.parse(res.data);
-        console.log('event source message: ', { data, resData: res });
         onmessage(data);
       } catch (error) {
         // error
diff --git a/src/hooks/use-update-chunk-list.ts b/src/hooks/use-update-chunk-list.ts
index 7b94e191..666a5dca 100644
--- a/src/hooks/use-update-chunk-list.ts
+++ b/src/hooks/use-update-chunk-list.ts
@@ -3,8 +3,9 @@ import _ from 'lodash';
 
 interface ChunkedCollection {
   ids: string[];
+  data: any;
   collection: any[];
-  type: string;
+  type: string | number;
 }
 // Only used to update lists without nested state
 export function useUpdateChunkedList(
diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx
index cfdf1133..728a9b53 100644
--- a/src/pages/llmodels/index.tsx
+++ b/src/pages/llmodels/index.tsx
@@ -372,19 +372,15 @@ const Models: React.FC = () => {
 
   useEffect(() => {
     fetchData();
-    // createModelsDataByFetch();
-    createModelEvent();
-    createModelsChunkRequest();
+    setTimeout(() => {
+      createModelsChunkRequest();
+    }, 1000);
 
     return () => {
       chunkRequedtRef.current?.current?.cancel?.();
     };
   }, [queryParams]);
 
-  useEffect(() => {
-    // watch models list
-  }, [queryParams]);
-
   const renderChildren = (list: any) => {
     return (
       <Space size={16} direction="vertical" style={{ width: '100%' }}>
diff --git a/src/utils/fetch-chunk-data.ts b/src/utils/fetch-chunk-data.ts
index 759efff6..5480c03a 100644
--- a/src/utils/fetch-chunk-data.ts
+++ b/src/utils/fetch-chunk-data.ts
@@ -75,3 +75,19 @@ export const readStreamData = async (
   // callback(chunk);
   await readStreamData(reader, decoder, callback);
 };
+
+export const readTextEventStreamData = async (
+  reader: any,
+  decoder: TextDecoder,
+  callback: (data: any) => void
+) => {
+  const { done, value } = await reader.read();
+
+  if (done) {
+    return;
+  }
+
+  let chunk = decoder.decode(value, { stream: true });
+  callback(chunk);
+  await readTextEventStreamData(reader, decoder, callback);
+};