⛲ feat Users can search a drug name listing clients that take that drug

src/components/Pages/ClientPage.tsx

@@ -163,7 +163,7 @@ const ClientPage = (props: IProps): JSX.Element | null => {
 
                 <Form.Control
                     autoFocus
-                    id="cient-page-search-text"
+                    id="client-page-search-text"
                     isValid={searchIsValid}
                     onChange={(changeEvent) => setSearchText(changeEvent.target.value)}
                     onKeyDown={(keyboardEvent: React.KeyboardEvent<HTMLElement>) => {

src/components/Pages/Grids/RxLookupGrid.tsx

@@ -0,0 +1,34 @@
+import Table from 'react-bootstrap/Table';
+import React from 'reactn';
+import {randomString} from 'utility/common';
+
+interface IProps {
+    lookupList: {Drug: string; LastName: string; FirstName: string}[];
+}
+
+const RxLookupGrid = (props: IProps) => {
+    const lookupList = props.lookupList;
+
+    return (
+        <Table bordered size="sm" striped>
+            <tr>
+                <th>Client</th>
+                <th>Drug</th>
+            </tr>
+            <tbody>
+                {lookupList.map((rxItem, index) => {
+                    const key = index || randomString();
+
+                    return (
+                        <tr id={key.toString()} key={`rx-lookup-grid-${key}`}>
+                            <td>{rxItem.FirstName.trim() + ' ' + rxItem.LastName.trim()}</td>
+                            <td>{rxItem.Drug}</td>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </Table>
+    );
+};
+
+export default RxLookupGrid;

src/components/Pages/RxLookup.tsx

@@ -1,5 +1,6 @@
-import Button from 'react-bootstrap/Button';
-import React, {useGlobal, useState} from 'reactn';
+import RxLookupGrid from 'components/Pages/Grids/RxLookupGrid';
+import Form from 'react-bootstrap/Form';
+import React, {useEffect, useGlobal, useState} from 'reactn';
 
 interface IProps {
     activeTabKey: string;
@@ -10,42 +11,61 @@ const RxLookup = (props: IProps) => {
     const [providers] = useGlobal('providers');
     const [clientList] = useGlobal('clientList');
     const medicineProvider = providers.medicineProvider;
-    const [rxResult, setRxResult] = useState<unknown>(null);
-
-    const findRx = async (drugName: string) => {
-        const result = [];
-        const medicineSearchCriteria = {
-            where: [['Drug', 'LIKE', drugName + '%']],
-            orderBy: [['ResidentId']]
-        };
-        const meds = await medicineProvider.search(medicineSearchCriteria);
-
-        for (const m of meds) {
-            if (m.ResidentId) {
-                const client = clientList.find((c) => c.Id === m.ResidentId);
-
-                if (client?.Id) {
-                    // eslint-disable-next-line no-console
-                    console.log('client', client);
-                    result.push({firstName: client.FirstName, lastName: client.LastName, Drug: m.Drug});
+    const [rxResult, setRxResult] = useState<{Drug: string; LastName: string; FirstName: string}[] | []>([]);
+    const [searchText, setSearchText] = useState('');
+
+    useEffect(() => {
+        if (searchText.length > 1) {
+            const findRx = async (drugName: string) => {
+                const result = [] as {Drug: string; LastName: string; FirstName: string}[];
+                const medicineSearchCriteria = {
+                    where: [['Drug', 'LIKE', drugName + '%']],
+                    orderBy: [['ResidentId']]
+                };
+                const meds = await medicineProvider.search(medicineSearchCriteria);
+
+                for (const m of meds) {
+                    if (m.ResidentId) {
+                        const client = clientList.find((c) => c.Id === m.ResidentId);
+
+                        if (client?.Id) {
+                            // eslint-disable-next-line no-console
+                            console.log('client', client);
+                            result.push({FirstName: client.FirstName, LastName: client.LastName, Drug: m.Drug});
+                        }
+                    }
                 }
-            }
+                setRxResult(result);
+            };
+            findRx(searchText);
+        } else {
+            setRxResult([]);
         }
-        return result;
-    };
+    }, [clientList, medicineProvider, searchText]);
 
     if (activeTabKey !== 'rx-lookup') return null;
 
-    const handleClick = async () => {
-        const rxFound = await findRx('Hy');
-        setRxResult(rxFound);
-    };
-
     return (
-        <>
-            <Button onClick={() => handleClick()}>GO</Button>
-            <p>{JSON.stringify(rxResult, null, '\t')}</p>
-        </>
+        <Form>
+            <Form.Control
+                autoFocus
+                id="rx-look-up-search-box"
+                onChange={(changeEvent) => setSearchText(changeEvent.target.value)}
+                onKeyDown={(keyboardEvent: React.KeyboardEvent<HTMLElement>) => {
+                    if (keyboardEvent.key === 'Enter') keyboardEvent.preventDefault();
+                }}
+                placeholder="Drug name"
+                style={{width: '350px'}}
+                type="search"
+                value={searchText}
+            />
+
+            {rxResult.length > 0 && (
+                <div className="my-3">
+                    <RxLookupGrid lookupList={rxResult} />{' '}
+                </div>
+            )}
+        </Form>
     );
 };
 

src/types/RecordTypes.ts

@@ -10,7 +10,6 @@ export type ClientRecord = {
     Nickname: string;
     Notes: string;
     HMIS: number;
-    EnrollmentId: number;
     Updated?: null | Date;
     UserId?: number;
     deleted_at?: null | Date;