From 009336b929929e1b7ea3d1accc4dae6b2a417abe Mon Sep 17 00:00:00 2001
From: WinstonPoh <winst_940116@hotmail.my>
Date: Tue, 22 Sep 2020 00:35:14 +1200
Subject: [PATCH] adds useAppointments hook; removes react-redux and RootState

---
 .../appointments/ViewAppointments.tsx         | 47 ++++++++-----------
 src/scheduling/hooks/useAppointments.tsx      | 11 +++++
 2 files changed, 31 insertions(+), 27 deletions(-)
 create mode 100644 src/scheduling/hooks/useAppointments.tsx

diff --git a/src/scheduling/appointments/ViewAppointments.tsx b/src/scheduling/appointments/ViewAppointments.tsx
index 8ae3114efd..bbe99a68e4 100644
--- a/src/scheduling/appointments/ViewAppointments.tsx
+++ b/src/scheduling/appointments/ViewAppointments.tsx
@@ -1,6 +1,5 @@
 import { Calendar, Button } from '@hospitalrun/components'
 import React, { useEffect, useState } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
@@ -8,8 +7,7 @@ import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonB
 import useTitle from '../../page-header/title/useTitle'
 import PatientRepository from '../../shared/db/PatientRepository'
 import useTranslator from '../../shared/hooks/useTranslator'
-import { RootState } from '../../shared/store'
-import { fetchAppointments } from './appointments-slice'
+import useAppointments from '../hooks/useAppointments'
 
 interface Event {
   id: string
@@ -25,14 +23,12 @@ const ViewAppointments = () => {
   const { t } = useTranslator()
   const history = useHistory()
   useTitle(t('scheduling.appointments.label'))
-  const dispatch = useDispatch()
-  const { appointments } = useSelector((state: RootState) => state.appointments)
+  const appointments = useAppointments()
   const [events, setEvents] = useState<Event[]>([])
   const setButtonToolBar = useButtonToolbarSetter()
   useAddBreadcrumbs(breadcrumbs, true)
 
   useEffect(() => {
-    dispatch(fetchAppointments())
     setButtonToolBar([
       <Button
         key="newAppointmentButton"
@@ -48,29 +44,26 @@ const ViewAppointments = () => {
     return () => {
       setButtonToolBar([])
     }
-  }, [dispatch, setButtonToolBar, history, t])
+  }, [setButtonToolBar, history, t])
 
   useEffect(() => {
-    const getAppointments = async () => {
-      const newEvents = await Promise.all(
-        appointments.map(async (a) => {
-          const patient = await PatientRepository.find(a.patient)
-          return {
-            id: a.id,
-            start: new Date(a.startDateTime),
-            end: new Date(a.endDateTime),
-            title: patient.fullName || '',
-            allDay: false,
-          }
-        }),
-      )
-
-      setEvents(newEvents)
-    }
-
-    if (appointments) {
-      getAppointments()
-    }
+    appointments.then(async (results) => {
+      if (results) {
+        const newEvents = await Promise.all(
+          results.map(async (result) => {
+            const patient = await PatientRepository.find(result.patient)
+            return {
+              id: result.id,
+              start: new Date(result.startDateTime),
+              end: new Date(result.endDateTime),
+              title: patient.fullName || '',
+              allDay: false,
+            }
+          }),
+        )
+        setEvents(newEvents)
+      }
+    })
   }, [appointments])
 
   return (
diff --git a/src/scheduling/hooks/useAppointments.tsx b/src/scheduling/hooks/useAppointments.tsx
new file mode 100644
index 0000000000..7ef329c317
--- /dev/null
+++ b/src/scheduling/hooks/useAppointments.tsx
@@ -0,0 +1,11 @@
+import AppointmentRepository from '../../shared/db/AppointmentRepository'
+import Appointment from '../../shared/model/Appointment'
+
+async function fetchAppointments(): Promise<Appointment[]> {
+  const fetchedAppointments = await AppointmentRepository.findAll()
+  return fetchedAppointments || []
+}
+
+export default function useAppointments() {
+  return fetchAppointments()
+}