The most significant changes in the code involve the parsing of the v…

…alue `val` from the `SpinButton` component and the conditions for returning early from functions. These changes were made in several files and functions, including `Columns.tsx`, `useLimit.ts`, `index.tsx`, `Detail.tsx`, `New.tsx`, and `Quantity.tsx`. Additionally, the `useLimit` function now returns an additional value, `count`, which is used in the `ProductQuantity` function.

Here are the changes in detail:

1. In `Columns.tsx`, the parsing of `val` from the `SpinButton` component was updated. The early return condition in the `onChange` function was also updated to account for a disabled state and the current quantity of the item.
2. The `useLimit` function in `useLimit.ts` was updated to return an additional value, `count`. The early return conditions were updated to include this new value.
3. In `index.tsx`, the `AdminOrder` function was updated to change the condition for running a function based on the parsed value from a component.
4. The `lodash-es` import was removed from `Detail.tsx` and `New.tsx` as it was no longer needed.
5. The `AdminProductComboDetail` and `AdminProductNewCombo` functions in `Detail.tsx` and `New.tsx` respectively were updated to change the parsing of `val` from the `SpinButton` component and the condition for setting the stock state.
6. The `ProductQuantity` function in `Quantity.tsx` was updated to use the new `count` value returned from the `useLimit` function and to change the parsing of `val` from the `SpinButton` component. The early return condition in the `onChange` function was also updated to account for this new value.

src/Components/ShopCart/Columns.tsx

@@ -56,12 +56,9 @@ const columns: TableColumnDefinition<ICartItem>[] = [
             max={max}
             value={item.Quantity}
             onChange={(_, v) => {
-              if (dis)
-                return;
-
-              const val = v.value || parseInt(v.displayValue!);
+              const val = parseInt(v.value || v.displayValue as any);
 
-              if ((!v.value && isNaN(val)) || val < 1 || val > max || val === item.Quantity)
+              if (isNaN(val) || val < 1 || val > max || (dis && val >= item.Quantity))
                 return;
 
               item.Quantity = val;

src/Helpers/useLimit.ts

@@ -5,9 +5,9 @@ import { Hub } from "~/ShopNet";
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.2.0
+ * @version 0.3.0
  */
-export function useLimit(prodId: number): [boolean, number] {
+export function useLimit(prodId: number): [boolean, number, number] {
   const { List } = useShopCart();
   const { data } = useRequest(() => Hub.Product.Get.Limit(prodId));
 
@@ -19,8 +19,8 @@ export function useLimit(prodId: number): [boolean, number] {
       count += i.Quantity;
 
     if (count >= limit)
-      return [true, limit];
+      return [true, limit, count];
   }
 
-  return [false, limit];
+  return [false, limit, count];
 }

src/Pages/Admin/Order/index.tsx

@@ -126,7 +126,7 @@ export function AdminOrder() {
         onChange={(_, data) => {
           const value = parseInt(data.value || data.displayValue as any);
 
-          if (!Number.isNaN(value) && value && value <= page)
+          if (!isNaN(value) && value && value <= page)
             run(value);
         }}
       />

src/Pages/Admin/Product/Combo/Detail.tsx

@@ -1,7 +1,6 @@
 import { Button, Combobox, DataGridCell, DataGridHeaderCell, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Label, Option, SpinButton, TableColumnDefinition, Toast, ToastTitle, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
 import { DismissRegular, EditRegular } from "@fluentui/react-icons";
 import { useBoolean, useRequest } from "ahooks";
-import { isInteger } from "lodash-es";
 import { useState } from "react";
 import { DelegateDataGrid } from "~/Components/DataGrid";
 import { Logger } from "~/Helpers/Logger";
@@ -89,7 +88,7 @@ const log = new Logger("Admin", "Product", "Detail", "Combo", "Detail");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.2.2
+ * @version 0.2.3
  */
 export function AdminProductComboDetail({ Id, ProdId, Combo, Stock, Refresh }: IDetailComboItem) {
   const [open, { toggle }] = useBoolean();
@@ -159,14 +158,13 @@ export function AdminProductComboDetail({ Id, ProdId, Combo, Stock, Refresh }: I
             <div className={useStyles().body}>
               <Label>Stock</Label>
 
-              <SpinButton value={stock} min={0} onChange={(_, x) => {
-                if (x.value)
-                  setStock(x.value);
-                else if (x.displayValue) {
-                  const i = parseInt(x.displayValue);
-                  if (isInteger(i))
-                    setStock(i);
-                }
+              <SpinButton value={stock} min={0} onChange={(_, v) => {
+                const val = parseInt(v.value || v.displayValue as any);
+
+                if (isNaN(val) || val < 0)
+                  return;
+
+                setStock(val);
               }} />
 
               <Button appearance="primary" onClick={() => run(Id, combo, stock)}>Submit</Button>

src/Pages/Admin/Product/Combo/New.tsx

@@ -1,7 +1,6 @@
 import { Button, Combobox, DataGridCell, DataGridHeaderCell, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Label, Option, SpinButton, TableColumnDefinition, Toast, ToastTitle, createTableColumn, makeStyles, tokens } from "@fluentui/react-components";
 import { AddRegular, DismissRegular } from "@fluentui/react-icons";
 import { useBoolean, useRequest } from "ahooks";
-import { isInteger } from "lodash-es";
 import { useState } from "react";
 import { DelegateDataGrid } from "~/Components/DataGrid";
 import { Logger } from "~/Helpers/Logger";
@@ -73,7 +72,7 @@ const log = new Logger("Admin", "Product", "Detail", "Combo", "NewCombo");
 /**
  * @author Aloento
  * @since 0.5.0
- * @version 0.2.2
+ * @version 0.2.3
  */
 export function AdminProductNewCombo({ ProdId, Refresh }: { ProdId: number; Refresh: () => void }) {
   const [open, { toggle }] = useBoolean();
@@ -147,14 +146,13 @@ export function AdminProductNewCombo({ ProdId, Refresh }: { ProdId: number; Refr
             <div className={useStyles().body}>
               <Label>Stock</Label>
 
-              <SpinButton value={stock} min={0} onChange={(_, x) => {
-                if (x.value)
-                  setStock(x.value);
-                else if (x.displayValue) {
-                  const i = parseInt(x.displayValue);
-                  if (isInteger(i))
-                    setStock(i);
-                }
+              <SpinButton value={stock} min={0} onChange={(_, v) => {
+                const val = parseInt(v.value || v.displayValue as any);
+
+                if (isNaN(val) || val < 0)
+                  return;
+
+                setStock(val);
               }} />
 
               <Button appearance="primary" onClick={() => run(ProdId, combo, stock)}>Create</Button>

src/Pages/Product/Quantity.tsx

@@ -32,13 +32,13 @@ const useStyles = makeStyles({
 /**
  * @author Aloento
  * @since 1.2.0
- * @version 0.3.0
+ * @version 0.4.0
  */
 export function ProductQuantity({ Id }: { Id: number; }) {
   const style = useStyles();
   const { Combo } = useRadioGroup();
 
-  const [_, max] = useLimit(Id);
+  const [_, max, count] = useLimit(Id);
   const [quantity, setQuantity] = useState(1);
 
   return (
@@ -59,12 +59,12 @@ export function ProductQuantity({ Id }: { Id: number; }) {
           appearance="underline"
           value={quantity}
           min={1}
-          max={max}
+          max={max - count}
           disabled={!Combo?.Stock}
           onChange={(_, v) => {
-            const val = v.value || parseInt(v.displayValue!);
+            const val = parseInt(v.value || v.displayValue as any);
 
-            if ((!v.value && isNaN(val)) || val < 1 || val > max || val === quantity)
+            if (isNaN(val) || val < 1 || val > max - count)
               return;
 
             setQuantity(val);