switching to typescript

4 files changed, 111 insertions, 76 deletions

diff --git a/src/components/Form/Document/MetaInfoForm.tsx b/src/components/Form/Document/MetaInfoForm.tsx
new file mode 100644
index 0000000..da484ab
--- /dev/null
+++ b/src/components/Form/Document/MetaInfoForm.tsx
@@ -0,0 +1,38 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+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>
+      </form>
+    </div>
+  );
+}
+
+export default MetaInfoForm;
diff --git a/src/components/Form/Items/AddNewItemForm.js b/src/components/Form/Items/AddNewItemForm.tsx
index 37167fd..283d779 100644
--- a/src/components/Form/Items/AddNewItemForm.js
+++ b/src/components/Form/Items/AddNewItemForm.tsx
@@ -8,27 +8,37 @@
 
 import React, { useState } from "react";
 import "./../Form.scss";
+import { Item } from "../../../interfaces";
+
+interface props {
+  savedItems: Item[]
+  addItem: (item: Item) => void
+  defGSTValue: number,
+  registerItemFormVisibility: any,
+  registerPersonFormVisibility: any
+}
 
-const AddNewItemForm = (props) => {
-  const [itemNameValue, setItemNameValue] = useState("");
-  const [itemDescValue, setItemDescValue] = useState("");
-  const [itemPriceValue, setItemPriceValue] = useState(0.00);
-  const [itemDiscountValue, setItemDiscountValue] = useState(0.00);
-  const [itemGSTValue, setItemGSTValue] = useState(props.defGSTValue);
-  const [itemQtyValue, setItemQtyValue] = useState(1);
-  const [itemHSNValue, setItemHSNValue] = useState(0);
+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);
+  const [itemDiscountValue, setItemDiscountValue] = useState<number>(0.00);
+  const [itemGSTValue, setItemGSTValue] = useState<number>(props.defGSTValue);
+  const [itemQTYValue, setItemQTYValue] = useState<number>(1);
+  const [itemHSNValue, setItemHSNValue] = useState<number>(0);
 
   // to be handled by DocumentInfo
   // check if client is in same state
   // and apply cgst+sgst or igst accordingly
-  const inState = true;
+  // const inState: boolean = true;
 
-  const enterItemNamePrompt = "start typing here";
-  const registerItemPrompt = "add new";
-  const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
+  const enterItemNamePrompt: string = "start typing here";
+  const registerItemPrompt: string = "add new";
+  const emptyItemNames: any[] = [enterItemNamePrompt, registerItemPrompt, ""];
 
   // set description and price if match found in DB
-  const applyItemInfo = (i) => {
+  const applyItemInfo = (i: any) => {
     setItemDescValue(i.Description);
     setItemPriceValue(i.Price);
     setItemHSNValue(i.HSN);
@@ -36,7 +46,7 @@ const AddNewItemForm = (props) => {
   }
 
   // check the item name value and do stuff accordingly
-  const setItemInfo = (itemName) =>
+  const setItemInfo = (itemName: any) =>
     (props.savedItems === null || itemName === registerItemPrompt)
       ? props.registerItemFormVisibility(true)
       : props.savedItems.some((i) => 
@@ -45,7 +55,7 @@ const AddNewItemForm = (props) => {
   const resetAllValues = () => {
     setItemNameValue("");
     setItemDescValue("");
-    setItemQtyValue(1);
+    setItemQTYValue(1);
     setItemPriceValue(1);
     setItemDiscountValue(0);
     setItemHSNValue(0);
@@ -57,22 +67,28 @@ const AddNewItemForm = (props) => {
       <form className={"threePaneForm"} onSubmit={
         (event) => {
           event.preventDefault();
-          const newInvoiceItem = {
-            "Model": itemNameValue,
-            "Description": itemDescValue,
-            "Quantity": parseInt(itemQtyValue),
-            "UnitPrice": parseFloat(itemPriceValue),
-            "TotalPrice": parseFloat(itemPriceValue * itemQtyValue),
-            "Discount": parseInt(itemDiscountValue),
-            "HSN": parseInt(itemHSNValue),
+
+          // TODO: maybe move calculation of GST and Discount here
+          const newInvoiceItem: Item = {
+            Model: itemNameValue,
+            Description: itemDescValue,
+            Quantity: itemQTYValue,
+            UnitPrice: itemPriceValue,
+            TotalValue: (itemPriceValue * itemQTYValue),
+            Discount: itemDiscountValue,
+            HSN: itemHSNValue,
 
             // this also checks if igst applies or not
-            "sgst": inState ? parseInt(itemGSTValue) / 2 : "",
-            "cgst": inState ? parseInt(itemGSTValue) / 2 : "",
-            "igst": inState ? "" :  parseInt(itemGSTValue)
-          };
-          console.log(newInvoiceItem);
+            // TODO: fix this
+            sgst: 0,
+            cgst: 0,
+            igst: 0
+            // sgst: inState ? parseInt(itemGSTValue) / 2 : "",
+            // cgst: inState ? parseInt(itemGSTValue) / 2 : "",
+            // igst: inState ? "" :  parseInt(itemGSTValue)
+          }
           props.addItem(newInvoiceItem);
+
           resetAllValues();
         }
       }>
@@ -111,11 +127,11 @@ const AddNewItemForm = (props) => {
         <div className={"widePane formPane"}>
           <label>
             Quantity: 
-              <input className={"smallInputBox"} type="number" min="1" value={itemQtyValue} 
+              <input className={"smallInputBox"} type="number" min="1" value={itemQTYValue} 
                 onInput={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemQtyValue(value);
+                  (event: React.FormEvent<HTMLInputElement>) => {
+                    const value: number = parseInt(event.currentTarget.value);
+                    setItemQTYValue(value);
                   }
                 } 
               required />
@@ -124,9 +140,9 @@ const AddNewItemForm = (props) => {
           <label>
             Price: 
               <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
+                onInput={
+                  (event: React.FormEvent<HTMLInputElement>) => {
+                    const value: number = parseFloat(event.currentTarget.value);
                     setItemPriceValue(value);
                   }
                 } 
@@ -136,21 +152,21 @@ const AddNewItemForm = (props) => {
           <label>
             Discount: 
               <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
+                onInput={
+                  (event: React.FormEvent<HTMLInputElement>) => {
+                    const value: number = parseInt(event.currentTarget.value);
                     setItemDiscountValue(value);
                   }
-                }
+                } 
               />
           </label>
 
           <label>
             HSN: 
               <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
+                onInput={
+                  (event: React.FormEvent<HTMLInputElement>) => {
+                    const value: number = parseInt(event.currentTarget.value);
                     setItemHSNValue(value);
                   }
                 } 
@@ -160,9 +176,9 @@ const AddNewItemForm = (props) => {
           <label>
             GST: 
               <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
+                onInput={
+                  (event: React.FormEvent<HTMLInputElement>) => {
+                    const value: number = parseInt(event.currentTarget.value);
                     setItemGSTValue(value);
                   }
                 } 
@@ -188,10 +204,10 @@ const AddNewItemForm = (props) => {
           <input type="submit" value="add" 
             disabled={ 
               (emptyItemNames.includes(itemNameValue)
-              || itemQtyValue <= 0
+              || itemQTYValue <= 0
               || itemPriceValue <= 0
               || itemGSTValue <= 0
-              ) ? "disabled" : ""
+              ) ? true : false
             }
           />
         </div>
diff --git a/src/components/Form/MetaInfoForm.js b/src/components/Form/MetaInfoForm.js
deleted file mode 100644
index 5d9e3c3..0000000
--- a/src/components/Form/MetaInfoForm.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * OpenBills - Self hosted browser app to generate and keep track of simple invoices
- * Version - 0
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
- *
- * Copyright (c) 2021 Vidhu Kant Sharma
-*/
-
-import React /*, { useState }*/ from "react";
-import "./Form.scss";
-
-const MetaInfoForm = () => {
-  return (
-    <div className={"MetaInfoForm"}>
-      <h1>This section of the app is missing</h1>
-      <p>Please look at this waifu instead.</p>
-      <img height="300" width="230" src="https://i.redd.it/te8tbxl1r9v61.jpg" alt="Shit where is the waifu"></img>
-    </div>
-  )
-}
-
-export default MetaInfoForm;
diff --git a/src/components/Pages/BillingPage.js b/src/components/Pages/BillingPage.tsx
index abb7b7d..9697a24 100644
--- a/src/components/Pages/BillingPage.js
+++ b/src/components/Pages/BillingPage.tsx
@@ -9,23 +9,25 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 
+import { Item } from "../../interfaces";
+
 import AddNewItemForm from "./../Form/Items/AddNewItemForm";
 import RegisterItemForm from "./../Form/Items/RegisterItemForm";
 
 import RegisterPersonForm from "./../Form/People/RegisterPersonForm";
 
 import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
-import MetaInfoForm from "./../Form/MetaInfoForm";
+import MetaInfoForm from "./../Form/Document/MetaInfoForm";
 
 import ItemsDisplay from "./../Display/ItemsDisplay";
 import SummaryDisplay from "./../Display/SummaryDisplay"; 
 
-const BillingPage = () => {
-  const [savedItems, getSavedItems] = useState([]);
+const BillingPage: React.FC = () => {
+  const [savedItems, getSavedItems] = useState<Item[]>([]);
   const [savedPeople, getSavedPeople] = useState([]);
-  const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState(false);
-  const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState(false);
-  const [items, setItems] = useState([]);
+  const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState<boolean>(false);
+  const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState<boolean>(false);
+  const [items, setItems] = useState<Item[]>([]);
 
   const getRegisteredItems = () =>
     axios.get(`/api/items/get-all`)
@@ -42,11 +44,12 @@ const BillingPage = () => {
     getRegisteredItems();
     getRegisteredPeople();
   }, []);
+
   // TODO: to be handled by backend
   const defGSTValue = 18;
 
   // update the items from AddNewItemForm
-  const getItems = (item) => setItems([...items, item]);
+  const getItems = (item: Item) => setItems([...items, item]);
 
   return (
     <>