[Front] Admin Check - [Front] Avatar Name (#89)

* Update AvatarMenu and ShopCart components

* Admin with useMe

Author: Aloento

SoarCraft.AwaiShop/Hub/User/Get.cs

@@ -8,7 +8,7 @@ internal partial class ShopHub {
      * <remarks>
      * @author Aloento
      * @since 0.5.0
-     * @version 0.1.0
+     * @version 0.1.1
      * </remarks>
      */
     [Authorize]
@@ -30,6 +30,7 @@ internal partial class ShopHub {
                 x.EMail,
                 x.Phone,
                 x.Address,
+                x.Admin,
                 x.Version
             })
             .SingleOrDefaultAsync();

src/Components/AvatarMenu.tsx

@@ -2,13 +2,17 @@ import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/
 import { Avatar, Link, Menu, MenuGroupHeader, MenuItem, MenuList, MenuPopover, MenuTrigger } from "@fluentui/react-components";
 import { useBoolean } from "ahooks";
 import { useEffect } from "react";
+import { Logger } from "~/Helpers/Logger";
+import { Hub } from "~/ShopNet";
 import { OnNewUserSubject } from "./NewUser";
 import { Setting } from "./Setting";
 
+const log = new Logger("Avatar", "Menu");
+
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.3.0
+ * @version 0.3.2
  */
 export function AvatarMenu() {
   const [isMenu, { toggle: toggleMenu }] = useBoolean();
@@ -21,19 +25,22 @@ export function AvatarMenu() {
     OnNewUserSubject.subscribe(x => setMount(!x));
   }, []);
 
+  const { data } = Hub.User.Get.useMe(log);
+
   const claim = instance.getActiveAccount();
+  const name = claim?.name || claim?.username;
 
   return <>
     <Menu open={isMenu} onOpenChange={toggleMenu}>
       <MenuTrigger>
-        <Avatar size={36} active={isMenu ? "active" : "unset"} />
+        <Avatar size={36} active={isMenu ? "active" : "unset"} name={name} />
       </MenuTrigger>
 
       <MenuPopover>
         <MenuList>
 
           <AuthenticatedTemplate>
-            <MenuGroupHeader>Hi {claim?.name || claim?.username}</MenuGroupHeader>
+            <MenuGroupHeader>Hi {name}</MenuGroupHeader>
           </AuthenticatedTemplate>
 
           <UnauthenticatedTemplate>
@@ -47,9 +54,12 @@ export function AvatarMenu() {
               <MenuItem>History</MenuItem>
             </Link>
 
-            <Link appearance="subtle" href="/Admin">
-              <MenuItem>Admin</MenuItem>
-            </Link>
+            {
+              data?.Admin &&
+              <Link appearance="subtle" href="/Admin">
+                <MenuItem>Admin</MenuItem>
+              </Link>
+            }
 
             <MenuItem onClick={toggleModal}>Setting</MenuItem>
 

src/Components/ShopCart/index.tsx

@@ -1,4 +1,4 @@
-import { Body1, Popover, PopoverSurface, PopoverTrigger, ToggleButton, Tooltip, makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { Popover, PopoverSurface, PopoverTrigger, ToggleButton, Tooltip, makeStyles, shorthands, tokens } from "@fluentui/react-components";
 import { useConst } from "@fluentui/react-hooks";
 import { CartRegular } from "@fluentui/react-icons";
 import { useBoolean, useUpdateEffect } from "ahooks";
@@ -87,9 +87,7 @@ export function ShopCart() {
         <DelegateDataGrid Items={List} Columns={useConst(() => CartColumns(log))} NoHeader />
 
         <div className={style.conf}>
-          <Body1>
-            {List.map(x => x.Quantity).reduce((prev, curr) => prev + curr, 0)} items in shopping cart
-          </Body1>
+          {List.map(x => x.Quantity).reduce((prev, curr) => prev + curr, 0)} items in shopping cart
 
           <Confirm />
         </div>

src/Pages/Admin/index.tsx

@@ -1,19 +1,24 @@
+import { Spinner } from "@fluentui/react-components";
 import { useMemo } from "react";
 import { useRouter } from "~/Components/Router";
+import { Logger } from "~/Helpers/Logger";
+import { Hub } from "~/ShopNet";
 import { AdminOrder } from "./Order";
 import { AdminProduct } from "./Product";
 import { AdminUser } from "./User";
 
+const log = new Logger("Admin");
+
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 function Admin() {
-  const { Paths } = useRouter();
+  const { Paths, Nav } = useRouter();
   const path = Paths.at(1);
 
-  return useMemo(() => {
+  const content = useMemo(() => {
     switch (path) {
       case "Order":
         return <AdminOrder />;
@@ -24,7 +29,17 @@ function Admin() {
       default:
         return <AdminProduct />;
     }
-  }, [path])
+  }, [path]);
+
+  const { data, loading } = Hub.User.Get.useMe(log);
+
+  if (loading)
+    return <Spinner size="huge" label="Authenticating..." />;
+
+  if (!data?.Admin)
+    return Nav("/");
+
+  return content;
 }
 
 /** @deprecated */

src/ShopNet/User/Get.tsx

@@ -8,11 +8,17 @@ import { useErrorToast } from "~/Helpers/useToast";
 import { IConcurrency } from "../Database";
 import { ShopNet } from "../ShopNet";
 
+/**
+ * @author Aloento
+ * @since 0.5.0
+ * @version 0.1.0
+ */
 interface IuseMe extends IConcurrency {
   Name: string;
   EMail: string;
   Phone: string;
   Address: string;
+  Admin?: boolean;
 }
 
 /**