feat(init): cleans up update patient code

src/containers/ViewPatient.tsx

@@ -1,33 +1,40 @@
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { withRouter, RouteComponentProps } from 'react-router-dom'
+import { withRouter, useHistory, useParams } from 'react-router-dom'
 import { Button, Alert } from '@hospitalrun/components'
 import { fetchPatient, updatePatient } from '../slices/patient-slice'
 import { RootState } from '../store/store'
 import Patient from '../model/Patient'
 import PatientForm from '../components/PatientForm'
 
-interface Props extends RouteComponentProps {
-  patient: Patient
-}
-
-const ViewPatient = (props: Props) => {
-  const [currentPatient, setCurrentPatient] = useState(new Patient('', '', '', ''))
-  const { match } = props
-  const { id } = match.params as any
+const ViewPatient = () => {
   const dispatch = useDispatch()
+  const { patient, isLoading, isUpdatedSuccessfully } = useSelector(
+    (state: RootState) => state.patient,
+  )
   const [isEditable, setIsEditable] = useState(false)
-  const { patient, isLoading, isUpdated } = useSelector((state: RootState) => state.patient)
+  const [currentPatientDetails, setCurrentPatientDetails] = useState({
+    firstName: '',
+    lastName: '',
+  })
+  const history = useHistory()
+  const { id } = useParams()
 
   const onSaveButtonClick = async () => {
-    currentPatient.id = patient.id
-    currentPatient.rev = patient.rev
-    dispatch(updatePatient(currentPatient))
+    dispatch(
+      updatePatient(
+        new Patient(
+          patient.id,
+          patient.rev,
+          currentPatientDetails.firstName,
+          currentPatientDetails.lastName,
+        ),
+      ),
+    )
     setIsEditable(false)
   }
 
   const onCancelButtonClick = () => {
-    const { history } = props
     history.push(`/patients`)
   }
 
@@ -36,12 +43,16 @@ const ViewPatient = (props: Props) => {
   }
 
   const onFieldChange = (key: string, value: string) => {
-    ;(currentPatient as any)[key] = value
-    setCurrentPatient(currentPatient)
+    setCurrentPatientDetails({
+      ...currentPatientDetails,
+      [key]: value,
+    })
   }
 
   useEffect(() => {
-    dispatch(fetchPatient(id))
+    if (id) {
+      dispatch(fetchPatient(id))
+    }
   }, [dispatch, id])
 
   if (isLoading) {
@@ -51,7 +62,7 @@ const ViewPatient = (props: Props) => {
   return (
     <div className="container">
       <Button onClick={onEditButtonClick}>Edit</Button>
-      {isUpdated && (
+      {isUpdatedSuccessfully && (
         <Alert
           color="success"
           title="Successfully Updated"

src/slices/patient-slice.ts

@@ -5,15 +5,13 @@ import { AppThunk } from '../store/store'
 
 interface PatientState {
   isLoading: boolean
-  isUpdated: boolean
-  isCreated: boolean
+  isUpdatedSuccessfully: boolean
   patient: Patient
 }
 
 const initialState: PatientState = {
   isLoading: false,
-  isUpdated: false,
-  isCreated: false,
+  isUpdatedSuccessfully: false,
   patient: new Patient('', '', '', ''),
 }
 
@@ -32,7 +30,7 @@ const patientSlice = createSlice({
     },
     updateStart: startLoading,
     updatePatientSuccess(state, { payload }: PayloadAction<Patient>) {
-      state.isUpdated = true
+      state.isUpdatedSuccessfully = true
       state.isLoading = false
       state.patient = payload
     },