Replace useRequest with useAsyncEffect and refactor interfaces

Replaced `useRequest` hook with `useAsyncEffect` in `Detail.tsx`, `New.tsx`, `Delete.tsx`, and `index.tsx` for better handling of asynchronous operations. Added `Hub` import from `~/ShopNet` to several files. Introduced `IUpdateComboItem` interface in `Detail.tsx` and `New.tsx`, extending `IVariantItem` interface. Moved `IVariantItem` interface from `index.tsx` to `New.tsx`. Updated functions in `Detail.tsx` and `New.tsx` to use new hook and interface. Updated `AdminProductVariantDelete` function in `Delete.tsx` to use `useVariant` hook. Refactored `AdminProductGet` class in `Get.ts` by removing `Variants` method and adding `Types` method. Removed `TypeIds` property from `Variant` type in `Data.ts`.
Aloento · Mar 2, 2024 · fdefb42 · fdefb42
1 parent d353832
commit fdefb42
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 47 deletions.
diff --git a/src/Pages/Admin/Product/Combo/Detail.tsx b/src/Pages/Admin/Product/Combo/Detail.tsx
@@ -1,23 +1,23 @@
 import { Button, Combobox, DataGridCell, DataGridHeaderCell, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Label, Option, SpinButton, TableColumnDefinition, Toast, ToastTitle, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
 import { DismissRegular, EditRegular } from "@fluentui/react-icons";
-import { useBoolean, useRequest } from "ahooks";
+import { useAsyncEffect, useBoolean } from "ahooks";
 import { useState } from "react";
 import { DelegateDataGrid } from "~/Components/DataGrid";
 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 { IComboItem } from ".";
-import { IVariantItem } from "../Variant";
+import { IUpdateComboItem, IVariantItem } from "./New";
 
 /**
  * @author Aloento
  * @since 0.5.0
  * @version 0.1.0
  */
-interface IEditComboItem extends IVariantItem {
+interface IEditComboItem extends IUpdateComboItem {
   Current: string;
-  Update: (type: string) => void;
 }
 
 /**
@@ -80,6 +80,7 @@ const useStyles = makeStyles({
  */
 export interface IDetailComboItem extends IComboItem {
   ProdId: number;
+  /** @deprecated */
   Refresh: () => void;
 }
 
@@ -88,21 +89,48 @@ const log = new Logger("Admin", "Product", "Detail", "Combo", "Detail");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.2.3
+ * @version 0.3.0
  */
 export function AdminProductComboDetail({ Id, ProdId, Combo, Stock, Refresh }: IDetailComboItem) {
   const [open, { toggle }] = useBoolean();
   const [combo, setCombo] = useState(Combo);
   const [stock, setStock] = useState(Stock);
 
-  const { data: varis } = useRequest(() => AdminHub.Product.Get.Variants(ProdId, log), {
+  const [varis, setVaris] = useState<IVariantItem[]>([]);
+  const { data: varIds } = AdminHub.Product.Get.useVariants(ProdId, {
     onError: log.error
   });
 
+  useAsyncEffect(async () => {
+    if (!varIds)
+      return;
+
+    const varis: IVariantItem[] = [];
+
+    for (const i of varIds) {
+      const typeIds = await AdminHub.Product.Get.Types(i);
+      const types = [];
+
+      for (const typeId of typeIds) {
+        const type = await Hub.Product.Get.Type(typeId);
+        types.push(type);
+      }
+
+      const { Name } = await Hub.Product.Get.Variant(i);
+
+      varis.push({
+        Id: i,
+        Name: Name,
+        Types: types.map(x => x.Name)
+      });
+    }
+
+    setVaris(varis);
+  }, [varIds]);
+
   const { dispatch, dispatchToast } = useErrorToast(log);
 
-  const { run } = AdminHub.Product.Patch.useCombo({
-    manual: true,
+  const { run, loading } = AdminHub.Product.Patch.useCombo({
     onError(e, req) {
       dispatch({
         Message: "Failed Update Combo",
@@ -167,7 +195,13 @@ export function AdminProductComboDetail({ Id, ProdId, Combo, Stock, Refresh }: I
                 setStock(val);
               }} />
 
-              <Button appearance="primary" onClick={() => run(Id, combo, stock)}>Submit</Button>
+              <Button
+                disabled={loading}
+                appearance="primary"
+                onClick={() => run(Id, combo, stock)}
+              >
+                Submit
+              </Button>
             </div>
           </DialogContent>
         </DialogBody>

diff --git a/src/Pages/Admin/Product/Combo/New.tsx b/src/Pages/Admin/Product/Combo/New.tsx
@@ -1,20 +1,31 @@
 import { Button, Combobox, DataGridCell, DataGridHeaderCell, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Label, Option, SpinButton, TableColumnDefinition, Toast, ToastTitle, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
 import { AddRegular, DismissRegular } from "@fluentui/react-icons";
-import { useBoolean, useRequest } from "ahooks";
+import { useAsyncEffect, useBoolean } from "ahooks";
 import { useState } from "react";
 import { DelegateDataGrid } from "~/Components/DataGrid";
 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 { IVariantItem } from "../Variant";
 
 /**
  * @author Aloento
  * @since 0.5.0
  * @version 0.1.0
  */
-interface INewComboItem extends IVariantItem {
+export interface IVariantItem {
+  Id: number;
+  Name: string;
+  Types: string[];
+}
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+export interface IUpdateComboItem extends IVariantItem {
   Update: (type: string) => void;
 }
 
@@ -23,8 +34,8 @@ interface INewComboItem extends IVariantItem {
  * @since 0.5.0
  * @version 0.1.0
  */
-const columns: TableColumnDefinition<INewComboItem>[] = [
-  createTableColumn<INewComboItem>({
+const columns: TableColumnDefinition<IUpdateComboItem>[] = [
+  createTableColumn({
     columnId: "Variant",
     renderHeaderCell: () => {
       return <DataGridHeaderCell>Variant</DataGridHeaderCell>
@@ -33,7 +44,7 @@ const columns: TableColumnDefinition<INewComboItem>[] = [
       return <DataGridCell>{item.Name}</DataGridCell>
     }
   }),
-  createTableColumn<INewComboItem>({
+  createTableColumn({
     columnId: "Type",
     renderHeaderCell: () => {
       return <DataGridHeaderCell>Type</DataGridHeaderCell>
@@ -72,26 +83,52 @@ const log = new Logger("Admin", "Product", "Detail", "Combo", "NewCombo");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.2.3
+ * @version 1.0.0
  */
 export function AdminProductNewCombo({ ProdId, Refresh }: { ProdId: number; Refresh: () => void }) {
   const [open, { toggle }] = useBoolean();
+
+  const [varis, setVaris] = useState<IVariantItem[]>([]);
   const [combo, setCombo] = useState<Record<string, string>>({});
   const [stock, setStock] = useState(1);
 
-  const { data: varis } = useRequest(() => AdminHub.Product.Get.Variants(ProdId, log), {
-    onSuccess(data) {
-      for (const i of data)
-        combo[i.Name] = "";
-
-      setCombo({ ...combo });
-    },
+  const { data: varIds } = AdminHub.Product.Get.useVariants(ProdId, {
     onError: log.error
   });
 
+  useAsyncEffect(async () => {
+    if (!varIds)
+      return;
+
+    const varis: IVariantItem[] = [];
+
+    for (const i of varIds) {
+      const typeIds = await AdminHub.Product.Get.Types(i);
+      const types = [];
+
+      for (const typeId of typeIds) {
+        const type = await Hub.Product.Get.Type(typeId);
+        types.push(type);
+      }
+
+      const { Name } = await Hub.Product.Get.Variant(i);
+
+      varis.push({
+        Id: i,
+        Name: Name,
+        Types: types.map(x => x.Name)
+      });
+
+      combo[Name] = "";
+    }
+
+    setVaris(varis);
+    setCombo({ ...combo });
+  }, [varIds]);
+
   const { dispatch, dispatchToast } = useErrorToast(log);
 
-  const { run } = AdminHub.Product.Post.useCombo({
+  const { run, loading } = AdminHub.Product.Post.useCombo({
     onError(e, req) {
       dispatch({
         Message: "Failed Create Combo",
@@ -154,7 +191,13 @@ export function AdminProductNewCombo({ ProdId, Refresh }: { ProdId: number; Refr
                 setStock(val);
               }} />
 
-              <Button appearance="primary" onClick={() => run(ProdId, combo, stock)}>Create</Button>
+              <Button
+                disabled={loading}
+                appearance="primary"
+                onClick={() => run(ProdId, combo, stock)}
+              >
+                Create
+              </Button>
             </div>
           </DialogContent>
         </DialogBody>

diff --git a/src/Pages/Admin/Product/Variant/Delete.tsx b/src/Pages/Admin/Product/Variant/Delete.tsx
@@ -10,6 +10,7 @@ const log = new Logger("Admin", "Product", "Detail", "Variant", "Delete");
  * @author Aloento
  * @since 0.5.0
  * @version 0.2.0
+ * @todo Add the ability to refresh the variant list
  */
 export function AdminProductVariantDelete({ VariantId }: { VariantId: number; }) {
   const { dispatch, dispatchToast } = useErrorToast(log);

diff --git a/src/Pages/Admin/Product/Variant/index.tsx b/src/Pages/Admin/Product/Variant/index.tsx
@@ -8,17 +8,6 @@ import { AdminProductVariantDelete } from "./Delete";
 import { AdminProductVariantEdit } from "./Edit";
 import { AdminProductNewVariant } from "./New";
 
-/**
- * @author Aloento
- * @since 0.5.0
- * @version 0.1.0
- */
-export interface IVariantItem {
-  Id: number;
-  Name: string;
-  Types: string[];
-}
-
 /**
  * @author Aloento
  * @since 0.5.0

diff --git a/src/ShopNet/Admin/Product/Get.ts b/src/ShopNet/Admin/Product/Get.ts
@@ -78,16 +78,6 @@ export abstract class AdminProductGet extends AdminNet {
   }
 
   public static readonly variants = "ProductGetVariants";
-  /**
-   * @author Aloento
-   * @since 0.5.0
-   * @version 2.0.0
-   * @deprecated
-   */
-  public static async Variants(prodId: number): Promise<number[]> {
-    return this.GetTimeCache<number[]>(prodId, this.variants, (x) => x.add(3, "s"), prodId);
-  }
-
   /**
    * @author Aloento
    * @since 0.5.0
@@ -117,6 +107,15 @@ export abstract class AdminProductGet extends AdminNet {
   }
 
   public static readonly types = "ProductGetTypes";
+  /**
+   * @author Aloento
+   * @since 1.4.5
+   * @version 0.1.0
+   */
+  public static async Types(variantId: number) {
+    return this.GetTimeCache<number[]>(variantId, this.types, (x) => x.add(5, "s"), variantId);
+  }
+
   /**
    * @author Aloento
    * @since 0.5.0

diff --git a/src/ShopNet/Product/Data.ts b/src/ShopNet/Product/Data.ts
@@ -30,7 +30,6 @@ export namespace ProductData {
   export type Variant = {
     Name: string;
     ProductId: number;
-    TypeIds: number[];
   } & IConcurrency;
 
   export type Combo = {