styled the RegisterItemForm properly and introduced like 20 bugs

5 files changed, 108 insertions, 65 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index fc09694..c2aa158 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -16,7 +16,7 @@ import ItemsDisplay from "./Display/ItemsDisplay";
 import SummaryDisplay from "./Display/SummaryDisplay";
 
 const BillingPage = () => {
-  const [savedItems, getSavedItems] = useState([])
+  const [savedItems, getSavedItems] = useState([]);
 
   const getRegisteredItems = () => {
     axios.get(`/api/items`)
@@ -47,7 +47,7 @@ const BillingPage = () => {
   return (
     <>
       <AddNewItemForm savedItems={savedItems} addItem={getItems} defGSTValue={defGSTValue}/>
-      <RegisterItemForm/>
+      <RegisterItemForm updateItemsList={getRegisteredItems}/>
       <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
       <div className={"BillingPageFlex"}>
         <MetaInfoForm/>
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 5028af2..877e9f4 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -157,11 +157,13 @@ const AddNewItemForm = (props) => {
 
         <div className={"menuButtons"}>
           <input type="button" value="Register New Item" onClick={() => {
-            alert("Coming Soon")
+            alert("this shit refuses to work")
           }} />
+
           <input type="button" value="Placeholder1" />
           <input type="button" value="Placeholder2" />
           <input type="submit" value="Force Add" />
+
           <input 
             type="submit" 
             value="add" 
diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index ce94de4..1340151 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -19,6 +19,17 @@ $altLink: brown;
 $defShadow: 0px 0px 4px #232627;
 */
 /* Inspired by Dracula */
+/* hide arrows in numericInputs */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0; }
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield; }
+
 .formContainer {
   /*border: 1px solid pink;*/
   /*padding: 2rem;*/
@@ -72,17 +83,6 @@ label {
   scrollbar-width: none;
   /* Firefox */ }
 
-/* hide arrows in numericInputs */
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0; }
-
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield; }
-
 .addNewItemForm label {
   display: flex;
   justify-content: space-between;
@@ -110,6 +110,15 @@ input[type=number] {
   margin: 1rem auto;
   justify-content: space-around; }
 
+.RegisterItemFormContainer .menu {
+  position: absolute;
+  right: 1rem;
+  bottom: 0.25rem; }
+
+.RegisterItemFormContainer input[type=submit],
+.RegisterItemFormContainer input[type=button] {
+  margin: 1rem; }
+
 .MetaInfoForm {
   width: 60%; }
 
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index f7a2d2e..601b8e9 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -119,6 +119,16 @@ label {
   justify-content: space-around;
 }
 
+.RegisterItemFormContainer .menu {
+  position: absolute;
+  right: 1rem; bottom: 0.25rem;
+}
+
+.RegisterItemFormContainer input[type=submit], 
+.RegisterItemFormContainer input[type=button] {
+  margin: 1rem;
+}
+
 .MetaInfoForm {
   width: 60%;
 }
diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js
index 1b38c8d..ddc3eff 100644
--- a/src/components/Form/RegisterItemForm.js
+++ b/src/components/Form/RegisterItemForm.js
@@ -7,16 +7,19 @@
 */
 
 // TODO: Code isn't tested properly
-// I'd be surprised if it has no bugs
+// I'd be surprised if it < 10 bugs
+
+// TODO: Implement override protection
 
 import React, { useState } from "react";
 import axios from "axios";
 import "./Form.css";
 
 
-const RegisterItemForm = () => {
+const RegisterItemForm = (props) => {
   // show/hide this component
-  const [visibility, setVisibility] = useState(true)// useState(props.visibility);
+  // experimental
+  const [visibility, setVisibility] = useState(true);
 
   const [newItemNameValue, setNewItemNameValue] = useState("");
   const [newItemDescValue, setNewItemDescValue] = useState("");
@@ -29,9 +32,13 @@ const RegisterItemForm = () => {
 
   return (
     <div className={"formContainer RegisterItemFormContainer"} style={{display: visibility ? "fixed" : "none"}}>
-      <form className={"addNewItemForm RegisterItemForm"} onSubmit={
+      <form onSubmit={
           (event) => {
             event.preventDefault();
+
+            // experimental
+            // make sure it shows confirmation
+            // before hiding itself
             setVisibility(false);
 
             axios.post(`/api/items/?model=${newItemNameValue}&desc=${newItemDescValue}&price=${newItemPriceValue}&hsn=${newItemHSNValue}&gst=${newItemGSTValue}`)
@@ -41,60 +48,75 @@ const RegisterItemForm = () => {
               .catch((err) => {
                 console.log(err);
               });
+            props.updateItemsList();
           }
         }>
-        <div className={"textInputs"}>
-          <label>
-            Item/Service: <input type="text" value={newItemNameValue} onChange={
-              (event) => {
-                setNewItemNameValue(event.target.value);
-              }
-            } required />
-          </label>
+        <div className={"addNewItemForm RegisterItemForm"}>
+          <div className={"textInputs"}>
+            <label>
+              Item/Service: <input type="text" value={newItemNameValue} onChange={
+                (event) => {
+                  setNewItemNameValue(event.target.value);
+                }
+              } required />
+            </label>
 
-          <label>
-            Description: <input type="text" value={newItemDescValue} onChange={
-              (event) => {
-                setNewItemDescValue(event.target.value);
-              }
-            } />
-          </label>
+            <label>
+              Description: <input type="text" value={newItemDescValue} onChange={
+                (event) => {
+                  setNewItemDescValue(event.target.value);
+                }
+              } />
+            </label>
+          </div>
+
+          <div className={"numericInputs"}>
+            <label>
+              Price: <input type="number" min="1.00" step="0.001" value={newItemPriceValue} onChange={
+                (event) => {
+                  const value = event.target.value;
+                  setNewItemPriceValue(value);
+                }
+              } />
+            </label>
+
+            <label>
+              HSN: <input type="number" min="0" value={newItemHSNValue} onChange={
+                (event) => {
+                  const value = event.target.value;
+                  setNewItemHSNValue(value);
+                }
+              } />
+            </label>
+
+            <label>
+              GST: <input type="number" min="0" value={newItemGSTValue} onChange={
+                (event) => {
+                  const value = event.target.value;
+                  setNewItemGSTValue(value);
+                }
+              } />
+            </label>
+          </div>
         </div>
 
-        <div className={"numericInputs"}>
-          <label>
-            Price: <input type="number" min="1.00" step="0.001" value={newItemPriceValue} onChange={
-              (event) => {
-                const value = event.target.value;
-                setNewItemPriceValue(value);
-              }
-            } />
-          </label>
-
-          <label>
-            HSN: <input type="number" min="0" value={newItemHSNValue} onChange={
-              (event) => {
-                const value = event.target.value;
-                setNewItemHSNValue(value);
-              }
-            } />
-          </label>
-
-          <label>
-            GST: <input type="number" min="0" value={newItemGSTValue} onChange={
-              (event) => {
-                const value = event.target.value;
-                setNewItemGSTValue(value);
+        <div className={"menu"}>
+          <input
+            type="button"
+            value="cancel"
+            onClick={
+              () => {
+                setVisibility(false);
               }
-            } />
-          </label>
-        </div>
+            }
+          />
 
-        <input
-          type="submit"
-          value="Register/Add"
-          disabled={newItemNameValue !== "" ? "" : "disabled"}
-        />
+          <input
+            type="submit"
+            value="Register/Add"
+            disabled={newItemNameValue !== "" ? "" : "disabled"}
+          />
+        </div>
       </form>
     </div>
   );