Multiple minor bug fixes and convert more compnents to TS

3 files changed, 49 insertions, 93 deletions

diff --git a/src/components/Form/Document/MetaInfoForm.tsx b/src/components/Form/Document/MetaInfoForm.tsx
index da484ab..bcddad6 100644
--- a/src/components/Form/Document/MetaInfoForm.tsx
+++ b/src/components/Form/Document/MetaInfoForm.tsx
@@ -9,24 +9,7 @@
 import React from "react";
 import "./../Form.scss";
 
-interface Transport {
-  name:       string,
-  vehicleNum: string, 
-  method:     string, // shipment method
-  gstin:      string,
-  builty:     string // goods receipt
-}
-
 const MetaInfoForm: React.FC = () => {
-  // don't push it to github!
-  const sampleTransport: Transport = {
-    name: "Own Vehicle",
-    vehicleNum: "HR61C9220",
-    method: "By Road",
-    gstin: "",
-    builty: ""
-  }
-  console.log(sampleTransport);
   return (
     <div className={"MetaInfoForm"}>
       <form>
diff --git a/src/components/Form/Items/AddNewItemForm.tsx b/src/components/Form/Items/AddNewItemForm.tsx
index 283d779..ae64b06 100644
--- a/src/components/Form/Items/AddNewItemForm.tsx
+++ b/src/components/Form/Items/AddNewItemForm.tsx
@@ -13,13 +13,12 @@ import { Item } from "../../../interfaces";
 interface props {
   savedItems: Item[]
   addItem: (item: Item) => void
-  defGSTValue: number,
-  registerItemFormVisibility: any,
+  defGSTValue: number
+  registerItemFormVisibility: any
   registerPersonFormVisibility: any
 }
 
 const AddNewItemForm: React.FC<props> = (props) => {
-  console.log(props)
   const [itemNameValue, setItemNameValue] = useState<string>("");
   const [itemDescValue, setItemDescValue] = useState<string>("");
   const [itemPriceValue, setItemPriceValue] = useState<number>(0.00);
@@ -35,18 +34,19 @@ const AddNewItemForm: React.FC<props> = (props) => {
 
   const enterItemNamePrompt: string = "start typing here";
   const registerItemPrompt: string = "add new";
-  const emptyItemNames: any[] = [enterItemNamePrompt, registerItemPrompt, ""];
+  const emptyItemNames: string[] = [enterItemNamePrompt, registerItemPrompt, ""];
 
   // set description and price if match found in DB
   const applyItemInfo = (i: any) => {
+    console.log(i)
     setItemDescValue(i.Description);
-    setItemPriceValue(i.Price);
+    setItemPriceValue(i.UnitPrice);
     setItemHSNValue(i.HSN);
-    setItemGSTValue(i.GST);
+    setItemGSTValue(i.TotalGST);
   }
 
   // check the item name value and do stuff accordingly
-  const setItemInfo = (itemName: any) =>
+  const setItemInfo = (itemName: string) =>
     (props.savedItems === null || itemName === registerItemPrompt)
       ? props.registerItemFormVisibility(true)
       : props.savedItems.some((i) => 
@@ -77,12 +77,13 @@ const AddNewItemForm: React.FC<props> = (props) => {
             TotalValue: (itemPriceValue * itemQTYValue),
             Discount: itemDiscountValue,
             HSN: itemHSNValue,
+            TotalGST: itemGSTValue,
 
             // this also checks if igst applies or not
             // TODO: fix this
-            sgst: 0,
-            cgst: 0,
-            igst: 0
+            SGST: 0,
+            CGST: 0,
+            IGST: 0
             // sgst: inState ? parseInt(itemGSTValue) / 2 : "",
             // cgst: inState ? parseInt(itemGSTValue) / 2 : "",
             // igst: inState ? "" :  parseInt(itemGSTValue)
@@ -115,11 +116,7 @@ const AddNewItemForm: React.FC<props> = (props) => {
           <label>
             Description:
               <input className={"wideInputBox"} type="text" value={itemDescValue} 
-                onChange={
-                  (event) => {
-                    setItemDescValue(event.target.value);
-                  }
-                } 
+                onChange={(event) => setItemDescValue(event.target.value)} 
               />
           </label>
         </div>
@@ -129,10 +126,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             Quantity: 
               <input className={"smallInputBox"} type="number" min="1" value={itemQTYValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemQTYValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemQTYValue(parseInt(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -141,10 +136,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             Price: 
               <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseFloat(event.currentTarget.value);
-                    setItemPriceValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemPriceValue(parseFloat(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -153,10 +146,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             Discount: 
               <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemDiscountValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemDiscountValue(parseInt(event.currentTarget.value))
                 } 
               />
           </label>
@@ -165,10 +156,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             HSN: 
               <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemHSNValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemHSNValue(parseInt(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -177,10 +166,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             GST: 
               <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemGSTValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemGSTValue(parseInt(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -197,10 +184,6 @@ const AddNewItemForm: React.FC<props> = (props) => {
             onClick={() => props.registerItemFormVisibility(true)}
           />
 
-          <input type="button" value="Placeholder1" />
-          <input type="button" value="Placeholder2" />
-          <input type="submit" value="Force Add" />
-
           <input type="submit" value="add" 
             disabled={ 
               (emptyItemNames.includes(itemNameValue)
@@ -213,7 +196,7 @@ const AddNewItemForm: React.FC<props> = (props) => {
         </div>
       </form>
     </div>
-  )
+  );
 }
 
 export default AddNewItemForm;
diff --git a/src/components/Form/Items/RegisterItemForm.js b/src/components/Form/Items/RegisterItemForm.tsx
index 6ad4c1f..dc48d3c 100644
--- a/src/components/Form/Items/RegisterItemForm.js
+++ b/src/components/Form/Items/RegisterItemForm.tsx
@@ -15,25 +15,29 @@ import React, { useState } from "react";
 import axios from "axios";
 import "./../Form.scss";
 
+interface props {
+  defGSTValue: number
+  setVisibility: any // this component's visibility
+  updateItemsList: () => Promise<void>
+}
 
-const RegisterItemForm = (props) => {
-  const [newItemNameValue, setNewItemNameValue] = useState("");
-  const [newItemDescValue, setNewItemDescValue] = useState("");
-  const [newItemPriceValue, setNewItemPriceValue] = useState(0.00);
-  const [newItemHSNValue, setNewItemHSNValue] = useState("");
-  const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue);
+const RegisterItemForm: React.FC<props> = (props) => {
+  const [newItemNameValue, setNewItemNameValue] = useState<string>("");
+  const [newItemDescValue, setNewItemDescValue] = useState<string>("");
+  const [newItemPriceValue, setNewItemPriceValue] = useState<number>(0.00);
+  const [newItemHSNValue, setNewItemHSNValue] = useState<number>();
+  const [newItemGSTValue, setNewItemGSTValue] = useState<number>(props.defGSTValue);
   // const [newItemBrandValue, setNewItemBrandValue] = useState("");
   // const [newItemTypeValue, setNewItemTypeValue] = useState("");
 
   const hideSelf = () => props.setVisibility(false);
 
-  const closeOnBGClicked = (event) => 
+  const closeOnBGClicked = (event: any) => 
     event.target.className === "floatingMenuBG" && hideSelf();
 
-  const postForm = (event) => {
+  const postForm = (event: any) => {
     event.preventDefault();
-
-  // TODO: show confirmation before being invisible
+    // TODO: show confirmation before being invisible
     axios.post(
       `/api/items/register/`
       + `?model=${newItemNameValue}`
@@ -44,7 +48,7 @@ const RegisterItemForm = (props) => {
     )
       .then((res) => {
         console.log(res);
-        props.setVisibility(false);
+        hideSelf();
         props.updateItemsList();
       })
       .catch((err) => {
@@ -63,17 +67,13 @@ const RegisterItemForm = (props) => {
               <div className={"widePane formPane"}>
                 <label>
                   Item/Service: <input className={"wideInputBox"} type="text" value={newItemNameValue} onChange={
-                    (event) => {
-                      setNewItemNameValue(event.target.value);
-                    }
+                    (event) => setNewItemNameValue(event.target.value)
                   } required />
                 </label>
 
                 <label>
                   Description: <input className={"wideInputBox"} type="text" value={newItemDescValue} onChange={
-                    (event) => {
-                      setNewItemDescValue(event.target.value);
-                    }
+                    (event) => setNewItemDescValue(event.target.value)
                   } />
                 </label>
 
@@ -81,48 +81,38 @@ const RegisterItemForm = (props) => {
               <div className={"widePane formPane"}>
                 <label>
                   Price: <input className={"smallInputBox"} type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={
-                    (event) => {
-                      const value = event.target.value;
-                      setNewItemPriceValue(value);
-                    }
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setNewItemPriceValue(parseInt(event.currentTarget.value))
                   } />
                 </label>
 
                 <label>
                   HSN: <input className={"smallInputBox"} type="number" min="0" value={newItemHSNValue} onChange={
-                    (event) => {
-                      const value = event.target.value;
-                      setNewItemHSNValue(value);
-                    }
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setNewItemHSNValue(parseInt(event.currentTarget.value))
                   } />
                 </label>
 
                 <label>
                   GST: <input className={"smallInputBox"} type="number" min="0" value={newItemGSTValue} onChange={
-                    (event) => {
-                      const value = event.target.value;
-                      setNewItemGSTValue(value);
-                    }
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setNewItemGSTValue(parseInt(event.currentTarget.value))
                   } />
                 </label>
-            </div>
+              </div>
             </div>
 
             <div className={"menu"}>
               <input
                 type="button"
                 value="cancel"
-                onClick={
-                  () => {
-                    props.setVisibility(false);
-                  }
-                }
+                onClick={() => hideSelf()}
               />
 
               <input
                 type="submit"
                 value="Register/Add"
-                disabled={newItemNameValue !== "" ? "" : "disabled"}
+                disabled={newItemNameValue === "" ? true : false}
               />
             </div>
           </form>