[Back | Admin] Split OrderGetDetail - [Front] useSWR | useMe | useCmt…

…s | useTimeCache | OrderDetail | OrderDetailDrawer (#108)

* Refactor OrderDetail component and remove unused code

* Refactor Order components and fix dependencies

* The most significant changes were made to the `SignalR` class in `SignalR.ts`, where a new private static field `reqPool` was added, and a new private static method `getLocker` was introduced. The `GetVersionCache` method was also updated to use these new additions and was refactored for better functionality. In `Drawer.tsx`, the import statement was modified to remove `SkeletonItem` and the `OrderDetailDrawer` function was updated to remove the `loading` variable and the `SkeletonItem` component.

1. The import statement in `Drawer.tsx` was modified to remove `SkeletonItem` from the list of imported components from `@fluentui/react-components`. This change suggests that the `SkeletonItem` component is no longer used in this file.

2. The `OrderDetailDrawer` function in `Drawer.tsx` was updated to remove the `loading` variable from the destructuring assignment of the result of `Hub.Order.Get.useItems`. The `loading` variable was also removed from the returned JSX, along with the `SkeletonItem` component that depended on it. This change indicates that the loading state and the `SkeletonItem` component are no longer needed in the `OrderDetailDrawer` function.

3. The `SignalR` class in `SignalR.ts` was significantly updated. A new private static field `reqPool` was added, which is a `Set` of strings. This field appears to be used to manage a pool of request keys.

4. A new private static method `getLocker` was added to the `SignalR` class in `SignalR.ts`. This method seems to manage access to keys in `reqPool`.

5. The `GetVersionCache` method in the `SignalR` class was updated to use `getLocker` and `reqPool`. The method was also refactored to replace the `update` function with a `get` function, and to replace the `setCache` function with a `set` function. The `set` function now also removes the key from `reqPool` after setting the cache. The `update` calls were replaced with `get` calls. This change suggests that the method's functionality has been improved.

6. The version number in the `GetVersionCache` method's documentation comment was updated from `1.0.0` to `1.1.0`. This change indicates that the method has been updated to a new version.

* The most significant changes involve the `GetTimeCache` method in the `SignalR` class and the introduction of a new constant `index`. The `GetTimeCache` method's version annotation has been updated, and it now includes the `index` constant. This constant is set to the result of the `Index` method with `key` and `methodName` as parameters. The `getLocker` and `GetOrSet` methods are now called with `index` as a parameter. The `reqPool` property is updated to add `index` before the `Invoke` method is called and to delete `index` after the `GetOrSet` method is finished. The `Invoke` method is now called directly within the `GetOrSet` method, eliminating the need for the `db` constant. Additionally, the `@deprecated` annotation now recommends using the `useSWR` method.

List of changes:

1. The version annotation of the `GetTimeCache` method in the `SignalR` class has been updated from `0.2.0` to `0.3.0`.
2. The `@deprecated` annotation now recommends using the `useSWR` method.
3. A new constant `index` has been introduced in the `GetTimeCache` method, set to the result of the `Index` method with `key` and `methodName` as parameters.
4. The `getLocker` method is now called with `index` as a parameter.
5. The `GetOrSet` method is now called with `index` as the first parameter instead of the result of the `Index` method.
6. The `reqPool` property of `this` is updated to add `index` before the `Invoke` method is called and to delete `index` after the `GetOrSet` method is finished.
7. The `Invoke` method is now called directly within the `GetOrSet` method, removing the need for the `db` constant.

* Refactor logging and file handling methods

* Add OrderDetailDrawer component and import it in History/Detail

* The most significant changes involve the `OrderComment` function in Comment.tsx and the `Cmts` function in Get.ts. In Comment.tsx, the `useRequest` import was removed and replaced with `Hub.Order.Get.useCmts` in the `OrderComment` function. The version annotation was also updated. In Get.ts, the `Cmts` function was transformed from an asynchronous function to a hook, using `useSWR` to fetch data and `useAsyncEffect` to process it. The initial state of `res` in the `useItems` function was also changed.

1. The `useRequest` import from "ahooks" was removed from Comment.tsx. This suggests a shift away from using this library in the codebase.
2. The version annotation in the `OrderComment` function was updated from 0.1.0 to 1.0.0 in Comment.tsx, indicating a major version change.
3. The `useRequest` function was replaced with `Hub.Order.Get.useCmts` in the `OrderComment` function in Comment.tsx, suggesting a change in the way comments are fetched.
4. The initial state of `res` was changed from an empty array to undefined in the `useItems` function in Get.ts, which could affect how the function handles initial data.
5. The `Cmts` function in Get.ts was updated from an asynchronous function to a hook. This change allows the function to use `useSWR` to fetch data and `useAsyncEffect` to process the data.
6. The `Cmts` function now returns an object containing the request and the processed data, providing more information to the caller.
7. The `since` annotation in the `Cmts` function was updated from 1.3.0 to 1.3.5 in Get.ts, indicating a minor version change.

* Add OrderDetail component and update imports

* The most significant changes in the code involve the replacement of certain functions and interfaces, and the addition of new ones. The `useLiveQuery` function was imported in Append.tsx, replacing the `Status` state. The `IOrderComp` import was replaced with `IOrderRef` in Append.tsx and Comment.tsx. The `useSWR` function was imported in Drawer.tsx and the `useTimeCache` function was added to SignalR.ts and useSWR.ts. The `IOrderComp` and `IOrderRef` interfaces were added to index.tsx. The `OrderDetail` function was added to index.tsx and the `OrderInfo` function was added to Info.tsx. The `AdminOrderEntity` namespace was added to Entity.ts in Admin.

Here is a list of the changes:

1. The `useLiveQuery` function was imported in Append.tsx.
2. The `IOrderComp` import was replaced with `IOrderRef` in Append.tsx and Comment.tsx.
3. The `useSWR` function was imported in Drawer.tsx.
4. The `useTimeCache` function was added to SignalR.ts and useSWR.ts.
5. The `IOrderComp` and `IOrderRef` interfaces were added to index.tsx.
6. The `OrderDetail` function was added to index.tsx.
7. The `OrderInfo` function was added to Info.tsx.
8. The `AdminOrderEntity` namespace was added to Entity.ts in Admin.

* The most significant changes involve the replacement of the `useRequest` import and function with `useConst` and a new implementation of `useSWR` in Drawer.tsx. This new implementation uses `SignalR.Index` and `useConst`. Additionally, the `useMemory` option was added to the `useSWR` function in both Drawer.tsx and useSWR.ts. The `Status` prop was also added to the `OrderAction` component in both Drawer.tsx and Action.tsx.

Here is a list of the changes:

1. The `useRequest` import from "ahooks" was replaced with `useConst` from "@fluentui/react-hooks" in Drawer.tsx.
2. The `SignalR` import was added to Drawer.tsx.
3. The version annotation was updated from 1.1.0 to 1.2.0 in Drawer.tsx.
4. The `useSWR` function was replaced with a new implementation using `SignalR.Index` and `useConst` in Drawer.tsx.
5. The `useRequest` function was removed from Drawer.tsx.
6. The `useMemory` option was added to the `useSWR` function in Drawer.tsx.
7. The `Status` prop was added to the `OrderAction` component in Drawer.tsx.
8. The version annotation was updated from 0.1.0 to 0.2.0 in useSWR.ts.
9. The `useMemory` option was added to the `useSWR` function in useSWR.ts.
10. The `setCache` and `getCache` options were moved inside the `if (!options.useMemory)` condition in useSWR.ts.
11. The version annotation was updated from 0.1.2 to 0.2.0 in Action.tsx.
12. The `Status` prop was added to the `OrderAction` component in Action.tsx.

* The most significant changes in the code are related to the way user data is fetched and updated in the application. The use of `useSWR` in place of `useLiveQuery` in Get.tsx indicates a shift towards a more flexible and feature-rich data fetching approach. The `mutate` function, now destructured from `Hub.User.Get.useMe(log)` in Setting.tsx, suggests a change in the way user data is updated, allowing for more precise control.

1. In AvatarMenu.tsx, Info.tsx, Setting.tsx, Persona.tsx, and index.tsx, user data fetching has been modified. The result of `Hub.User.Get.useMe(log)` is now destructured to `{ data }` instead of being directly assigned to `data`.

2. The `mutate` function is now destructured from `Hub.User.Get.useMe(log)` in Setting.tsx and used to update user data after a successful request.

3. The `useLiveQuery` hook in Get.tsx has been replaced with `useSWR`, indicating a change in the data fetching approach.

4. The `useMe` function in Get.tsx no longer returns `UserGet.Me | void`, but the result of `useSWR`, consistent with the replacement of `useLiveQuery`.

5. The `UserGet.MeUpdate` function has been removed from `useUpdate` in Post.ts, suggesting a change in the way user data is updated.

These changes indicate a shift towards a more flexible and controlled approach to data fetching and updating in the application.

* The most significant changes involve the restructuring of methods in the `AdminHub` and `ShopHub` classes, and the modification of components and functions in `Drawer.tsx`, `index.tsx`, `Detail.tsx`, and `List.tsx`. The `OrderGetDetail` method in `AdminHub` class has been divided into two separate methods, `OrderGetItems` and `OrderGetCmts`, to retrieve order items and comments respectively. The `OrderGetItems` and `OrderGetCmts` methods in `ShopHub` class have been updated to change the order of the `Where` clauses.

In `Drawer.tsx`, the `AdminOrderList` component has been imported and used conditionally based on the `Admin` prop in `OrderDetailDrawer` function. The `OrderDetail` function in `index.tsx` has been updated to change the index used to set the `curr` variable based on the `Admin` prop.

The `AdminOrderDetail` function in `Detail.tsx` has been updated to remove the `Field` component wrapping the `AdminOrderList` component. The `AdminOrderList` function in `List.tsx` has been updated to wrap the `DelegateDataGrid` component with a `Field` component.

The `AdminOrderGet` class in `Get.ts` has been updated to remove the `Detail` method. The `OrderGet` class in `Get.ts` has been updated to add an optional `admin` parameter to the `useItems` and `useCmts` methods. This parameter is used to determine whether to use `AdminNet` or `this` for the `useTimeCache` method.

Lastly, the `SignalR` class in `SignalR.ts` has been updated to change the `INet` type to be a member of the `SignalR` namespace. All methods in the `SignalR` class that used `INet` have been updated to use `SignalR.INet` instead. The `GetVersionCache`, `GetTimeCache`, `useTimeCache`, `UpdateCache` methods in `SignalR` class have been updated to use `SignalR.INet` instead of `INet`.

* The most significant changes involve the addition of the `Admin` parameter to various functions and components, the importation of `AdminOrderAction` and `Shipment` components into `Drawer.tsx`, and the replacement of the `AdminOrderDetail` component with the `OrderDetail` component in `index.tsx`.

1. The `Admin` parameter was added to the `OrderComment` function in `Comment.tsx` and passed to the `useCmts` and `CommentAppend` functions. This change allows the system to differentiate between admin and non-admin users.
2. The `AdminOrderAction` and `Shipment` components were imported into `Drawer.tsx`. This change allows these components to be used within the `Drawer.tsx` file.
3. The `OrderDetailDrawer` function in `Drawer.tsx` was updated to use a ternary operator to decide whether to use `AdminHub` or `Hub` based on the `Admin` parameter. This change allows the function to dynamically choose between the two options based on the user's admin status.
4. The `OrderDetail` function in `index.tsx` was updated to include the `Admin` parameter in the `OrderDetailDrawer` component. This change allows the `OrderDetailDrawer` component to access the `Admin` parameter.
5. The `AdminOrderAction` function in `Action.tsx` was updated twice to include the `ParentLog` parameter and to use the `useConst` hook to create a new `log` constant. This change allows the function to access the `ParentLog` parameter and use it to create a new constant.
6. The `AdminOrderDetail` function and related imports were removed from `Detail.tsx`. This change simplifies the code by removing unnecessary elements.
7. The `OrderDetail` component was imported into `index.tsx` and used in place of the `AdminOrderDetail` component. This change simplifies the code by using a single component for both admin and non-admin users.

* Update CommentAppend component to use SWR and SignalR

* Update vite version to 5.1.3

SoarCraft.AwaiShop/AdminHub/Order/Get.cs

@@ -35,26 +35,28 @@ await this.Db.Orders
      * <remarks>
      * @author Aloento
      * @since 1.0.0
-     * @version 1.0.0
+     * @version 1.1.0
      * </remarks>
      */
-    public async Task<dynamic> OrderGetDetail(uint orderId) {
-        var items = await this.Db.OrderCombos
+    public async Task<dynamic> OrderGetItems(uint orderId) =>
+        await this.Db.OrderCombos
             .Where(x => x.OrderId == orderId)
             .Select(x => new {
                 x.Quantity,
                 Types = x.Combo.Types.Select(t => t.TypeId).ToArray()
             })
             .ToArrayAsync();
 
-        var cmts = await this.Db.Comments
+    /**
+     * <remarks>
+     * @author Aloento
+     * @since 1.0.0
+     * @version 1.1.0
+     * </remarks>
+     */
+    public Task<uint[]> OrderGetCmts(uint orderId) =>
+        this.Db.Comments
             .Where(x => x.OrderId == orderId)
             .Select(x => x.CommentId)
             .ToArrayAsync();
-
-        return new {
-            Items = items,
-            Comments = cmts
-        };
-    }
 }

SoarCraft.AwaiShop/Hub/Order/Get.cs

@@ -32,7 +32,8 @@ await this.Db.Orders
     [Authorize]
     public async Task<dynamic> OrderGetItems(uint orderId) =>
         await this.Db.OrderCombos
-            .Where(x => x.OrderId == orderId && x.Order.UserId == this.UserId)
+            .Where(x => x.Order.UserId == this.UserId)
+            .Where(x => x.OrderId == orderId)
             .Select(x => new {
                 x.Quantity,
                 Types = x.Combo.Types.Select(t => t.TypeId).ToArray()
@@ -49,7 +50,8 @@ await this.Db.OrderCombos
     [Authorize]
     public Task<uint[]> OrderGetCmts(uint orderId) =>
         this.Db.Comments
-            .Where(x => x.OrderId == orderId && x.Order.UserId == this.UserId)
+            .Where(x => x.Order.UserId == this.UserId)
+            .Where(x => x.OrderId == orderId)
             .Select(x => x.CommentId)
             .ToArrayAsync();
 }

package.json

@@ -57,6 +57,6 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1"
+    "vite": "^5.1.3"
   }
 }