Update Confirm component and useToast helper

Aloento · Mar 5, 2024 · 476cb47 · 476cb47
1 parent 903424b
commit 476cb47
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/SoarCraft.AwaiShop/Helpers/LoggerExtension.cs b/SoarCraft.AwaiShop/Helpers/LoggerExtension.cs
@@ -41,7 +41,7 @@ public static void NewUser(this ILogger logger, string? name, HubCallerContext c
         newUser(logger, name, ctx.UserIdentifier, ctx.GetHttpContext()?.Connection.RemoteIpAddress?.ToString());
 
     [LoggerMessage(
-        EventId = 2001,
+        EventId = 2003,
         Level = LogLevel.Information,
         Message = "Admin {name} : [{uid}] Logged from [{ip}]"
     )]

diff --git a/src/Components/ShopCart/Confirm.tsx b/src/Components/ShopCart/Confirm.tsx
@@ -4,7 +4,7 @@ import { useConst } from "@fluentui/react-hooks";
 import { DismissRegular } from "@fluentui/react-icons";
 import { CheckmarkFilled } from "@fluentui/react-icons/lib/fonts";
 import { useBoolean } from "ahooks";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { Logger } from "~/Helpers/Logger";
 import { ColFlex, Flex } from "~/Helpers/Styles";
 import { useErrorToast } from "~/Helpers/useToast";
@@ -41,7 +41,7 @@ const log = new Logger("TopNavBar", "ShopCart", "Confirm");
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.5.0
+ * @version 0.6.0
  */
 export function Confirm() {
   const [cmt, setCmt] = useState<string>();
@@ -51,7 +51,8 @@ export function Confirm() {
   const { Nav } = useRouter();
   const style = useStyles();
 
-  const { dispatch, dispatchToast } = useErrorToast(log);
+  const { dispatch, dispatchToast, dismissToast } = useErrorToast(log);
+  const toastId = useId();
 
   const { run } = Hub.Order.Post.useNew({
     manual: true,
@@ -66,7 +67,16 @@ export function Confirm() {
       dispatchToast(
         <DialogSurface>
           <DialogBody>
-            <DialogTitle className={style.title}>
+            <DialogTitle
+              action={
+                <Button
+                  appearance="subtle"
+                  icon={<DismissRegular />}
+                  onClick={() => dismissToast(toastId)}
+                />
+              }
+              className={style.title}
+            >
               <Badge size="large" color="success" icon={<CheckmarkFilled />} />
               Thank You!
             </DialogTitle>
@@ -83,6 +93,8 @@ export function Confirm() {
           </DialogBody>
         </DialogSurface>,
         {
+          toastId,
+          timeout: 5000,
           onStatusChange(_, toast) {
             if (toast.status === "unmounted")
               Nav("History", data);

diff --git a/src/Helpers/useToast.tsx b/src/Helpers/useToast.tsx
@@ -25,11 +25,12 @@ interface Cause<T = any> {
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.2.3
+ * @version 0.3.0
  */
 export function useErrorToast<T>(log: Logger) {
   const style = useStyles();
-  const { dispatchToast } = useToastController();
+  const controller = useToastController();
+  const { dispatchToast } = controller;
 
   return {
     dispatch: (e: Cause<T>) => {
@@ -63,6 +64,6 @@ export function useErrorToast<T>(log: Logger) {
 
       log.error(e);
     },
-    dispatchToast
+    ...controller
   };
 }