feat(patients): add very simple way of displaying all patients

src/clients/db/patients-db.ts

@@ -1,7 +1,7 @@
 import { patients } from '../../config/pouchdb';
 
 export async function getAll() {
- return patients.allDocs();
+ return patients.allDocs({ include_docs: true});
 }
 
 export async function deleteDocument(document: any) {

src/components/Patients.tsx

@@ -1,19 +1,55 @@
 import React, { Component } from 'react';
 import * as patientsDb from '../clients/db/patients-db';
+import { Link } from 'react-router-dom';
 
-class Patients extends Component {
+interface Props {
+
+}
+
+interface State {
+ patients: any[],
+}
+
+
+class Patients extends Component<Props, State> {
+
+ constructor(props: Props) { 
+ super(props);
+ this.state = {
+ patients: [],
+ }
+ }
 
  async componentDidMount() {
  const patients = await patientsDb.getAll();
- console.log(patients);
+ this.setState({
+ patients: patients.rows,
+ })
  }
 
  render() {
+ const list = (
+ <ul>
+ {this.state.patients.map((patient) =>
+ <Link to={`/patients/${patient.id}`}>
+ <li key={patient.id}>
+ {patient.doc.firstName} {patient.doc.lastName}
+ </li>
+ </Link>
+ )}
+ </ul>
+ );
+
  return (
  <div>
  <h1>Patients</h1>
- </div>
+ <div className="container">
+ <ul>
+ {list}
+ </ul>
+ </div>
 
+ </div>
  );
  }
 }