[Front] v1.1.0 - [Front] Comprehensive Console Logging (#83)

* Refactor SignalR class and remove INet interface

* Update version numbers and improve logging

* Update version numbers and add logging in ProductGet class

* Update OrderGet class with logging improvements

* Update version numbers and add logging in AdminProductGet

* Update version and add logging in AdminOrderGet

* Update Carousel and ObjectStorage classes

* Add error handling to useRequest hooks in GuidImage and ProductCarousel components

* Update useToast and GuidImage
Update MakeCoverCol and AdminProduct
Update Confirm and AdminProductGet

* Refactor ShopCart Columns component

* Update OrderDetail component with Logger and add MakeCoverCol to columns

* Refactor history columns and add logger to order detail

* Add logger to handle errors in useRequest

* Add error logging to useRequest calls

* Update RadioGroup component to use useEffect and useState

* Update ShopCart and Product with Logger

* Add logging to Combo API calls

* Update useRequest calls with log parameter

* Update OrderAppend component to include ParentLog

* Update OrderAction and OrderAppend components

* Update AdminOrderDetail and Shipment components

* Fix logger import and add logging to useErrorToast

* Update Admin User components

* Fix error handling in AdminProduct and AdminProductComboDelete

* Update AdminProductPhotoEdit component and usePhoto function

* Refactor code for AdminOrderDetail and AdminProductVariantDelete components

* Refactor component imports and remove unused code

* Add Logger to AdminProductAddButton and AdminProductPhotoEdit

* Add logging to AdminProductDelete and AdminProductTypeDelete

* Fix order and user components

* Update @fluentui/react-components to version 9.43.2

Author: Aloento

package.json

@@ -18,7 +18,7 @@
     "@azure/msal-browser": "^3.6.0",
     "@azure/msal-common": "^14.5.0",
     "@azure/msal-react": "^2.0.8",
-    "@fluentui/react-components": "^9.43.0",
+    "@fluentui/react-components": "^9.43.2",
     "@fluentui/react-hooks": "^8.6.34",
     "@fluentui/react-icons": "^2.0.224",
     "@griffel/react": "^1.5.19",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import { Field, Label, makeStyles, tokens } from "@fluentui/react-components";
 import { useRequest } from "ahooks";
+import { Logger } from "~/Helpers/Logger";
 import { ColFlex, Flex } from "~/Helpers/Styles";
 import { Hub } from "~/ShopNet";
 import { AdminHub } from "~/ShopNet/Admin";
@@ -29,6 +30,8 @@ interface IOrderInfo {
   Admin?: true;
 }
 
+const log = new Logger("Order", "Info");
+
 /**
  * @author Aloento
  * @since 0.5.0
@@ -38,10 +41,11 @@ export function OrderInfo({ OrderId, Order, Admin }: IOrderInfo) {
   const style = useStyles();
 
   const { data: admin } = useRequest(() => AdminHub.User.Get.OrderUser(OrderId), {
-    manual: !Admin
+    manual: !Admin,
+    onError: log.error
   });
 
-  const { data: me } = Hub.User.Get.useMe({
+  const { data: me } = Hub.User.Get.useMe(log, {
     manual: Admin
   });
 

src/Components/OrderInfo.tsx

@@ -1,6 +1,7 @@
 import { useMsal } from "@azure/msal-react";
 import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Field, Input, Label, Toast, ToastBody, ToastTitle, makeStyles, tokens } from "@fluentui/react-components";
 import { useState } from "react";
+import { Logger } from "~/Helpers/Logger";
 import { ColFlex, Flex } from "~/Helpers/Styles";
 import { useErrorToast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
@@ -33,10 +34,12 @@ const useStyles = makeStyles({
   },
 });
 
+const log = new Logger("Setting");
+
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.4.0
+ * @version 0.4.1
  */
 export function Setting({ Open, Toggle, New }: ISetting) {
   const style = useStyles();
@@ -46,7 +49,7 @@ export function Setting({ Open, Toggle, New }: ISetting) {
   const [phone, setPhone] = useState<string>();
   const [address, setAddress] = useState<string>();
 
-  Hub.User.Get.useMe({
+  Hub.User.Get.useMe(log, {
     manual: New,
     onSuccess(data) {
       if (!data) return;
@@ -58,7 +61,7 @@ export function Setting({ Open, Toggle, New }: ISetting) {
     }
   });
 
-  const { dispatch, dispatchToast } = useErrorToast();
+  const { dispatch, dispatchToast } = useErrorToast(log);
 
   const { run } = Hub.User.Post.useUpdate({
     manual: true,

src/Components/Setting.tsx

@@ -1,6 +1,7 @@
 import { Body1Strong, Button, Caption1, DataGridCell, Link, SpinButton, TableColumnDefinition, createTableColumn, makeStyles } from "@fluentui/react-components";
 import { DeleteRegular } from "@fluentui/react-icons";
 import { MakeCoverCol } from "~/Helpers/CoverCol";
+import { Logger } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
 import { useLimit } from "~/Helpers/useLimit";
 import { ICartItem } from ".";
@@ -27,13 +28,7 @@ const useStyles = makeStyles({
   },
 });
 
-/**
- * @author Aloento
- * @since 0.1.0
- * @version 0.3.1
- */
-export const CartColumns: TableColumnDefinition<ICartItem>[] = [
-  MakeCoverCol(44),
+const columns: TableColumnDefinition<ICartItem>[] = [
   createTableColumn<ICartItem>({
     columnId: "Product",
     renderCell(item) {
@@ -81,11 +76,21 @@ export const CartColumns: TableColumnDefinition<ICartItem>[] = [
           <Button
             appearance="subtle"
             icon={<DeleteRegular />}
-            onClick={() => {
-              Update(List.filter(x => x.Id !== item.Id));
-            }} />
+            onClick={() => Update(List.filter(x => x.Id !== item.Id))} />
         </DataGridCell>
       );
     },
   })
 ];
+
+/**
+ * @author Aloento
+ * @since 0.1.0
+ * @version 0.3.1
+ */
+export function CartColumns(log: Logger): TableColumnDefinition<ICartItem>[] {
+  return [
+    MakeCoverCol(44, log),
+    ...columns
+  ];
+}

src/Components/ShopCart/Columns.tsx

@@ -1,8 +1,10 @@
 import { Button, Field, Textarea, Toast, ToastBody, ToastTitle, makeStyles, tokens } from "@fluentui/react-components";
 import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from "@fluentui/react-components/unstable";
+import { useConst } from "@fluentui/react-hooks";
 import { DismissRegular } from "@fluentui/react-icons";
 import { useBoolean } from "ahooks";
 import { useState } from "react";
+import { Logger } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
 import { useErrorToast } from "~/Helpers/useToast";
 import { Hub } from "~/ShopNet";
@@ -28,10 +30,12 @@ const useStyles = makeStyles({
   }
 });
 
+const log = new Logger("TopNavBar", "ShopCart", "Confirm");
+
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.4.1
+ * @version 0.4.2
  */
 export function Confirm() {
   const [cmt, setCmt] = useState<string>();
@@ -41,7 +45,7 @@ export function Confirm() {
   const { Nav } = useRouter();
   const style = useStyles();
 
-  const { dispatch, dispatchToast } = useErrorToast();
+  const { dispatch, dispatchToast } = useErrorToast(log);
 
   const { run } = Hub.Order.Post.useNew({
     manual: true,
@@ -93,9 +97,9 @@ export function Confirm() {
 
       <DrawerBody>
         <div className={style.body}>
-          <PersonaInfo />
+          <PersonaInfo Log={log} />
 
-          <DelegateDataGrid Items={List} Columns={CartColumns} NoHeader />
+          <DelegateDataGrid Items={List} Columns={useConst(() => CartColumns(log))} NoHeader />
 
           <Field label="Comment" size="large">
             <Textarea value={cmt} onChange={(_, v) => setCmt(v.value)} maxLength={1000} />

src/Components/ShopCart/Confirm.tsx

@@ -1,5 +1,6 @@
 import { useRequest } from "ahooks";
 import { ReactNode, createContext, useContext, useState } from "react";
+import { Logger } from "~/Helpers/Logger";
 import { Hub } from "~/ShopNet";
 import { CartTable } from "~/ShopNet/Database";
 import { ICartItem } from ".";
@@ -31,10 +32,12 @@ export function useShopCart() {
   return useContext(ShopCart);
 }
 
+const log = new Logger("ShopCart", "Context");
+
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.3.0
+ * @version 0.3.1
  */
 export function ShopCartContext({ children }: { children: ReactNode }) {
   const [list, setList] = useState<ICartItem[]>([]);
@@ -44,14 +47,16 @@ export function ShopCartContext({ children }: { children: ReactNode }) {
     const res: ICartItem[] = [];
 
     for (const i of arr) {
-      const b = await Hub.Product.Get.Basic(i.ProdId);
+      const b = await Hub.Product.Get.Basic(i.ProdId, log);
       res.push({
         ...i,
         ...b
       });
     }
 
     setList(res);
+  }, {
+    onError: log.error,
   });
 
   async function Update(val: ICartItem[]) {
@@ -70,7 +75,7 @@ export function ShopCartContext({ children }: { children: ReactNode }) {
   }
 
   async function Add(prodId: number, type: Record<string, string>, quantity: number) {
-    const res = await Hub.Product.Get.Basic(prodId);
+    const res = await Hub.Product.Get.Basic(prodId, log);
     list.push({
       ...res,
       Id: list.length,

src/Components/ShopCart/Context.tsx

@@ -1,4 +1,6 @@
 import { Field, Label, makeStyles, tokens } from "@fluentui/react-components";
+import { useConst } from "@fluentui/react-hooks";
+import type { Logger } from "~/Helpers/Logger";
 import { ColFlex, Flex } from "~/Helpers/Styles";
 import { Hub } from "~/ShopNet";
 
@@ -31,11 +33,12 @@ export interface IPersona {
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.2.0
+ * @version 0.2.1
  */
-export function PersonaInfo() {
+export function PersonaInfo({ Log }: { Log: Logger }) {
   const style = useStyles();
-  const { data } = Hub.User.Get.useMe();
+  const log = useConst(() => Log.With("PersonaInfo"));
+  const { data } = Hub.User.Get.useMe(log);
 
   return <>
     <div className={style.person}>

src/Components/ShopCart/Persona.tsx

@@ -1,6 +1,8 @@
 import { Body1, 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";
+import { Logger } from "~/Helpers/Logger";
 import { Flex } from "~/Helpers/Styles";
 import { DelegateDataGrid } from "../DataGrid/Delegate";
 import { CartColumns } from "./Columns";
@@ -42,6 +44,8 @@ export interface ICartItem {
   Quantity: number;
 }
 
+const log = new Logger("TopNavBar", "ShopCart");
+
 /**
  * @author Aloento
  * @since 0.1.0
@@ -80,10 +84,12 @@ export function ShopCart() {
       </PopoverTrigger>
 
       <PopoverSurface>
-        <DelegateDataGrid Items={List} Columns={CartColumns} NoHeader />
+        <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>
+          <Body1>
+            {List.map(x => x.Quantity).reduce((prev, curr) => prev + curr, 0)} items in shopping cart
+          </Body1>
 
           <Confirm />
         </div>

src/Components/ShopCart/index.tsx

@@ -1,5 +1,6 @@
 import { DataGridCell, DataGridHeaderCell, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
 import { GuidImage } from "./GuidImage";
+import type { Logger } from "./Logger";
 import { Cover } from "./Styles";
 
 /**
@@ -25,12 +26,10 @@ const useStyle = makeStyles({
  * @since 0.5.0
  * @version 0.2.0
  */
-export function MakeCoverCol(Size: number) {
-  const w = { width: `${Size}px` };
+export function MakeCoverCol(size: number, log: Logger) {
+  const w = { width: `${size}px` };
 
-  return createTableColumn<{
-    Cover: string;
-  }>({
+  return createTableColumn<{ Cover: string; }>({
     columnId: "Cover",
     renderHeaderCell: () => {
       const style = useStyle();
@@ -50,16 +49,10 @@ export function MakeCoverCol(Size: number) {
             className={style.img}
             style={w}
             Guid={item.Cover}
+            Log={log}
           />
         </DataGridCell>
       )
     },
   })
 }
-
-/**
- * @author Aloento
- * @since 0.1.0
- * @version 0.2.0
- */
-export const CoverCol = MakeCoverCol(50);