Converted RegisterItemForm to TS and fix bugs, added more functionality to support the backend

4 files changed, 122 insertions, 88 deletions

diff --git a/src/components/Form/People/RegisterPersonForm.js b/src/components/Form/People/RegisterPersonForm.js
deleted file mode 100644
index 42cfb2e..0000000
--- a/src/components/Form/People/RegisterPersonForm.js
+++ /dev/null
@@ -1,87 +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
-*/
-
-// TODO: Code isn't tested properly
-// I'd be surprised if it < 10 bugs
-
-// TODO: Implement override protection
-
-import React, { useState } from "react";
-import axios from "axios";
-import "./../Form.scss";
-
-
-const RegisterPersonForm = (props) => {
-  const [newPersonName, setNewPersonName] = useState("");
-  const [newPersonPhone, setNewPersonPhone] = useState("");
-  const [newPersonEmail, setNewPersonEmail] = useState("");
-
-  const hideSelf = () => props.setVisibility(false);
-
-  const closeOnBGClicked = (event) => 
-    event.target.className === "floatingMenuBG" && hideSelf();
-
-  const postForm = (event) => {
-    event.preventDefault();
-    // TODO: show confirmation before being invisible
-    axios.post(
-      `/api/people/register/`
-      + `?name=${newPersonName}`
-      + `&phone=${newPersonPhone}`
-      + `&email=${newPersonEmail}`
-    )
-      .then((res) => {
-        console.log(res);
-        props.setVisibility(false);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  }
-
-
-  return (
-    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
-      <div className={"floatingMenu"}>
-        <div className={"formContainer"}>
-          <form className={"floatingForm"} onSubmit={postForm}>
-            <div className={"wideForm"}>
-              <label>
-                Client Name: <input className={"wideInputBox"} type="text" value={newPersonName} onChange={
-                  (event) => {
-                    setNewPersonName(event.target.value);
-                  }
-                } required />
-              </label>
-
-              <label>
-                Phone: <input className={"wideInputBox"} type="text" value={newPersonPhone} onChange={
-                  (event) => {
-                    setNewPersonPhone(event.target.value);
-                  }
-                } />
-              </label>
-
-              <label>
-                Email: <input className={"wideInputBox"} type="text" value={newPersonEmail} onChange={
-                  (event) => {
-                    setNewPersonEmail(event.target.value);
-                  }
-                } />
-              </label>
-
-              <input type="submit" value="submit"/>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default RegisterPersonForm;
diff --git a/src/components/Form/People/RegisterPersonForm.tsx b/src/components/Form/People/RegisterPersonForm.tsx
new file mode 100644
index 0000000..66de169
--- /dev/null
+++ b/src/components/Form/People/RegisterPersonForm.tsx
@@ -0,0 +1,114 @@
+/*
+ * 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";
+import { Person } from "./../../../interfaces"
+import axios from "axios";
+
+interface props {
+  setVisibility: any // this component's visibility
+  updatePeopleList: any
+}
+
+const RegisterPersonForm: React.FC<props> = (props) => {
+  const [newPersonName, setNewPersonName] = useState<string>("");
+  const [newPersonAddress, setNewPersonAddress] = useState<string>("");
+  const [newPersonEmail, setNewPersonEmail] = useState<string>("");
+  const [newPersonPhone, setNewPersonPhone] = useState<string>("");
+
+  const hideSelf = () => props.setVisibility(false);
+
+  const closeOnBGClicked = (event: any) => 
+    event.target.className === "floatingMenuBG" && hideSelf();
+
+  const postForm = (event: any) => {
+    event.preventDefault();
+
+    const newClient: Person =  {
+      Name: newPersonName,
+      Address: newPersonAddress,
+      Phone: newPersonPhone,
+      Email: newPersonEmail
+    }
+
+    // TODO: show confirmation before being invisible
+    // TODO: Implement override protection
+    axios.post(
+      `/api/people/register/` 
+      + `?name=${newClient.Name}`
+      + `&phone=${newClient.Phone}`
+      + `&email=${newClient.Email}`
+      + `&address=${newClient.Address}`
+    )
+      .then((res) => {
+        console.log(res);
+        props.updatePeopleList();
+        hideSelf();
+      })
+      .catch((err) => {
+        console.log(err);
+        alert("Something went wrong, please check the log by opening the console.")
+      });
+  }
+
+
+  return (
+    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
+      <div className={"floatingMenu"}>
+        <div className={"formContainer"}>
+          <form className={"floatingForm"} onSubmit={postForm}>
+            <div className={"wideForm"}>
+              <label>
+                Name: <input className={"wideInputBox"} 
+                  type="text" value={newPersonName} onChange={
+                    (event) => setNewPersonName(event.target.value)
+                  }
+                required />
+              </label>
+
+              <label>
+                Phone: <input className={"wideInputBox"} 
+                  type="text" value={newPersonPhone} onChange={
+                    (event) => setNewPersonPhone(event.target.value)
+                  }
+                required />
+              </label>
+
+              <label>
+                Email: <input className={"wideInputBox"} 
+                  type="text" value={newPersonEmail} onChange={
+                    (event) => setNewPersonEmail(event.target.value)
+                  }
+                required />
+              </label>
+
+              <label>
+                Address: <input className={"wideInputBox"} 
+                  type="text" value={newPersonAddress} onChange={
+                    (event) => setNewPersonAddress(event.target.value)
+                  }
+                required />
+              </label>
+            </div>
+
+            <div className={"menu"}>
+              <input type="button" value="cancel" 
+              onClick={() => hideSelf()} />
+
+              <input type="submit" value="Register/Add" 
+              disabled={newPersonName === "" ? true : false} />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RegisterPersonForm;
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index 9697a24..c9247da 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -63,7 +63,7 @@ const BillingPage: React.FC = () => {
 
       {registerPersonFormVisibility &&
         <RegisterPersonForm 
-          updateItemsList={getRegisteredItems} 
+          updatePeopleList={getRegisteredPeople} 
           setVisibility={setRegisterPersonFormVisibility}
         />
       }
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 04e7d51..1ace032 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -23,3 +23,10 @@ export interface Item {
   TotalGSTValue: number // total tax
   // category and brand
 }
+
+export interface Person {
+  Name: string
+  Address: string
+  Phone: string
+  Email: string
+}