fixed some errors in SelectClientForm

2 files changed, 23 insertions, 11 deletions

diff --git a/src/components/Display/ClientInfoDisplay.js b/src/components/Display/ClientInfoDisplay.js
index 34f001b..7eb46d2 100644
--- a/src/components/Display/ClientInfoDisplay.js
+++ b/src/components/Display/ClientInfoDisplay.js
@@ -10,10 +10,20 @@ import React from "react";
 import "./Display.scss";
 
 const ClientInfoDisplay = (props) => {
+  //console.log(props.client)
   return (
-    <div>
-      Client Name: {props.client.Name}
-    </div>
+    <table>
+      <tbody>
+        <tr>
+          <td>Client Name:</td> 
+          <td>{props.client.Name}</td>
+        </tr>
+        <tr>
+          <td>Client Address:</td>
+          <td>{props.client.Address}</td>
+        </tr>
+      </tbody>
+    </table>
   );
 }
 
diff --git a/src/components/Form/People/SelectClientForm.js b/src/components/Form/People/SelectClientForm.js
index 4c1e056..49aa4ed 100644
--- a/src/components/Form/People/SelectClientForm.js
+++ b/src/components/Form/People/SelectClientForm.js
@@ -12,33 +12,35 @@ import "./../Form.scss";
 import ClientInfoDisplay from "../../Display/ClientInfoDisplay";
 
 const SelectClientForm = (props) => {
-  const [clientName, setClientName] = useState();
   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 = (clientName) =>
-    (props.savedPeople === null || clientName === registerPrompt)
+  const setClientInfo = (e) =>
+    (props.savedPeople === null || e === registerPrompt)
       ? alert("coming soon") // toggle registerPersonPrompt visibility
-      : props.savedPeople.some((i) => 
-        clientName === formatter(i) && setSelectedClient(i))
-
+      : props.savedPeople.some((i) =>
+        e === formatter(i) && setSelectedClient(i))
+  
   return (
     <div className={"DocumentInfoChild"}>
       <label>
         Client Name:
           <select
             className={"selectInputBox"}
-            value={clientName} 
+            value={selectedClient.Name} 
             onChange={
               (event) => {
-                setClientName(event.target.value);
                 setClientInfo(event.target.value);
               }
           }>