The most significant changes were made to the Detail.tsx, Get.ts,…

… and `SignalR.ts` files. In `Detail.tsx`, the import statement was updated to include `SkeletonItem` from `@fluentui/react-components` and a `loading` state was added to the `DeferredBody` function. The `Get.ts` file was updated to use `useAsyncEffect` from `ahooks` for handling asynchronous operations. The `SignalR.ts` file saw changes in the `update` function, including the addition of a `setCache` function and changes to the conditions for updating the cache. 1. In `Detail.tsx`, the import statement was updated to include `SkeletonItem` from `@fluentui/react-components`. The `DeferredBody` function was updated to include a `loading` state from `Hub.Order.Get.useItems`. A `run` function was also added to run `runItems` and `runOrder` together. A `SkeletonItem` component was added to the JSX returned by the `DeferredBody` function to display a loading state. 2. In `Get.ts`, the import statement was updated to include `useAsyncEffect` from `ahooks`. The `OrderGet` class was updated to use `useAsyncEffect` to handle the asynchronous operations previously handled in the `onSuccess` callback. The logic within the `onSuccess` callback was moved into the `useAsyncEffect` hook. 3. In `SignalR.ts`, the `update` function within the `SignalR` class was updated to include a `setCache` function that sets a cache with a `QueryExp` value 10 seconds in the future. The `setCache` function was also updated to delete the cache if the response is null. The condition to update the cache was changed from `find.QueryExp <= dayjs().unix()` to `find.QueryExp < dayjs().unix()`. The `setCache` function that was previously outside the `update` function was removed. The `useRequest` function was updated to have a `staleTime` of 5000 instead of 1000.
Aloento · Feb 13, 2024 · 070cf00 · 070cf00
1 parent b1575a6
commit 070cf00
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 63 deletions.
diff --git a/src/Pages/History/Detail.tsx b/src/Pages/History/Detail.tsx
@@ -1,4 +1,4 @@
-import { Body1Strong, Button, Caption1, DataGridCell, DataGridHeaderCell, Link, TableColumnDefinition, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
+import { Body1Strong, Button, Caption1, DataGridCell, DataGridHeaderCell, Link, SkeletonItem, TableColumnDefinition, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
 import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/react-components/unstable";
 import { useConst } from "@fluentui/react-hooks";
 import { DismissRegular, OpenRegular } from "@fluentui/react-icons";
@@ -146,8 +146,6 @@ function DeferredBody({ OrderId, ParentLog }: { OrderId: number } & ICompLog) {
   const style = useStyles();
   const { Nav } = useRouter();
 
-  const { data: cart, run: runItems } = Hub.Order.Get.useItems(OrderId, ParentLog);
-
   const { data: order, run: runOrder } = useRequest(() => Hub.Order.Get.Order(OrderId), {
     onError(e) {
       Nav("History");
@@ -156,6 +154,8 @@ function DeferredBody({ OrderId, ParentLog }: { OrderId: number } & ICompLog) {
     manual: true
   });
 
+  const { data: cart, run: runItems, loading } = Hub.Order.Get.useItems(OrderId, ParentLog);
+
   const run = () => {
     runItems();
     runOrder();
@@ -170,6 +170,8 @@ function DeferredBody({ OrderId, ParentLog }: { OrderId: number } & ICompLog) {
         Columns={[MakeCoverCol(44, ParentLog), ...columns]}
       />
 
+      {loading && <SkeletonItem size={48} />}
+
       <OrderComment OrderId={OrderId} Status={order?.Status} Refresh={run} ParentLog={ParentLog} />
 
       <OrderAction OrderId={OrderId} Status={order?.Status} Refresh={run} ParentLog={ParentLog} />

diff --git a/src/ShopNet/Order/Get.ts b/src/ShopNet/Order/Get.ts
@@ -1,4 +1,5 @@
 import { useConst } from "@fluentui/react-hooks";
+import { useAsyncEffect } from "ahooks";
 import { useState } from "react";
 import { IComment } from "~/Components/Order/Comment";
 import { ICartItem } from "~/Components/ShopCart";
@@ -90,60 +91,65 @@ export abstract class OrderGet extends OrderEntity {
       this.items,
       {
         defaultParams: [orderId],
-        onError: log.error,
-        async onSuccess(meta) {
-          const items: ICartItem[] = [];
-          let index = 0;
-
-          for (const combo of meta) {
-            const variType: Record<string, string> = {};
-            let prodId = 0;
-
-            for (const typeId of combo.Types) {
-              const type = await ProductData.Type(typeId);
-
-              if (!type) {
-                log.warn(`[Mismatch] Type ${typeId} not found. Order : ${orderId}`);
-                continue;
-              }
-
-              const vari = await ProductData.Variant(type.VariantId);
-
-              if (!vari) {
-                log.warn(`[Mismatch] Variant ${type.VariantId} not found. Type : ${typeId}, Order : ${orderId}`);
-                continue;
-              }
-
-              variType[vari.Name] = type.Name;
-              prodId = vari.ProductId;
-            }
-
-            const prod = await ProductData.Product(prodId);
-
-            if (!prod) {
-              log.warn(`[Mismatch] Product ${prodId} not found. Order : ${orderId}`);
-              continue;
-            }
-
-            const [_, cover] = await ProductGet.PhotoList(prodId, log);
-
-            if (!cover)
-              log.warn(`Product ${prodId} has no photo`);
-
-            items.push({
-              Id: index++,
-              ProdId: prodId,
-              Cover: cover || "",
-              Name: prod.Name,
-              Type: variType,
-              Quantity: combo.Quantity,
-            });
+        onError: log.error
+      }
+    );
+
+    useAsyncEffect(async () => {
+      const meta = req.data;
+      if (!meta)
+        return;
+
+      const items: ICartItem[] = [];
+      let index = 0;
+
+      for (const combo of meta) {
+        const variType: Record<string, string> = {};
+        let prodId = 0;
+
+        for (const typeId of combo.Types) {
+          const type = await ProductData.Type(typeId);
+
+          if (!type) {
+            log.warn(`[Mismatch] Type ${typeId} not found. Order : ${orderId}`);
+            continue;
           }
 
-          setRes(items);
+          const vari = await ProductData.Variant(type.VariantId);
+
+          if (!vari) {
+            log.warn(`[Mismatch] Variant ${type.VariantId} not found. Type : ${typeId}, Order : ${orderId}`);
+            continue;
+          }
+
+          variType[vari.Name] = type.Name;
+          prodId = vari.ProductId;
         }
+
+        const prod = await ProductData.Product(prodId);
+
+        if (!prod) {
+          log.warn(`[Mismatch] Product ${prodId} not found. Order : ${orderId}`);
+          continue;
+        }
+
+        const [_, cover] = await ProductGet.PhotoList(prodId, log);
+
+        if (!cover)
+          log.warn(`Product ${prodId} has no photo`);
+
+        items.push({
+          Id: index++,
+          ProdId: prodId,
+          Cover: cover || "",
+          Name: prod.Name,
+          Type: variType,
+          Quantity: combo.Quantity,
+        });
       }
-    );
+
+      setRes(items);
+    }, [req.data]);
 
     return {
       ...req,

diff --git a/src/ShopNet/SignalR.ts b/src/ShopNet/SignalR.ts
@@ -127,13 +127,20 @@ export abstract class SignalR {
     const update = async () => {
       const res = await Dexie.waitFor(this.Invoke<T | true | null>(methodName, key, find?.Version));
 
+      function setCache(value: T) {
+        Shared.Set<T & { QueryExp: number; }>(index, {
+          ...value,
+          QueryExp: dayjs().add(10, "s").unix()
+        }, dayjs().add(1, "w"));
+      }
+
       if (res === true) {
         setCache(find!)
         return find!;
       }
 
       if (!res) {
-        await Shared.Sto.delete(index);
+        Shared.Sto.delete(index);
         throw new EmptyResponseError();
       }
 
@@ -142,20 +149,13 @@ export abstract class SignalR {
     }
 
     if (find) {
-      if (find.QueryExp <= dayjs().unix())
+      if (find.QueryExp < dayjs().unix())
         update();
 
       return find;
     }
 
     return update();
-
-    function setCache(value: T) {
-      Shared.Set<T & { QueryExp: number; }>(index, {
-        ...value,
-        QueryExp: dayjs().add(5, "s").unix()
-      }, dayjs().add(1, "w"));
-    }
   }
 
   /**
@@ -171,7 +171,7 @@ export abstract class SignalR {
     const req = useRequest(
       (...params) => this.Invoke<T>(methodName, ...params),
       {
-        staleTime: 1000,
+        staleTime: 5000,
         ...options,
         cacheKey: index,
         setCache: (data) => localStorage.setItem(index, JSON.stringify(data)),