Merge pull request CSCDP#9 from SocialFinanceDigitalLabs/populate-det…

…ails-from-endpoint

FAM-49: Populate personal details from api

debug.log

@@ -0,0 +1 @@
+[0224/172050.165:ERROR:crash_report_database_win.cc(428)] unexpected header

src/App.tsx

@@ -31,7 +31,7 @@ private updateAuthenticationStatus = (status: boolean) => {
   getRoutes(isAuthenticated: boolean) {
     if (isAuthenticated) {
       return (
-        <Route exact path="/" component={IndividualPage} />
+        <Route path="/person/:personId" render={(props) => <IndividualPage {...props} client={this.apiClient}/>} />
       )
     } else {
       return (

src/clients/ApiClient.tsx

@@ -1,4 +1,5 @@
 import LoginDetails from "../models/LoginDetails";
+import PersonDetails from "../models/PersonDetails";
 
 class ApiClient {
     private baseUrl: string
@@ -53,6 +54,12 @@ class ApiClient {
         }
     }
 
+    async getPerson(personId: string): Promise<PersonDetails> {
+        let personDetailsPath = "/person/details/" + personId;
+        let response = await this.getRequest(personDetailsPath);
+        return response.json() as Promise<PersonDetails>;
+    }
+
     async getRequest(relativePath: string): Promise<Response> {
         return fetch(`${this.baseUrl}${relativePath}`, {
             credentials: 'include'

src/components/BasicDetails.tsx

@@ -5,6 +5,17 @@ import PersonDetails from '../models/PersonDetails';
 import TitleValuePair from './Table/TitleValuePair';
 
 const BasicDetails: React.FC<{ personDetails: PersonDetails }> = (props: { personDetails: PersonDetails }) => {
+
+    const formatDateOrString: (maybeDate: Date | string) => string = (maybeDate: Date|string) => {
+        let date = new Date(maybeDate);
+        if (date.hasOwnProperty("toLocaleDateString")) {
+            return date.toLocaleDateString();
+        }
+        else {
+            return props.personDetails.dateOfBirth.toString();
+        }
+    }
+
     return (
         <div>
             <h1 className="govuk-heading-m">Details of individual</h1>
@@ -14,7 +25,7 @@ const BasicDetails: React.FC<{ personDetails: PersonDetails }> = (props: { perso
                         <TableBody>
                             <TitleValuePair rowTitle="First name" rowValue={props.personDetails.firstName} />
                             <TitleValuePair rowTitle="Last name" rowValue={props.personDetails.lastName} />
-                            <TitleValuePair rowTitle="Date of Birth" rowValue={props.personDetails.dateOfBirth} />
+                            <TitleValuePair rowTitle="Date of Birth" rowValue={formatDateOrString(props.personDetails.dateOfBirth)} />
                             <TitleValuePair rowTitle="Gender" rowValue={props.personDetails.gender} />
                             <TitleValuePair rowTitle="Address" rowValue={props.personDetails.address} />
                         </TableBody>

src/models/PersonDetails.tsx

@@ -1,6 +1,6 @@
 interface PersonDetails {
     address: string,
-    dateOfBirth: string,
+    dateOfBirth: Date | string,
     ethnicity: string,
     firstName: string,
     gender: string,

src/pages/IndividualPage.tsx

@@ -1,23 +1,46 @@
 import React from 'react';
 import BasicDetails from '../components/BasicDetails';
 import PersonDetails from '../models/PersonDetails';
+import { RouteComponentProps } from 'react-router-dom';
+import ApiClient from '../clients/ApiClient';
+import BackButton from '../components/BackButton';
 import ServiceInvolvementDetailsSummary from '../models/ServiceInvolvementDetailsSummary';
 import ServiceInvolvement from '../components/ServiceInvolvement';
 import ServiceInvolvementDetails from '../models/ServiceInvolvementDetails';
-import { RouteComponentProps } from 'react-router-dom';
-import BackButton from '../components/BackButton';
 
-const IndividualPage: React.FC<RouteComponentProps> = (props) => {
-  let person: PersonDetails = { address: "17 Lighthorne Road \n Stockport \n SK3 0QD", dateOfBirth: "10/07/2012", ethnicity: "Jedi", firstName: "Charlie", gender: "Male", id: 10, lastName: "Brooks" }
-  let serviceInvolvementDetailsSummary: ServiceInvolvementDetailsSummary = { service:"Adult Social Care", syncedDuraction: "31/10/2017-04/11/2019", syncedWith: "CIS", correctAsOf: "04/11/2019 at 23.59"}
-  let serviceInvolvementDetails: ServiceInvolvementDetails = {serviceInvolvementDetailsSummary: serviceInvolvementDetailsSummary, serviceInvolvementContent: person}
-  return (
-    <div className="IndividualPage">
-      {BackButton(props)}
-      <BasicDetails personDetails={person}></BasicDetails>
-      <ServiceInvolvement serivceInvolvementDetails={serviceInvolvementDetails} />
-    </div>
-  );
+interface PersonParams {
+  personId?: string
+}
+
+class IndividualPage extends React.Component<RouteComponentProps<PersonParams> & { client: ApiClient }, PersonDetails> {
+
+  constructor(props: RouteComponentProps<PersonParams> & { client: ApiClient }) {
+    super(props);
+    this.state = { address: "loading...", ethnicity: "loading...", firstName: "loading...", gender: "loading...", id: -1, lastName: "loading...", dateOfBirth: "loading..." }
+  }
+
+
+  componentDidMount() {
+    let personId = this.props.match.params.personId
+    if (personId) {
+      this.props.client.getPerson(personId).then(personDetails => {
+        this.setState(personDetails);
+      });
+    }
+  }
+
+  render() {
+    let serviceInvolvementDetailsSummary: ServiceInvolvementDetailsSummary = { service: "Adult Social Care", syncedDuraction: "31/10/2017-04/11/2019", syncedWith: "CIS", correctAsOf: "04/11/2019 at 23.59" }
+    let serviceInvolvementDetails: ServiceInvolvementDetails = { serviceInvolvementDetailsSummary: serviceInvolvementDetailsSummary, serviceInvolvementContent: this.state }
+
+    return (
+      <div className="IndividualPage">
+        <BackButton {...this.props} />
+        <BasicDetails personDetails={this.state}></BasicDetails>
+        <ServiceInvolvement serivceInvolvementDetails={serviceInvolvementDetails} />
+      </div>
+    );
+  }
 }
 
 export default IndividualPage;