implemented a way for AddNewItemForm and BillingPage to talk to each other and share data

3 files changed, 65 insertions, 11 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index f4b2b11..ca51651 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -21,13 +21,18 @@ const sampleData = [
   }
 ];
 
+// called when AddNewItemForm is submitted
+let addedItems = [];
+const getAddedItems = (item) => {
+  addedItems.push(item);
+}
+
+const defGSTValue = 18;
+
 const BillingPage = () => {
   return (
     <>
-      <AddNewItemForm savedItems={sampleData} />
-      <AddNewItemForm savedItems={sampleData} />
-      <AddNewItemForm savedItems={sampleData} />
-      <AddNewItemForm savedItems={sampleData} />
+      <AddNewItemForm savedItems={sampleData} addItem={getAddedItems} defGSTValue={defGSTValue}/>
     </>
   );
 }
diff --git a/src/components/BillingPage.js~ b/src/components/BillingPage.js~
new file mode 100644
index 0000000..6f5b18b
--- /dev/null
+++ b/src/components/BillingPage.js~
@@ -0,0 +1,39 @@
+import React from "react";
+import AddNewItemForm from "./Form/AddNewItemForm.js";
+
+
+const sampleData = [
+  {
+    "Model": "Kisan Chair",
+    "Description": "Very good chair",
+    "Price": 10000,
+    "Discount": 0
+  }, {
+    "Model": "Supreme Chair",
+    "Description": "Even better chair",
+    "Price": "2134983",
+    "Discount": 0
+  }, {
+    "Model": "Action Houseware",
+    "Description": "Not a chair",
+    "Price": 69,
+    "Discount": 0
+  }
+];
+
+let addedItems = [];
+const getAddedItems = (item) => {
+  console.log(item);
+  addedItems.push(item);
+  console.log(addedItems);
+}
+
+const BillingPage = () => {
+  return (
+    <>
+      <AddNewItemForm savedItems={sampleData} addItem={getAddedItems} defGSTValue={18}/>
+    </>
+  );
+}
+
+export default BillingPage;
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 5d0b224..52a5db7 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -7,7 +7,7 @@ const AddNewItemForm = (props) => {
   const [itemDescValue, setItemDescValue] = useState("");
   const [itemPriceValue, setItemPriceValue] = useState(0.00);
   const [itemDiscountValue, setItemDiscountValue] = useState(0.00);
-  const [itemGSTValue, setItemGSTValue] = useState(18);
+  const [itemGSTValue, setItemGSTValue] = useState(props.defGSTValue);
   const [itemQtyValue, setItemQtyValue] = useState(1);
 
   const enterItemNamePrompt = "Start typing here";
@@ -38,6 +38,15 @@ const AddNewItemForm = (props) => {
     }
   }
 
+  const resetAllValues = () => {
+    setItemNameValue("");
+    setItemDescValue("");
+    setItemQtyValue(0);
+    setItemPriceValue(0);
+    setItemDiscountValue(0);
+    setItemGSTValue(props.defGSTValue);
+  }
+
   return (
     <div className={"formContainer"}>
       <form className={"addNewItemForm"} onSubmit={
@@ -46,12 +55,13 @@ const AddNewItemForm = (props) => {
           const newInvoiceItem = {
             "Model": itemNameValue,
             "Description": itemDescValue,
-            "Quantity": itemQtyValue,
-            "Price": itemPriceValue,
-            "Discount": itemDiscountValue,
-            "GST": itemGSTValue
+            "Quantity": parseInt(itemQtyValue),
+            "Price": parseInt(itemPriceValue),
+            "Discount": parseInt(itemDiscountValue),
+            "GST": parseInt(itemGSTValue)
           };
-          console.log(newInvoiceItem);
+          props.addItem(newInvoiceItem);
+          resetAllValues();
         }
       }>
         <div className={"textInputs"}>
@@ -64,7 +74,7 @@ const AddNewItemForm = (props) => {
                     setItemNameValue(event.target.value);
                     setItemInfo(event.target.value.toLowerCase());
                   }
-              } >
+              }>
                 <option key={enterItemNamePrompt}>{enterItemNamePrompt}</option>
                 {savedItemNames.map(
                   (i) => {