[Back] OrderPostClose / Cancel: string - [Front] useOrder replace IOrderRef | useSWR refresh | mutate (#109)

* Update OrderGetItems and OrderGetCmts methods

* Update Nav function calls in Order components

* Update order handling methods and components

Updated various methods and components related to order handling. The return type of `OrderPostClose` and `OrderPostCancel` methods in `Post.cs` and `useClose` and `useCancel` methods in `OrderPost` and `AdminOrderPost` classes have been changed from `Task<bool>` to `Task<string>`. Renamed `OrderDeleteCancel` method in `Delete.cs` to `OrderDeleteCancelled` and updated `useDelete` method in `OrderDelete` class to invoke the renamed method. Added a `refresh` method to `useSWR` function in `useSWR.ts` to clear cache or remove item from local storage before refreshing data. Removed `Order`, `Status`, and `Refresh` props from `OrderDetailDrawer`, `OrderInfo`, `AdminOrderAction`, and `OrderAction` components in `Drawer.tsx`, `Info.tsx`, and `Action.tsx` respectively, and replaced them with `useOrder` hook. Updated `useItems` method in `OrderGet` class in `Get.ts` to fetch product photo only if `admin` parameter is not true.

Author: Aloento

SoarCraft.AwaiShop/AdminHub/Order/Post.cs

@@ -41,10 +41,10 @@ await this.Db.Comments.AddAsync(new() {
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 1.2.0
+     * @version 1.3.0
      * </remarks>
      */
-    public async Task<bool> OrderPostClose(uint orderId, string reason) {
+    public async Task<string> OrderPostClose(uint orderId, string reason) {
         var valid = typeof(Comment)
             .GetProperty(nameof(Comment.Content))!
             .GetCustomAttribute<StringLengthAttribute>()!;
@@ -72,7 +72,9 @@ await this.Db.Comments.AddAsync(new() {
             Order = order,
         });
 
-        return await this.Db.SaveChangesAsync() > 0;
+        await this.Db.SaveChangesAsync();
+
+        return order.Status.ToString();
     }
 
     /**

SoarCraft.AwaiShop/Hub/Order/Delete.cs

@@ -13,7 +13,7 @@ internal partial class ShopHub {
      * </remarks>
      */
     [Authorize]
-    public async Task<bool> OrderDeleteCancel(uint orderId) {
+    public async Task<bool> OrderDeleteCancelled(uint orderId) {
         var row = await this.Db.Orders
             .Where(x => x.UserId == this.UserId)
             .Where(x => x.OrderId == orderId)

SoarCraft.AwaiShop/Hub/Order/Get.cs

@@ -32,8 +32,8 @@ await this.Db.Orders
     [Authorize]
     public async Task<dynamic> OrderGetItems(uint orderId) =>
         await this.Db.OrderCombos
-            .Where(x => x.Order.UserId == this.UserId)
             .Where(x => x.OrderId == orderId)
+            .Where(x => x.Order.UserId == this.UserId)
             .Select(x => new {
                 x.Quantity,
                 Types = x.Combo.Types.Select(t => t.TypeId).ToArray()
@@ -50,8 +50,8 @@ await this.Db.OrderCombos
     [Authorize]
     public Task<uint[]> OrderGetCmts(uint orderId) =>
         this.Db.Comments
-            .Where(x => x.Order.UserId == this.UserId)
             .Where(x => x.OrderId == orderId)
+            .Where(x => x.Order.UserId == this.UserId)
             .Select(x => x.CommentId)
             .ToArrayAsync();
 }

SoarCraft.AwaiShop/Hub/Order/Post.cs

@@ -105,11 +105,11 @@ await this.Db.Comments.AddAsync(new() {
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 1.2.0
+     * @version 1.3.0
      * </remarks>
      */
     [Authorize]
-    public async Task<bool> OrderPostCancel(uint orderId, string reason) {
+    public async Task<string> OrderPostCancel(uint orderId, string reason) {
         var valid = typeof(Comment)
             .GetProperty(nameof(Comment.Content))!
             .GetCustomAttribute<StringLengthAttribute>()!;
@@ -118,8 +118,8 @@ public async Task<bool> OrderPostCancel(uint orderId, string reason) {
             throw new HubException(valid.FormatErrorMessage("Reason"));
 
         var order = await this.Db.Orders
-            .Where(x => x.UserId == this.UserId)
             .Where(x => x.OrderId == orderId)
+            .Where(x => x.UserId == this.UserId)
             .Where(x => x.Status != OrderStatus.Cancelled)
             .Where(x => x.Status != OrderStatus.Finished)
             .Include(x => x.OrderCombos)
@@ -139,7 +139,9 @@ await this.Db.Comments.AddAsync(new() {
             Order = order
         });
 
-        return await this.Db.SaveChangesAsync() > 0;
+        await this.Db.SaveChangesAsync();
+
+        return order.Status.ToString();
     }
 
     /**

SoarCraft.AwaiShop/SoarCraft.AwaiShop.csproj

@@ -38,10 +38,10 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.Extensions.Hosting.Systemd" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Identity.Web" Version="2.16.1" />
+    <PackageReference Include="Microsoft.Identity.Web" Version="2.17.0" />
     <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="8.0.0" />
     <PackageReference Include="SixLabors.ImageSharp" Version="3.1.2" />
-    <PackageReference Include="Z.EntityFramework.Plus.EFCore" Version="8.101.2.1" />
+    <PackageReference Include="Z.EntityFramework.Plus.EFCore" Version="8.102.1" />
   </ItemGroup>
 
   <ItemGroup>

src/Components/Order/Append.tsx

@@ -2,12 +2,11 @@ import { Button, Field, Textarea, Toast, ToastTitle, makeStyles } from "@fluentu
 import { useConst } from "@fluentui/react-hooks";
 import { useState } from "react";
 import { Flex } from "~/Helpers/Styles";
-import { useSWR } from "~/Helpers/useSWR";
 import { useErrorToast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
 import { AdminHub } from "~/ShopNet/Admin";
-import { SignalR } from "~/ShopNet/SignalR";
-import { IOrderRef } from ".";
+import { IOrderComp } from ".";
+import { useOrder } from "./useOrder";
 
 /**
  * @author Aloento
@@ -24,19 +23,17 @@ const useStyles = makeStyles({
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 1.2.0
+ * @version 1.3.0
  */
-export function CommentAppend({ OrderId, Refresh, Admin, ParentLog }: IOrderRef) {
+export function CommentAppend({ OrderId, Refresh, Admin, ParentLog }: IOrderComp & { Refresh: () => void }) {
   const log = useConst(() => ParentLog.With("Append"));
 
   const style = useStyles();
   const [cmt, setCmt] = useState<string>();
 
   const { dispatch, dispatchToast } = useErrorToast(log);
 
-  const hub = (Admin ? AdminHub : Hub).Order.Post as typeof AdminHub.Order.Post & typeof Hub.Order.Post;
-
-  const { run: append } = hub.useAppend({
+  const { run: append, loading } = (Admin ? AdminHub : Hub).Order.Post.useAppend({
     manual: true,
     onError(e, req) {
       dispatch({
@@ -54,10 +51,13 @@ export function CommentAppend({ OrderId, Refresh, Admin, ParentLog }: IOrderRef)
       );
 
       Refresh();
+      setCmt("");
     }
   });
 
-  const { run: cancel } = (Admin ? hub.useClose : hub.useCancel)({
+  const { data: order, mutate } = useOrder(OrderId, Admin);
+
+  const { run: cancel, loading: submit } = (Admin ? AdminHub : Hub).Order.Post.useCancel({
     manual: true,
     onError(e, params) {
       dispatch({
@@ -66,26 +66,21 @@ export function CommentAppend({ OrderId, Refresh, Admin, ParentLog }: IOrderRef)
         Error: e
       });
     },
-    onSuccess() {
+    onSuccess(data) {
       dispatchToast(
         <Toast>
           <ToastTitle>Order {Admin ? "Closed" : "Cancelled"}</ToastTitle>
         </Toast>,
         { intent: "success" }
       );
 
-      Refresh();
+      mutate((old) => ({
+        ...old!,
+        Status: data
+      }));
     }
   });
 
-  const index = useConst(() => SignalR.Index(OrderId, Hub.Order.Get.order));
-
-  const { data: order } = useSWR(
-    index,
-    () => (Admin ? AdminHub : Hub).Order.Get.Order(OrderId),
-    { useMemory: true }
-  );
-
   switch (order?.Status) {
     case "Cancelled":
     case "Finished":
@@ -100,7 +95,10 @@ export function CommentAppend({ OrderId, Refresh, Admin, ParentLog }: IOrderRef)
     <div className={style.body}>
       {
         !(order?.Status === "Finished" || order?.Status === "Returning") &&
-        <Button onClick={() => cancel(OrderId, cmt!)}>
+        <Button
+          onClick={() => cancel(OrderId, cmt!)}
+          disabled={submit}
+        >
           {
             Admin
               ? "Force Close"
@@ -109,7 +107,11 @@ export function CommentAppend({ OrderId, Refresh, Admin, ParentLog }: IOrderRef)
         </Button>
       }
 
-      <Button appearance="primary" onClick={() => append(OrderId, cmt!)}>
+      <Button
+        appearance="primary"
+        onClick={() => append(OrderId, cmt!)}
+        disabled={loading}
+      >
         Add Comment
       </Button>
     </div>

src/Components/Order/Comment.tsx

@@ -22,7 +22,7 @@ export interface IComment {
  */
 export function OrderComment({ OrderId, Admin, ParentLog }: IOrderComp) {
   const log = useConst(() => ParentLog.With("Comment"));
-  const { data, run } = Hub.Order.Get.useCmts(OrderId, log, Admin);
+  const { data, refresh } = Hub.Order.Get.useCmts(OrderId, log, Admin);
 
   return <>
     <Field label="Comment" size="large">
@@ -38,6 +38,6 @@ export function OrderComment({ OrderId, Admin, ParentLog }: IOrderComp) {
         )}
     </Field>
 
-    <CommentAppend OrderId={OrderId} Refresh={run} ParentLog={log} Admin={Admin} />
+    <CommentAppend OrderId={OrderId} Refresh={refresh} ParentLog={log} Admin={Admin} />
   </>;
 }

src/Components/Order/Drawer.tsx

@@ -1,21 +1,16 @@
 import { Body1Strong, Caption1, DataGridCell, DataGridHeaderCell, Link, TableColumnDefinition, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
-import { useConst } from "@fluentui/react-hooks";
 import { DelegateDataGrid } from "~/Components/DataGrid";
 import { OrderComment } from "~/Components/Order/Comment";
 import { OrderInfo } from "~/Components/Order/Info";
 import { ICartItem } from "~/Components/ShopCart";
 import { MakeCoverCol } from "~/Helpers/CoverCol";
 import { ColFlex } from "~/Helpers/Styles";
-import { useSWR } from "~/Helpers/useSWR";
 import { AdminOrderAction } from "~/Pages/Admin/Order/Action";
 import { AdminOrderList } from "~/Pages/Admin/Order/List";
 import { Shipment } from "~/Pages/Admin/Order/Ship";
 import { Hub } from "~/ShopNet";
-import { AdminHub } from "~/ShopNet/Admin";
-import { SignalR } from "~/ShopNet/SignalR";
 import { IOrderComp } from ".";
 import { OrderAction } from "../../Pages/History/Action";
-import { useRouter } from "../Router";
 
 /**
  * @author Aloento
@@ -25,7 +20,8 @@ import { useRouter } from "../Router";
 const useStyles = makeStyles({
   body: {
     ...ColFlex,
-    rowGap: tokens.spacingVerticalL
+    rowGap: tokens.spacingVerticalL,
+    paddingBottom: tokens.spacingVerticalXXL
   },
   prod: {
     ...ColFlex,
@@ -82,38 +78,22 @@ const columns: TableColumnDefinition<ICartItem>[] = [
 /**
  * @author Aloento
  * @since 1.3.5
- * @version 1.3.0
+ * @version 1.4.0
  */
 export function OrderDetailDrawer({ OrderId, Admin, ParentLog }: IOrderComp) {
   const style = useStyles();
-
-  const { Nav } = useRouter();
-  const index = useConst(() => SignalR.Index(OrderId, Hub.Order.Get.order));
-
-  const { data: order, run } = useSWR(
-    index,
-    () => (Admin ? AdminHub : Hub).Order.Get.Order(OrderId),
-    {
-      onError(e) {
-        Nav("History");
-        ParentLog.error(e);
-      },
-      useMemory: true
-    }
-  );
-
   const { data: cart } = Hub.Order.Get.useItems(OrderId, ParentLog, Admin);
 
   return (
     <div className={style.body}>
-      <OrderInfo OrderId={OrderId} Order={order} Admin={Admin} ParentLog={ParentLog} />
+      <OrderInfo OrderId={OrderId} Admin={Admin} ParentLog={ParentLog} />
 
       {
         Admin
           ?
           <>
             <AdminOrderList Items={cart} />
-            <Shipment OrderId={OrderId} TrackingNumber={order?.TrackingNumber} Refresh={run} />
+            <Shipment OrderId={OrderId} />
           </>
           :
           <DelegateDataGrid
@@ -127,9 +107,9 @@ export function OrderDetailDrawer({ OrderId, Admin, ParentLog }: IOrderComp) {
       {
         Admin
           ?
-          <AdminOrderAction OrderId={OrderId} Status={order?.Status} Refresh={run} ParentLog={ParentLog} />
+          <AdminOrderAction OrderId={OrderId} />
           :
-          <OrderAction OrderId={OrderId} Status={order?.Status} Refresh={run} ParentLog={ParentLog} />
+          <OrderAction OrderId={OrderId} />
       }
     </div>
   );

src/Components/Order/Info.tsx

@@ -4,8 +4,9 @@ import { useRequest } from "ahooks";
 import { ColFlex, Flex } from "~/Helpers/Styles";
 import { Hub } from "~/ShopNet";
 import { AdminHub } from "~/ShopNet/Admin";
-import type { OrderEntity } from "~/ShopNet/Order/Entity";
 import type { IOrderComp } from ".";
+import { useRouter } from "../Router";
+import { useOrder } from "./useOrder";
 
 /**
  * @author Aloento
@@ -21,19 +22,23 @@ const useStyles = makeStyles({
   },
 });
 
-interface IOrderInfo extends IOrderComp {
-  Order?: OrderEntity.Order;
-}
-
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 1.0.0
+ * @version 1.1.0
  */
-export function OrderInfo({ OrderId, Order, Admin, ParentLog }: IOrderInfo) {
+export function OrderInfo({ OrderId, Admin, ParentLog }: IOrderComp) {
   const log = useConst(() => ParentLog.With("Info"));
   const style = useStyles();
 
+  const { Nav } = useRouter();
+  const { data: order } = useOrder(OrderId, Admin, {
+    onError(e) {
+      Nav(Admin ? "Admin/Order" : "History");
+      ParentLog.error(e);
+    }
+  });
+
   const { data: admin } = useRequest(() => AdminHub.User.Get.OrderUser(OrderId), {
     manual: !Admin,
     onError: log.error
@@ -61,13 +66,13 @@ export function OrderInfo({ OrderId, Order, Admin, ParentLog }: IOrderInfo) {
     <div className={style.flex}>
       <div className={style.box}>
         <Field label="Order Date" size="large">
-          <Label>{Order?.CreateAt.toLocaleDateString()}</Label>
+          <Label>{order?.CreateAt.toLocaleDateString()}</Label>
         </Field>
       </div>
 
       <div className={style.box}>
         <Field label="Status" size="large">
-          <Label>{Order?.Status}</Label>
+          <Label>{order?.Status}</Label>
         </Field>
       </div>
     </div>
@@ -83,7 +88,7 @@ export function OrderInfo({ OrderId, Order, Admin, ParentLog }: IOrderInfo) {
         !Admin &&
         <div className={style.box}>
           <Field label="Tracking Number" size="large">
-            <Label>{Order?.TrackingNumber}</Label>
+            <Label>{order?.TrackingNumber}</Label>
           </Field>
         </div>
       }