From 7f64269194103cc7436041b59676cd96e4a099a0 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sat, 26 Jun 2021 22:53:24 +0530
Subject: Ported SelectClientForm to TS

---
 src/components/Form/People/SelectClientForm.js  | 62 -----------------------
 src/components/Form/People/SelectClientForm.tsx | 67 +++++++++++++++++++++++++
 src/components/Pages/BillingPage.tsx            |  4 +-
 src/interfaces.ts                               |  5 +-
 4 files changed, 72 insertions(+), 66 deletions(-)
 delete mode 100644 src/components/Form/People/SelectClientForm.js
 create mode 100644 src/components/Form/People/SelectClientForm.tsx

diff --git a/src/components/Form/People/SelectClientForm.js b/src/components/Form/People/SelectClientForm.js
deleted file mode 100644
index 49aa4ed..0000000
--- a/src/components/Form/People/SelectClientForm.js
+++ /dev/null
@@ -1,62 +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";
-
-import ClientInfoDisplay from "../../Display/ClientInfoDisplay";
-
-const SelectClientForm = (props) => {
-  const [selectedClient, setSelectedClient] = useState({});
-
-  const enterValuePrompt = "start typing here";
-  const registerPrompt = "add new";
-
-  // TODO: make it use email if no address found, shorten the name too
-  // in short, make formatter flexible
-  const formatter = (i) => {
-    return `${i.Name} - ${i.Address.slice(0, 20).concat(i.Address.length < 20 ? "" : "")}`;
-  }
-
-  // TODO: if no client found at least clear the display
-  // do this in other components too
-  // check the client name value and do stuff accordingly
-  const setClientInfo = (e) =>
-    (props.savedPeople === null || e === registerPrompt)
-      ? alert("coming soon") // toggle registerPersonPrompt visibility
-      : props.savedPeople.some((i) =>
-        e === formatter(i) && setSelectedClient(i))
-  
-  return (
-    <div className={"DocumentInfoChild"}>
-      <label>
-        Client Name:
-          <select
-            className={"selectInputBox"}
-            value={selectedClient.Name} 
-            onChange={
-              (event) => {
-                setClientInfo(event.target.value);
-              }
-          }>
-            <option key={enterValuePrompt}>{enterValuePrompt}</option>
-
-            {props.savedPeople === null || props.savedPeople.map(
-              (i) => <option key={i.ID}>{formatter(i)}</option>
-            )}
-
-            <option key={registerPrompt}>{registerPrompt}</option>
-          </select>
-      </label>
-
-      <ClientInfoDisplay client={selectedClient}/>
-    </div>
-  )
-}
-
-export default SelectClientForm;
diff --git a/src/components/Form/People/SelectClientForm.tsx b/src/components/Form/People/SelectClientForm.tsx
new file mode 100644
index 0000000..373c387
--- /dev/null
+++ b/src/components/Form/People/SelectClientForm.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 { Person } from "./../../../interfaces";
+import "./../Form.scss";
+
+import ClientInfoDisplay from "../../Display/ClientInfoDisplay";
+
+interface Props {
+  savedPeople: Person[]
+}
+
+const SelectClientForm: React.FC<Props> = (props) => {
+  // TODO: fix the default selectedClient
+  const [selectedClient, setSelectedClient] = useState<Person>({Name: "pp", Address: "pp"});
+
+  const enterValuePrompt = "start typing here";
+  const registerPrompt = "add new";
+
+  // TODO: make it use email if no address found, shorten the name too
+  // in short, make formatter flexible
+  const formatter = (i: Person): string =>
+    `${i.Name} - ${i.Address.slice(0, 20).concat(i.Address.length < 20 ? "" : "")}`;
+
+  // TODO: if no client found at least clear the display
+  // do this in other components too
+  // check the client name value and do stuff accordingly
+  const setClientInfo = (e: string) =>
+    (props.savedPeople === null || e === registerPrompt)
+      ? alert("coming soon") // toggle registerPersonPrompt visibility
+      : props.savedPeople.some((i) =>
+        e === formatter(i) && setSelectedClient(i))
+  
+  return (
+    <div className={"DocumentInfoChild"}>
+      <label>
+        Client Name:
+          <select
+            className={"selectInputBox"}
+            value={selectedClient.Name} 
+            onChange={
+              (event) => {
+                setClientInfo(event.target.value);
+              }
+          }>
+            <option key={enterValuePrompt}>{enterValuePrompt}</option>
+
+            {props.savedPeople === null || props.savedPeople.map(
+              (i) => <option key={i.ID}>{formatter(i)}</option>
+            )}
+
+            <option key={registerPrompt}>{registerPrompt}</option>
+          </select>
+      </label>
+
+      <ClientInfoDisplay client={selectedClient}/>
+    </div>
+  )
+}
+
+export default SelectClientForm;
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index c9247da..bf37bd3 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -9,7 +9,7 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 
-import { Item } from "../../interfaces";
+import { Item, Person } from "../../interfaces";
 
 import AddNewItemForm from "./../Form/Items/AddNewItemForm";
 import RegisterItemForm from "./../Form/Items/RegisterItemForm";
@@ -24,7 +24,7 @@ import SummaryDisplay from "./../Display/SummaryDisplay";
 
 const BillingPage: React.FC = () => {
   const [savedItems, getSavedItems] = useState<Item[]>([]);
-  const [savedPeople, getSavedPeople] = useState([]);
+  const [savedPeople, getSavedPeople] = useState<Person[]>([]);
   const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState<boolean>(false);
   const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState<boolean>(false);
   const [items, setItems] = useState<Item[]>([]);
diff --git a/src/interfaces.ts b/src/interfaces.ts
index e85ef29..49eee91 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -35,8 +35,9 @@ export interface NewItem {
 }
 
 export interface Person {
+  ID?: number
   Name: string
   Address: string
-  Phone: string
-  Email: string
+  Phone?: string
+  Email?: string
 }
-- 
cgit v1.2.3