feat(init): update to use models

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import logo from './hospitalrun-icon-transparent.png'
-import './App.css'
+import { BrowserRouter } from 'react-router-dom'
+import HospitalRun from './containers/HospitalRun'
 
 const App: React.FC = () => (
   <div>

src/clients/db/patients-db.ts

@@ -1,45 +1,61 @@
-import { patients } from "../../config/pouchdb";
+import { patients } from '../../config/pouchdb'
+import Patient from 'model/Patient';
 
-export async function getAll() {
-  return patients.allDocs({ include_docs: true });
+function mapRowToPatient(row: any): Patient {
+  return new Patient(row.id, row.value.rev, row.doc.firstName, row.doc.lastName);
+}
+
+function mapDocumentToPatient(document: any): Patient {
+  return new Patient(document._id, document._rev, document.firstName, document.lastName);
+}
+
+export async function getAll(): Promise<Patient[]> {
+  const allPatients = await patients.allDocs({
+    include_docs: true,
+  });
+
+ return allPatients.rows.map(r => {
+  const row = r as any;
+  return mapRowToPatient(row)
+ });
 }
 
 export async function deleteDocument(document: any) {
-  return patients.remove(document);
+  return patients.remove(document)
 }
 
 export async function deleteDocumentById(id: string, revId: string) {
-  return patients.remove(id, revId);
+  return patients.remove(id, revId)
 }
 
-export async function saveOrUpdate(document: any) {
+export async function saveOrUpdate(patient: Patient) {
   try {
-    const existingDocument = await patients.get(document.id);
+    // try and get a patient, if the patient is missing it will throw an error
+    // and have a status of 404.
+    await patients.get(patient.id)
+    const { id, rev, ...restOfPatient} = patient;
     const updatedDcoument = {
-      _id: existingDocument._id,
-      _rev: existingDocument._rev,
-      ...document
-    };
-    return patients.put(updatedDcoument);
+      _id: id,
+      _rev: rev,
+      ...restOfPatient,
+    }
+
+    return patients.put(updatedDcoument)
   } catch (error) {
-    if (error.status === 404) {
-      return save(document);
+    if (error.status !== 404) {
+      throw Error(error);
     }
-  }
 
-  return null;
+    return save(patient)
+  }
 }
 
-export async function save(document: any) {
-  return patients.post(document);
+export async function save(patient: Patient): Promise<Patient> {
+  const newPatient = await patients.post(patient)
+  return get(newPatient.id);
 }
 
-export async function get(id: string) {
-  const document = await patients.get(id);
-  const patient = document as any;
-  return {
-    id: patient._id,
-    firstName: patient.firstName,
-    lastName: patient.lastName
-  };
+export async function get(id: string): Promise<Patient> {
+  const document = await patients.get(id)
+  return mapDocumentToPatient(document as any);
 }

src/components/PatientForm.tsx

@@ -1,27 +1,27 @@
-import React from "react";
-import { TextInput, Button } from "@hospitalrun/components";
+import React from 'react'
+import { TextInput, Button } from '@hospitalrun/components'
 
 interface Props {
-  isEditable?: boolean;
-  patient?: { firstName: string; lastName: string };
-  onFieldChange: (key: string, value: string) => void;
-  onSaveButtonClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onCancelButtonClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isEditable?: boolean
+  patient?: { firstName: string; lastName: string }
+  onFieldChange: (key: string, value: string) => void
+  onSaveButtonClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onCancelButtonClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
 }
 
 const PatientForm: React.FC<Props> = (props: Props) => {
   const handleChange = (event: any, fieldName: string) => {
-    const htmlInputEvent = event as React.FormEvent<HTMLInputElement>;
-    props.onFieldChange(fieldName, htmlInputEvent.currentTarget.value);
-  };
+    const htmlInputEvent = event as React.FormEvent<HTMLInputElement>
+    props.onFieldChange(fieldName, htmlInputEvent.currentTarget.value)
+  }
 
-  const { patient, isEditable, onSaveButtonClick, onCancelButtonClick } = props;
+  const { patient, isEditable, onSaveButtonClick, onCancelButtonClick } = props
 
-  let firstName = "";
-  let lastName = "";
+  let firstName = ''
+  let lastName = ''
   if (patient) {
-    firstName = patient.firstName;
-    lastName = patient.lastName;
+    firstName = patient.firstName
+    lastName = patient.lastName
   }
 
   return (
@@ -32,15 +32,15 @@ const PatientForm: React.FC<Props> = (props: Props) => {
           <TextInput
             value={firstName}
             disabled={!isEditable}
-            onChange={event => handleChange(event, "firstName")}
+            onChange={(event) => handleChange(event, 'firstName')}
           />
         </div>
         <div className="row">
           <h3>Last Name:</h3>
           <TextInput
             value={lastName}
             disabled={!isEditable}
-            onChange={event => handleChange(event, "lastName")}
+            onChange={(event) => handleChange(event, 'lastName')}
           />
         </div>
         {isEditable && (
@@ -53,12 +53,12 @@ const PatientForm: React.FC<Props> = (props: Props) => {
         )}
       </form>
     </div>
-  );
-};
+  )
+}
 
 PatientForm.defaultProps = {
   isEditable: true,
-  patient: { firstName: "", lastName: "" }
-};
+  patient: { firstName: '', lastName: '' },
+}
 
-export default PatientForm;
+export default PatientForm

src/config/pouchdb.ts

@@ -1,3 +1,3 @@
-import PouchDB from "pouchdb";
+import PouchDB from 'pouchdb'
 
-export const patients = new PouchDB("patients");
+export const patients = new PouchDB('patients')

src/containers/Dashboard.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react'
 
-const Dashboard: React.FC = () => <h1>Hello Dashboard</h1>;
+const Dashboard: React.FC = () => <h1>Hello Dashboard</h1>
 
-export default Dashboard;
+export default Dashboard

src/containers/HospitalRun.tsx

@@ -1,39 +1,39 @@
-import React, { Component } from "react";
-import { Switch, Route, withRouter, RouteComponentProps } from "react-router-dom";
-import { Navbar } from "@hospitalrun/components";
-import ViewPatient from "./ViewPatient";
-import Dashboard from "./Dashboard";
-import Patients from "./Patients";
-import NewPatient from "./NewPatient";
+import React, { Component } from 'react'
+import { Switch, Route, withRouter, RouteComponentProps } from 'react-router-dom'
+import { Navbar } from '@hospitalrun/components'
+import ViewPatient from './ViewPatient'
+import Dashboard from './Dashboard'
+import Patients from './Patients'
+import NewPatient from './NewPatient'
 
 class HospitalRun extends Component<RouteComponentProps, {}> {
   navigate(route: string) {
-    const { history } = this.props;
-    history.push(route);
+    const { history } = this.props
+    history.push(route)
   }
 
   render() {
     return (
       <div>
         <Navbar
           brand={{
-            label: "HospitalRun",
+            label: 'HospitalRun',
             onClick: () => {
-              this.navigate("/");
-            }
+              this.navigate('/')
+            },
           }}
           bg="light"
           variant="light"
-          onSeachButtonClick={() => console.log("hello")}
-          onSearchTextBoxChange={() => console.log("hello")}
+          onSeachButtonClick={() => console.log('hello')}
+          onSearchTextBoxChange={() => console.log('hello')}
           navLinks={[
             {
-              label: "Patients",
+              label: 'Patients',
               onClick: () => {
-                this.navigate("/patients");
+                this.navigate('/patients')
               },
-              children: []
-            }
+              children: [],
+            },
           ]}
         />
         <div>
@@ -45,8 +45,8 @@ class HospitalRun extends Component<RouteComponentProps, {}> {
           </Switch>
         </div>
       </div>
-    );
+    )
   }
 }
 
-export default withRouter(HospitalRun);
+export default withRouter(HospitalRun)

src/containers/NewPatient.tsx

@@ -1,43 +1,44 @@
-import React, { Component } from "react";
-import { withRouter, RouteComponentProps } from "react-router-dom";
-import PatientForm from "../components/PatientForm";
-import * as patientsDb from "../clients/db/patients-db";
+import React, { Component } from 'react'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
+import PatientForm from '../components/PatientForm'
+import * as patientsDb from '../clients/db/patients-db'
+import Patient from 'model/Patient'
 
 interface Props extends RouteComponentProps {}
 
 interface State {
-  firstName: string;
-  lastName: string;
+  firstName: string
+  lastName: string
 }
 
 class NewPatient extends Component<Props, State> {
   constructor(props: Props) {
-    super(props);
-    this.onFieldChange = this.onFieldChange.bind(this);
-    this.onSaveButtonClick = this.onSaveButtonClick.bind(this);
-    this.onCancelButtonClick = this.onCancelButtonClick.bind(this);
+    super(props)
+    this.onFieldChange = this.onFieldChange.bind(this)
+    this.onSaveButtonClick = this.onSaveButtonClick.bind(this)
+    this.onCancelButtonClick = this.onCancelButtonClick.bind(this)
 
     this.state = {
-      firstName: "",
-      lastName: ""
-    };
+      firstName: '',
+      lastName: '',
+    }
   }
 
   onFieldChange(key: string, value: string) {
-    this.setState(prevState => {
-      (prevState as any)[key] = value;
-    });
+    this.setState((prevState) => {
+      (prevState as any)[key] = value
+    })
   }
 
   async onSaveButtonClick() {
-    const { history } = this.props;
-    const newPatient = (await patientsDb.save(this.state)) as any;
-    history.push(`/patients/${newPatient.id}`);
+    const { history } = this.props
+    const createdPatient = await patientsDb.save(this.state as Patient)
+    history.push(`/patients/${createdPatient.id}`)
   }
 
   onCancelButtonClick() {
-    const { history } = this.props;
-    history.push(`/patients`);
+    const { history } = this.props
+    history.push(`/patients`)
   }
 
   render() {
@@ -52,8 +53,8 @@ class NewPatient extends Component<Props, State> {
           />
         </div>
       </div>
-    );
+    )
   }
 }
 
-export default withRouter(NewPatient);
+export default withRouter(NewPatient)