[Front | DataModel | Logic] ShopCart Confirm (#42)

* setCmt

* Toaster

* INew

* use500Toast

* use500Toast

* Confirm

* update

* 1

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@fluentui/react-components": "^9.32.3",
-    "@fluentui/react-hooks": "^8.6.29",
+    "@fluentui/react-hooks": "^8.6.30",
     "@fluentui/react-icons": "^2.0.218",
     "@griffel/react": "^1.5.15",
     "@lexical/clipboard": "^0.12.2",

src/Components/ShopCart/Confirm.tsx

@@ -1,9 +1,13 @@
-import { Button, Field, Textarea, makeStyles, tokens } from "@fluentui/react-components";
+import { Button, Field, Textarea, Toast, ToastBody, ToastTitle, makeStyles, tokens, useToastController } from "@fluentui/react-components";
 import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/react-components/unstable";
 import { DismissRegular } from "@fluentui/react-icons";
-import { useBoolean } from "ahooks";
+import { useBoolean, useRequest } from "ahooks";
+import { useState } from "react";
 import { ColFlex } from "~/Helpers/Styles";
+import { use500Toast } from "~/Helpers/Toast";
+import { Hub } from "~/ShopNet";
 import { DelegateDataGrid } from "../DataGrid/Delegate";
+import { useRouter } from "../Router";
 import { CartColumns } from "./Columns";
 import { useShopCart } from "./Context";
 import { ConfirmPersona } from "./Persona";
@@ -27,12 +31,43 @@ export const useStyles = makeStyles({
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.3.1
+ * @version 0.4.0
  */
 export function Confirm() {
+  const [cmt, setCmt] = useState<string>();
   const [open, { toggle }] = useBoolean();
+
+  const { List, Update } = useShopCart();
+  const { Nav } = useRouter();
   const style = useStyles();
-  const { List } = useShopCart();
+
+  const { dispatchToast } = useToastController();
+  const dispatchError = use500Toast();
+
+  const { run } = useRequest(Hub.Order.Post.New, {
+    onFinally([req], data, e) {
+      if (e)
+        dispatchError(new Error("Cannot Create Order", {
+          cause: {
+            Request: req,
+            Error: e
+          }
+        }));
+
+      dispatchToast(
+        <Toast>
+          <ToastTitle>Order Placed</ToastTitle>
+          <ToastBody>Order Id: {data}</ToastBody>
+        </Toast>,
+        { intent: "success" }
+      );
+
+      Update([]);
+      toggle();
+      Nav("History", `${data}`);
+    },
+    manual: true,
+  })
 
   return <>
     <Button appearance="primary" onClick={toggle} disabled={!List.length}>Checkout</Button>
@@ -65,10 +100,18 @@ export function Confirm() {
           <DelegateDataGrid Items={List} Columns={CartColumns} NoHeader />
 
           <Field label="Comment" size="large">
-            <Textarea />
+            <Textarea value={cmt} onChange={(_, v) => setCmt(v.value)} maxLength={1000} />
           </Field>
 
-          <Button appearance="primary" className={style.sub} disabled={!List.length}>
+          <Button
+            appearance="primary"
+            className={style.sub}
+            disabled={!List.length}
+            onClick={() => run({
+              ShopCart: List,
+              Comment: cmt
+            })}
+          >
             Submit
           </Button>
         </div>

src/Helpers/Toast.tsx

@@ -0,0 +1,23 @@
+import { Toast, ToastBody, ToastTitle, useToastController } from "@fluentui/react-components";
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+export function use500Toast() {
+  const { dispatchToast } = useToastController();
+
+  return (e: Error) => {
+    dispatchToast(
+      <Toast>
+        <ToastTitle>Internal Error</ToastTitle>
+        <ToastBody subtitle="More Info, See Console">{e.message || `${e}`}</ToastBody>
+      </Toast>,
+      { intent: "error" }
+    );
+
+    console.error(e.cause);
+    throw e;
+  };
+}

src/ShopNet/Order/Post.ts

@@ -0,0 +1,28 @@
+import { random } from "lodash-es";
+import { ICartItem } from "~/Components/ShopCart";
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+interface INew {
+  ShopCart: ICartItem[];
+  Comment?: string;
+}
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+export class OrderPost {
+  /**
+   * @author Aloento
+   * @since 0.5.0
+   * @version 0.1.0
+   */
+  public static async New(req: INew): Promise<number> {
+    return random(1, 100);
+  }
+}

src/ShopNet/Order/index.ts

@@ -0,0 +1,10 @@
+import { OrderPost } from "./Post";
+
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
+export const Order = {
+  Post: OrderPost
+}

src/ShopNet/index.ts

@@ -1,4 +1,5 @@
 import { Gallery } from "./Gallery";
+import { Order } from "./Order";
 import { Product } from "./Product";
 import { User } from "./User";
 
@@ -11,4 +12,5 @@ export const Hub = {
   Gallery: Gallery,
   Product: Product,
   User: User,
+  Order: Order,
 }

src/index.tsx

@@ -1,4 +1,4 @@
-import { BrandVariants, FluentProvider, createLightTheme } from "@fluentui/react-components";
+import { BrandVariants, FluentProvider, Toaster, createLightTheme } from "@fluentui/react-components";
 import ReactDOM from "react-dom/client";
 import { Layout } from "./Components/Layout";
 import { BrowserRouter } from "./Components/Router";
@@ -31,10 +31,11 @@ const Magenta: BrandVariants = {
 
 ReactDOM.createRoot(document.getElementById("LoveOTC")!).render(
   <BrowserRouter>
-    <FluentProvider applyStylesToPortals theme={createLightTheme(Magenta)}>
+    <FluentProvider theme={createLightTheme(Magenta)}>
       <ShopCartContext>
         <Layout>
           <EShopContent />
+          <Toaster pauseOnHover />
         </Layout>
       </ShopCartContext>
     </FluentProvider>