From 12ca2c7b0f38d75f5e8e873c24b160cc185f6120 Mon Sep 17 00:00:00 2001
From: Aloento <11802769+Aloento@users.noreply.github.com>
Date: Mon, 19 Feb 2024 18:01:58 +0100
Subject: [PATCH] [Back] Split OrderGetDetail - [Front] Merge OrderAppend |
 Split OrderComment & OrderDetail | useItems | useSWR

---
 TSystems.LoveOTC/Hub/Order/Get.cs             |  23 ++--
 .../History => Components/Order}/Append.tsx   |  35 +++--
 src/Components/Order/Comment.tsx              |  60 +++++++++
 src/Components/OrderInfo.tsx                  |   2 +-
 src/Pages/Admin/Order/Append.tsx              |  95 -------------
 src/Pages/Admin/Order/Detail.tsx              |   8 +-
 src/Pages/History/Action.tsx                  |  15 +--
 src/Pages/History/Comment.tsx                 |  34 -----
 src/Pages/History/Detail.tsx                  | 100 +++++++-------
 src/ShopNet/Order/Entity.ts                   |   2 +
 src/ShopNet/Order/Get.ts                      | 127 +++++++++++-------
 src/ShopNet/Product/Get.ts                    |   2 +-
 src/ShopNet/SignalR.ts                        |  47 +++++--
 src/ShopNet/Table.ts                          |  10 +-
 vite.config.ts                                |   4 +-
 15 files changed, 273 insertions(+), 291 deletions(-)
 rename src/{Pages/History => Components/Order}/Append.tsx (72%)
 create mode 100644 src/Components/Order/Comment.tsx
 delete mode 100644 src/Pages/Admin/Order/Append.tsx
 delete mode 100644 src/Pages/History/Comment.tsx

diff --git a/TSystems.LoveOTC/Hub/Order/Get.cs b/TSystems.LoveOTC/Hub/Order/Get.cs
index b4804a5..3977936 100644
--- a/TSystems.LoveOTC/Hub/Order/Get.cs
+++ b/TSystems.LoveOTC/Hub/Order/Get.cs
@@ -26,12 +26,12 @@ await this.Db.Orders
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 1.0.0
+     * @version 1.1.0
      * </remarks>
      */
     [Authorize]
-    public async Task<dynamic> OrderGetDetail(uint orderId) {
-        var items = await this.Db.OrderCombos
+    public async Task<dynamic> OrderGetItems(uint orderId) =>
+        await this.Db.OrderCombos
             .Where(x => x.OrderId == orderId && x.Order.UserId == this.UserId)
             .Select(x => new {
                 x.Quantity,
@@ -39,14 +39,17 @@ public async Task<dynamic> OrderGetDetail(uint orderId) {
             })
             .ToArrayAsync();
 
-        var cmts = await this.Db.Comments
+    /**
+     * <remarks>
+     * @author Aloento
+     * @since 1.3.0
+     * @version 0.1.0
+     * </remarks>
+     */
+    [Authorize]
+    public Task<uint[]> OrderGetCmts(uint orderId) =>
+        this.Db.Comments
             .Where(x => x.OrderId == orderId && x.Order.UserId == this.UserId)
             .Select(x => x.CommentId)
             .ToArrayAsync();
-
-        return new {
-            Items = items,
-            Comments = cmts
-        };
-    }
 }
diff --git a/src/Pages/History/Append.tsx b/src/Components/Order/Append.tsx
similarity index 72%
rename from src/Pages/History/Append.tsx
rename to src/Components/Order/Append.tsx
index 4484cb6..cfad073 100644
--- a/src/Pages/History/Append.tsx
+++ b/src/Components/Order/Append.tsx
@@ -1,10 +1,11 @@
 import { Button, Field, Textarea, Toast, ToastTitle, makeStyles } from "@fluentui/react-components";
 import { useConst } from "@fluentui/react-hooks";
 import { useState } from "react";
-import { Logger } from "~/Helpers/Logger";
 import { Flex } from "~/Helpers/Styles";
 import { useErrorToast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
+import { AdminHub } from "~/ShopNet/Admin";
+import { IOrderComp } from "./Comment";
 
 /**
  * @author Aloento
@@ -21,21 +22,9 @@ const useStyles = makeStyles({
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.1.1
+ * @version 1.0.0
  */
-interface IOrderAppend {
-  OrderId: number;
-  Status?: string;
-  Refresh: () => void;
-  ParentLog: Logger;
-}
-
-/**
- * @author Aloento
- * @since 0.5.0
- * @version 0.4.2
- */
-export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppend) {
+export function CommentAppend({ OrderId, Refresh, ParentLog, Status, Admin }: IOrderComp) {
   const log = useConst(() => ParentLog.With("Append"));
 
   const style = useStyles();
@@ -43,7 +32,9 @@ export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppen
 
   const { dispatch, dispatchToast } = useErrorToast(log);
 
-  const { run: append } = Hub.Order.Post.useAppend({
+  const hub = (Admin ? AdminHub : Hub).Order.Post as typeof AdminHub.Order.Post & typeof Hub.Order.Post;
+
+  const { run: append } = hub.useAppend({
     manual: true,
     onError(e, req) {
       dispatch({
@@ -64,11 +55,11 @@ export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppen
     }
   });
 
-  const { run: cancel } = Hub.Order.Post.useCancel({
+  const { run: cancel } = (Admin ? hub.useClose : hub.useCancel)({
     manual: true,
     onError(e, params) {
       dispatch({
-        Message: "Failed Cancel Order",
+        Message: `Failed ${Admin ? "Close" : "Cancel"} Order`,
         Request: params,
         Error: e
       });
@@ -76,7 +67,7 @@ export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppen
     onSuccess() {
       dispatchToast(
         <Toast>
-          <ToastTitle>Order Canceled</ToastTitle>
+          <ToastTitle>Order {Admin ? "Closed" : "Cancelled"}</ToastTitle>
         </Toast>,
         { intent: "success" }
       );
@@ -100,7 +91,11 @@ export function OrderAppend({ OrderId, Status, Refresh, ParentLog }: IOrderAppen
       {
         !(Status === "Finished" || Status === "Returning") &&
         <Button onClick={() => cancel(OrderId, cmt!)}>
-          {Status === "Shipping" ? "Ask Return" : "Cancel Order"} with Reason
+          {
+            Admin
+              ? "Force Close"
+              : Status === "Shipping" ? "Ask Return" : "Cancel Order"
+          } with Reason
         </Button>
       }
 
diff --git a/src/Components/Order/Comment.tsx b/src/Components/Order/Comment.tsx
new file mode 100644
index 0000000..ddbcd88
--- /dev/null
+++ b/src/Components/Order/Comment.tsx
@@ -0,0 +1,60 @@
+import { Body1, Caption1Stronger, Field, Label } from "@fluentui/react-components";
+import { useConst } from "@fluentui/react-hooks";
+import { useRequest } from "ahooks";
+import { ICompLog } from "~/Helpers/Logger";
+import { Hub } from "~/ShopNet";
+import { CommentAppend } from "./Append";
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export interface IComment {
+  Content: string;
+  Time: Date;
+  User: string;
+}
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.2.0
+ */
+export interface IOrderComp extends ICompLog {
+  OrderId: number;
+  Refresh: () => void;
+  Status?: string;
+  Admin?: true;
+}
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export function OrderComment({ OrderId, Refresh, ParentLog, Status, Admin }: IOrderComp) {
+  const log = useConst(() => ParentLog.With("Comment"));
+
+  const { data, run } = useRequest(() => Hub.Order.Get.Cmts(OrderId, log), {
+    manual: true,
+    onError: log.error
+  });
+
+  return <>
+    <Field label="Comment" size="large">
+      {data?.length === 0
+        ?
+        <Label>No Comment</Label>
+        :
+        data?.map((v, i) => <div key={i}>
+          <Caption1Stronger>{v.User} {v.Time.toLocaleString()}</Caption1Stronger>
+          <br />
+          <Body1>{v.Content}</Body1>
+        </div>
+        )}
+    </Field>
+
+    <CommentAppend OrderId={OrderId} Status={Status} Refresh={run} ParentLog={log} />
+  </>;
+}
diff --git a/src/Components/OrderInfo.tsx b/src/Components/OrderInfo.tsx
index 726c017..8be239b 100644
--- a/src/Components/OrderInfo.tsx
+++ b/src/Components/OrderInfo.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
  */
 interface IOrderInfo {
   OrderId: number;
-  Order: OrderEntity.Order;
+  Order?: OrderEntity.Order;
   Admin?: true;
 }
 
diff --git a/src/Pages/Admin/Order/Append.tsx b/src/Pages/Admin/Order/Append.tsx
deleted file mode 100644
index 74dead5..0000000
--- a/src/Pages/Admin/Order/Append.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Button, Field, Textarea, Toast, ToastTitle, makeStyles } from "@fluentui/react-components";
-import { useState } from "react";
-import { Logger } from "~/Helpers/Logger";
-import { Flex } from "~/Helpers/Styles";
-import { useErrorToast } from "~/Helpers/useToast";
-import { AdminHub } from "~/ShopNet/Admin";
-
-/**
- * @author Aloento
- * @since 0.5.0
- * @version 0.1.0
- */
-const useStyles = makeStyles({
-  body: {
-    ...Flex,
-    justifyContent: "space-between"
-  },
-});
-
-interface IAdminOrderAppend {
-  OrderId: number;
-  Refresh: () => void;
-}
-
-const log = new Logger("Admin", "Order", "Detail", "Append");
-
-/**
- * @author Aloento
- * @since 0.5.0
- * @version 0.2.2
- */
-export function AdminOrderAppend({ OrderId, Refresh }: IAdminOrderAppend) {
-  const style = useStyles();
-  const [cmt, setCmt] = useState<string>();
-
-  const { dispatch, dispatchToast } = useErrorToast(log);
-
-  const { run: append } = AdminHub.Order.Post.useAppend({
-    manual: true,
-    onError(e, params) {
-      dispatch({
-        Message: "Failed Append Comment",
-        Request: params,
-        Error: e
-      });
-    },
-    onSuccess() {
-      dispatchToast(
-        <Toast>
-          <ToastTitle>Comment Appended</ToastTitle>
-        </Toast>,
-        { intent: "success" }
-      );
-
-      Refresh();
-    }
-  });
-
-  const { run: close } = AdminHub.Order.Post.useClose({
-    manual: true,
-    onError(e, params) {
-      dispatch({
-        Message: "Failed Close Order",
-        Request: params,
-        Error: e
-      });
-    },
-    onSuccess() {
-      dispatchToast(
-        <Toast>
-          <ToastTitle>Order Closed</ToastTitle>
-        </Toast>,
-        { intent: "success" }
-      );
-
-      Refresh();
-    }
-  });
-
-  return <>
-    <Field label="Append" size="large">
-      <Textarea value={cmt} onChange={(_, v) => setCmt(v.value)} maxLength={1000} />
-    </Field>
-
-    <div className={style.body}>
-      <Button onClick={() => close(OrderId, cmt!)}>
-        Force Close with Reason
-      </Button>
-
-      <Button appearance="primary" onClick={() => append(OrderId, cmt!)}>
-        Add Comment
-      </Button>
-    </div>
-  </>;
-}
diff --git a/src/Pages/Admin/Order/Detail.tsx b/src/Pages/Admin/Order/Detail.tsx
index ae2060b..50ce7a2 100644
--- a/src/Pages/Admin/Order/Detail.tsx
+++ b/src/Pages/Admin/Order/Detail.tsx
@@ -3,14 +3,14 @@ import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/r
 import { DismissRegular, OpenRegular } from "@fluentui/react-icons";
 import { useBoolean, useRequest } from "ahooks";
 import { useEffect } from "react";
+import { CommentAppend } from "~/Components/Order/Append";
+import { OrderComment } from "~/Components/Order/Comment";
 import { OrderInfo } from "~/Components/OrderInfo";
 import { useRouter } from "~/Components/Router";
 import { Logger } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
-import { OrderComment } from "~/Pages/History/Comment";
 import { AdminHub } from "~/ShopNet/Admin";
 import { AdminOrderAction } from "./Action";
-import { AdminOrderAppend } from "./Append";
 import { AdminOrderList } from "./List";
 import { Shipment } from "./Ship";
 
@@ -31,7 +31,7 @@ const log = new Logger("Admin", "Order", "Detail");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.3.1
+ * @version 0.4.0
  */
 export function AdminOrderDetail({ OrderId }: { OrderId: number; }) {
   const style = useStyles();
@@ -104,7 +104,7 @@ export function AdminOrderDetail({ OrderId }: { OrderId: number; }) {
 
         <OrderComment Comments={data?.Comments} />
 
-        <AdminOrderAppend OrderId={OrderId} Refresh={run} />
+        <CommentAppend OrderId={OrderId} Status={order?.Status} Admin Refresh={run} ParentLog={log} />
 
         <AdminOrderAction OrderId={OrderId} Status={order?.Status} Refresh={run} />
       </DrawerBody>
diff --git a/src/Pages/History/Action.tsx b/src/Pages/History/Action.tsx
index 2fc866f..56fd640 100644
--- a/src/Pages/History/Action.tsx
+++ b/src/Pages/History/Action.tsx
@@ -1,7 +1,7 @@
 import { Button, Field, Toast, ToastTitle, makeStyles } from "@fluentui/react-components";
 import { useConst } from "@fluentui/react-hooks";
+import { IOrderComp } from "~/Components/Order/Comment";
 import { useRouter } from "~/Components/Router";
-import { ICompLog } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
 import { useErrorToast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
@@ -18,23 +18,12 @@ const useStyles = makeStyles({
   },
 });
 
-/**
- * @author Aloento
- * @since 1.0.0
- * @version 0.1.1
- */
-interface IOrderAction extends ICompLog {
-  OrderId: number;
-  Status?: string;
-  Refresh: () => void;
-}
-
 /**
  * @author Aloento
  * @since 1.0.0
  * @version 0.1.2
  */
-export function OrderAction({ OrderId, Status, Refresh, ParentLog }: IOrderAction) {
+export function OrderAction({ OrderId, Status, Refresh, ParentLog }: IOrderComp) {
   const log = useConst(() => ParentLog.With("Action"));
 
   const style = useStyles();
diff --git a/src/Pages/History/Comment.tsx b/src/Pages/History/Comment.tsx
deleted file mode 100644
index 195cc86..0000000
--- a/src/Pages/History/Comment.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Body1, Caption1Stronger, Field, Label } from "@fluentui/react-components";
-
-/**
- * @author Aloento
- * @since 1.0.0
- * @version 0.1.0
- */
-export interface IComment {
-  Content: string;
-  Time: Date;
-  User: string;
-}
-
-/**
- * @author Aloento
- * @since 1.0.0
- * @version 0.1.0
- */
-export function OrderComment({ Comments }: { Comments?: IComment[]; }) {
-  return (
-    <Field label="Comment" size="large">
-      {Comments?.length === 0
-        ?
-        <Label>No Comment</Label>
-        :
-        Comments?.map((v, i) => <div key={i}>
-          <Caption1Stronger>{v.User} {v.Time.toLocaleString()}</Caption1Stronger>
-          <br />
-          <Body1>{v.Content}</Body1>
-        </div>
-        )}
-    </Field>
-  );
-}
diff --git a/src/Pages/History/Detail.tsx b/src/Pages/History/Detail.tsx
index 545e557..fce0f43 100644
--- a/src/Pages/History/Detail.tsx
+++ b/src/Pages/History/Detail.tsx
@@ -1,10 +1,11 @@
-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";
-import { useBoolean, useRequest } from "ahooks";
-import { useEffect } from "react";
+import { useBoolean, useInViewport, useRequest } from "ahooks";
+import { useEffect, useRef } from "react";
 import { DelegateDataGrid } from "~/Components/DataGrid";
+import { IComment, OrderComment } from "~/Components/Order/Comment";
 import { OrderInfo } from "~/Components/OrderInfo";
 import { useRouter } from "~/Components/Router";
 import { ICartItem } from "~/Components/ShopCart";
@@ -13,8 +14,6 @@ import { ICompLog } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
 import { Hub } from "~/ShopNet";
 import { OrderAction } from "./Action";
-import { OrderAppend } from "./Append";
-import { IComment, OrderComment } from "./Comment";
 
 /**
  * @author Aloento
@@ -91,42 +90,18 @@ export interface IOrderDetail {
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.3.5
+ * @version 1.0.0
  */
 export function OrderDetail({ OrderId, ParentLog }: { OrderId: number } & ICompLog) {
   const log = useConst(() => ParentLog.With("Detail"));
 
-  const style = useStyles();
-  const [open, { setTrue, setFalse }] = useBoolean();
-
+  const [open, { set }] = useBoolean();
   const { Nav, Paths } = useRouter();
   const curr = parseInt(Paths.at(1)!);
 
-  const { data, run: runDetail } = useRequest(() => Hub.Order.Get.Detail(OrderId, log), {
-    manual: true,
-    onError: log.error
-  });
-
-  const { data: order, run: runOrder } = useRequest(() => Hub.Order.Get.Order(OrderId), {
-    onError(e) {
-      Nav("History");
-      log.error(e);
-    },
-    manual: true
-  });
-
-  function run() {
-    runOrder();
-    runDetail();
-  }
-
-  useEffect(() => {
-    if (curr === OrderId) {
-      run();
-      setTrue();
-    } else
-      setFalse();
-  }, [curr]);
+  useEffect(() => set(curr === OrderId), [curr]);
+  const ref = useRef(null);
+  const [inViewport] = useInViewport(ref);
 
   return <>
     <Button
@@ -155,22 +130,51 @@ export function OrderDetail({ OrderId, ParentLog }: { OrderId: number } & ICompL
         </DrawerHeaderTitle>
       </DrawerHeader>
 
-      <DrawerBody>
-        <div className={style.body}>
-          <OrderInfo OrderId={OrderId} Order={order} />
+      <DrawerBody ref={ref}>
+        {inViewport && <DeferredBody OrderId={OrderId} ParentLog={log} />}
+      </DrawerBody>
+    </Drawer>
+  </>
+}
 
-          <DelegateDataGrid
-            Items={data?.ShopCart}
-            Columns={[MakeCoverCol(44, log), ...columns]}
-          />
+/**
+ * @author Aloento
+ * @since 1.3.5
+ * @version 0.1.0
+ */
+function DeferredBody({ OrderId, ParentLog }: { OrderId: number } & ICompLog) {
+  const style = useStyles();
+  const { Nav } = useRouter();
+
+  const { data: order, run: runOrder } = useRequest(() => Hub.Order.Get.Order(OrderId), {
+    onError(e) {
+      Nav("History");
+      ParentLog.error(e);
+    },
+    manual: true
+  });
 
-          <OrderComment Comments={data?.Comments} />
+  const { data: cart, run: runItems, loading } = Hub.Order.Get.useItems(OrderId, ParentLog);
 
-          <OrderAppend OrderId={OrderId} Status={order?.Status} Refresh={run} ParentLog={log} />
+  const run = () => {
+    runItems();
+    runOrder();
+  };
 
-          <OrderAction OrderId={OrderId} Status={order?.Status} Refresh={run} ParentLog={log} />
-        </div>
-      </DrawerBody>
-    </Drawer>
-  </>
+  return (
+    <div className={style.body}>
+      <OrderInfo OrderId={OrderId} Order={order} />
+
+      <DelegateDataGrid
+        Items={cart}
+        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} />
+    </div>
+  );
 }
diff --git a/src/ShopNet/Order/Entity.ts b/src/ShopNet/Order/Entity.ts
index ebbb059..f33ba4d 100644
--- a/src/ShopNet/Order/Entity.ts
+++ b/src/ShopNet/Order/Entity.ts
@@ -25,6 +25,7 @@ export abstract class OrderEntity extends ShopNet {
    * @author Aloento
    * @since 1.0.0
    * @version 0.1.0
+   * @liveSafe
    */
   public static Order(key: number): Promise<OrderEntity.Order> {
     this.EnsureLogin();
@@ -35,6 +36,7 @@ export abstract class OrderEntity extends ShopNet {
    * @author Aloento
    * @since 1.0.0
    * @version 0.1.0
+   * @liveSafe
    */
   public static Comment(key: number): Promise<OrderEntity.Comment> {
     this.EnsureLogin();
diff --git a/src/ShopNet/Order/Get.ts b/src/ShopNet/Order/Get.ts
index f7f3b28..b9bdf05 100644
--- a/src/ShopNet/Order/Get.ts
+++ b/src/ShopNet/Order/Get.ts
@@ -1,8 +1,10 @@
+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";
 import { Logger } from "~/Helpers/Logger";
 import { IOrderItem } from "~/Pages/History";
-import { IComment } from "~/Pages/History/Comment";
-import { IOrderDetail } from "~/Pages/History/Detail";
 import { ProductData } from "../Product/Data";
 import { ProductGet } from "../Product/Get";
 import { OrderEntity } from "./Entity";
@@ -69,76 +71,104 @@ export abstract class OrderGet extends OrderEntity {
     return items.sort((a, b) => b.OrderDate.getTime() - a.OrderDate.getTime());
   }
 
+  public static readonly items = "OrderGetItems";
   /**
    * @author Aloento
    * @since 0.5.0
-   * @version 1.0.1
+   * @version 2.0.0
    */
-  public static async Detail(orderId: number, pLog: Logger): Promise<IOrderDetail> {
-    this.EnsureLogin();
-    const log = pLog.With(...this.Log, "Detail");
+  public static useItems(orderId: number, pLog: Logger) {
+    const log = useConst(() => pLog.With(...this.Log, "Items"));
+    const [res, setRes] = useState<ICartItem[]>([]);
 
-    const meta = await this.GetTimeCache<
+    const req = this.useSWR<
       {
-        Items: {
-          Types: number[];
-          Quantity: number;
-        }[],
-        Comments: number[];
+        Types: number[];
+        Quantity: number;
+      }[]
+    >(
+      orderId,
+      this.items,
+      {
+        defaultParams: [orderId],
+        onError: log.error
       }
-    >(orderId, "OrderGetDetail", (x) => x.add(1, "m"), orderId);
+    );
 
-    const items: ICartItem[] = [];
-    let index = 0;
+    useAsyncEffect(async () => {
+      const meta = req.data;
+      if (!meta)
+        return;
 
-    for (const combo of meta.Items) {
-      const variType: Record<string, string> = {};
-      let prodId = 0;
+      const items: ICartItem[] = [];
+      let index = 0;
 
-      for (const typeId of combo.Types) {
-        const type = await ProductData.Type(typeId);
+      for (const combo of meta) {
+        const variType: Record<string, string> = {};
+        let prodId = 0;
 
-        if (!type) {
-          log.warn(`[Mismatch] Type ${typeId} not found. Order : ${orderId}`);
-          continue;
+        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 vari = await ProductData.Variant(type.VariantId);
+        const prod = await ProductData.Product(prodId);
 
-        if (!vari) {
-          log.warn(`[Mismatch] Variant ${type.VariantId} not found. Type : ${typeId}, Order : ${orderId}`);
+        if (!prod) {
+          log.warn(`[Mismatch] Product ${prodId} not found. Order : ${orderId}`);
           continue;
         }
 
-        variType[vari.Name] = type.Name;
-        prodId = vari.ProductId;
-      }
+        const [_, cover] = await ProductGet.PhotoList(prodId, log);
 
-      const prod = await ProductData.Product(prodId);
+        if (!cover)
+          log.warn(`Product ${prodId} has no photo`);
 
-      if (!prod) {
-        log.warn(`[Mismatch] Product ${prodId} not found. Order : ${orderId}`);
-        continue;
+        items.push({
+          Id: index++,
+          ProdId: prodId,
+          Cover: cover || "",
+          Name: prod.Name,
+          Type: variType,
+          Quantity: combo.Quantity,
+        });
       }
 
-      const [_, cover] = await ProductGet.PhotoList(prodId, log);
+      setRes(items);
+    }, [req.data]);
 
-      if (!cover)
-        log.warn(`Product ${prodId} has no photo`);
+    return {
+      ...req,
+      data: res
+    };
+  }
 
-      items.push({
-        Id: index++,
-        ProdId: prodId,
-        Cover: cover || "",
-        Name: prod.Name,
-        Type: variType,
-        Quantity: combo.Quantity,
-      });
-    }
+  /**
+   * @author Aloento
+   * @since 1.3.0
+   * @version 0.1.0
+   */
+  public static async Cmts(orderId: number, pLog: Logger): Promise<IComment[]> {
+    const log = pLog.With(...this.Log, "Cmts");
 
+    const cmts = await this.GetTimeCache<number[]>(orderId, "OrderGetCmts", (x) => x.add(1, "m"), orderId);
     const comments: IComment[] = [];
 
-    for (const cmtId of meta.Comments) {
+    for (const cmtId of cmts) {
       const cmt = await this.Comment(cmtId);
 
       if (!cmt) {
@@ -153,9 +183,6 @@ export abstract class OrderGet extends OrderEntity {
       });
     }
 
-    return {
-      ShopCart: items,
-      Comments: comments.sort((a, b) => a.Time.getTime() - b.Time.getTime())
-    };
+    return comments.sort((a, b) => a.Time.getTime() - b.Time.getTime());
   }
 }
diff --git a/src/ShopNet/Product/Get.ts b/src/ShopNet/Product/Get.ts
index eddcde9..aab44ff 100644
--- a/src/ShopNet/Product/Get.ts
+++ b/src/ShopNet/Product/Get.ts
@@ -105,13 +105,13 @@ export abstract class ProductGet extends ProductData {
     return this.GetTimeCache(prodId, "ProductGetComboList", (x) => x.add(1, "m"), prodId);
   }
 
+  public static readonly photoList = "ProductGetPhotoList";
   /**
    * @author Aloento
    * @since 1.0.0
    * @version 1.0.1
    * @liveSafe
    */
-  public static readonly photoList = "ProductGetPhotoList";
   public static async PhotoList(prodId: number, pLog: Logger): Promise<[ProductData.Photo[], string]> {
     const log = pLog.With(...this.Log, "PhotoList");
 
diff --git a/src/ShopNet/SignalR.ts b/src/ShopNet/SignalR.ts
index 65ed730..90b7956 100644
--- a/src/ShopNet/SignalR.ts
+++ b/src/ShopNet/SignalR.ts
@@ -1,5 +1,9 @@
+import { useConst } from "@fluentui/react-hooks";
 import { HubConnectionState } from "@microsoft/signalr";
+import { useRequest } from "ahooks";
+import { Options } from "ahooks/lib/useRequest/src/types";
 import dayjs, { Dayjs } from "dayjs";
+import Dexie from "dexie";
 import { Subject } from "rxjs";
 import { EmptyResponseError, NotLoginError, NotTrueError } from "~/Helpers/Exceptions";
 import type { Logger } from "~/Helpers/Logger";
@@ -119,11 +123,19 @@ export abstract class SignalR {
     const index = this.Index(key, methodName);
     const find = await Shared.Get<T & { QueryExp: number }>(index);
 
+    // TODO：导致 LiveQuery 无限刷新
     const update = async () => {
-      const res = await Promise.resolve(this.Invoke<T | true | null>(methodName, key, find?.Version));
+      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!);
+        setCache(find!)
         return find!;
       }
 
@@ -137,20 +149,37 @@ 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"));
-    }
+  /**
+   * @author Aloento
+   * @since 1.3.5
+   * @version 0.1.0
+   */
+  protected static useSWR<T>(
+    this: INet, key: string | number, methodName: string, options: Options<T, any[]>
+  ) {
+    const index = useConst(() => this.Index(key, methodName));
+
+    const req = useRequest(
+      (...params) => this.Invoke<T>(methodName, ...params),
+      {
+        staleTime: 5000,
+        ...options,
+        cacheKey: index,
+        setCache: (data) => localStorage.setItem(index, JSON.stringify(data)),
+        getCache: () => JSON.parse(localStorage.getItem(index) || "{}"),
+      }
+    );
+
+    return req;
   }
 
   /**
diff --git a/src/ShopNet/Table.ts b/src/ShopNet/Table.ts
index d53179d..f7e0fac 100644
--- a/src/ShopNet/Table.ts
+++ b/src/ShopNet/Table.ts
@@ -36,7 +36,7 @@ export class Table {
 
     if (find) {
       if (
-        (expire && await Promise.resolve(expire(find))) ||
+        (expire && await Dexie.waitFor(expire(find))) ||
         (typeof find.Exp === "number" && find.Exp < dayjs().unix())
       ) {
         await this.Sto.delete(key);
@@ -63,7 +63,7 @@ export class Table {
   ): Promise<T> {
     const res = await this.Get<T>(key, expire);
     if (res) return res;
-    return this.Set<T>(key, await Promise.resolve(fac()), exp);
+    return this.Set<T>(key, await Dexie.waitFor(fac()), exp);
   }
 
   /**
@@ -78,7 +78,8 @@ export class Table {
 
     if (exp === null) {
       await this.Sto.put({
-        Id: id, Exp: exp,
+        Id: id,
+        Exp: exp,
         Val: val
       });
 
@@ -90,7 +91,8 @@ export class Table {
       throw RangeError(`Expire time [${time}] cannot be less than now [${dayjs().unix()}]`);
 
     await this.Sto.put({
-      Id: id, Exp: time,
+      Id: id,
+      Exp: time,
       Val: val
     });
 
diff --git a/vite.config.ts b/vite.config.ts
index b3d0dbc..abdb202 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,7 +6,7 @@ import { defineConfig, splitVendorChunkPlugin } from "vite";
 export default defineConfig({
   plugins: [
     react(),
-    splitVendorChunkPlugin(),
+    splitVendorChunkPlugin()
   ],
   resolve: {
     alias: {
@@ -18,6 +18,6 @@ export default defineConfig({
     reportCompressedSize: false,
     modulePreload: {
       polyfill: false,
-    },
+    }
   },
 });