feat(appointments): adds screen to view appointment

src/HospitalRun.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 import { Toaster } from '@hospitalrun/components'
 import Appointments from 'scheduling/appointments/Appointments'
 import NewAppointment from 'scheduling/appointments/new/NewAppointment'
+import ViewAppointment from 'scheduling/appointments/view/ViewAppointment'
 import Sidebar from './components/Sidebar'
 import Permissions from './model/Permissions'
 import Dashboard from './dashboard/Dashboard'
@@ -59,6 +60,12 @@ const HospitalRun = () => {
                   path="/appointments/new"
                   component={NewAppointment}
                 />
+                <PrivateRoute
+                  isAuthenticated={permissions.includes(Permissions.ReadAppointments)}
+                  exact
+                  path="/appointments/:id"
+                  component={ViewAppointment}
+                />
               </Switch>
             </div>
             <Toaster autoClose={5000} hideProgressBar draggable />

src/scheduling/appointments/appointment-slice.ts

@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import Appointment from 'model/Appointment'
+import { AppThunk } from 'store'
+import AppointmentRepository from 'clients/db/AppointmentsRepository'
+
+interface AppointmentState {
+  appointment: Appointment
+  isLoading: boolean
+}
+
+const initialAppointmentState = {
+  appointment: {} as Appointment,
+  isLoading: false,
+}
+
+const appointmentSlice = createSlice({
+  name: 'appointment',
+  initialState: initialAppointmentState,
+  reducers: {
+    getAppointmentStart: (state: AppointmentState) => {
+      state.isLoading = true
+    },
+    getAppointmentSuccess: (state, { payload }: PayloadAction<Appointment>) => {
+      state.isLoading = false
+      state.appointment = payload
+    },
+  },
+})
+
+export const { getAppointmentStart, getAppointmentSuccess } = appointmentSlice.actions
+
+export const fetchAppointment = (id: string): AppThunk => async (dispatch) => {
+  dispatch(getAppointmentStart())
+  const appointments = await AppointmentRepository.find(id)
+  dispatch(getAppointmentSuccess(appointments))
+}
+
+export default appointmentSlice.reducer

src/scheduling/appointments/view/ViewAppointment.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react'
+import useTitle from 'page-header/useTitle'
+import { useSelector, useDispatch } from 'react-redux'
+import { RootState } from 'store'
+import { fetchAppointment } from '../appointment-slice'
+import { useParams } from 'react-router'
+import AppointmentDetailForm from '../AppointmentDetailForm'
+import { Spinner } from '@hospitalrun/components'
+
+const ViewAppointment = () => {
+  useTitle('View Appointment')
+  const dispatch = useDispatch()
+  const { id } = useParams()
+  const { appointment, isLoading } = useSelector((state: RootState) => state.appointment)
+
+  useEffect(() => {
+    if (id) {
+      dispatch(fetchAppointment(id))
+    }
+  }, [dispatch])
+
+  if (!appointment.id || isLoading) {
+    return <Spinner type="BarLoader" loading />
+  }
+
+  return (
+    <div>
+      <AppointmentDetailForm appointment={appointment} onAppointmentChange={() => {}} />
+    </div>
+  )
+}
+
+export default ViewAppointment

src/store/index.ts

@@ -2,6 +2,7 @@ import { configureStore, combineReducers, Action } from '@reduxjs/toolkit'
 import ReduxThunk, { ThunkAction } from 'redux-thunk'
 import patient from '../patients/patient-slice'
 import patients from '../patients/patients-slice'
+import appointment from '../scheduling/appointments/appointment-slice'
 import appointments from '../scheduling/appointments/appointments-slice'
 import title from '../page-header/title-slice'
 import user from '../user/user-slice'
@@ -11,6 +12,7 @@ const reducer = combineReducers({
   patients,
   title,
   user,
+  appointment,
   appointments,
 })