feat(patients): use hospital run date picker

src/__tests__/components/input/DatePickerWithLabelFormGroup.test.tsx

@@ -1,6 +1,6 @@
 import '../../../__mocks__/matchMediaMock'
-import React from 'react'
-import { Label } from '@hospitalrun/components'
+import React, { ChangeEvent } from 'react'
+import { DateTimePicker, Label } from '@hospitalrun/components'
 import { shallow } from 'enzyme'
 import DatePickerWithLabelFormGroup from '../../../components/input/DatePickerWithLabelFormGroup'
 
@@ -12,7 +12,7 @@ describe('date picker with label form group', () => {
  <DatePickerWithLabelFormGroup
  name={expectedName}
  label="test"
- value=""
+ value={new Date()}
  isEditable
  onChange={jest.fn()}
  />,
@@ -24,22 +24,20 @@ describe('date picker with label form group', () => {
  expect(label.prop('text')).toEqual(expectedName)
  })
 
- it('should render and input box', () => {
+ it('should render and date time picker', () => {
  const expectedName = 'test'
  const wrapper = shallow(
  <DatePickerWithLabelFormGroup
  name={expectedName}
  label="test"
- value=""
+ value={new Date()}
  isEditable
  onChange={jest.fn()}
  />,
  )
 
- const input = wrapper.find('input')
+ const input = wrapper.find(DateTimePicker)
  expect(input).toHaveLength(1)
- expect(input.prop('id')).toEqual(`${expectedName}DatePicker`)
- expect(input.prop('type')).toEqual('date')
  })
 
  it('should render disabled is isDisable disabled is true', () => {
@@ -48,20 +46,20 @@ describe('date picker with label form group', () => {
  <DatePickerWithLabelFormGroup
  name={expectedName}
  label="test"
- value=""
+ value={new Date()}
  isEditable={false}
  onChange={jest.fn()}
  />,
  )
 
- const input = wrapper.find('input')
+ const input = wrapper.find(DateTimePicker)
  expect(input).toHaveLength(1)
  expect(input.prop('disabled')).toBeTruthy()
  })
 
  it('should render the proper value', () => {
  const expectedName = 'test'
- const expectedValue = 'expected value'
+ const expectedValue = new Date()
  const wrapper = shallow(
  <DatePickerWithLabelFormGroup
  name={expectedName}
@@ -72,16 +70,16 @@ describe('date picker with label form group', () => {
  />,
  )
 
- const input = wrapper.find('input')
+ const input = wrapper.find(DateTimePicker)
  expect(input).toHaveLength(1)
- expect(input.prop('value')).toEqual(expectedValue)
+ expect(input.prop('selected')).toEqual(expectedValue)
  })
  })
 
  describe('change handler', () => {
  it('should call the change handler on change', () => {
  const expectedName = 'test'
- const expectedValue = 'expected value'
+ const expectedValue = new Date()
  const handler = jest.fn()
  const wrapper = shallow(
  <DatePickerWithLabelFormGroup
@@ -93,8 +91,10 @@ describe('date picker with label form group', () => {
  />,
  )
 
- const input = wrapper.find('input')
- input.simulate('change')
+ const input = wrapper.find(DateTimePicker)
+ input.prop('onChange')(new Date(), {
+ target: { value: new Date().toISOString() },
+ } as ChangeEvent<HTMLInputElement>)
  expect(handler).toHaveBeenCalledTimes(1)
  })
  })

src/__tests__/patients/new/NewPatientForm.test.tsx

@@ -223,8 +223,8 @@ describe('New Patient Form', () => {
 
  const dateOfBirthTextInput = wrapper.findWhere((w) => w.prop('name') === 'dateOfBirth')
 
- expect(dateOfBirthTextInput.prop('value')).toEqual(
- DateTime.local()
+ expect(DateTime.fromJSDate(dateOfBirthTextInput.prop('value')).toISODate()).toEqual(
+ DateTime.fromJSDate(new Date())
  .minus({ year: 5 })
  .toISODate(),
  )
@@ -279,7 +279,6 @@ describe('New Patient Form', () => {
  const expectedFamilyName = 'family name'
  const expectedSuffix = 'suffix'
  const expectedSex = 'male'
- const expectedDateOfBirth = '2019-12-15'
  const expectedType = 'charity'
  const expectedOccupation = 'occupation'
  const expectedPreferredLanguage = 'preferred language'
@@ -308,12 +307,6 @@ describe('New Patient Form', () => {
  }
  })
 
- act(() => {
- if (dateOfBirthInput) {
- fireEvent.change(dateOfBirthInput, { target: { value: expectedDateOfBirth } })
- }
- })
-
  act(() => {
  if (patientTypeDropdown) {
  fireEvent.change(patientTypeDropdown, { target: { value: expectedType } })
@@ -349,8 +342,8 @@ describe('New Patient Form', () => {
  const expectedPatient = {
  name: new Name(expectedPrefix, expectedGivenName, expectedFamilyName, expectedSuffix),
  sex: expectedSex,
- dateOfBirth: expectedDateOfBirth,
  type: expectedType,
+ dateOfBirth: '',
  occupation: expectedOccupation,
  preferredLanguage: expectedPreferredLanguage,
  phoneNumber: expectedPhoneNumber,

src/components/input/DatePickerWithLabelFormGroup.tsx

@@ -1,27 +1,31 @@
 import React from 'react'
-import { Label } from '@hospitalrun/components'
+import { Label, DateTimePicker } from '@hospitalrun/components'
 
 interface Props {
  name: string
  label: string
- value: string
+ value: Date | undefined
  isEditable: boolean
- onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+ onChange: (date: Date) => void
 }
 
 const DatePickerWithLabelFormGroup = (props: Props) => {
- const { onChange, label, name, value, isEditable } = props
+ const { onChange, label, name, isEditable, value } = props
  const id = `${name}DatePicker`
  return (
  <div className="form-group">
  <Label text={label} htmlFor={id} />
- <input
+ <DateTimePicker
+ dateFormat="MM/dd/yyyy"
+ dateFormatCalendar="LLLL yyyy"
+ dropdownMode="scroll"
+ selected={value}
+ timeIntervals={30}
+ withPortal={false}
  disabled={!isEditable}
- className="form-control"
- type="date"
- value={value}
- id={id}
- onChange={onChange}
+ onChange={(inputDate) => {
+ onChange(inputDate)
+ }}
  />
  </div>
  )

src/patients/new/NewPatientForm.tsx

@@ -62,6 +62,10 @@ const NewPatientForm = (props: Props) => {
  onFieldChange(fieldName, event.target.value)
  }
 
+ const onDateOfBirthChange = (date: string) => {
+ onFieldChange('dateOfBirth', date)
+ }
+
  const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) => {
  onFieldChange(fieldName, event.target.value)
  }
@@ -75,10 +79,10 @@ const NewPatientForm = (props: Props) => {
  }
 
  setApproximateAge(approximateAgeNumber)
- const approximateDateOfBirth = DateTime.local().minus({
+ const approximateDateOfBirth = DateTime.fromJSDate(new Date()).minus({
  years: approximateAgeNumber,
  })
- setPatient({ ...patient, dateOfBirth: approximateDateOfBirth.toISODate() })
+ setPatient({ ...patient, dateOfBirth: approximateDateOfBirth.toISO() })
  }
 
  return (
@@ -172,9 +176,12 @@ const NewPatientForm = (props: Props) => {
  name="dateOfBirth"
  label={t('patient.dateOfBirth')}
  isEditable={isEditable && !patient.isApproximateDateOfBirth}
- value={patient.dateOfBirth}
- onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
- onInputElementChange(event, 'dateOfBirth')
+ value={patient.dateOfBirth.length > 0 ? new Date(patient.dateOfBirth) : undefined}
+ onChange={(date: Date) => {
+ const dateString = DateTime.fromJSDate(date).toISODate()
+ console.log(date.toISOString())
+ console.log(dateString)
+ onDateOfBirthChange(date.toISOString())
  }}
  />
  </div>
@@ -190,7 +197,7 @@ const NewPatientForm = (props: Props) => {
  </div>
  </div>
  {patient.isApproximateDateOfBirth && (
- <div className="col-md-3">
+ <div className="col-md-6">
  <TextInputWithLabelFormGroup
  label={t('patient.approximateAge')}
  name="approximateAge"