feat(init): creates a generic repository class and refactors patient db

package.json

@@ -9,8 +9,6 @@
     "@semantic-release/changelog": "~3.0.4",
     "@semantic-release/git": "~7.0.16",
     "@semantic-release/release-notes-generator": "~7.3.0",
-    "@types/react-redux": "~7.1.5",
-    "@types/redux-logger": "~3.0.7",
     "bootstrap": "~4.3.1",
     "pouchdb": "~7.1.1",
     "react": "~16.12.0",
@@ -49,8 +47,10 @@
     "@types/pouchdb": "~6.4.0",
     "@types/react": "~16.9.6",
     "@types/react-dom": "~16.9.1",
+    "@types/react-redux": "^7.1.5",
     "@types/react-router": "~5.1.2",
     "@types/react-router-dom": "~5.1.0",
+    "@types/redux-logger": "^3.0.7",
     "@typescript-eslint/eslint-plugin": "~2.4.0",
     "@typescript-eslint/parser": "~2.4.0",
     "commitizen": "~4.0.3",

src/clients/db/PatientRepository.ts

@@ -0,0 +1,11 @@
+import Patient from 'model/Patient'
+import Repository from './Repository'
+import { patients } from '../../config/pouchdb'
+
+export class PatientRepsitory extends Repository<Patient> {
+  constructor() {
+    super(patients)
+  }
+}
+
+export default new PatientRepsitory()

src/clients/db/Repository.ts

@@ -0,0 +1,78 @@
+/* eslint "@typescript-eslint/camelcase": "off" */
+
+import AbstractDBModel from 'model/AbstractDBModel'
+
+function mapRow(row: any): any {
+  const { value, doc } = row
+  const { id, _rev, _id, rev, ...restOfDoc } = doc
+  return {
+    id: _id,
+    rev: value.rev,
+    ...restOfDoc,
+  }
+}
+
+function mapDocument(document: any): any {
+  const { _id, _rev, ...values } = document
+  return {
+    id: _id,
+    rev: _rev,
+    ...values,
+  }
+}
+
+export default class Repository<T extends AbstractDBModel> {
+  db: PouchDB.Database
+
+  constructor(db: PouchDB.Database) {
+    this.db = db
+  }
+
+  async find(id: string): Promise<T> {
+    const document = await this.db.get(id)
+    return mapDocument(document)
+  }
+
+  async findAll(): Promise<T[]> {
+    const allPatients = await this.db.allDocs({
+      include_docs: true,
+    })
+
+    return allPatients.rows.map(mapRow)
+  }
+
+  async save(entity: T): Promise<T> {
+    const { id, rev, ...valuesToSave } = entity
+    const savedEntity = await this.db.post({ ...valuesToSave })
+    return this.find(savedEntity.id)
+  }
+
+  async saveOrUpdate(entity: T): Promise<T> {
+    const e = entity as any
+    try {
+      // try and get a patient, if the patient is missing it will throw an error
+      // and have a status of 404.
+      await this.db.get(e.id)
+      const { id, rev, ...restOfDocument } = e
+      const updatedDcoument = {
+        _id: id,
+        _rev: rev,
+        ...restOfDocument,
+      }
+
+      await this.db.put(updatedDcoument)
+      return this.find(e.id)
+    } catch (error) {
+      if (error.status !== 404) {
+        throw Error(error)
+      }
+
+      return this.save(e)
+    }
+  }
+
+  async delete(entity: T): Promise<T> {
+    const e = entity as any
+    return mapDocument(this.db.remove(e.id, e.rev))
+  }
+}

src/containers/Patients.tsx

@@ -19,7 +19,7 @@ const Patients = () => {
   const list = (
     <ul>
       {patients.map((p) => (
-        <Link to={`/patients/${p.id}`}>
+        <Link to={`/patients/${p.id}`} key={p.id}>
           <li key={p.id}>
             {p.firstName} {p.lastName}
           </li>

src/containers/ViewPatient.tsx

@@ -12,14 +12,17 @@ interface Props extends RouteComponentProps {
 }
 
 const ViewPatient = (props: Props) => {
+  const [currentPatient, setCurrentPatient] = useState(new Patient('', '', '', ''))
   const { match } = props
   const { id } = match.params as any
   const dispatch = useDispatch()
   const [isEditable, setIsEditable] = useState(false)
   const { patient, isLoading, isUpdated } = useSelector((state: RootState) => state.patient)
 
   const onSaveButtonClick = async () => {
-    dispatch(updatePatient(patient))
+    currentPatient.id = patient.id
+    currentPatient.rev = patient.rev
+    dispatch(updatePatient(currentPatient))
     setIsEditable(false)
   }
 
@@ -33,7 +36,8 @@ const ViewPatient = (props: Props) => {
   }
 
   const onFieldChange = (key: string, value: string) => {
-    ;(patient as any)[key] = value
+    ;(currentPatient as any)[key] = value
+    setCurrentPatient(currentPatient)
   }
 
   useEffect(() => {

src/slices/patient-slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import Patient from '../model/Patient'
-import * as patientsDb from '../clients/db/patients-db'
+import PatientRepository from '../clients/db/PatientRepository'
 import { AppThunk } from '../store/store'
 
 interface PatientState {
@@ -54,7 +54,7 @@ export const {
 export const fetchPatient = (id: string): AppThunk => async (dispatch) => {
   try {
     dispatch(getPatientStart())
-    const patient = await patientsDb.get(id)
+    const patient = await PatientRepository.find(id)
     dispatch(getPatientSuccess(patient))
   } catch (error) {
     console.log(error)
@@ -63,7 +63,7 @@ export const fetchPatient = (id: string): AppThunk => async (dispatch) => {
 
 export const updatePatient = (patient: Patient): AppThunk => async (dispatch) => {
   try {
-    const updatedPatient = await patientsDb.saveOrUpdate(patient)
+    const updatedPatient = await PatientRepository.saveOrUpdate(patient)
     dispatch(updatePatientSuccess(updatedPatient))
   } catch (error) {
     console.log(error)
@@ -72,7 +72,7 @@ export const updatePatient = (patient: Patient): AppThunk => async (dispatch) =>
 
 export const createPatient = (patient: Patient): AppThunk => async (dispatch) => {
   try {
-    const newPatient = await patientsDb.save(patient)
+    const newPatient = await PatientRepository.save(patient)
     dispatch(createPatientSuccess(newPatient))
   } catch (error) {
     console.log(error)

src/slices/patients-slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import Patient from '../model/Patient'
-import * as patientsDb from '../clients/db/patients-db'
+import PatientRepository from '../clients/db/PatientRepository'
 import { AppThunk } from '../store/store'
 
 interface PatientsState {
@@ -34,7 +34,7 @@ export const { getPatientsStart, getAllPatientsSuccess } = patientsSlice.actions
 export const fetchPatients = (): AppThunk => async (dispatch) => {
   try {
     dispatch(getPatientsStart())
-    const patients = await patientsDb.getAll()
+    const patients = await PatientRepository.findAll()
     dispatch(getAllPatientsSuccess(patients))
   } catch (error) {
     console.log(error)