[Front | Component] OrderAppend (#44)

* use500Toast * use500Toast * OrderAppend * 1
Aloento · Oct 2, 2023 · d471917 · d471917
1 parent 20f8ce4
commit d471917
Show file tree

Hide file tree

Showing 13 changed files with 681 additions and 663 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "update": "npx npm-check-updates -u"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.32.3",
+    "@fluentui/react-components": "^9.33.0",
     "@fluentui/react-hooks": "^8.6.30",
     "@fluentui/react-icons": "^2.0.218",
     "@griffel/react": "^1.5.15",
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.9",
-    "@types/react": "^18.2.23",
+    "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",
     "@vitejs/plugin-react-swc": "^3.4.0",
     "typescript": "^5.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/Components/Setting.tsx b/src/Components/Setting.tsx
@@ -1,7 +1,6 @@
-import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Field, Input, Label, Toast, ToastBody, ToastTitle, makeStyles, tokens, useToastController } from "@fluentui/react-components";
+import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Field, Input, Label, Toast, ToastBody, ToastTitle, makeStyles, tokens } from "@fluentui/react-components";
 import { useRequest } from "ahooks";
 import { useState } from "react";
-import { WarpError } from "~/Helpers/Error";
 import { ColFlex, Flex } from "~/Helpers/Styles";
 import { use500Toast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
@@ -54,18 +53,17 @@ export function Setting({ Open, Toggle }: ISetting) {
     }
   });
 
-  const { dispatchToast } = useToastController();
-  const dispatchError = use500Toast();
+  const { dispatchError, dispatchToast } = use500Toast();
 
   const { run } = useRequest(Hub.User.Post.Update, {
     manual: true,
     onFinally([req], _, e) {
       if (e)
-        dispatchError(new WarpError({
+        dispatchError({
           Message: "Failed Update Info",
           Error: e,
           Request: req
-        }));
+        });
 
       dispatchToast(
         <Toast>

diff --git a/src/Components/ShopCart/Confirm.tsx b/src/Components/ShopCart/Confirm.tsx
@@ -1,9 +1,8 @@
-import { Button, Field, Textarea, Toast, ToastBody, ToastTitle, makeStyles, tokens, useToastController } from "@fluentui/react-components";
+import { Button, Field, Textarea, Toast, ToastBody, ToastTitle, makeStyles, tokens } from "@fluentui/react-components";
 import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/react-components/unstable";
 import { DismissRegular } from "@fluentui/react-icons";
 import { useBoolean, useRequest } from "ahooks";
 import { useState } from "react";
-import { WarpError } from "~/Helpers/Error";
 import { ColFlex } from "~/Helpers/Styles";
 import { use500Toast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
@@ -42,17 +41,16 @@ export function Confirm() {
   const { Nav } = useRouter();
   const style = useStyles();
 
-  const { dispatchToast } = useToastController();
-  const dispatchError = use500Toast();
+  const { dispatchError, dispatchToast } = use500Toast();
 
   const { run } = useRequest(Hub.Order.Post.New, {
     onFinally([req], data, e) {
       if (e)
-        dispatchError(new WarpError({
+        dispatchError({
           Message: "Failed Create Order",
           Request: req,
           Error: e
-        }));
+        });
 
       dispatchToast(
         <Toast>

diff --git a/src/Helpers/Error.ts b/src/Helpers/Error.ts
diff --git a/src/Helpers/useToast.tsx b/src/Helpers/useToast.tsx
@@ -1,5 +1,4 @@
 import { Text, Toast, ToastBody, ToastTitle, makeStyles, useToastController } from "@fluentui/react-components";
-import { WarpError } from "./Error";
 import { PreLine } from "./Styles";
 
 /**
@@ -11,38 +10,52 @@ export const useStyles = makeStyles({
   pre: PreLine,
 });
 
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+interface Cause<T = any> {
+  Message: string
+  Request: T;
+  Error: Error;
+}
+
 /**
  * @author Aloento
  * @since 0.5.0
  * @version 0.2.0
  */
-export function use500Toast() {
+export function use500Toast<T>() {
   const style = useStyles();
   const { dispatchToast } = useToastController();
 
-  return (e: WarpError) => {
-    dispatchToast(
-      <Toast>
-        <ToastTitle>Internal Error</ToastTitle>
-
-        <ToastBody subtitle={
-          <Text className={style.pre}>
-            {e.Error.message}
-            <br />
-            More Info, See Console
-          </Text>
-        }>
-
-          <Text className={style.pre}>
-            {e.message}
-          </Text>
-
-        </ToastBody>
-      </Toast>,
-      { intent: "error", timeout: 5000 }
-    );
-
-    console.error(e.Error);
-    throw e.Request;
+  return {
+    dispatchError: (e: Cause<T>) => {
+      dispatchToast(
+        <Toast>
+          <ToastTitle>Internal Error</ToastTitle>
+
+          <ToastBody subtitle={
+            <Text className={style.pre}>
+              {e.Error.message}
+              <br />
+              More Info, See Console
+            </Text>
+          }>
+
+            <Text className={style.pre}>
+              {e.Message}
+            </Text>
+
+          </ToastBody>
+        </Toast>,
+        { intent: "error", timeout: 5000 }
+      );
+
+      console.error(e.Error);
+      throw e.Request;
+    },
+    dispatchToast
   };
 }
diff --git a/src/Pages/Admin/Order/index.tsx b/src/Pages/Admin/Order/index.tsx
@@ -2,7 +2,8 @@ import { Button, DataGridCell, DataGridHeaderCell, TableColumnDefinition, create
 import { OpenRegular } from "@fluentui/react-icons";
 import { useBoolean } from "ahooks";
 import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
-import { HistoryColumns, IHistoryItem } from "~/Pages/History";
+import { IHistoryItem } from "~/Pages/History";
+import { HistoryColumns } from "~/Pages/History/HistoryColumns";
 import { AdminOrderEdit } from "./Edit";
 
 /**

diff --git a/src/Pages/History/Append.tsx b/src/Pages/History/Append.tsx
@@ -1,29 +1,65 @@
-import { Button, Field, Textarea } from "@fluentui/react-components";
+import { Button, Field, Textarea, Toast, ToastTitle, makeStyles } from "@fluentui/react-components";
+import { useRequest } from "ahooks";
 import { useState } from "react";
 import { Flex } from "~/Helpers/Styles";
+import { use500Toast } from "~/Helpers/useToast";
+import { Hub } from "~/ShopNet";
 
 /**
  * @author Aloento
  * @since 0.5.0
  * @version 0.1.0
  */
-export function OrderAppend({ OrderId }: { OrderId: number; }) {
-  const [append, setAppend] = useState<string>();
+export const useStyles = makeStyles({
+  body: {
+    ...Flex,
+    justifyContent: "space-between"
+  },
+});
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.2.0
+ */
+export function OrderAppend({ OrderId, Refresh }: { OrderId: number; Refresh: () => void }) {
+  const style = useStyles();
+  const [cmt, setCmt] = useState<string>();
+
+  const { dispatchError, dispatchToast } = use500Toast();
+
+  const { run: append } = useRequest(Hub.Order.Post.Append, {
+    manual: true,
+    onFinally([req], _, e) {
+      if (e)
+        dispatchError({
+          Message: "Failed Append Comment",
+          Request: req,
+          Error: e
+        });
+
+      dispatchToast(
+        <Toast>
+          <ToastTitle>Comment Appended</ToastTitle>
+        </Toast>,
+        { intent: "success" }
+      );
+
+      Refresh();
+    },
+  });
 
   return <>
     <Field label="Append" size="large">
-      <Textarea value={append} onChange={(_, v) => setAppend(v.value)} maxLength={1000} />
+      <Textarea value={cmt} onChange={(_, v) => setCmt(v.value)} maxLength={1000} />
     </Field>
 
-    <div style={{
-      ...Flex,
-      justifyContent: "space-between"
-    }}>
+    <div className={style.body}>
       <Button>
         Cancel Order with Reason
       </Button>
 
-      <Button>
+      <Button appearance="primary" onClick={() => append(OrderId, cmt!)}>
         Add Comment
       </Button>
     </div>

diff --git a/src/Pages/History/Detail.tsx b/src/Pages/History/Detail.tsx
@@ -1,17 +1,15 @@
-import { Button, Field, Label, Toast, ToastBody, ToastTitle, makeStyles, tokens, useToastController } from "@fluentui/react-components";
+import { Button, Field, Label, makeStyles, tokens } from "@fluentui/react-components";
 import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/react-components/unstable";
 import { DismissRegular, OpenRegular } from "@fluentui/react-icons";
 import { useBoolean, useRequest } from "ahooks";
 import { DelegateDataGrid } from "~/Components/DataGrid/Delegate";
 import { useRouter } from "~/Components/Router";
 import { useShopCart } from "~/Components/ShopCart/Context";
 import { PersonaInfo } from "~/Components/ShopCart/Persona";
-import { WarpError } from "~/Helpers/Error";
 import { ColFlex } from "~/Helpers/Styles";
-import { use500Toast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
 import { OrderAppend } from "./Append";
-import { DetailColumns } from "./Columns";
+import { DetailColumns } from "./DetailColumns";
 
 /**
  * @author Aloento
@@ -33,39 +31,27 @@ export const useStyles = makeStyles({
 export function OrderDetail() {
   const [open, { toggle }] = useBoolean();
 
+  const { Nav, Paths } = useRouter();
+  const id = parseInt(Paths.at(2)!);
+
   const { List, Update } = useShopCart();
-  const { Nav } = useRouter();
   const style = useStyles();
 
-  const { dispatchToast } = useToastController();
-  const dispatchError = use500Toast();
-
-  const { run } = useRequest(Hub.Order.Post.New, {
-    onFinally([req], data, e) {
-      if (e)
-        dispatchError(new WarpError({
-          Message: "Cannot Create Order",
-          Request: req,
-          Error: e
-        }));
-
-      dispatchToast(
-        <Toast>
-          <ToastTitle>Order Canceled</ToastTitle>
-          <ToastBody>Order Id: {data}</ToastBody>
-        </Toast>,
-        { intent: "success" }
-      );
-
-      Update([]);
-      toggle();
-      Nav("History", `${data}`);
+  const { data, run } = useRequest(Hub.Order.Get.Detail, {
+    onBefore() {
+      isNaN(id) && Nav("/History");
+    },
+    onError() {
+      throw Nav("/History");
     },
-    manual: true,
+    manual: true
   })
 
   return <>
-    <Button appearance="subtle" icon={<OpenRegular />} onClick={toggle} />
+    <Button appearance="subtle" icon={<OpenRegular />} onClick={() => {
+      run(id);
+      toggle();
+    }} />
 
     <Drawer
       open={open}
@@ -98,7 +84,7 @@ export function OrderDetail() {
             <Label>{""}</Label>
           </Field>
 
-          <OrderAppend />
+          <OrderAppend OrderId={id} Refresh={() => run(id)} />
         </div>
       </DrawerBody>
     </Drawer>

diff --git a/src/Pages/History/Columns.tsx → src/Pages/History/DetailColumns.tsx b/src/Pages/History/Columns.tsx → src/Pages/History/DetailColumns.tsx