From 54c416ad74bcd96a6ff2c0624c6d963bc5fcdc95 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Mon, 6 Mar 2023 00:38:20 +0800
Subject: [PATCH] Separated colored renderer for stocks in Inventory.tsx

---
 .../InventoryPage/IsNumber/IsNumber.tsx       |  8 +++
 .../StockRenderer/StockRenderer.tsx           | 63 ++++++++++++++++
 src/routes/Inventory/Inventory.tsx            | 71 +------------------
 3 files changed, 74 insertions(+), 68 deletions(-)
 create mode 100644 src/Components/InventoryPage/IsNumber/IsNumber.tsx
 create mode 100644 src/Components/InventoryPage/StockRenderer/StockRenderer.tsx

diff --git a/src/Components/InventoryPage/IsNumber/IsNumber.tsx b/src/Components/InventoryPage/IsNumber/IsNumber.tsx
new file mode 100644
index 0000000..aca2478
--- /dev/null
+++ b/src/Components/InventoryPage/IsNumber/IsNumber.tsx
@@ -0,0 +1,8 @@
+export default function IsNumber(number: string) {
+  const re = /^[0-9\b]+$/;
+  if (re.test(number)) {
+    return true;
+  } else {
+    return false;
+  }
+}
diff --git a/src/Components/InventoryPage/StockRenderer/StockRenderer.tsx b/src/Components/InventoryPage/StockRenderer/StockRenderer.tsx
new file mode 100644
index 0000000..e81b975
--- /dev/null
+++ b/src/Components/InventoryPage/StockRenderer/StockRenderer.tsx
@@ -0,0 +1,63 @@
+import { TableCell } from "@mui/material";
+import { useState } from "react";
+import styles from "../../../styles";
+import IsNumber from "../IsNumber/IsNumber";
+
+export default function StockRenderer(in_stock: number) {
+  const [stock, setStock] = useState(in_stock);
+  if (stock >= 0 && stock <= 3) {
+    return (
+      <TableCell>
+        <input
+          style={{
+            ...styles.text_red,
+            ...{ border: "none", background: "none" },
+            ...styles.text_S,
+          }}
+          value={stock}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            if (IsNumber(e.target.value)) {
+              setStock(parseInt(e.target.value));
+            }
+          }}
+        />
+      </TableCell>
+    );
+  } else if (stock >= 4 && stock < 9) {
+    return (
+      <TableCell>
+        <input
+          style={{
+            ...styles.text_orange,
+            ...{ border: "none", background: "none" },
+            ...styles.text_S,
+          }}
+          value={stock}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            if (IsNumber(e.target.value)) {
+              setStock(parseInt(e.target.value));
+            }
+          }}
+        />
+      </TableCell>
+    );
+  } else {
+    return (
+      <TableCell>
+        <input
+          style={{
+            ...styles.text_green,
+            ...{ border: "none", background: "none" },
+            ...styles.text_S,
+          }}
+          value={stock}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            if (IsNumber(e.target.value)) {
+              setStock(parseInt(e.target.value));
+            }
+          }}
+        />
+      </TableCell>
+    );
+  }
+}
diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx
index badcc55..5c2ae15 100644
--- a/src/routes/Inventory/Inventory.tsx
+++ b/src/routes/Inventory/Inventory.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "../../styles";
 import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
 import {
@@ -10,74 +10,9 @@ import {
   TableRow,
 } from "@mui/material";
 import { SampleInventoryData } from "../../Components/SampleData/SampleData";
+import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRenderer";
 
 export default function Inventory() {
-  function is_number(number: string) {
-    const re = /^[0-9\b]+$/;
-    if (re.test(number)) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-  function StockRender(in_stock: number) {
-    const [stock, setStock] = useState(in_stock);
-    if (stock >= 0 && stock <= 3) {
-      return (
-        <TableCell>
-          <input
-            style={{
-              ...styles.text_red,
-              ...{ border: "none", background: "none" },
-              ...styles.text_S,
-            }}
-            value={stock}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              if (is_number(e.target.value) === true) {
-                setStock(parseInt(e.target.value));
-              }
-            }}
-          />
-        </TableCell>
-      );
-    } else if (stock >= 4 && stock < 9) {
-      return (
-        <TableCell>
-          <input
-            style={{
-              ...styles.text_orange,
-              ...{ border: "none", background: "none" },
-              ...styles.text_S,
-            }}
-            value={stock}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              if (is_number(e.target.value) === true) {
-                setStock(parseInt(e.target.value));
-              }
-            }}
-          />
-        </TableCell>
-      );
-    } else {
-      return (
-        <TableCell>
-          <input
-            style={{
-              ...styles.text_green,
-              ...{ border: "none", background: "none" },
-              ...styles.text_S,
-            }}
-            value={stock}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              if (is_number(e.target.value) === true) {
-                setStock(parseInt(e.target.value));
-              }
-            }}
-          />
-        </TableCell>
-      );
-    }
-  }
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.content_row}>
@@ -116,7 +51,7 @@ export default function Inventory() {
                 <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
                   {row.name}
                 </TableCell>
-                {StockRender(row.in_stock)}
+                {StockRenderer(row.in_stock)}
               </TableRow>
             ))}
           </TableBody>