From f014fab59225065ca25b5420c9a036d5cb242410 Mon Sep 17 00:00:00 2001
From: divija-zemoso <divija.amaram@zemosolabs.com>
Date: Wed, 28 Sep 2022 10:50:16 +0530
Subject: [PATCH 1/5] get appointment by id

---
 src/patients/visits/FilterPatientModal.tsx    |  28 ++++-
 .../appointments/AppointmentDetailForm.tsx    | 102 ++++++++++++------
 .../appointments/ViewAppointments.tsx         |  27 ++---
 .../appointments/constants/Appointment.tsx    |   5 +
 .../appointments/edit/EditAppointment.tsx     |  69 ++++++++----
 .../appointments/new/NewAppointment.tsx       |  91 ++++++++++------
 .../appointments/service/Appointments.tsx     |  28 +----
 .../appointments/service/Patients.tsx         |  42 ++++++++
 .../appointments/view/ViewAppointment.tsx     |  64 ++++++++---
 src/shared/model/Appointment.ts               |   2 +
 10 files changed, 318 insertions(+), 140 deletions(-)
 create mode 100644 src/scheduling/appointments/service/Patients.tsx

diff --git a/src/patients/visits/FilterPatientModal.tsx b/src/patients/visits/FilterPatientModal.tsx
index e483305b1e..9ab199cbe6 100644
--- a/src/patients/visits/FilterPatientModal.tsx
+++ b/src/patients/visits/FilterPatientModal.tsx
@@ -2,7 +2,11 @@ import React, { useState } from 'react'
 import { Label, Modal, Select } from '@hospitalrun/components'
 import useTranslator from '../../shared/hooks/useTranslator'
 import { Button } from 'react-bootstrap'
-import { appointmentTypes } from '../../scheduling/appointments/constants/Appointment'
+import {
+  appointmentStatus,
+  appointmentTypes,
+} from '../../scheduling/appointments/constants/Appointment'
+// import { getAllPatients } from '../../scheduling/appointments/service/Patients'
 
 interface Props {
   show: boolean
@@ -11,13 +15,21 @@ interface Props {
 }
 
 const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props) => {
+  // const func = () => {
+  //   console.log('ALL PATIENTS DATA', getAllPatients())
+  // }
+
+  // useEffect(() => {
+  //   func()
+  // }, [])
+
   const { t } = useTranslator()
 
-  const [patientId, setpatientId] = useState('')
+  const [patientStatus, setPatientStatus] = useState('')
   const [appointmentType, setappointmentType] = useState('')
 
   const clearValues = () => {
-    setpatientId('')
+    setPatientStatus('')
     setappointmentType('')
   }
 
@@ -32,9 +44,17 @@ const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props)
             onChange={(values) => setappointmentType(values[0])}
           />
         </div>
+        <div className="form-group">
+          <Label text="Status" title="Status" />
+          <Select
+            id="status"
+            options={appointmentStatus}
+            onChange={(values) => setPatientStatus(values[0])}
+          />
+        </div>
         <Button
           onClick={() => {
-            onFieldChange && onFieldChange(patientId, appointmentType)
+            onFieldChange && onFieldChange(patientStatus, appointmentType)
             clearValues()
             onCloseButtonClick()
           }}
diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index f24e9ea87c..129e9d1a6e 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -1,14 +1,32 @@
-import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
+// import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
+import { Select, Label, Alert } from '@hospitalrun/components'
 import React from 'react'
 
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
-import { SelectOption } from '../../shared/components/input/SelectOption'
-import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
+// import { SelectOption } from '../../shared/components/input/SelectOption'
 import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
-import PatientRepository from '../../shared/db/PatientRepository'
+// import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
+// import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+// import PatientRepository from '../../shared/db/PatientRepository'
 import useTranslator from '../../shared/hooks/useTranslator'
-import Appointment from '../../shared/model/Appointment'
 import Patient from '../../shared/model/Patient'
+// import { Appointment } from './ViewAppointments'
+import { appointmentTypes, appointmentStatus } from '../appointments/constants/Appointment'
+
+export interface Appointment {
+  appointmentType: {
+    text: string
+  }
+  participant: {
+    actor: {
+      reference: string
+    }
+  }[]
+  id: string
+  start: Date
+  minutesDuration: number
+  status: string
+}
 
 interface Props {
   appointment: Appointment
@@ -22,19 +40,24 @@ const AppointmentDetailForm = (props: Props) => {
   const { onFieldChange, appointment, patient, isEditable, error } = props
   const { t } = useTranslator()
 
+  const patientName: string = String(patient)
+
   const onDateChange = (date: Date, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, date.toISOString())
 
-  const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
-    onFieldChange && onFieldChange(fieldName, event.target.value)
+  // const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
+  //   onFieldChange && onFieldChange(fieldName, event.target.value)
+
+  // const typeOptions: SelectOption[] = [
+  //   { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
+  //   { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
+  //   { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
+  //   { label: t('scheduling.appointment.types.routine'), value: 'routine' },
+  //   { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
+  // ]
 
-  const typeOptions: SelectOption[] = [
-    { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
-    { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
-    { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
-    { label: t('scheduling.appointment.types.routine'), value: 'routine' },
-    { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
-  ]
+  var end = new Date(appointment.start)
+  end.setMinutes(end.getMinutes() + appointment.minutesDuration)
 
   return (
     <>
@@ -47,10 +70,10 @@ const AppointmentDetailForm = (props: Props) => {
               isRequired
               text={t('scheduling.appointment.patient')}
             />
-            <Typeahead
+            {/* <Typeahead
               id="patientTypeahead"
               disabled={!isEditable || patient !== undefined}
-              value={patient?.fullName}
+              value={patient}
               placeholder={t('scheduling.appointment.patient')}
               onChange={(p: Patient[]) =>
                 onFieldChange && p[0] && onFieldChange('patient', p[0].id)
@@ -60,6 +83,11 @@ const AppointmentDetailForm = (props: Props) => {
               renderMenuItemChildren={(p: Patient) => <div>{`${p.fullName} (${p.code})`}</div>}
               isInvalid={!!error?.patient}
               feedback={t(error?.patient)}
+            /> */}
+            <TextInputWithLabelFormGroup
+              name="patientName"
+              value={patientName}
+              isEditable={isEditable}
             />
           </div>
         </div>
@@ -69,11 +97,7 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="startDate"
             label={t('scheduling.appointment.startDate')}
-            value={
-              appointment.startDateTime && appointment.startDateTime.length > 0
-                ? new Date(appointment.startDateTime)
-                : undefined
-            }
+            value={appointment.start ? new Date(appointment.start) : undefined}
             isEditable={isEditable}
             isInvalid={error?.startDateTime}
             feedback={t(error?.startDateTime)}
@@ -86,11 +110,7 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="endDate"
             label={t('scheduling.appointment.endDate')}
-            value={
-              appointment.endDateTime && appointment.endDateTime.length > 0
-                ? new Date(appointment.endDateTime)
-                : undefined
-            }
+            value={appointment.start ? end : undefined}
             isEditable={isEditable}
             onChange={(date: Date) => {
               onDateChange(date, 'endDateTime')
@@ -98,7 +118,7 @@ const AppointmentDetailForm = (props: Props) => {
           />
         </div>
       </div>
-      <div className="row">
+      {/* <div className="row">
         <div className="col">
           <TextInputWithLabelFormGroup
             name="location"
@@ -110,22 +130,40 @@ const AppointmentDetailForm = (props: Props) => {
             }}
           />
         </div>
-      </div>
+      </div> */}
       <div className="row">
         <div className="col">
           <div className="form-group" data-testid="typeSelect">
             <Label text={t('scheduling.appointment.type')} title="type" />
             <Select
               id="type"
-              options={typeOptions}
-              defaultSelected={typeOptions.filter(({ value }) => value === appointment.type)}
-              onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              options={appointmentTypes}
+              defaultSelected={appointmentTypes.filter(
+                ({ value }) => value === appointment.appointmentType.text,
+              )}
+              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
               disabled={!isEditable}
             />
           </div>
         </div>
       </div>
       <div className="row">
+        <div className="col">
+          <div className="form-group" data-testid="typeSelect">
+            <Label text="Status" title="Status" />
+            <Select
+              id="status"
+              options={appointmentStatus}
+              defaultSelected={appointmentStatus.filter(
+                ({ value }) => value === appointment.status,
+              )}
+              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              disabled={!isEditable}
+            />
+          </div>
+        </div>
+      </div>
+      {/* <div className="row">
         <div className="col">
           <div className="form-group">
             <TextFieldWithLabelFormGroup
@@ -139,7 +177,7 @@ const AppointmentDetailForm = (props: Props) => {
             />
           </div>
         </div>
-      </div>
+      </div> */}
     </>
   )
 }
diff --git a/src/scheduling/appointments/ViewAppointments.tsx b/src/scheduling/appointments/ViewAppointments.tsx
index 1fa52c5a5b..64f53fe935 100644
--- a/src/scheduling/appointments/ViewAppointments.tsx
+++ b/src/scheduling/appointments/ViewAppointments.tsx
@@ -8,7 +8,8 @@ import { useUpdateTitle } from '../../page-header/title/TitleContext'
 import FilterPatientModal from '../../patients/visits/FilterPatientModal'
 import Loading from '../../shared/components/Loading'
 import useTranslator from '../../shared/hooks/useTranslator'
-import { getAppointment, getPatientNameById } from './service/Appointments'
+import { getAppointment } from './service/Appointments'
+import { getPatientNameById } from './service/Patients'
 
 interface Event {
   id: string
@@ -18,9 +19,10 @@ interface Event {
   title: string
   allDay: boolean
   type: string
+  status: string
 }
 
-interface Appointment {
+export interface Appointment {
   resource: {
     appointmentType: {
       text: string
@@ -54,14 +56,13 @@ const ViewAppointments = () => {
   useAddBreadcrumbs(breadcrumbs, true)
   const [showFilter, setshowFilter] = useState(false)
 
-  const [patientId, setpatientId] = useState('')
+  const [patientStatus, setpatientStatus] = useState('')
   const [appointmentType, setappointmentType] = useState('')
 
   const func = async () => {
     setAppointment(await getAppointment())
     setIsLoading(false)
     console.log('appointment data', await getAppointment())
-    console.log('patient data', await getPatientNameById(140998131777537))
   }
 
   useEffect(() => {
@@ -92,7 +93,7 @@ const ViewAppointments = () => {
         outlined
         color="success"
         onClick={() => {
-          setpatientId('')
+          setpatientStatus('')
           setappointmentType('')
         }}
       >
@@ -108,7 +109,9 @@ const ViewAppointments = () => {
   useEffect(() => {
     if (appointments) {
       appointments.map(async (appointment: Appointment) => {
-        const patientName = await getPatientNameById(140998131777537)
+        const patientName = await getPatientNameById(
+          parseInt(String(appointment.resource.participant[0].actor.reference.substr(8))),
+        )
         console.log('minutes duration: ', appointment.resource.minutesDuration)
         var end = new Date(appointment.resource.start)
         end.setMinutes(end.getMinutes() + appointment.resource.minutesDuration)
@@ -135,15 +138,15 @@ const ViewAppointments = () => {
   }
 
   return (
-    <div>
+    <div style={{ cursor: 'pointer' }}>
       <Calendar
         events={
-          appointmentType.length !== 0 && patientId.length !== 0
+          appointmentType.length !== 0 && patientStatus.length !== 0
             ? events.filter(
-                (event) => event.patient === patientId && event.type === appointmentType,
+                (event) => event.status === patientStatus && event.type === appointmentType,
               )
-            : patientId.length !== 0
-            ? events.filter((event) => event.patient === patientId)
+            : patientStatus.length !== 0
+            ? events.filter((event) => event.status === patientStatus)
             : appointmentType.length !== 0
             ? events.filter((event) => event.type === appointmentType)
             : events
@@ -158,7 +161,7 @@ const ViewAppointments = () => {
         show={showFilter}
         onCloseButtonClick={() => setshowFilter(false)}
         onFieldChange={(patientId: any, type: any) => {
-          setpatientId(patientId)
+          setpatientStatus(patientId)
           setappointmentType(type)
         }}
       />
diff --git a/src/scheduling/appointments/constants/Appointment.tsx b/src/scheduling/appointments/constants/Appointment.tsx
index 28a8f06a77..60bf695c0c 100644
--- a/src/scheduling/appointments/constants/Appointment.tsx
+++ b/src/scheduling/appointments/constants/Appointment.tsx
@@ -10,3 +10,8 @@ export const appointmentTypes: SelectOption[] = [
   { label: 'Physical Exam', value: 'Physical Exam' },
   { label: 'Office Flu Only', value: 'Office Flu Only' },
 ]
+
+export const appointmentStatus: SelectOption[] = [
+  { label: 'Scheduled', value: 'Scheduled' },
+  { label: 'Confirmed', value: 'Confirmed' },
+]
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index 0b2ba094b9..6ffed2b90a 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -1,5 +1,6 @@
-import { Spinner, Button, Toast } from '@hospitalrun/components'
-import isEmpty from 'lodash/isEmpty'
+// import { Spinner, Button, Toast } from '@hospitalrun/components'
+import { Spinner, Button } from '@hospitalrun/components'
+// import isEmpty from 'lodash/isEmpty'
 import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 
@@ -7,11 +8,12 @@ import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumb
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
 import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
-import Appointment from '../../../shared/model/Appointment'
+// import Appointment from '../../../shared/model/Appointment'
 import useAppointment from '../../hooks/useAppointment'
-import useUpdateAppointment from '../../hooks/useUpdateAppointment'
+// import useUpdateAppointment from '../../hooks/useUpdateAppointment'
 import AppointmentDetailForm from '../AppointmentDetailForm'
 import { getAppointmentLabel } from '../util/scheduling-appointment.util'
+// import { Appointment } from '../ViewAppointments'
 
 const EditAppointment = () => {
   const { t } = useTranslator()
@@ -23,15 +25,15 @@ const EditAppointment = () => {
   }, [updateTitle, t])
   const history = useHistory()
 
-  const [newAppointment, setAppointment] = useState({} as Appointment)
+  const [newAppointment, setAppointment] = useState<any>()
   const { data: currentAppointment, isLoading: isLoadingAppointment } = useAppointment(id)
 
-  const {
-    mutate: updateMutate,
-    isLoading: isLoadingUpdate,
-    isError: isErrorUpdate,
-    error: updateMutateError,
-  } = useUpdateAppointment(newAppointment)
+  // const {
+  //   mutate: updateMutate,
+  //   isLoading: isLoadingUpdate,
+  //   isError: isErrorUpdate,
+  //   error: updateMutateError,
+  // } = useUpdateAppointment(newAppointment)
   const { data: patient } = usePatient(currentAppointment ? currentAppointment.patient : id)
 
   const breadcrumbs = [
@@ -57,14 +59,14 @@ const EditAppointment = () => {
     history.push(`/appointments/${newAppointment.id}`)
   }
 
-  const onSave = () => {
-    if (isEmpty(updateMutateError) && !isErrorUpdate) {
-      updateMutate(newAppointment).then(() => {
-        Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
-        history.push(`/appointments/${newAppointment.id}`)
-      })
-    }
-  }
+  // const onSave = () => {
+  //   if (isEmpty(updateMutateError) && !isErrorUpdate) {
+  //     updateMutate(newAppointment).then(() => {
+  //       Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
+  //       history.push(`/appointments/${newAppointment.id}`)
+  //     })
+  //   }
+  // }
 
   const onFieldChange = (key: string, value: string | boolean) => {
     setAppointment({
@@ -73,22 +75,45 @@ const EditAppointment = () => {
     })
   }
 
-  if (isLoadingAppointment || isLoadingUpdate) {
+  // if (isLoadingAppointment || isLoadingUpdate) {
+  //   return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
+  // }
+
+  if (isLoadingAppointment) {
     return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
   }
 
   return (
+    // <div>
+    //   <AppointmentDetailForm
+    //     isEditable
+    //     appointment={newAppointment}
+    //     patient={patient}
+    //     onFieldChange={onFieldChange}
+    //     error={updateMutateError}
+    //   />
+    //   <div className="row float-right">
+    //     <div className="btn-group btn-group-lg mr-3">
+    //       <Button className="mr-2" color="success" onClick={onSave}>
+    //         {t('scheduling.appointments.updateAppointment')}
+    //       </Button>
+    //       <Button color="danger" onClick={onCancel}>
+    //         {t('actions.cancel')}
+    //       </Button>
+    //     </div>
+    //   </div>
+    // </div>
+
     <div>
       <AppointmentDetailForm
         isEditable
         appointment={newAppointment}
         patient={patient}
         onFieldChange={onFieldChange}
-        error={updateMutateError}
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg mr-3">
-          <Button className="mr-2" color="success" onClick={onSave}>
+          <Button className="mr-2" color="success">
             {t('scheduling.appointments.updateAppointment')}
           </Button>
           <Button color="danger" onClick={onCancel}>
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index ddd5e056c4..32689db8b0 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -1,18 +1,20 @@
-import { Button, Spinner, Toast } from '@hospitalrun/components'
-import addMinutes from 'date-fns/addMinutes'
-import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
-import isEmpty from 'lodash/isEmpty'
+// import { Button, Spinner, Toast } from '@hospitalrun/components'
+import { Button, Spinner } from '@hospitalrun/components'
+// import addMinutes from 'date-fns/addMinutes'
+// import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
+// import isEmpty from 'lodash/isEmpty'
 import React, { useEffect, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
 import useTranslator from '../../../shared/hooks/useTranslator'
-import Appointment from '../../../shared/model/Appointment'
+// import Appointment from '../../../shared/model/Appointment'
 import Patient from '../../../shared/model/Patient'
 import useScheduleAppointment from '../../hooks/useScheduleAppointment'
-import AppointmentDetailForm from '../AppointmentDetailForm'
+import AppointmentDetailForm, { Appointment } from '../AppointmentDetailForm'
 import { AppointmentError } from '../util/validate-appointment'
+// import { Appointment } from '../ViewAppointments'
 
 const breadcrumbs = [
   { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
@@ -37,47 +39,49 @@ const NewAppointment = () => {
   })
   useAddBreadcrumbs(breadcrumbs, true)
 
-  const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
-  const endDateTime = addMinutes(startDateTime, 60)
+  // const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
+  // const endDateTime = addMinutes(startDateTime, 60)
   const [saved, setSaved] = useState(false)
-  const [newAppointmentMutateError, setError] = useState<AppointmentError>({} as AppointmentError)
-  const [newAppointment, setAppointment] = useState({
-    patient: patient || '',
-    startDateTime: startDateTime.toISOString(),
-    endDateTime: endDateTime.toISOString(),
-    location: '',
-    reason: '',
-    type: '',
-  } as Appointment)
+  const [newAppointmentMutateError, _setError] = useState<AppointmentError>({} as AppointmentError)
+  // const [newAppointment, setAppointment] = useState({
+  //   patient: patient || '',
+  //   startDateTime: startDateTime.toISOString(),
+  //   endDateTime: endDateTime.toISOString(),
+  //   location: '',
+  //   reason: '',
+  //   type: '',
+  // } as Appointment)
+
+  const [newAppointment, setAppointment] = useState({} as Appointment)
 
   const {
     mutate: newAppointmentMutate,
     isLoading: isLoadingNewAppointment,
     isError: isErrorNewAppointment,
-    validator: validateNewAppointment,
+    validator: _validateNewAppointment,
   } = useScheduleAppointment()
 
   const onCancelClick = () => {
     history.push('/appointments')
   }
 
-  const onSave = () => {
-    setSaved(true)
-    setError(validateNewAppointment(newAppointment))
-  }
+  // const onSave = () => {
+  //   setSaved(true)
+  //   setError(validateNewAppointment(newAppointment))
+  // }
 
   useEffect(() => {
     // if save click and no error proceed, else give error message.
-    if (saved) {
-      if (isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
-        newAppointmentMutate(newAppointment).then((result) => {
-          Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
-          history.push(`/appointments/${result?.id}`)
-        })
-      } else if (!isEmpty(newAppointmentMutateError)) {
-        newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
-      }
-    }
+    // if (saved) {
+    //   if (isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
+    //     newAppointmentMutate(newAppointment).then((result) => {
+    //       Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
+    //       history.push(`/appointments/${result?.id}`)
+    //     })
+    //   } else if (!isEmpty(newAppointmentMutateError)) {
+    //     newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
+    //   }
+    // }
     setSaved(false)
   }, [
     saved,
@@ -101,6 +105,27 @@ const NewAppointment = () => {
   }
 
   return (
+    // <div>
+    //   <form aria-label="new appointment form">
+    //     <AppointmentDetailForm
+    //       appointment={newAppointment as Appointment}
+    //       patient={patient as Patient}
+    //       error={newAppointmentMutateError}
+    //       onFieldChange={onFieldChange}
+    //     />
+    //     <div className="row float-right">
+    //       <div className="btn-group btn-group-lg mr-3">
+    //         <Button className="mr-2" color="success" onClick={onSave}>
+    //           {t('scheduling.appointments.createAppointment')}
+    //         </Button>
+    //         <Button color="danger" onClick={onCancelClick}>
+    //           {t('actions.cancel')}
+    //         </Button>
+    //       </div>
+    //     </div>
+    //   </form>
+    // </div>
+
     <div>
       <form aria-label="new appointment form">
         <AppointmentDetailForm
@@ -111,7 +136,7 @@ const NewAppointment = () => {
         />
         <div className="row float-right">
           <div className="btn-group btn-group-lg mr-3">
-            <Button className="mr-2" color="success" onClick={onSave}>
+            <Button className="mr-2" color="success">
               {t('scheduling.appointments.createAppointment')}
             </Button>
             <Button color="danger" onClick={onCancelClick}>
diff --git a/src/scheduling/appointments/service/Appointments.tsx b/src/scheduling/appointments/service/Appointments.tsx
index 451c2a1df7..7bd4d2e24c 100644
--- a/src/scheduling/appointments/service/Appointments.tsx
+++ b/src/scheduling/appointments/service/Appointments.tsx
@@ -11,26 +11,9 @@ const config = {
   },
 }
 
-export const getAllPatients = () => {
-  return axios
-    .get(`${endpoint}/Patient?_count=10&_offset=1`, config)
-    .then(async (response) => {
-      console.log(response)
-      const data = await response.data
-      console.log(data)
-      return data
-    })
-    .catch((error) => {
-      console.log(error)
-    })
-}
-
 export const getAppointment = () => {
   return axios
-    .get(
-      `${endpoint}/Appointment?departmentId=150&practiceId=195903&practitioner=140857915539458&patient=140919926030337`,
-      config,
-    )
+    .get(`${endpoint}/Appointment?practitioner=140857915539458`, config)
     .then(async (response) => {
       console.log(response)
       const data = await response.data
@@ -43,16 +26,15 @@ export const getAppointment = () => {
     })
 }
 
-export const getPatientNameById = (id: number) => {
+export const getAppointmentId = (id: number) => {
   return axios
-    .get(`${endpoint}/Patient/${id}`, config)
+    .get(`${endpoint}/Appointment/${id}`, config)
     .then(async (response) => {
       console.log(response)
       const data = await response.data
       console.log(data)
-      console.log(data.data.name[0].given.join(' '))
-      const name = data.data.name[0].given.join(' ')
-      return name
+      console.log(data.data)
+      return data.data
     })
     .catch((error) => {
       console.log(error)
diff --git a/src/scheduling/appointments/service/Patients.tsx b/src/scheduling/appointments/service/Patients.tsx
new file mode 100644
index 0000000000..4e41cf9748
--- /dev/null
+++ b/src/scheduling/appointments/service/Patients.tsx
@@ -0,0 +1,42 @@
+import axios from 'axios'
+import dotenv from 'dotenv'
+dotenv.config()
+
+const endpoint = `${process.env.REACT_APP_ENDPOINT}`
+
+const config = {
+  headers: {
+    Authorization: `${process.env.REACT_APP_AUTHORIZATION}`,
+    'x-source-id': `${process.env.REACT_APP_XSOURCEID}`,
+  },
+}
+
+export const getAllPatients = () => {
+  return axios
+    .get(`${endpoint}/Patient`, config)
+    .then(async (response) => {
+      console.log(response)
+      const data = await response.data
+      console.log(data)
+      return data
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+export const getPatientNameById = (id: number) => {
+  return axios
+    .get(`${endpoint}/Patient/${id}`, config)
+    .then(async (response) => {
+      console.log(response)
+      const data = await response.data
+      console.log(data)
+      console.log(data.data.name[0].given.join(' '))
+      const name = data.data.name[0].given.join(' ')
+      return name
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index 23b5518ecb..953a1a39a5 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -3,17 +3,21 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 
-import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
+// import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../../page-header/button-toolbar/ButtonBarProvider'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
-import usePatient from '../../../patients/hooks/usePatient'
+// import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
+import Patient from '../../../shared/model/Patient'
 import Permissions from '../../../shared/model/Permissions'
 import { RootState } from '../../../shared/store'
-import useAppointment from '../../hooks/useAppointment'
+// import useAppointment from '../../hooks/useAppointment'
 import useDeleteAppointment from '../../hooks/useDeleteAppointment'
-import AppointmentDetailForm from '../AppointmentDetailForm'
-import { getAppointmentLabel } from '../util/scheduling-appointment.util'
+import AppointmentDetailForm, { Appointment } from '../AppointmentDetailForm'
+import { getAppointmentId } from '../service/Appointments'
+import { getPatientNameById } from '../service/Patients'
+// import { getAppointmentLabel } from '../util/scheduling-appointment.util'
+// import { Appointment } from '../ViewAppointments'
 
 const ViewAppointment = () => {
   const { t } = useTranslator()
@@ -32,13 +36,41 @@ const ViewAppointment = () => {
   const setButtonToolBar = useButtonToolbarSetter()
   const { permissions } = useSelector((state: RootState) => state.user)
 
-  const { data: appointment } = useAppointment(id)
-  const { data: patient } = usePatient(appointment ? appointment.patient : id)
-  const breadcrumbs = [
-    { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
-    { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
-  ]
-  useAddBreadcrumbs(breadcrumbs, true)
+  // const { data: appointment } = useAppointment(id)
+
+  const [appointment, setAppointment] = useState<Appointment>()
+  const [patientName, setPatientName] = useState<Patient>()
+
+  const appointmentFunc = async () => {
+    setAppointment(await getAppointmentId(id))
+  }
+
+  const patientFunc = async () => {
+    setPatientName(
+      await getPatientNameById(
+        parseInt(String(appointment?.participant[0].actor.reference.substr(8))),
+      ),
+    )
+  }
+
+  useEffect(() => {
+    console.log(id)
+    appointmentFunc()
+  }, [])
+
+  useEffect(() => {
+    if (appointment) {
+      console.log('view appointment', appointment)
+      patientFunc()
+    }
+  }, [appointment])
+
+  // const { data: patient } = usePatient(appointment ? appointment.patient : id)
+  // const breadcrumbs = [
+  //   { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+  //   { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
+  // ]
+  // useAddBreadcrumbs(breadcrumbs, true)
 
   const onAppointmentDeleteButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
@@ -101,9 +133,13 @@ const ViewAppointment = () => {
 
   return (
     <>
-      {patient && appointment ? (
+      {patientName && appointment ? (
         <div>
-          <AppointmentDetailForm appointment={appointment} isEditable={false} patient={patient} />
+          <AppointmentDetailForm
+            appointment={appointment}
+            isEditable={false}
+            patient={patientName}
+          />
           <Modal
             body={t('scheduling.appointment.deleteConfirmationMessage')}
             buttonsAlignment="right"
diff --git a/src/shared/model/Appointment.ts b/src/shared/model/Appointment.ts
index bdd6791c77..fbf938d3f2 100644
--- a/src/shared/model/Appointment.ts
+++ b/src/shared/model/Appointment.ts
@@ -8,3 +8,5 @@ export default interface Appointment extends AbstractDBModel {
   reason: string
   type: string
 }
+
+

From 3844b05403ae23ba0dcb52b4907c73afcf6f42dc Mon Sep 17 00:00:00 2001
From: divija-zemoso <divija.amaram@zemosolabs.com>
Date: Thu, 29 Sep 2022 12:20:24 +0530
Subject: [PATCH 2/5] creating a new appointment

---
 .../appointments/AppointmentsList.tsx         |  15 +-
 src/patients/history/mappers/helpers.tsx      |  14 +-
 .../appointments/AppointmentDetailForm.tsx    | 162 ++++++++----------
 .../appointments/ViewAppointments.tsx         |  38 ++--
 .../appointments/constants/Appointment.tsx    |   1 +
 .../appointments/edit/EditAppointment.tsx     |   6 +-
 .../appointments/new/NewAppointment.tsx       | 100 +++++------
 .../appointments/service/Appointments.tsx     |  89 ++++++++++
 .../appointments/service/Patients.tsx         |   2 +-
 .../util/scheduling-appointment.util.ts       |   8 +-
 .../appointments/util/validate-appointment.ts |   6 +-
 .../appointments/view/ViewAppointment.tsx     |   3 +-
 .../DateTimePickerWithLabelFormGroup.tsx      |   5 +-
 src/shared/db/AppointmentRepository.ts        |   6 +-
 src/shared/model/Appointment.ts               |  18 +-
 15 files changed, 281 insertions(+), 192 deletions(-)

diff --git a/src/patients/appointments/AppointmentsList.tsx b/src/patients/appointments/AppointmentsList.tsx
index 898e3ef697..67f40a3f16 100644
--- a/src/patients/appointments/AppointmentsList.tsx
+++ b/src/patients/appointments/AppointmentsList.tsx
@@ -61,15 +61,22 @@ const AppointmentsList = ({ patient }: Props) => {
                   label: t('scheduling.appointment.startDate'),
                   key: 'startDateTime',
                   formatter: (row) =>
-                    row.startDateTime
-                      ? format(new Date(row.startDateTime), 'yyyy-MM-dd, hh:mm a')
-                      : '',
+                    row.start ? format(new Date(row.start), 'yyyy-MM-dd, hh:mm a') : '',
                 },
                 {
                   label: t('scheduling.appointment.endDate'),
                   key: 'endDateTime',
                   formatter: (row) =>
-                    row.endDateTime ? format(new Date(row.endDateTime), 'yyyy-MM-dd, hh:mm a') : '',
+                    row.start
+                      ? format(
+                          new Date(
+                            new Date(row.start).setMinutes(
+                              new Date(row.start).getMinutes() + row.minutesDuration,
+                            ),
+                          ),
+                          'yyyy-MM-dd, hh:mm a',
+                        )
+                      : '',
                 },
                 { label: t('scheduling.appointment.location'), key: 'location' },
                 { label: t('scheduling.appointment.type'), key: 'type' },
diff --git a/src/patients/history/mappers/helpers.tsx b/src/patients/history/mappers/helpers.tsx
index 1a5ee1f877..5f54de031c 100644
--- a/src/patients/history/mappers/helpers.tsx
+++ b/src/patients/history/mappers/helpers.tsx
@@ -35,20 +35,22 @@ export const convertLab = (lab: Lab): PatientHistoryRecord[] => {
 
 export const convertAppointment = (appt: Appointment): PatientHistoryRecord[] => {
   const apptEvents = []
-  if (appt.startDateTime) {
+  if (appt.start) {
     apptEvents.push({
-      date: new Date(appt.startDateTime),
+      date: new Date(appt.start),
       type: HistoryRecordType.APPOINTMENT,
-      info: `Started - ${appt.type}`,
+      info: `Started - ${appt.appointmentType.text}`,
       recordId: appt.id,
       id: `startedAppt${appt.id}`,
     })
   }
-  if (appt.endDateTime) {
+  if (new Date(appt.start).setMinutes(new Date(appt.start).getMinutes() + appt.minutesDuration)) {
     apptEvents.push({
-      date: new Date(appt.endDateTime),
+      date: new Date(
+        new Date(appt.start).setMinutes(new Date(appt.start).getMinutes() + appt.minutesDuration),
+      ),
       type: HistoryRecordType.APPOINTMENT,
-      info: `Ended - ${appt.type}`,
+      info: `Ended - ${appt.appointmentType.text}`,
       recordId: appt.id,
       id: `endedAppt${appt.id}`,
     })
diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index 129e9d1a6e..d62963eb87 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -1,63 +1,46 @@
-// import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
 import { Select, Label, Alert } from '@hospitalrun/components'
-import React from 'react'
-
+import React, { useEffect, useState } from 'react'
+import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
-// import { SelectOption } from '../../shared/components/input/SelectOption'
-import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
-// import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
-// import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
-// import PatientRepository from '../../shared/db/PatientRepository'
 import useTranslator from '../../shared/hooks/useTranslator'
+import Appointment from '../../shared/model/Appointment'
 import Patient from '../../shared/model/Patient'
-// import { Appointment } from './ViewAppointments'
 import { appointmentTypes, appointmentStatus } from '../appointments/constants/Appointment'
-
-export interface Appointment {
-  appointmentType: {
-    text: string
-  }
-  participant: {
-    actor: {
-      reference: string
-    }
-  }[]
-  id: string
-  start: Date
-  minutesDuration: number
-  status: string
-}
+import { getAllPatients } from './service/Patients'
 
 interface Props {
   appointment: Appointment
   patient?: Patient
   isEditable: boolean
   error?: any
-  onFieldChange?: (key: string, value: string | boolean) => void
+  onFieldChange?: (key: string, value: string | boolean | Date | number) => void
+  setAppointment?: (appointment: Appointment) => void
 }
 
 const AppointmentDetailForm = (props: Props) => {
-  const { onFieldChange, appointment, patient, isEditable, error } = props
+  const { appointment, patient, isEditable, error, setAppointment } = props
   const { t } = useTranslator()
+  const [patientDetails, setPatientDetails] = useState<any>()
+  const [options, setOptions] = useState<any[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(false)
 
-  const patientName: string = String(patient)
-
-  const onDateChange = (date: Date, fieldName: string) =>
-    onFieldChange && onFieldChange(fieldName, date.toISOString())
+  // const selectedValues: any[] = []
 
-  // const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
-  //   onFieldChange && onFieldChange(fieldName, event.target.value)
+  // const patientName: string = String(patient)
+  // console.log(patientName)
+  // if (patientName) {
+  //   selectedValues.push(patientName)
+  //   console.log('selected values', selectedValues)
+  // }
 
-  // const typeOptions: SelectOption[] = [
-  //   { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
-  //   { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
-  //   { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
-  //   { label: t('scheduling.appointment.types.routine'), value: 'routine' },
-  //   { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
-  // ]
-
-  var end = new Date(appointment.start)
-  end.setMinutes(end.getMinutes() + appointment.minutesDuration)
+  useEffect(() => {
+    console.log('appointment details', appointment)
+    if (!patientDetails) {
+      ;(async () => {
+        setPatientDetails(await getAllPatients())
+      })()
+    }
+  }, [])
 
   return (
     <>
@@ -70,24 +53,32 @@ const AppointmentDetailForm = (props: Props) => {
               isRequired
               text={t('scheduling.appointment.patient')}
             />
-            {/* <Typeahead
+            <AsyncTypeahead
               id="patientTypeahead"
               disabled={!isEditable || patient !== undefined}
-              value={patient}
+              defaultInputValue={String(patient)}
               placeholder={t('scheduling.appointment.patient')}
-              onChange={(p: Patient[]) =>
-                onFieldChange && p[0] && onFieldChange('patient', p[0].id)
-              }
-              onSearch={async (query: string) => PatientRepository.search(query)}
-              searchAccessor="fullName"
-              renderMenuItemChildren={(p: Patient) => <div>{`${p.fullName} (${p.code})`}</div>}
+              onChange={(p: any) => {
+                appointment.patientId = p[0] && p[0].resource.id
+              }}
+              onSearch={async (query: string) => {
+                setIsLoading(true)
+                setOptions(
+                  patientDetails?.filter((detail: any) =>
+                    String(detail.resource.name[0].text)
+                      .toLowerCase()
+                      .includes(query.toLowerCase()),
+                  ),
+                )
+                setIsLoading(false)
+              }}
+              options={options}
+              labelKey={(option) => `${option.resource?.name[0].text} `}
+              renderMenuItemChildren={(p: any) => {
+                return <div>{`${p.resource.name[0].text} ${p.resource.id}`}</div>
+              }}
               isInvalid={!!error?.patient}
-              feedback={t(error?.patient)}
-            /> */}
-            <TextInputWithLabelFormGroup
-              name="patientName"
-              value={patientName}
-              isEditable={isEditable}
+              isLoading={isLoading}
             />
           </div>
         </div>
@@ -97,40 +88,36 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="startDate"
             label={t('scheduling.appointment.startDate')}
-            value={appointment.start ? new Date(appointment.start) : undefined}
+            value={appointment.start ? new Date(appointment.start) : new Date(Date.now())}
             isEditable={isEditable}
             isInvalid={error?.startDateTime}
             feedback={t(error?.startDateTime)}
             onChange={(date: Date) => {
-              onDateChange(date, 'startDateTime')
+              appointment.start = String(date)
+              if (setAppointment) setAppointment(appointment)
             }}
+            isRequired
           />
         </div>
         <div className="col">
           <DateTimePickerWithLabelFormGroup
             name="endDate"
             label={t('scheduling.appointment.endDate')}
-            value={appointment.start ? end : undefined}
+            value={appointment.end ? new Date(appointment.end) : new Date(Date.now())}
             isEditable={isEditable}
             onChange={(date: Date) => {
-              onDateChange(date, 'endDateTime')
+              appointment.end = String(date)
+              if (new Date(appointment.end) < new Date(appointment.start)) {
+                appointment.end = JSON.stringify(new Date(appointment.start))
+              }
+              appointment.minutesDuration =
+                new Date(appointment.end).getMinutes() - new Date(appointment.start).getMinutes()
+              if (setAppointment) setAppointment(appointment)
             }}
+            isRequired
           />
         </div>
       </div>
-      {/* <div className="row">
-        <div className="col">
-          <TextInputWithLabelFormGroup
-            name="location"
-            label={t('scheduling.appointment.location')}
-            value={appointment.location}
-            isEditable={isEditable}
-            onChange={(event) => {
-              onInputElementChange(event, 'location')
-            }}
-          />
-        </div>
-      </div> */}
       <div className="row">
         <div className="col">
           <div className="form-group" data-testid="typeSelect">
@@ -139,9 +126,12 @@ const AppointmentDetailForm = (props: Props) => {
               id="type"
               options={appointmentTypes}
               defaultSelected={appointmentTypes.filter(
-                ({ value }) => value === appointment.appointmentType.text,
+                ({ value }) => value === appointment?.appointmentType?.text,
               )}
-              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              onChange={(values) => {
+                appointment.appointmentType = { text: values[0] }
+                if (setAppointment) setAppointment(appointment)
+              }}
               disabled={!isEditable}
             />
           </div>
@@ -155,29 +145,17 @@ const AppointmentDetailForm = (props: Props) => {
               id="status"
               options={appointmentStatus}
               defaultSelected={appointmentStatus.filter(
-                ({ value }) => value === appointment.status,
+                ({ value }) => value == appointment?.status,
               )}
-              // onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
+              onChange={(values) => {
+                appointment.status = values[0]
+                if (setAppointment) setAppointment(appointment)
+              }}
               disabled={!isEditable}
             />
           </div>
         </div>
       </div>
-      {/* <div className="row">
-        <div className="col">
-          <div className="form-group">
-            <TextFieldWithLabelFormGroup
-              name="reason"
-              label={t('scheduling.appointment.reason')}
-              value={appointment.reason}
-              isEditable={isEditable}
-              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
-                onFieldChange && onFieldChange('reason', event.currentTarget.value)
-              }
-            />
-          </div>
-        </div>
-      </div> */}
     </>
   )
 }
diff --git a/src/scheduling/appointments/ViewAppointments.tsx b/src/scheduling/appointments/ViewAppointments.tsx
index 64f53fe935..a00621b936 100644
--- a/src/scheduling/appointments/ViewAppointments.tsx
+++ b/src/scheduling/appointments/ViewAppointments.tsx
@@ -1,13 +1,13 @@
 import { Calendar, Button } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
-
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider'
 import { useUpdateTitle } from '../../page-header/title/TitleContext'
 import FilterPatientModal from '../../patients/visits/FilterPatientModal'
 import Loading from '../../shared/components/Loading'
 import useTranslator from '../../shared/hooks/useTranslator'
+import Appointment from '../../shared/model/Appointment'
 import { getAppointment } from './service/Appointments'
 import { getPatientNameById } from './service/Patients'
 
@@ -22,22 +22,22 @@ interface Event {
   status: string
 }
 
-export interface Appointment {
-  resource: {
-    appointmentType: {
-      text: string
-    }
-    participant: {
-      actor: {
-        reference: string
-      }
-    }[]
-    id: string
-    start: Date
-    minutesDuration: number
-    status: string
-  }
-}
+// export interface Appointment {
+//   resource: {
+//     appointmentType: {
+//       text: string
+//     }
+//     participant: {
+//       actor: {
+//         reference: string
+//       }
+//     }[]
+//     id: string
+//     start: Date
+//     minutesDuration: number
+//     status: string
+//   }
+// }
 
 const breadcrumbs = [{ i18nKey: 'scheduling.appointments.label', location: '/appointments' }]
 
@@ -48,14 +48,12 @@ const ViewAppointments = () => {
   useEffect(() => {
     updateTitle(t('scheduling.appointments.label'))
   })
-  // const { data: appointments, isLoading } = useAppointments()
   const [appointments, setAppointment] = useState<any[]>()
   const [isLoading, setIsLoading] = useState(true)
   const [events, setEvents] = useState<Event[]>([])
   const setButtonToolBar = useButtonToolbarSetter()
   useAddBreadcrumbs(breadcrumbs, true)
   const [showFilter, setshowFilter] = useState(false)
-
   const [patientStatus, setpatientStatus] = useState('')
   const [appointmentType, setappointmentType] = useState('')
 
@@ -108,7 +106,7 @@ const ViewAppointments = () => {
 
   useEffect(() => {
     if (appointments) {
-      appointments.map(async (appointment: Appointment) => {
+      appointments.map(async (appointment: { resource: Appointment }) => {
         const patientName = await getPatientNameById(
           parseInt(String(appointment.resource.participant[0].actor.reference.substr(8))),
         )
diff --git a/src/scheduling/appointments/constants/Appointment.tsx b/src/scheduling/appointments/constants/Appointment.tsx
index 60bf695c0c..e3517d1e62 100644
--- a/src/scheduling/appointments/constants/Appointment.tsx
+++ b/src/scheduling/appointments/constants/Appointment.tsx
@@ -14,4 +14,5 @@ export const appointmentTypes: SelectOption[] = [
 export const appointmentStatus: SelectOption[] = [
   { label: 'Scheduled', value: 'Scheduled' },
   { label: 'Confirmed', value: 'Confirmed' },
+  { label: 'Checked In', value: 'Checked In' },
 ]
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index 6ffed2b90a..d074f970cf 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -34,7 +34,9 @@ const EditAppointment = () => {
   //   isError: isErrorUpdate,
   //   error: updateMutateError,
   // } = useUpdateAppointment(newAppointment)
-  const { data: patient } = usePatient(currentAppointment ? currentAppointment.patient : id)
+  const { data: patient } = usePatient(
+    currentAppointment ? currentAppointment.participant[0].actor : id,
+  )
 
   const breadcrumbs = [
     { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
@@ -68,7 +70,7 @@ const EditAppointment = () => {
   //   }
   // }
 
-  const onFieldChange = (key: string, value: string | boolean) => {
+  const onFieldChange = (key: string, value: string | boolean | Date | number) => {
     setAppointment({
       ...newAppointment,
       [key]: value,
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index 32689db8b0..1e120de9e1 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -1,5 +1,6 @@
 // import { Button, Spinner, Toast } from '@hospitalrun/components'
-import { Button, Spinner } from '@hospitalrun/components'
+import { Button, Spinner, Toast } from '@hospitalrun/components'
+import isEmpty from 'lodash/isEmpty'
 // import addMinutes from 'date-fns/addMinutes'
 // import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
 // import isEmpty from 'lodash/isEmpty'
@@ -9,10 +10,12 @@ import { useHistory, useLocation } from 'react-router-dom'
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
 import useTranslator from '../../../shared/hooks/useTranslator'
+import Appointment from '../../../shared/model/Appointment'
 // import Appointment from '../../../shared/model/Appointment'
 import Patient from '../../../shared/model/Patient'
 import useScheduleAppointment from '../../hooks/useScheduleAppointment'
-import AppointmentDetailForm, { Appointment } from '../AppointmentDetailForm'
+import AppointmentDetailForm from '../AppointmentDetailForm'
+import { createAppointment } from '../service/Appointments'
 import { AppointmentError } from '../util/validate-appointment'
 // import { Appointment } from '../ViewAppointments'
 
@@ -42,46 +45,59 @@ const NewAppointment = () => {
   // const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
   // const endDateTime = addMinutes(startDateTime, 60)
   const [saved, setSaved] = useState(false)
-  const [newAppointmentMutateError, _setError] = useState<AppointmentError>({} as AppointmentError)
-  // const [newAppointment, setAppointment] = useState({
-  //   patient: patient || '',
-  //   startDateTime: startDateTime.toISOString(),
-  //   endDateTime: endDateTime.toISOString(),
-  //   location: '',
-  //   reason: '',
-  //   type: '',
-  // } as Appointment)
+  const [newAppointmentMutateError, setError] = useState<AppointmentError>({} as AppointmentError)
 
   const [newAppointment, setAppointment] = useState({} as Appointment)
 
+  const [aptId, setAptId] = useState()
+
   const {
     mutate: newAppointmentMutate,
     isLoading: isLoadingNewAppointment,
     isError: isErrorNewAppointment,
-    validator: _validateNewAppointment,
+    validator: validateNewAppointment,
   } = useScheduleAppointment()
 
   const onCancelClick = () => {
     history.push('/appointments')
   }
 
-  // const onSave = () => {
-  //   setSaved(true)
-  //   setError(validateNewAppointment(newAppointment))
+  // const func = async () => {
+  //   return await createAppointment(newAppointment)
   // }
 
+  const onSave = async () => {
+    console.log(newAppointment)
+    let data = await createAppointment(newAppointment)
+    console.log('data', await data)
+    setAptId(await data)
+    // console.log('@@@@@', await data)
+    // setAptId(await data)
+    // console.log('%%%%', aptId)
+    // newAppointment.id = String(aptId)
+    // setAppointment({ ...newAppointment })
+    // console.log(newAppointment)
+    setSaved(true)
+    setError(validateNewAppointment(newAppointment))
+  }
+
+  useEffect(() => {
+    console.log(newAppointment)
+  }, [newAppointment])
+
   useEffect(() => {
     // if save click and no error proceed, else give error message.
-    // if (saved) {
-    //   if (isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
-    //     newAppointmentMutate(newAppointment).then((result) => {
-    //       Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
-    //       history.push(`/appointments/${result?.id}`)
-    //     })
-    //   } else if (!isEmpty(newAppointmentMutateError)) {
-    //     newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
-    //   }
-    // }
+    if (saved) {
+      if (isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
+        newAppointmentMutate(newAppointment).then((_result) => {
+          Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
+          console.log(aptId)
+          history.push(`/appointments/${aptId}`)
+        })
+      } else if (!isEmpty(newAppointmentMutateError)) {
+        newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
+      }
+    }
     setSaved(false)
   }, [
     saved,
@@ -97,46 +113,20 @@ const NewAppointment = () => {
     return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
   }
 
-  const onFieldChange = (key: string, value: string | boolean) => {
-    setAppointment({
-      ...newAppointment,
-      [key]: value,
-    })
-  }
-
   return (
-    // <div>
-    //   <form aria-label="new appointment form">
-    //     <AppointmentDetailForm
-    //       appointment={newAppointment as Appointment}
-    //       patient={patient as Patient}
-    //       error={newAppointmentMutateError}
-    //       onFieldChange={onFieldChange}
-    //     />
-    //     <div className="row float-right">
-    //       <div className="btn-group btn-group-lg mr-3">
-    //         <Button className="mr-2" color="success" onClick={onSave}>
-    //           {t('scheduling.appointments.createAppointment')}
-    //         </Button>
-    //         <Button color="danger" onClick={onCancelClick}>
-    //           {t('actions.cancel')}
-    //         </Button>
-    //       </div>
-    //     </div>
-    //   </form>
-    // </div>
-
     <div>
       <form aria-label="new appointment form">
         <AppointmentDetailForm
           appointment={newAppointment as Appointment}
           patient={patient as Patient}
           error={newAppointmentMutateError}
-          onFieldChange={onFieldChange}
+          setAppointment={async (appointmentDetail) => {
+            setAppointment({ ...appointmentDetail })
+          }}
         />
         <div className="row float-right">
           <div className="btn-group btn-group-lg mr-3">
-            <Button className="mr-2" color="success">
+            <Button className="mr-2" color="success" onClick={onSave}>
               {t('scheduling.appointments.createAppointment')}
             </Button>
             <Button color="danger" onClick={onCancelClick}>
diff --git a/src/scheduling/appointments/service/Appointments.tsx b/src/scheduling/appointments/service/Appointments.tsx
index 7bd4d2e24c..925d95c966 100644
--- a/src/scheduling/appointments/service/Appointments.tsx
+++ b/src/scheduling/appointments/service/Appointments.tsx
@@ -1,5 +1,6 @@
 import axios from 'axios'
 import dotenv from 'dotenv'
+import Appointment from '../../../shared/model/Appointment'
 dotenv.config()
 
 const endpoint = `${process.env.REACT_APP_ENDPOINT}`
@@ -40,3 +41,91 @@ export const getAppointmentId = (id: number) => {
       console.log(error)
     })
 }
+
+export const createAppointment = (appointment: Appointment) => {
+  console.log(appointment)
+
+  const data = {
+    data: {
+      resourceType: 'Appointment',
+      start: new Date(appointment.start),
+      minutesDuration: appointment.minutesDuration,
+      description: '',
+      meta: {},
+      created: new Date(Date.now()),
+      status: appointment.status,
+      participant: [
+        {
+          actor: {
+            reference: `Patient/140919926030337`,
+          },
+        },
+        {
+          actor: {
+            reference: 'Practitioner/140857915539458',
+          },
+        },
+        {
+          actor: {
+            reference: 'HealthcareService/140857911017476',
+          },
+        },
+      ],
+      extension: [
+        {
+          url: 'http://xcaliber-fhir/structureDefinition/slot-type',
+          valueString: 'appointment',
+        },
+        {
+          url: 'http://xcaliber-fhir/structureDefinition/appointment-mode',
+          valueString: 'IN_PERSON',
+        },
+        {
+          url: 'http://xcaliber-fhir/structureDefinition/status',
+          extension: [
+            {
+              url: 'http://xcaliber-fhir/structureDefinition/status',
+              valueString: `${appointment.status ? appointment.status : 'Scheduled'}`,
+            },
+            {
+              url: 'http://xcaliber-fhir/structureDefinition/room',
+              valueString: null,
+            },
+          ],
+        },
+      ],
+      appointmentType: {
+        coding: [
+          {
+            system: 'https://hl7.org/fhir/v2/ValueSet/appointment-type',
+            code: `${
+              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+            }`,
+            display: `${
+              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+            }`,
+          },
+        ],
+        text: `${
+          appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+        }`,
+      },
+      patientInstruction: null,
+      contained: [],
+    },
+  }
+
+  console.log(data)
+
+  return axios
+    .post(`${endpoint}/Appointment`, data, config)
+    .then(async (response) => {
+      console.log(response)
+      const data = response.data
+      console.log(data.data.id)
+      return data.data.id
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
diff --git a/src/scheduling/appointments/service/Patients.tsx b/src/scheduling/appointments/service/Patients.tsx
index 4e41cf9748..00cec176d2 100644
--- a/src/scheduling/appointments/service/Patients.tsx
+++ b/src/scheduling/appointments/service/Patients.tsx
@@ -18,7 +18,7 @@ export const getAllPatients = () => {
       console.log(response)
       const data = await response.data
       console.log(data)
-      return data
+      return data.data.entry
     })
     .catch((error) => {
       console.log(error)
diff --git a/src/scheduling/appointments/util/scheduling-appointment.util.ts b/src/scheduling/appointments/util/scheduling-appointment.util.ts
index ac049e500f..2f6145f8a6 100644
--- a/src/scheduling/appointments/util/scheduling-appointment.util.ts
+++ b/src/scheduling/appointments/util/scheduling-appointment.util.ts
@@ -17,9 +17,11 @@ export function getAppointmentLabel(appointment: Appointment | undefined) {
     return ''
   }
 
-  const { id, startDateTime, endDateTime } = appointment
+  const { id, start,minutesDuration} = appointment
 
-  return startDateTime && endDateTime
-    ? `${toLocaleString(new Date(startDateTime))} - ${toLocaleString(new Date(endDateTime))}`
+  return start
+    ? `${toLocaleString(new Date(start))} - ${toLocaleString(new Date(
+      new Date(start).setMinutes(new Date(start).getMinutes() + minutesDuration),
+    ))}`
     : id
 }
diff --git a/src/scheduling/appointments/util/validate-appointment.ts b/src/scheduling/appointments/util/validate-appointment.ts
index b490b5ca43..f47a8af231 100644
--- a/src/scheduling/appointments/util/validate-appointment.ts
+++ b/src/scheduling/appointments/util/validate-appointment.ts
@@ -18,10 +18,12 @@ export class AppointmentError extends Error {
 export default function validateAppointment(appointment: Appointment): AppointmentError {
   const newError: any = {}
 
-  if (!appointment.patient) {
+  if (!appointment.patientId) {
     newError.patient = 'scheduling.appointment.errors.patientRequired'
   }
-  if (isBefore(new Date(appointment.endDateTime), new Date(appointment.startDateTime))) {
+  if (isBefore(new Date(
+    new Date(appointment.start).setMinutes(new Date(appointment.start).getMinutes() + appointment.minutesDuration),
+  ), new Date(appointment.start))) {
     newError.startDateTime = 'scheduling.appointment.errors.startDateMustBeBeforeEndDate'
   }
 
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index 953a1a39a5..951cc47823 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -8,12 +8,13 @@ import { useButtonToolbarSetter } from '../../../page-header/button-toolbar/Butt
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
 // import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
+import Appointment from '../../../shared/model/Appointment'
 import Patient from '../../../shared/model/Patient'
 import Permissions from '../../../shared/model/Permissions'
 import { RootState } from '../../../shared/store'
 // import useAppointment from '../../hooks/useAppointment'
 import useDeleteAppointment from '../../hooks/useDeleteAppointment'
-import AppointmentDetailForm, { Appointment } from '../AppointmentDetailForm'
+import AppointmentDetailForm from '../AppointmentDetailForm'
 import { getAppointmentId } from '../service/Appointments'
 import { getPatientNameById } from '../service/Patients'
 // import { getAppointmentLabel } from '../util/scheduling-appointment.util'
diff --git a/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx b/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx
index ce7f807fbb..3b70fc9ef4 100644
--- a/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx
+++ b/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx
@@ -5,7 +5,7 @@ import moment from 'moment'
 interface Props {
   name: string
   label: string
-  value: Date | undefined
+  value: Date
   isEditable?: boolean
   isRequired?: boolean
   onChange?: (date: Date) => void
@@ -28,8 +28,9 @@ const DateTimePickerWithLabelFormGroup = (props: Props) => {
         isInvalid={isInvalid}
         feedback={feedback}
         onChange={(inputDate) => {
+          console.log('date time picker', inputDate)
           if (onChange) {
-            onChange(inputDate)
+            onChange(new Date(inputDate))
           }
         }}
         showTimeSelect
diff --git a/src/shared/db/AppointmentRepository.ts b/src/shared/db/AppointmentRepository.ts
index 36adcea156..bfd161a80d 100644
--- a/src/shared/db/AppointmentRepository.ts
+++ b/src/shared/db/AppointmentRepository.ts
@@ -1,10 +1,10 @@
 import escapeStringRegexp from 'escape-string-regexp'
 
 import { relationalDb } from '../config/pouchdb'
-import Appointment from '../model/Appointment'
+import AppointmentDB from '../model/Appointment'
 import Repository from './Repository'
 
-class AppointmentRepository extends Repository<Appointment> {
+class AppointmentRepository extends Repository<AppointmentDB> {
   constructor() {
     super('appointment', relationalDb)
     this.db.createIndex({
@@ -15,7 +15,7 @@ class AppointmentRepository extends Repository<Appointment> {
   }
 
   // Fuzzy search for patient appointments. Used for patient appointment search bar
-  async searchPatientAppointments(patientId: string, text: string): Promise<Appointment[]> {
+  async searchPatientAppointments(patientId: string, text: string): Promise<AppointmentDB[]> {
     const escapedString = escapeStringRegexp(text)
     return super.search({
       selector: {
diff --git a/src/shared/model/Appointment.ts b/src/shared/model/Appointment.ts
index fbf938d3f2..d5e3552541 100644
--- a/src/shared/model/Appointment.ts
+++ b/src/shared/model/Appointment.ts
@@ -1,6 +1,6 @@
 import AbstractDBModel from './AbstractDBModel'
 
-export default interface Appointment extends AbstractDBModel {
+export default interface AppointmentDB extends AbstractDBModel {
   startDateTime: string
   endDateTime: string
   patient: string
@@ -9,4 +9,20 @@ export default interface Appointment extends AbstractDBModel {
   type: string
 }
 
+export default interface Appointment {
+  appointmentType: {
+    text: string
+  }
+  participant: {
+    actor: {
+      reference: string
+    }
+  }[]
+  id: string
+  start: string
+  end:string
+  minutesDuration: number
+  status: string
+  patientId:string
+}
 

From 44357eb225ef708917dab454fd047845a3d68c66 Mon Sep 17 00:00:00 2001
From: divija-zemoso <divija.amaram@zemosolabs.com>
Date: Thu, 29 Sep 2022 23:10:00 +0530
Subject: [PATCH 3/5] integrated update appointment and delete appointment

---
 .../appointments/AppointmentDetailForm.tsx    |  19 ++-
 .../appointments/edit/EditAppointment.tsx     | 157 +++++++++---------
 .../appointments/new/NewAppointment.tsx       |   6 -
 .../appointments/service/Appointments.tsx     |  98 +++++++++++
 .../appointments/view/ViewAppointment.tsx     |  22 ++-
 5 files changed, 200 insertions(+), 102 deletions(-)

diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index d62963eb87..54cb34b4ee 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -1,4 +1,5 @@
 import { Select, Label, Alert } from '@hospitalrun/components'
+import moment from 'moment'
 import React, { useEffect, useState } from 'react'
 import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
@@ -55,7 +56,7 @@ const AppointmentDetailForm = (props: Props) => {
             />
             <AsyncTypeahead
               id="patientTypeahead"
-              disabled={!isEditable || patient !== undefined}
+              disabled={!isEditable}
               defaultInputValue={String(patient)}
               placeholder={t('scheduling.appointment.patient')}
               onChange={(p: any) => {
@@ -88,7 +89,7 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="startDate"
             label={t('scheduling.appointment.startDate')}
-            value={appointment.start ? new Date(appointment.start) : new Date(Date.now())}
+            value={appointment?.start ? new Date(appointment.start) : new Date(Date.now())}
             isEditable={isEditable}
             isInvalid={error?.startDateTime}
             feedback={t(error?.startDateTime)}
@@ -103,15 +104,17 @@ const AppointmentDetailForm = (props: Props) => {
           <DateTimePickerWithLabelFormGroup
             name="endDate"
             label={t('scheduling.appointment.endDate')}
-            value={appointment.end ? new Date(appointment.end) : new Date(Date.now())}
+            value={
+              appointment?.start && appointment.minutesDuration
+                ? moment(appointment.start).add(appointment.minutesDuration, 'minute').toDate()
+                : new Date(Date.now())
+            }
             isEditable={isEditable}
             onChange={(date: Date) => {
               appointment.end = String(date)
-              if (new Date(appointment.end) < new Date(appointment.start)) {
-                appointment.end = JSON.stringify(new Date(appointment.start))
-              }
-              appointment.minutesDuration =
-                new Date(appointment.end).getMinutes() - new Date(appointment.start).getMinutes()
+              var difference =
+                new Date(appointment.end).getTime() - new Date(appointment.start).getTime()
+              appointment.minutesDuration = Math.round(difference / 60000)
               if (setAppointment) setAppointment(appointment)
             }}
             isRequired
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index d074f970cf..db80bdf2cf 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -1,19 +1,15 @@
-// import { Spinner, Button, Toast } from '@hospitalrun/components'
-import { Spinner, Button } from '@hospitalrun/components'
-// import isEmpty from 'lodash/isEmpty'
+import { Button, Spinner, Toast } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
-
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
-import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
-// import Appointment from '../../../shared/model/Appointment'
-import useAppointment from '../../hooks/useAppointment'
-// import useUpdateAppointment from '../../hooks/useUpdateAppointment'
+import Appointment from '../../../shared/model/Appointment'
+import Patient from '../../../shared/model/Patient'
 import AppointmentDetailForm from '../AppointmentDetailForm'
+import { getAppointmentId, updateAppointment } from '../service/Appointments'
+import { getPatientNameById } from '../service/Patients'
 import { getAppointmentLabel } from '../util/scheduling-appointment.util'
-// import { Appointment } from '../ViewAppointments'
 
 const EditAppointment = () => {
   const { t } = useTranslator()
@@ -25,23 +21,42 @@ const EditAppointment = () => {
   }, [updateTitle, t])
   const history = useHistory()
 
-  const [newAppointment, setAppointment] = useState<any>()
-  const { data: currentAppointment, isLoading: isLoadingAppointment } = useAppointment(id)
+  const [appointment, setAppointment] = useState({} as Appointment)
+  const [patientName, setPatientName] = useState<Patient>()
 
-  // const {
-  //   mutate: updateMutate,
-  //   isLoading: isLoadingUpdate,
-  //   isError: isErrorUpdate,
-  //   error: updateMutateError,
-  // } = useUpdateAppointment(newAppointment)
-  const { data: patient } = usePatient(
-    currentAppointment ? currentAppointment.participant[0].actor : id,
-  )
+  const appointmentFunc = async () => {
+    setAppointment(await getAppointmentId(id))
+  }
+
+  const patientFunc = async () => {
+    if (Array.isArray(appointment.participant))
+      setPatientName(
+        await getPatientNameById(
+          parseInt(String(appointment?.participant[0].actor.reference.substr(8))),
+        ),
+      )
+  }
+
+  useEffect(() => {
+    console.log(id)
+    appointmentFunc()
+  }, [])
+
+  useEffect(() => {
+    if (appointment) {
+      console.log('view appointment', appointment)
+      patientFunc()
+    }
+  }, [appointment])
+
+  useEffect(() => {
+    console.log('editing appointment', appointment)
+  }, [appointment])
 
   const breadcrumbs = [
     { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
     {
-      text: getAppointmentLabel(currentAppointment),
+      text: getAppointmentLabel(appointment),
       location: `/appointments/${id}`,
     },
     {
@@ -51,79 +66,57 @@ const EditAppointment = () => {
   ]
   useAddBreadcrumbs(breadcrumbs, true)
 
-  useEffect(() => {
-    if (currentAppointment !== undefined) {
-      setAppointment(currentAppointment)
-    }
-  }, [currentAppointment])
-
   const onCancel = () => {
-    history.push(`/appointments/${newAppointment.id}`)
+    history.push(`/appointments/${id}`)
   }
 
-  // const onSave = () => {
-  //   if (isEmpty(updateMutateError) && !isErrorUpdate) {
-  //     updateMutate(newAppointment).then(() => {
-  //       Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
-  //       history.push(`/appointments/${newAppointment.id}`)
-  //     })
-  //   }
-  // }
-
-  const onFieldChange = (key: string, value: string | boolean | Date | number) => {
-    setAppointment({
-      ...newAppointment,
-      [key]: value,
-    })
+  const onSave = async () => {
+    console.log(appointment)
+    let { id, status } = await updateAppointment(appointment)
+    console.log('response id', id)
+    console.log('response status', status)
+    if (status === 'success') {
+      console.log('updated the values successfully')
+      Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
+      history.push(`/appointments/${id}`)
+    }
   }
 
   // if (isLoadingAppointment || isLoadingUpdate) {
   //   return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
   // }
 
-  if (isLoadingAppointment) {
-    return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
-  }
+  // if (isLoadingAppointment) {
+  //   return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
+  // }
 
   return (
-    // <div>
-    //   <AppointmentDetailForm
-    //     isEditable
-    //     appointment={newAppointment}
-    //     patient={patient}
-    //     onFieldChange={onFieldChange}
-    //     error={updateMutateError}
-    //   />
-    //   <div className="row float-right">
-    //     <div className="btn-group btn-group-lg mr-3">
-    //       <Button className="mr-2" color="success" onClick={onSave}>
-    //         {t('scheduling.appointments.updateAppointment')}
-    //       </Button>
-    //       <Button color="danger" onClick={onCancel}>
-    //         {t('actions.cancel')}
-    //       </Button>
-    //     </div>
-    //   </div>
-    // </div>
-
-    <div>
-      <AppointmentDetailForm
-        isEditable
-        appointment={newAppointment}
-        patient={patient}
-        onFieldChange={onFieldChange}
-      />
-      <div className="row float-right">
-        <div className="btn-group btn-group-lg mr-3">
-          <Button className="mr-2" color="success">
-            {t('scheduling.appointments.updateAppointment')}
-          </Button>
-          <Button color="danger" onClick={onCancel}>
-            {t('actions.cancel')}
-          </Button>
+    <>
+      {patientName && appointment ? (
+        <div>
+          <AppointmentDetailForm
+            isEditable
+            appointment={appointment}
+            patient={patientName}
+            setAppointment={(appointmentDetail) => {
+              setAppointment({ ...appointmentDetail })
+            }}
+          />
+          <div className="row float-right">
+            <div className="btn-group btn-group-lg mr-3">
+              <Button className="mr-2" color="success" onClick={onSave}>
+                {t('scheduling.appointments.updateAppointment')}
+              </Button>
+              <Button color="danger" onClick={onCancel}>
+                {t('actions.cancel')}
+              </Button>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      ) : (
+        <Spinner type="BarLoader" loading />
+      )}
+    </>
   )
 }
 
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index 1e120de9e1..d15031bbcb 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -71,12 +71,6 @@ const NewAppointment = () => {
     let data = await createAppointment(newAppointment)
     console.log('data', await data)
     setAptId(await data)
-    // console.log('@@@@@', await data)
-    // setAptId(await data)
-    // console.log('%%%%', aptId)
-    // newAppointment.id = String(aptId)
-    // setAppointment({ ...newAppointment })
-    // console.log(newAppointment)
     setSaved(true)
     setError(validateNewAppointment(newAppointment))
   }
diff --git a/src/scheduling/appointments/service/Appointments.tsx b/src/scheduling/appointments/service/Appointments.tsx
index 925d95c966..ece12663a6 100644
--- a/src/scheduling/appointments/service/Appointments.tsx
+++ b/src/scheduling/appointments/service/Appointments.tsx
@@ -129,3 +129,101 @@ export const createAppointment = (appointment: Appointment) => {
       console.log(error)
     })
 }
+
+export const updateAppointment = (appointment: Appointment) => {
+  console.log(appointment)
+  const data = {
+    data: {
+      resourceType: 'Appointment',
+      start: new Date(appointment.start),
+      minutesDuration: appointment.minutesDuration,
+      description: '',
+      meta: {},
+      created: new Date(Date.now()),
+      status: appointment.status,
+      participant: [
+        {
+          actor: {
+            reference: `Patient/${appointment?.participant[0].actor.reference.substring(8)}`,
+          },
+        },
+        {
+          actor: {
+            reference: 'Practitioner/140857915539458',
+          },
+        },
+        {
+          actor: {
+            reference: 'HealthcareService/140857911017476',
+          },
+        },
+      ],
+      extension: [
+        {
+          url: 'http://xcaliber-fhir/structureDefinition/slot-type',
+          valueString: 'appointment',
+        },
+        {
+          url: 'http://xcaliber-fhir/structureDefinition/appointment-mode',
+          valueString: 'IN_PERSON',
+        },
+        {
+          url: 'http://xcaliber-fhir/structureDefinition/status',
+          extension: [
+            {
+              url: 'http://xcaliber-fhir/structureDefinition/status',
+              valueString: `${appointment.status ? appointment.status : 'Scheduled'}`,
+            },
+            {
+              url: 'http://xcaliber-fhir/structureDefinition/room',
+              valueString: null,
+            },
+          ],
+        },
+      ],
+      appointmentType: {
+        coding: [
+          {
+            system: 'https://hl7.org/fhir/v2/ValueSet/appointment-type',
+            code: `${
+              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+            }`,
+            display: `${
+              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+            }`,
+          },
+        ],
+        text: `${
+          appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+        }`,
+      },
+      patientInstruction: null,
+      contained: [],
+    },
+  }
+
+  console.log(data)
+  return axios
+    .put(`${endpoint}/Appointment/${appointment.id}`, data, config)
+    .then(async (response) => {
+      console.log(response)
+      const data = response.data
+      console.log(data.data)
+      return data.data
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+export const deleteAppointment = (id: number) => {
+  return axios
+    .delete(`${endpoint}/Appointment/${id}`, config)
+    .then((response) => {
+      console.log(response)
+      return 'success'
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index 951cc47823..d0b3d4d2a2 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -13,9 +13,9 @@ import Patient from '../../../shared/model/Patient'
 import Permissions from '../../../shared/model/Permissions'
 import { RootState } from '../../../shared/store'
 // import useAppointment from '../../hooks/useAppointment'
-import useDeleteAppointment from '../../hooks/useDeleteAppointment'
+// import useDeleteAppointment from '../../hooks/useDeleteAppointment'
 import AppointmentDetailForm from '../AppointmentDetailForm'
-import { getAppointmentId } from '../service/Appointments'
+import { deleteAppointment, getAppointmentId } from '../service/Appointments'
 import { getPatientNameById } from '../service/Patients'
 // import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 // import { Appointment } from '../ViewAppointments'
@@ -32,7 +32,7 @@ const ViewAppointment = () => {
 
   const { id } = useParams<any>()
   const history = useHistory()
-  const [deleteMutate] = useDeleteAppointment()
+  // const [deleteMutate] = useDeleteAppointment()
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(false)
   const setButtonToolBar = useButtonToolbarSetter()
   const { permissions } = useSelector((state: RootState) => state.user)
@@ -78,15 +78,25 @@ const ViewAppointment = () => {
     setShowDeleteConfirmation(true)
   }
 
-  const onDeleteConfirmationButtonClick = () => {
+  const onDeleteConfirmationButtonClick = async () => {
     if (!appointment) {
       return
     }
 
-    deleteMutate({ appointmentId: appointment.id }).then(() => {
+    console.log(appointment)
+
+    // deleteMutate({ appointmentId: appointment.id }).then(() => {
+    //   history.push('/appointments')
+    //   Toast('success', t('states.success'), t('scheduling.appointment.successfullyDeleted'))
+    // })
+
+    let status = await deleteAppointment(parseInt(appointment.id))
+
+    if (status === 'success') {
       history.push('/appointments')
       Toast('success', t('states.success'), t('scheduling.appointment.successfullyDeleted'))
-    })
+    }
+
     setShowDeleteConfirmation(false)
   }
 

From 18f374c9e37a29af75f1a85caec7d5058f584d56 Mon Sep 17 00:00:00 2001
From: divija-zemoso <divija.amaram@zemosolabs.com>
Date: Fri, 30 Sep 2022 10:54:07 +0530
Subject: [PATCH 4/5] added default values

---
 .../appointments/AppointmentDetailForm.tsx    | 24 +++++++++++++++++--
 .../appointments/edit/EditAppointment.tsx     |  7 ++++++
 .../appointments/new/NewAppointment.tsx       |  8 +++----
 .../appointments/service/Appointments.tsx     | 14 +++++------
 .../appointments/view/ViewAppointment.tsx     | 21 ++++++++++------
 .../DateTimePickerWithLabelFormGroup.tsx      |  2 ++
 6 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index 54cb34b4ee..f280612150 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -1,4 +1,5 @@
 import { Select, Label, Alert } from '@hospitalrun/components'
+import { addMinutes, roundToNearestMinutes } from 'date-fns'
 import moment from 'moment'
 import React, { useEffect, useState } from 'react'
 import { AsyncTypeahead } from 'react-bootstrap-typeahead'
@@ -25,6 +26,25 @@ const AppointmentDetailForm = (props: Props) => {
   const [options, setOptions] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
+  const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
+  const endDateTime = addMinutes(startDateTime, 60)
+
+  if (!appointment.start) {
+    appointment.start = String(new Date(Date.now()))
+  }
+
+  if (!appointment.end) {
+    appointment.end = String(endDateTime)
+  }
+
+  if (!appointment.minutesDuration) {
+    appointment.minutesDuration = Math.round(
+      Math.floor(
+        (new Date(appointment.end).getTime() - new Date(appointment.start).getTime()) / 60000 / 5,
+      ) * 5,
+    )
+  }
+
   // const selectedValues: any[] = []
 
   // const patientName: string = String(patient)
@@ -57,7 +77,7 @@ const AppointmentDetailForm = (props: Props) => {
             <AsyncTypeahead
               id="patientTypeahead"
               disabled={!isEditable}
-              defaultInputValue={String(patient)}
+              defaultInputValue={patient ? String(patient) : ''}
               placeholder={t('scheduling.appointment.patient')}
               onChange={(p: any) => {
                 appointment.patientId = p[0] && p[0].resource.id
@@ -107,7 +127,7 @@ const AppointmentDetailForm = (props: Props) => {
             value={
               appointment?.start && appointment.minutesDuration
                 ? moment(appointment.start).add(appointment.minutesDuration, 'minute').toDate()
-                : new Date(Date.now())
+                : endDateTime
             }
             isEditable={isEditable}
             onChange={(date: Date) => {
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index db80bdf2cf..93d193a270 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
+import Loading from '../../../shared/components/Loading'
 import useTranslator from '../../../shared/hooks/useTranslator'
 import Appointment from '../../../shared/model/Appointment'
 import Patient from '../../../shared/model/Patient'
@@ -23,9 +24,11 @@ const EditAppointment = () => {
 
   const [appointment, setAppointment] = useState({} as Appointment)
   const [patientName, setPatientName] = useState<Patient>()
+  const [isLoading, setIsLoading] = useState(true)
 
   const appointmentFunc = async () => {
     setAppointment(await getAppointmentId(id))
+    setIsLoading(false)
   }
 
   const patientFunc = async () => {
@@ -90,6 +93,10 @@ const EditAppointment = () => {
   //   return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
   // }
 
+  if (isLoading || appointment === undefined) {
+    return <Loading />
+  }
+
   return (
     <>
       {patientName && appointment ? (
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index d15031bbcb..56faab2d5b 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -68,10 +68,10 @@ const NewAppointment = () => {
 
   const onSave = async () => {
     console.log(newAppointment)
-    let data = await createAppointment(newAppointment)
-    console.log('data', await data)
-    setAptId(await data)
-    setSaved(true)
+    let { id, status } = await createAppointment(newAppointment)
+    console.log('id: ' + id + ' ' + 'status: ' + status)
+    setAptId(id)
+    if (status === 'success') setSaved(true)
     setError(validateNewAppointment(newAppointment))
   }
 
diff --git a/src/scheduling/appointments/service/Appointments.tsx b/src/scheduling/appointments/service/Appointments.tsx
index ece12663a6..0ebafc5c51 100644
--- a/src/scheduling/appointments/service/Appointments.tsx
+++ b/src/scheduling/appointments/service/Appointments.tsx
@@ -53,7 +53,7 @@ export const createAppointment = (appointment: Appointment) => {
       description: '',
       meta: {},
       created: new Date(Date.now()),
-      status: appointment.status,
+      status: appointment.status ? appointment.status : 'Scheduled',
       participant: [
         {
           actor: {
@@ -99,16 +99,14 @@ export const createAppointment = (appointment: Appointment) => {
           {
             system: 'https://hl7.org/fhir/v2/ValueSet/appointment-type',
             code: `${
-              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+              appointment.appointmentType ? appointment.appointmentType.text : 'Routine Visit'
             }`,
             display: `${
-              appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
+              appointment.appointmentType ? appointment.appointmentType.text : 'Routine Visit'
             }`,
           },
         ],
-        text: `${
-          appointment.appointmentType.text ? appointment.appointmentType.text : 'Routine visit'
-        }`,
+        text: `${appointment.appointmentType ? appointment.appointmentType.text : 'Routine Visit'}`,
       },
       patientInstruction: null,
       contained: [],
@@ -122,8 +120,8 @@ export const createAppointment = (appointment: Appointment) => {
     .then(async (response) => {
       console.log(response)
       const data = response.data
-      console.log(data.data.id)
-      return data.data.id
+      console.log(data.data)
+      return data.data
     })
     .catch((error) => {
       console.log(error)
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index d0b3d4d2a2..dd5e8b9134 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -2,10 +2,10 @@ import { Spinner, Button, Modal, Toast } from '@hospitalrun/components'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
-
-// import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
+import useAddBreadcrumbs from '../../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../../page-header/button-toolbar/ButtonBarProvider'
 import { useUpdateTitle } from '../../../page-header/title/TitleContext'
+import Loading from '../../../shared/components/Loading'
 // import usePatient from '../../../patients/hooks/usePatient'
 import useTranslator from '../../../shared/hooks/useTranslator'
 import Appointment from '../../../shared/model/Appointment'
@@ -17,6 +17,7 @@ import { RootState } from '../../../shared/store'
 import AppointmentDetailForm from '../AppointmentDetailForm'
 import { deleteAppointment, getAppointmentId } from '../service/Appointments'
 import { getPatientNameById } from '../service/Patients'
+import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 // import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 // import { Appointment } from '../ViewAppointments'
 
@@ -41,9 +42,11 @@ const ViewAppointment = () => {
 
   const [appointment, setAppointment] = useState<Appointment>()
   const [patientName, setPatientName] = useState<Patient>()
+  const [isLoading, setIsLoading] = useState(true)
 
   const appointmentFunc = async () => {
     setAppointment(await getAppointmentId(id))
+    setIsLoading(false)
   }
 
   const patientFunc = async () => {
@@ -67,11 +70,11 @@ const ViewAppointment = () => {
   }, [appointment])
 
   // const { data: patient } = usePatient(appointment ? appointment.patient : id)
-  // const breadcrumbs = [
-  //   { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
-  //   { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
-  // ]
-  // useAddBreadcrumbs(breadcrumbs, true)
+  const breadcrumbs = [
+    { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+    { text: appointment ? getAppointmentLabel(appointment) : '', location: `/patients/${id}` },
+  ]
+  useAddBreadcrumbs(breadcrumbs, true)
 
   const onAppointmentDeleteButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
@@ -142,6 +145,10 @@ const ViewAppointment = () => {
     }
   }, [getButtons, setButtonToolBar])
 
+  if (isLoading || appointment === undefined) {
+    return <Loading />
+  }
+
   return (
     <>
       {patientName && appointment ? (
diff --git a/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx b/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx
index 3b70fc9ef4..d21efbe930 100644
--- a/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx
+++ b/src/shared/components/input/DateTimePickerWithLabelFormGroup.tsx
@@ -40,6 +40,8 @@ const DateTimePickerWithLabelFormGroup = (props: Props) => {
         withPortal={false}
         minDate={moment().toDate()}
         maxDate={moment().add(3, 'months').toDate()}
+        minTime={moment().toDate()}
+        maxTime={new Date(new Date().setHours(19, 0, 0, 0))}
       />
     </div>
   )

From efb994055c0cb257d591eaaddcdc90f7b8496f63 Mon Sep 17 00:00:00 2001
From: divija-zemoso <divija.amaram@zemosolabs.com>
Date: Fri, 30 Sep 2022 14:36:10 +0530
Subject: [PATCH 5/5] added error messages

---
 src/patients/search/ViewPatients.tsx          |  2 +-
 src/patients/visits/FilterPatientModal.tsx    |  2 ++
 .../appointments/AppointmentDetailForm.tsx    |  2 +-
 .../appointments/edit/EditAppointment.tsx     |  2 ++
 .../appointments/new/NewAppointment.tsx       | 24 ++++++++++---------
 .../appointments/service/Appointments.tsx     | 11 +++++++--
 .../appointments/view/ViewAppointment.tsx     |  2 ++
 7 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/patients/search/ViewPatients.tsx b/src/patients/search/ViewPatients.tsx
index d659a0339b..d9dc221616 100644
--- a/src/patients/search/ViewPatients.tsx
+++ b/src/patients/search/ViewPatients.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@hospitalrun/components'
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
-import { useHistory } from 'react-router'
+import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider'
diff --git a/src/patients/visits/FilterPatientModal.tsx b/src/patients/visits/FilterPatientModal.tsx
index 9ab199cbe6..44775f58dd 100644
--- a/src/patients/visits/FilterPatientModal.tsx
+++ b/src/patients/visits/FilterPatientModal.tsx
@@ -40,6 +40,7 @@ const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props)
           <Label text={t('scheduling.appointment.type')} title="type" />
           <Select
             id="type"
+            defaultSelected={appointmentTypes.filter(({ value }) => value === appointmentType)}
             options={appointmentTypes}
             onChange={(values) => setappointmentType(values[0])}
           />
@@ -47,6 +48,7 @@ const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props)
         <div className="form-group">
           <Label text="Status" title="Status" />
           <Select
+            defaultSelected={appointmentStatus.filter(({ value }) => value == patientStatus)}
             id="status"
             options={appointmentStatus}
             onChange={(values) => setPatientStatus(values[0])}
diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx
index f280612150..d0a92acd51 100644
--- a/src/scheduling/appointments/AppointmentDetailForm.tsx
+++ b/src/scheduling/appointments/AppointmentDetailForm.tsx
@@ -76,7 +76,7 @@ const AppointmentDetailForm = (props: Props) => {
             />
             <AsyncTypeahead
               id="patientTypeahead"
-              disabled={!isEditable}
+              disabled={!isEditable || patient !== undefined}
               defaultInputValue={patient ? String(patient) : ''}
               placeholder={t('scheduling.appointment.patient')}
               onChange={(p: any) => {
diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx
index 93d193a270..080b8feaa8 100644
--- a/src/scheduling/appointments/edit/EditAppointment.tsx
+++ b/src/scheduling/appointments/edit/EditAppointment.tsx
@@ -82,6 +82,8 @@ const EditAppointment = () => {
       console.log('updated the values successfully')
       Toast('success', t('states.success'), t('scheduling.appointment.successfullyUpdated'))
       history.push(`/appointments/${id}`)
+    } else {
+      Toast('error', t('states.error'), 'Could not edit appointment')
     }
   }
 
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index 56faab2d5b..4b72a46dcf 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -1,6 +1,6 @@
 // import { Button, Spinner, Toast } from '@hospitalrun/components'
 import { Button, Spinner, Toast } from '@hospitalrun/components'
-import isEmpty from 'lodash/isEmpty'
+// import isEmpty from 'lodash/isEmpty'
 // import addMinutes from 'date-fns/addMinutes'
 // import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
 // import isEmpty from 'lodash/isEmpty'
@@ -71,7 +71,9 @@ const NewAppointment = () => {
     let { id, status } = await createAppointment(newAppointment)
     console.log('id: ' + id + ' ' + 'status: ' + status)
     setAptId(id)
-    if (status === 'success') setSaved(true)
+    status === 'success'
+      ? setSaved(true)
+      : Toast('error', t('states.error'), t('scheduling.appointment.errors.createAppointmentError'))
     setError(validateNewAppointment(newAppointment))
   }
 
@@ -82,16 +84,16 @@ const NewAppointment = () => {
   useEffect(() => {
     // if save click and no error proceed, else give error message.
     if (saved) {
-      if (isEmpty(newAppointmentMutateError) && !isErrorNewAppointment) {
-        newAppointmentMutate(newAppointment).then((_result) => {
-          Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
-          console.log(aptId)
-          history.push(`/appointments/${aptId}`)
-        })
-      } else if (!isEmpty(newAppointmentMutateError)) {
-        newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
-      }
+      newAppointmentMutate(newAppointment).then((_result) => {
+        Toast('success', t('states.success'), t('scheduling.appointment.successfullyCreated'))
+        console.log(aptId)
+        history.push(`/appointments/${aptId}`)
+      })
     }
+    // else {
+    //   Toast('error', t('states.error'), t('scheduling.appointment.errors.createAppointmentError'))
+    //   // newAppointmentMutateError.message = 'scheduling.appointment.errors.createAppointmentError'
+    // }
     setSaved(false)
   }, [
     saved,
diff --git a/src/scheduling/appointments/service/Appointments.tsx b/src/scheduling/appointments/service/Appointments.tsx
index 0ebafc5c51..c57dda8725 100644
--- a/src/scheduling/appointments/service/Appointments.tsx
+++ b/src/scheduling/appointments/service/Appointments.tsx
@@ -57,7 +57,7 @@ export const createAppointment = (appointment: Appointment) => {
       participant: [
         {
           actor: {
-            reference: `Patient/140919926030337`,
+            reference: `Patient/${appointment.patientId}`,
           },
         },
         {
@@ -125,6 +125,7 @@ export const createAppointment = (appointment: Appointment) => {
     })
     .catch((error) => {
       console.log(error)
+      return { id: 404, status: 'error' }
     })
 }
 
@@ -142,7 +143,11 @@ export const updateAppointment = (appointment: Appointment) => {
       participant: [
         {
           actor: {
-            reference: `Patient/${appointment?.participant[0].actor.reference.substring(8)}`,
+            reference: `Patient/${
+              appointment.patientId
+                ? appointment.patientId
+                : appointment?.participant[0].actor.reference.substring(8)
+            }`,
           },
         },
         {
@@ -211,6 +216,7 @@ export const updateAppointment = (appointment: Appointment) => {
     })
     .catch((error) => {
       console.log(error)
+      return { id: 404, status: 'error' }
     })
 }
 
@@ -223,5 +229,6 @@ export const deleteAppointment = (id: number) => {
     })
     .catch((error) => {
       console.log(error)
+      return 'error'
     })
 }
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index dd5e8b9134..947ded3065 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -98,6 +98,8 @@ const ViewAppointment = () => {
     if (status === 'success') {
       history.push('/appointments')
       Toast('success', t('states.success'), t('scheduling.appointment.successfullyDeleted'))
+    } else {
+      Toast('error', t('states.error'), 'Could not delete appointment')
     }
 
     setShowDeleteConfirmation(false)