From d1127706cbc64ab1791e2cc42c166d5cd89cbec7 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Thu, 30 Nov 2023 22:03:40 -0800
Subject: [PATCH 1/5] Cleaned up Junk and Rambles in RequestBox

moved component and initialized directory

search initialized
---
 .../PatientSearchBar/PatientSearchBar.js      | 173 ++++++++++++++++++
 .../PatientSearchBarStyle.css                 |   3 +
 src/components/RequestBox/RequestBox.js       |  61 +++---
 src/components/SMARTBox/smart.css             |   2 +-
 4 files changed, 207 insertions(+), 32 deletions(-)
 create mode 100644 src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
 create mode 100644 src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css

diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
new file mode 100644
index 00000000..ab5f34e6
--- /dev/null
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
@@ -0,0 +1,173 @@
+import React, { Component, useState, useEffect } from 'react';
+import './PatientSearchBarStyle.css';
+import { Typography, Box, TextField, Autocomplete } from '@mui/material';
+import PatientBox from '../../SMARTBox/PatientBox';
+import { defaultValues } from '../../../util/data';
+import { PrefetchTemplate } from '../../../PrefetchTemplate';
+
+
+
+export default function PatientSearchBar(props) {
+    if(!props.searchablePatients){
+        props.searchablePatients = {};
+    };
+
+    const [options] = useState(defaultValues);
+
+    const [input, setInput] = useState('');
+    // const [list, setList] = useState([]);
+    const [listOfPatients, setListOfPatients] = useState([]);
+
+    const handleInput = (e) => {
+        setInput(e.target.value.toLowerCase());
+    };
+
+    // useEffect(() => {
+    //     setList(listOfPatients);
+    // }, []);
+
+    useEffect(() => {
+        const newList = props.searchablePatients.map((patient) => ({
+            id: patient.id,
+            name: getName(patient),
+            // name: patient.name
+        }));
+        setListOfPatients([newList]);
+
+    }, [props.searchablePatients]);
+
+
+    function getName(patient) {
+        if (patient.name) {
+            return (patient.name[0].given[0]) + ' ' + (patient.name[0].family);
+        }
+        return '';
+    }
+
+    function patientSearchBar() {
+        return (
+            <Box className='App'
+                sx={{
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-evenly',
+                }}>
+
+                    <Autocomplete
+                        disablePortal
+                        id='combo-box-demo'
+                        options={listOfPatients[0].map(item => item.name)}
+
+                        renderInput={(params) => <TextField {...params}
+                            label='Search for a patient'
+                            onSelect={handleInput}
+                            sx={{
+                                top: -10,
+                                width: '100%',
+                                margin: '10px auto',
+                            }} />}
+                    />
+
+
+                {displayFilteredPatientList(input, listOfPatients[0])}
+            </Box>
+        );
+    }
+
+
+
+    function displayFilteredPatientList(searchstring, listOfPatients) {
+        const filteredListOfPatients = listOfPatients.filter((element) => {
+            if (searchstring === '') {
+                return element;
+            }
+            else{
+                return element.name.toLowerCase().includes(searchstring);
+            }
+        });
+
+        return (
+            <Box>
+
+                {/* {console.log('should be here')}
+                {console.log(JSON.stringify(listOfPatients))}
+                {console.log('______')} */}
+
+
+                {filteredListOfPatients.map((patient) => {
+                    return (
+                        <div key={patient.id}>
+                            <h1>{patient.name}</h1>
+                            <h3>{patient.id} </h3>
+                            {/* <h4>{JSON.stringify(patient)}</h4>
+                            <h5>{JSON.stringify(listOfPatients[0].id)}</h5> */}
+                        </div>
+                    );
+                })}
+
+
+                {props.searchablePatients.map(patient => {
+                    return (
+                        <div key={patient.id}>
+                            <PatientBox
+                                key={patient.id}
+                                patient={patient}
+                                client={props.client}
+                                callback={props.callback}
+                                callbackList={props.callbackList}
+                                callbackMap={props.callbackMap}
+                                updatePrefetchCallback={PrefetchTemplate.generateQueries} // this is causing issues :/
+                                clearCallback={props.clearCallback}
+                                ehrUrl={props.ehrUrl} // is this used?
+                                options={options}
+                                responseExpirationDays={props.responseExpirationDays}
+                                defaultUser={props.defaultUser}
+                            />
+                        </div>
+                    );
+                })}
+            </Box>
+        );
+    }
+
+
+    return (
+        <div>
+            {listOfPatients[0] ? patientSearchBar() : 'loading...'}
+
+
+
+            {/* Example need to delete
+            {props.searchablePatients.map(patient => {
+                return (
+                    <Box>
+                        <h1>{patient.id}  {getName(patient)}</h1>
+                    </Box>
+                );
+            })} */}
+
+
+
+        </div>
+    );
+
+
+}
+
+const top100Films = [
+    { label: 'The Shawshank Redemption', year: 1994 },
+    { label: 'The Godfather', year: 1972 },
+    { label: 'The Godfather: Part II', year: 1974 },
+    { label: 'The Dark Knight', year: 2008 },
+    { label: '12 Angry Men', year: 1957 },
+    { label: "Schindler's List", year: 1993 },
+    { label: 'Pulp Fiction', year: 1994 },
+];
+
+const patientData = [
+    { id: 'pat1234', name: 'one' },
+    { id: 'pat017', name: 'two' },
+    { id: 'pat036', name: 'three' },
+];
\ No newline at end of file
diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css b/src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css
new file mode 100644
index 00000000..a424583e
--- /dev/null
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css
@@ -0,0 +1,3 @@
+.patients {
+ padding:5px;
+}
\ No newline at end of file
diff --git a/src/components/RequestBox/RequestBox.js b/src/components/RequestBox/RequestBox.js
index fa9f78c5..85fd42f9 100644
--- a/src/components/RequestBox/RequestBox.js
+++ b/src/components/RequestBox/RequestBox.js
@@ -1,15 +1,15 @@
+import PersonIcon from '@mui/icons-material/Person';
+import { Box, Button, ButtonGroup, Modal } from '@mui/material';
+import _ from 'lodash';
 import React, { Component } from 'react';
-import FHIR from 'fhirclient';
-import PatientBox from '../SMARTBox/PatientBox';
-import { types, defaultValues, shortNameMap } from '../../util/data';
-import { getAge } from '../../util/fhir';
 import buildNewRxRequest from '../../util/buildScript.2017071.js';
-import _ from 'lodash';
-import './request.css';
-import { PrefetchTemplate } from '../../PrefetchTemplate';
+import { defaultValues, shortNameMap, types } from '../../util/data';
+import { getAge } from '../../util/fhir';
 import { retrieveLaunchContext } from '../../util/util';
-import PersonIcon from '@mui/icons-material/Person';
-import { Button, ButtonGroup, Modal, Box } from '@mui/material';
+import './request.css';
+
+import PatientSearchBar from './PatientSearchBar/PatientSearchBar.js';
+
 const style = {
   position: 'absolute',
   top: '50%',
@@ -25,7 +25,7 @@ const style = {
   borderBottom: '2px solid black',
   boxShadow: 24,
   p: 4,
-  padding: '0px'
+  padding: '50px'
 };
 export default class RequestBox extends Component {
   constructor(props) {
@@ -60,7 +60,7 @@ export default class RequestBox extends Component {
     this.submitOrderSign(request);
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
   exitSmart = () => {
     this.setState({ openPatient: false });
@@ -155,6 +155,7 @@ export default class RequestBox extends Component {
   };
 
   getPatients = () => {
+    //passes and sets patients when the "select patient is clicked"
     this.setState({ openPatient: true });
     this.props.client
       .request('Patient?_sort=identifier&_count=12', { flat: true })
@@ -330,7 +331,7 @@ export default class RequestBox extends Component {
     if (!userId) {
       console.log(
         'Practitioner not populated from prefetch, using default from config: ' +
-          this.props.defaultUser
+        this.props.defaultUser
       );
       userId = this.props.defaultUser;
     }
@@ -424,7 +425,7 @@ export default class RequestBox extends Component {
     console.log(newRx);
     const serializer = new XMLSerializer();
 
-    // send the message to the prescriber
+    // send the message to the Pharmacy
     this.props.consoleLog('Sending Rx to PIMS', types.info);
     fetch(this.props.pimsUrl, {
       method: 'POST',
@@ -464,33 +465,31 @@ export default class RequestBox extends Component {
     return (
       <div>
         <div className="request">
+
           <Modal
             open={this.state.openPatient}
             onClose={this.exitSmart}
             aria-labelledby="modal-modal-title"
             aria-describedby="modal-modal-description"
           >
+            {/* Patient selection pop up and search */}
             <Box sx={style}>
               {this.state.patientList instanceof Error
                 ? this.renderError()
-                : this.state.patientList.map(patient => {
-                    return (
-                      <PatientBox
-                        key={patient.id}
-                        patient={patient}
-                        client={this.props.client}
-                        callback={this.updateStateElement}
-                        callbackList={this.updateStateList}
-                        callbackMap={this.updateStateMap}
-                        updatePrefetchCallback={PrefetchTemplate.generateQueries}
-                        clearCallback={this.clearState}
-                        ehrUrl={this.props.ehrUrl}
-                        options={this.state.codeValues}
-                        responseExpirationDays={this.props.responseExpirationDays}
-                        defaultUser={this.props.defaultUser}
-                      />
-                    );
-                  })}
+                : <PatientSearchBar
+                  getPatients = {this.getPatients}
+                  searchablePatients={this.state.patientList}
+                  client={this.props.client}
+                  callback={this.updateStateElement}
+                  callbackList={this.updateStateList}
+                  callbackMap={this.updateStateMap}
+                  // updatePrefetchCallback={PrefetchTemplate.generateQueries}
+                  clearCallback={this.clearState}
+                  ehrUrl={this.props.ehrUrl} // is this used?
+                  options={this.state.codeValues}
+                  responseExpirationDays={this.props.responseExpirationDays}
+                  defaultUser={this.props.defaultUser}
+                />}
             </Box>
           </Modal>
           <div>
diff --git a/src/components/SMARTBox/smart.css b/src/components/SMARTBox/smart.css
index 8e981b91..69043330 100644
--- a/src/components/SMARTBox/smart.css
+++ b/src/components/SMARTBox/smart.css
@@ -17,7 +17,7 @@ html{
 }
 
 .patient-box{
-    border-bottom: 2px solid black;
+    padding-bottom:10px;
 }
 .patient-header{
     color:white;

From a202a025222733466f6226f72704c77a0cd5e435 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Fri, 1 Dec 2023 04:36:55 -0800
Subject: [PATCH 2/5] working search

---
 .../PatientSearchBar/PatientSearchBar.js           | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
index ab5f34e6..ef4bd737 100644
--- a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
@@ -44,6 +44,12 @@ export default function PatientSearchBar(props) {
         return '';
     }
 
+    // function findPatientByID(id){
+    //     return props.searchablePatients.filter(
+    //         function(data){ return props.searchablePatients.id == id}
+    //     );
+    // }
+
     function patientSearchBar() {
         return (
             <Box className='App'
@@ -76,7 +82,7 @@ export default function PatientSearchBar(props) {
         );
     }
 
-
+    
 
     function displayFilteredPatientList(searchstring, listOfPatients) {
         const filteredListOfPatients = listOfPatients.filter((element) => {
@@ -101,6 +107,8 @@ export default function PatientSearchBar(props) {
                         <div key={patient.id}>
                             <h1>{patient.name}</h1>
                             <h3>{patient.id} </h3>
+                            {/* <h4>{props.searchablePatients[0]}</h4> */}
+                            {/* <h4>{patient}</h4> */}
                             {/* <h4>{JSON.stringify(patient)}</h4>
                             <h5>{JSON.stringify(listOfPatients[0].id)}</h5> */}
                         </div>
@@ -108,12 +116,12 @@ export default function PatientSearchBar(props) {
                 })}
 
 
-                {props.searchablePatients.map(patient => {
+                {filteredListOfPatients.map(patient => {
                     return (
                         <div key={patient.id}>
                             <PatientBox
                                 key={patient.id}
-                                patient={patient}
+                                patient={props.searchablePatients.find(item => item.id === patient.id)}
                                 client={props.client}
                                 callback={props.callback}
                                 callbackList={props.callbackList}

From a4c3a31da89673d2234696f05a9badbe8b54add9 Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Fri, 1 Dec 2023 04:52:14 -0800
Subject: [PATCH 3/5] fixed styling and removed unessisary code

---
 .../PatientSearchBar/PatientSearchBar.js      | 127 +++---------------
 .../PatientSearchBarStyle.css                 |  17 ++-
 2 files changed, 36 insertions(+), 108 deletions(-)

diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
index ef4bd737..b8a44775 100644
--- a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
@@ -1,31 +1,19 @@
-import React, { Component, useState, useEffect } from 'react';
-import './PatientSearchBarStyle.css';
-import { Typography, Box, TextField, Autocomplete } from '@mui/material';
-import PatientBox from '../../SMARTBox/PatientBox';
-import { defaultValues } from '../../../util/data';
+import { Autocomplete, Box, TextField } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 import { PrefetchTemplate } from '../../../PrefetchTemplate';
-
-
+import { defaultValues } from '../../../util/data';
+import PatientBox from '../../SMARTBox/PatientBox';
+import './PatientSearchBarStyle.css';
 
 export default function PatientSearchBar(props) {
-    if(!props.searchablePatients){
-        props.searchablePatients = {};
-    };
-
     const [options] = useState(defaultValues);
-
     const [input, setInput] = useState('');
-    // const [list, setList] = useState([]);
     const [listOfPatients, setListOfPatients] = useState([]);
 
     const handleInput = (e) => {
         setInput(e.target.value.toLowerCase());
     };
 
-    // useEffect(() => {
-    //     setList(listOfPatients);
-    // }, []);
-
     useEffect(() => {
         const newList = props.searchablePatients.map((patient) => ({
             id: patient.id,
@@ -36,7 +24,6 @@ export default function PatientSearchBar(props) {
 
     }, [props.searchablePatients]);
 
-
     function getName(patient) {
         if (patient.name) {
             return (patient.name[0].given[0]) + ' ' + (patient.name[0].family);
@@ -44,78 +31,37 @@ export default function PatientSearchBar(props) {
         return '';
     }
 
-    // function findPatientByID(id){
-    //     return props.searchablePatients.filter(
-    //         function(data){ return props.searchablePatients.id == id}
-    //     );
-    // }
-
     function patientSearchBar() {
         return (
-            <Box className='App'
-                sx={{
-                    width: '100%',
-                    height: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-evenly',
-                }}>
-
-                    <Autocomplete
-                        disablePortal
-                        id='combo-box-demo'
-                        options={listOfPatients[0].map(item => item.name)}
-
-                        renderInput={(params) => <TextField {...params}
-                            label='Search for a patient'
-                            onSelect={handleInput}
-                            sx={{
-                                top: -10,
-                                width: '100%',
-                                margin: '10px auto',
-                            }} />}
-                    />
-
+            <Box className='search-box-containe'>
+                <Autocomplete className = 'search-box'
+                    disablePortal
+                    id='search-box'
+                    options={listOfPatients[0].map(item => item.name)}
+
+                    renderInput={(params) => <TextField {...params}
+                        label='Search for a patient'
+                        onSelect={handleInput} 
+                        />}
+                />
 
                 {displayFilteredPatientList(input, listOfPatients[0])}
             </Box>
         );
     }
 
-    
-
     function displayFilteredPatientList(searchstring, listOfPatients) {
         const filteredListOfPatients = listOfPatients.filter((element) => {
             if (searchstring === '') {
                 return element;
             }
-            else{
+            else {
                 return element.name.toLowerCase().includes(searchstring);
             }
         });
 
         return (
             <Box>
-
-                {/* {console.log('should be here')}
-                {console.log(JSON.stringify(listOfPatients))}
-                {console.log('______')} */}
-
-
-                {filteredListOfPatients.map((patient) => {
-                    return (
-                        <div key={patient.id}>
-                            <h1>{patient.name}</h1>
-                            <h3>{patient.id} </h3>
-                            {/* <h4>{props.searchablePatients[0]}</h4> */}
-                            {/* <h4>{patient}</h4> */}
-                            {/* <h4>{JSON.stringify(patient)}</h4>
-                            <h5>{JSON.stringify(listOfPatients[0].id)}</h5> */}
-                        </div>
-                    );
-                })}
-
-
                 {filteredListOfPatients.map(patient => {
                     return (
                         <div key={patient.id}>
@@ -126,9 +72,9 @@ export default function PatientSearchBar(props) {
                                 callback={props.callback}
                                 callbackList={props.callbackList}
                                 callbackMap={props.callbackMap}
-                                updatePrefetchCallback={PrefetchTemplate.generateQueries} // this is causing issues :/
+                                updatePrefetchCallback={PrefetchTemplate.generateQueries}
                                 clearCallback={props.clearCallback}
-                                ehrUrl={props.ehrUrl} // is this used?
+                                ehrUrl={props.ehrUrl}
                                 options={options}
                                 responseExpirationDays={props.responseExpirationDays}
                                 defaultUser={props.defaultUser}
@@ -140,42 +86,9 @@ export default function PatientSearchBar(props) {
         );
     }
 
-
     return (
         <div>
             {listOfPatients[0] ? patientSearchBar() : 'loading...'}
-
-
-
-            {/* Example need to delete
-            {props.searchablePatients.map(patient => {
-                return (
-                    <Box>
-                        <h1>{patient.id}  {getName(patient)}</h1>
-                    </Box>
-                );
-            })} */}
-
-
-
         </div>
     );
-
-
-}
-
-const top100Films = [
-    { label: 'The Shawshank Redemption', year: 1994 },
-    { label: 'The Godfather', year: 1972 },
-    { label: 'The Godfather: Part II', year: 1974 },
-    { label: 'The Dark Knight', year: 2008 },
-    { label: '12 Angry Men', year: 1957 },
-    { label: "Schindler's List", year: 1993 },
-    { label: 'Pulp Fiction', year: 1994 },
-];
-
-const patientData = [
-    { id: 'pat1234', name: 'one' },
-    { id: 'pat017', name: 'two' },
-    { id: 'pat036', name: 'three' },
-];
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css b/src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css
index a424583e..bcd1cac6 100644
--- a/src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBarStyle.css
@@ -1,3 +1,18 @@
 .patients {
- padding:5px;
+    padding: 5px;
+}
+
+.search-box {
+    top: -10;
+    width: 100%;
+    margin: 10px auto;
+    margin-bottom: 50px;
+}
+
+.search-box-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly
 }
\ No newline at end of file

From 1c1bd54d58ea5b612ac0f6f2e84138f9a0d015bb Mon Sep 17 00:00:00 2001
From: Zach Robin <zrobin144@gmail.com>
Date: Fri, 1 Dec 2023 08:13:52 -0800
Subject: [PATCH 4/5] removed white spaces and unnecessary comments

---
 .../RequestBox/PatientSearchBar/PatientSearchBar.js   | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
index b8a44775..ab84a963 100644
--- a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
@@ -18,10 +18,8 @@ export default function PatientSearchBar(props) {
         const newList = props.searchablePatients.map((patient) => ({
             id: patient.id,
             name: getName(patient),
-            // name: patient.name
         }));
         setListOfPatients([newList]);
-
     }, [props.searchablePatients]);
 
     function getName(patient) {
@@ -34,17 +32,14 @@ export default function PatientSearchBar(props) {
     function patientSearchBar() {
         return (
             <Box className='search-box-containe'>
-                <Autocomplete className = 'search-box'
+                <Autocomplete className='search-box'
                     disablePortal
                     id='search-box'
                     options={listOfPatients[0].map(item => item.name)}
-
                     renderInput={(params) => <TextField {...params}
                         label='Search for a patient'
-                        onSelect={handleInput} 
-                        />}
-                />
-
+                        onSelect={handleInput}
+                    />} />
                 {displayFilteredPatientList(input, listOfPatients[0])}
             </Box>
         );

From 8c3c04b915d357f65e7a1e3a35f99d32383b4386 Mon Sep 17 00:00:00 2001
From: Ariel Virgulto <avirgulto@mitre.org>
Date: Fri, 1 Dec 2023 14:52:27 -0500
Subject: [PATCH 5/5] Fix broken x

---
 .../RequestBox/PatientSearchBar/PatientSearchBar.js    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
index ab84a963..123ed142 100644
--- a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
@@ -10,10 +10,6 @@ export default function PatientSearchBar(props) {
     const [input, setInput] = useState('');
     const [listOfPatients, setListOfPatients] = useState([]);
 
-    const handleInput = (e) => {
-        setInput(e.target.value.toLowerCase());
-    };
-
     useEffect(() => {
         const newList = props.searchablePatients.map((patient) => ({
             id: patient.id,
@@ -31,14 +27,16 @@ export default function PatientSearchBar(props) {
 
     function patientSearchBar() {
         return (
-            <Box className='search-box-containe'>
+            <Box className='search-box-container'>
                 <Autocomplete className='search-box'
                     disablePortal
                     id='search-box'
+                    onInputChange={(event, newInputValue) => {
+                        setInput(newInputValue.toLowerCase());
+                    }}
                     options={listOfPatients[0].map(item => item.name)}
                     renderInput={(params) => <TextField {...params}
                         label='Search for a patient'
-                        onSelect={handleInput}
                     />} />
                 {displayFilteredPatientList(input, listOfPatients[0])}
             </Box>