updating the items list on runtime + fixed at least 3 bugs emerged due to that

2 files changed, 24 insertions, 14 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index c2aa158..0542d2e 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -13,10 +13,9 @@ import AddNewItemForm from "./Form/AddNewItemForm";
 import RegisterItemForm from "./Form/RegisterItemForm";
 import MetaInfoForm from "./Form/MetaInfoForm";
 import ItemsDisplay from "./Display/ItemsDisplay";
-import SummaryDisplay from "./Display/SummaryDisplay";
-
-const BillingPage = () => {
+import SummaryDisplay from "./Display/SummaryDisplay"; const BillingPage = () => {
   const [savedItems, getSavedItems] = useState([]);
+  const [registerFormVisibility, setRegisterFormVisibility] = useState(false);
 
   const getRegisteredItems = () => {
     axios.get(`/api/items`)
@@ -46,8 +45,18 @@ const BillingPage = () => {
 
   return (
     <>
-      <AddNewItemForm savedItems={savedItems} addItem={getItems} defGSTValue={defGSTValue}/>
-      <RegisterItemForm updateItemsList={getRegisteredItems}/>
+      <AddNewItemForm savedItems={savedItems} 
+        addItem={getItems} 
+        defGSTValue={defGSTValue}
+        registerFormVisibility={setRegisterFormVisibility}
+      />
+
+      { registerFormVisibility &&
+        <RegisterItemForm 
+          updateItemsList={getRegisteredItems} 
+          setVisibility={setRegisterFormVisibility}/>
+      }
+
       <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
       <div className={"BillingPageFlex"}>
         <MetaInfoForm/>
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 877e9f4..9286ba7 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -21,16 +21,16 @@ const AddNewItemForm = (props) => {
 
   const enterItemNamePrompt = "start typing here";
   const registerItemPrompt = "add new";
-
   const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
 
   // Extract the model names from savedItems
-  const savedItems = props.savedItems;
-  let savedItemNames = [];
-  for (let i = 0; i < savedItems.length; i++) {
-    savedItemNames.push(savedItems[i].Model);
+  let savedItemNames= [];
+  if (props.savedItems !== []) {
+    for (let i = 0; i < props.savedItems.length; i++) {
+      savedItemNames.push(props.savedItems[i].Model);
+    }
   }
-
+  
   // set description and price
   // when item is entered
   const setItemInfo = (itemName) => {
@@ -156,9 +156,10 @@ const AddNewItemForm = (props) => {
         </div>
 
         <div className={"menuButtons"}>
-          <input type="button" value="Register New Item" onClick={() => {
-            alert("this shit refuses to work")
-          }} />
+          <input type="button" 
+            value="Register New Item" 
+            onClick={() => props.registerFormVisibility(true)}
+          />
 
           <input type="button" value="Placeholder1" />
           <input type="button" value="Placeholder2" />