Ported SelectClientForm to TS

3 files changed, 16 insertions, 10 deletions

diff --git a/src/components/Form/People/SelectClientForm.js b/src/components/Form/People/SelectClientForm.tsx
index 49aa4ed..373c387 100644
--- a/src/components/Form/People/SelectClientForm.js
+++ b/src/components/Form/People/SelectClientForm.tsx
@@ -7,26 +7,31 @@
 */
 
 import React, { useState } from "react";
+import { Person } from "./../../../interfaces";
 import "./../Form.scss";
 
 import ClientInfoDisplay from "../../Display/ClientInfoDisplay";
 
-const SelectClientForm = (props) => {
-  const [selectedClient, setSelectedClient] = useState({});
+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) => {
-    return `${i.Name} - ${i.Address.slice(0, 20).concat(i.Address.length < 20 ? "" : "")}`;
-  }
+  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) =>
+  const setClientInfo = (e: string) =>
     (props.savedPeople === null || e === registerPrompt)
       ? alert("coming soon") // toggle registerPersonPrompt visibility
       : props.savedPeople.some((i) =>
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
 }