Adding Delete functionality

Humongous.Healthcare.Web/ClientApp/src/components/AddHealthCheck.js

@@ -38,7 +38,7 @@ export class AddHealthCheck extends Component {
             <div>
                 <h4>Submit a HealthCheck:</h4>
                 <form onSubmit={this.handleSubmit}>
-                    <input type="text" name="id" placeholder="Id" value={this.state.id} onChange={this.handleInput} />
+                    <input type="hidden" name="id" placeholder="Id" value="id" />
                     <input type="text" name="patientid" placeholder="Patient Id" value={this.state.patientid} onChange={this.handleInput} />
                     <input type="text" name="date" placeholder="Date" value={this.state.date} onChange={this.handleInput} />
                     <input type="text" name="healthstatus" placeholder="Health Status" value={this.state.healthstatus} onChange={this.handleInput} />

Humongous.Healthcare.Web/ClientApp/src/components/HealthCheck.js

@@ -0,0 +1,42 @@
+import { Component, Fragment } from "react";
+
+export class HealthCheck extends Component {
+    // eslint-disable-next-line
+    static displayName = HealthCheck.name;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            id: this.props.healthCheck.id,
+            patientid: this.props.healthCheck.patientid,
+            date: this.props.healthCheck.date,
+            healthstatus: this.props.healthCheck.healthstatus,
+            symptoms: this.props.healthCheck.symptoms
+        }
+    }
+
+    render() {
+        return (
+            <Fragment>
+                <tr key={this.props.id}>
+                    <td>{this.state.id}</td>
+                    <td>{this.state.patientid}</td>
+                    <td>{this.state.date}</td>
+                    <td>{this.state.healthstatus}</td>
+                    <td>
+                        <ul>
+                            {this.state.symptoms.map(symptom =>
+                                <li key={symptom}>{symptom}</li>
+                            )}
+                        </ul>
+                    </td>
+                    <td>
+                        <button onClick={this.props.onDelete}>Delete</button>
+                    </td>
+                </tr>
+            </Fragment>
+        )
+    }
+}
+
+ 

Humongous.Healthcare.Web/ClientApp/src/components/HealthCheckList.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { HealthCheck } from './HealthCheck';
 
 export class HealthCheckList extends Component {
     // eslint-disable-next-line
@@ -19,7 +20,25 @@ export class HealthCheckList extends Component {
         console.log('Handle click.');
     }
 
-    static renderHealthChecksTable(healthChecks) {
+    handleDeleteHealthCheck = (id) => {
+        return fetch(process.env.REACT_APP_API_URL + '/' + id,
+            {
+                method: 'DELETE',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'Ocp-Apim-Subscription-Key': process.env.REACT_APP_API_KEY 
+                }
+            })
+            .then(response => {
+                this.setState({
+                    healthChecks: this.state.healthChecks.filter(i => i.id !== id),
+                    loading: false
+                });
+            });
+    }
+
+    renderHealthChecksTable = (healthChecks) => {
         return (
             <table className='table table-striped' aria-labelledby="tabelLabel">
                 <thead>
@@ -28,16 +47,16 @@ export class HealthCheckList extends Component {
                         <th>Patient Id</th>
                         <th>Date</th>
                         <th>Status</th>
+                        <th>Symptoms</th>
                     </tr>
                 </thead>
                 <tbody>
                     {healthChecks.map(healthCheck =>
-                        <tr key={healthCheck.id}>
-                            <td>{healthCheck.id}</td>
-                            <td>{healthCheck.patientid}</td>
-                            <td>{healthCheck.date}</td>
-                            <td>{healthCheck.healthstatus}</td>
-                        </tr>
+                        <HealthCheck 
+                            key={healthCheck.id}
+                            healthCheck={healthCheck}
+                            onDelete={() => this.handleDeleteHealthCheck(healthCheck.id)}
+                        />
                     )}
                 </tbody>
                 <tfoot>
@@ -52,7 +71,7 @@ export class HealthCheckList extends Component {
     render() {
         let contents = this.state.loading
             ? <p><em>Loading...</em></p>
-            : HealthCheckList.renderHealthChecksTable(this.state.healthChecks);
+            : this.renderHealthChecksTable(this.state.healthChecks);
 
         return (
             <div>