feat: apply select component changes

package.json

@@ -5,7 +5,7 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@hospitalrun/components": "~1.6.0",
+    "@hospitalrun/components": "~1.14.1",
     "@reduxjs/toolkit": "~1.4.0",
     "@types/escape-string-regexp": "~2.0.1",
     "@types/pouchdb-find": "~6.3.4",

src/components/PageComponent.tsx

@@ -18,7 +18,6 @@ const PageComponent = ({
   pageNumber,
   setPreviousPageRequest,
   setNextPageRequest,
-  onPageSizeChange,
 }: any) => {
   const { t } = useTranslation()
 
@@ -48,13 +47,7 @@ const PageComponent = ({
         {t('actions.page')} {pageNumber}
       </div>
       <div className="row float-right">
-        <Select onChange={onPageSizeChange} defaultValue={defaultPageSize.label}>
-          {pageSizes.map((pageSize) => (
-            <option key={pageSize.label} value={pageSize.value}>
-              {pageSize.label}
-            </option>
-          ))}
-        </Select>
+        <Select id="page" options={pageSizes} />
       </div>
     </div>
   )

src/components/input/LanguageSelector.tsx

@@ -1,32 +1,33 @@
-import _ from 'lodash'
-import React from 'react'
+import { sortBy } from 'lodash'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import i18n, { resources } from '../../i18n'
-import SelectWithLabelFormGroup from './SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from './SelectWithLableFormGroup'
 
 const LanguageSelector = () => {
   const { t } = useTranslation()
+  const [selected, setSelected] = useState(i18n.language)
 
-  let languageOptions = Object.keys(resources).map((abbr) => ({
+  let languageOptions: Option[] = Object.keys(resources).map((abbr) => ({
     label: resources[abbr].name,
     value: abbr,
   }))
-  languageOptions = _.sortBy(languageOptions, (o) => o.label)
+  languageOptions = sortBy(languageOptions, (o) => o.label)
 
-  const onLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selected = event.target.value
-    i18n.changeLanguage(selected)
+  const onChange = (value: string) => {
+    i18n.changeLanguage(value)
+    setSelected(value)
   }
 
   return (
     <SelectWithLabelFormGroup
       name="language"
-      value={i18n.language}
       label={t('settings.language.label')}
-      isEditable
       options={languageOptions}
-      onChange={onLanguageChange}
+      defaultSelected={languageOptions.filter(({ value }) => value === selected)}
+      onChange={(values) => onChange(values[0])}
+      isEditable
     />
   )
 }

src/components/input/SelectWithLableFormGroup.tsx

@@ -6,56 +6,54 @@ interface Option {
   value: string
 }
 
+// todo: add feedback in next round
 interface Props {
-  value: string
-  label?: string
   name: string
+  label?: string
   isRequired?: boolean
-  isEditable?: boolean
   options: Option[]
-  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
-  feedback?: string
+  defaultSelected?: Option[]
+  onChange?: (values: string[]) => void
+  placeholder: string
+  multiple?: boolean
+  isEditable?: boolean
   isInvalid?: boolean
 }
 
 const SelectWithLabelFormGroup = (props: Props) => {
   const {
-    value,
-    label,
     name,
-    isEditable,
+    label,
+    isRequired,
     options,
+    defaultSelected,
     onChange,
-    isRequired,
-    feedback,
+    placeholder,
+    multiple,
+    isEditable,
     isInvalid,
   } = props
   const id = `${name}Select`
   return (
     <div className="form-group">
       {label && <Label text={label} htmlFor={id} isRequired={isRequired} />}
       <Select
-        disabled={!isEditable}
+        id={id}
+        options={options}
+        defaultSelected={defaultSelected}
         onChange={onChange}
-        value={value}
-        feedback={feedback}
+        placeholder={placeholder}
+        multiple={multiple}
+        disabled={!isEditable}
         isInvalid={isInvalid}
-      >
-        <option disabled value="">
-          -- Choose --
-        </option>
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </Select>
+      />
     </div>
   )
 }
 
 SelectWithLabelFormGroup.defaultProps = {
-  value: '',
+  placeholder: '-- Choose --',
 }
 
 export default SelectWithLabelFormGroup
+export type { Option }

src/incidents/list/ViewIncidents.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
-import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../../components/input/SelectWithLableFormGroup'
 import Incident from '../../model/Incident'
 import { useButtonToolbarSetter } from '../../page-header/ButtonBarProvider'
 import useTitle from '../../page-header/useTitle'
@@ -48,11 +48,7 @@ const ViewIncidents = () => {
     history.push(`incidents/${incident.id}`)
   }
 
-  const onFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSearchFilter(event.target.value as IncidentFilter)
-  }
-
-  const filterOptions = Object.values(IncidentFilter).map((filter) => ({
+  const filterOptions: Option[] = Object.values(IncidentFilter).map((filter) => ({
     label: t(`incidents.status.${filter}`),
     value: `${filter}`,
   }))
@@ -63,11 +59,11 @@ const ViewIncidents = () => {
         <div className="col-md-3 col-lg-2">
           <SelectWithLabelFormGroup
             name="type"
-            value={searchFilter}
             label={t('incidents.filterTitle')}
-            isEditable
             options={filterOptions}
-            onChange={onFilterChange}
+            defaultSelected={filterOptions.filter(({ value }) => value === searchFilter)}
+            onChange={(values) => setSearchFilter(values[0] as IncidentFilter)}
+            isEditable
           />
         </div>
       </div>
@@ -86,9 +82,15 @@ const ViewIncidents = () => {
             {incidents.map((incident: Incident) => (
               <tr onClick={() => onTableRowClick(incident)} key={incident.id}>
                 <td>{incident.code}</td>
-                <td>{format(new Date(incident.date), 'yyyy-MM-dd hh:mm a')}</td>
+                <td>
+                  {incident.date ? format(new Date(incident.date), 'yyyy-MM-dd hh:mm a') : ''}
+                </td>
                 <td>{incident.reportedBy}</td>
-                <td>{format(new Date(incident.reportedOn), 'yyyy-MM-dd hh:mm a')}</td>
+                <td>
+                  {incident.reportedOn
+                    ? format(new Date(incident.reportedOn), 'yyyy-MM-dd hh:mm a')
+                    : ''}
+                </td>
                 <td>{incident.status}</td>
               </tr>
             ))}

src/labs/ViewLabs.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
-import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup'
 import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup'
 import useDebounce from '../hooks/debounce'
 import Lab from '../model/Lab'
@@ -15,7 +15,7 @@ import useTitle from '../page-header/useTitle'
 import { RootState } from '../store'
 import { searchLabs } from './labs-slice'
 
-type filter = 'requested' | 'completed' | 'canceled' | 'all'
+type LabFilter = 'requested' | 'completed' | 'canceled' | 'all'
 
 const ViewLabs = () => {
   const { t } = useTranslation()
@@ -26,7 +26,7 @@ const ViewLabs = () => {
   const { permissions } = useSelector((state: RootState) => state.user)
   const dispatch = useDispatch()
   const { labs, isLoading } = useSelector((state: RootState) => state.labs)
-  const [searchFilter, setSearchFilter] = useState<filter>('all')
+  const [searchFilter, setSearchFilter] = useState<LabFilter>('all')
   const [searchText, setSearchText] = useState<string>('')
   const debouncedSearchText = useDebounce(searchText, 500)
 
@@ -50,15 +50,6 @@ const ViewLabs = () => {
     return buttons
   }, [permissions, history, t])
 
-  const setFilter = (filter: string) =>
-    filter === 'requested'
-      ? 'requested'
-      : filter === 'completed'
-      ? 'completed'
-      : filter === 'canceled'
-      ? 'canceled'
-      : 'all'
-
   useEffect(() => {
     dispatch(searchLabs(debouncedSearchText, searchFilter))
   }, [dispatch, debouncedSearchText, searchFilter])
@@ -76,21 +67,24 @@ const ViewLabs = () => {
     history.push(`/labs/${lab.id}`)
   }
 
-  const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSearchFilter(setFilter(event.target.value))
-  }
-
   const onSearchBoxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value)
   }
 
+  const filterOptions: Option[] = [
+    { label: t('labs.status.requested'), value: 'requested' },
+    { label: t('labs.status.completed'), value: 'completed' },
+    { label: t('labs.status.canceled'), value: 'canceled' },
+    { label: t('labs.filter.all'), value: 'all' },
+  ]
+
   const listBody = (
     <tbody>
       {labs.map((lab) => (
         <tr onClick={() => onTableRowClick(lab)} key={lab.id}>
           <td>{lab.code}</td>
           <td>{lab.type}</td>
-          <td>{format(new Date(lab.requestedOn), 'yyyy-MM-dd hh:mm a')}</td>
+          <td>{lab.requestedOn ? format(new Date(lab.requestedOn), 'yyyy-MM-dd hh:mm a') : ''}</td>
           <td>{lab.status}</td>
         </tr>
       ))}
@@ -103,18 +97,11 @@ const ViewLabs = () => {
         <div className="col-md-3 col-lg-2">
           <SelectWithLabelFormGroup
             name="type"
-            value={searchFilter}
             label={t('labs.filterTitle')}
+            options={filterOptions}
+            defaultSelected={filterOptions.filter(({ value }) => value === searchFilter)}
+            onChange={(values) => setSearchFilter(values[0] as LabFilter)}
             isEditable
-            options={[
-              { label: t('labs.status.requested'), value: 'requested' },
-              { label: t('labs.status.completed'), value: 'completed' },
-              { label: t('labs.status.canceled'), value: 'canceled' },
-              { label: t('labs.filter.all'), value: 'all' },
-            ]}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              onSelectChange(event)
-            }}
           />
         </div>
         <div className="col">

src/patients/ContactInfo.tsx

@@ -2,7 +2,7 @@ import { Spinner, Row, Column, Icon } from '@hospitalrun/components'
 import React, { useEffect, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup'
+import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../components/input/TextFieldWithLabelFormGroup'
 import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup'
 import { ContactInfoPiece } from '../model/ContactInformation'
@@ -30,7 +30,7 @@ const ContactInfo = (props: Props): ReactElement => {
     }
   }, [data, onChange])
 
-  const typeOptions = Object.values(ContactInfoTypes).map((value) => ({
+  const typeOptions: Option[] = Object.values(ContactInfoTypes).map((value) => ({
     label: t(`patient.contactInfoType.options.${value}`),
     value: `${value}`,
   }))
@@ -53,9 +53,8 @@ const ContactInfo = (props: Props): ReactElement => {
   }
   const Component = componentList[component]
 
-  const onTypeChange = (event: React.ChangeEvent<HTMLSelectElement>, index: number) => {
+  const onTypeChange = (newType: string, index: number) => {
     if (onChange) {
-      const newType = event.currentTarget.value
       const currentContact = { ...data[index], type: newType }
       const newContacts = [...data]
       newContacts.splice(index, 1, currentContact)
@@ -83,10 +82,10 @@ const ContactInfo = (props: Props): ReactElement => {
         <Column sm={4}>
           <SelectWithLabelFormGroup
             name={`${name}Type${i}`}
-            value={entry.type}
-            isEditable={isEditable}
             options={typeOptions}
-            onChange={(event) => onTypeChange(event, i)}
+            defaultSelected={typeOptions.filter(({ value }) => value === entry.type)}
+            onChange={(values) => onTypeChange(values[0], i)}
+            isEditable={isEditable}
           />
         </Column>
         <Column sm={8}>