React - Add view only contact detail (#20)

Author: elanderson

ASP.NET Core Basics/ASP.NET Core Basics.sln

@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio 15
-VisualStudioVersion = 15.0.26730.16
+VisualStudioVersion = 15.0.27004.2002
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{6446DEF2-D423-47E2-85CC-691A52915EC2}"
 EndProject
@@ -13,7 +13,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Aurelia", "src\Aurelia\Aure
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Angular", "src\Angular\Angular.csproj", "{F27EF346-050A-4AC6-BCAA-D2446246240C}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "React", "React\React.csproj", "{309AB54C-C4ED-4E7E-870C-9032A970E3CF}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "React", "src\React\React.csproj", "{56EC1AA3-0060-4349-921F-59AAB8A93129}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -33,10 +33,10 @@ Global
 		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.Build.0 = Release|Any CPU
-		{309AB54C-C4ED-4E7E-870C-9032A970E3CF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{309AB54C-C4ED-4E7E-870C-9032A970E3CF}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{309AB54C-C4ED-4E7E-870C-9032A970E3CF}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{309AB54C-C4ED-4E7E-870C-9032A970E3CF}.Release|Any CPU.Build.0 = Release|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -45,7 +45,7 @@ Global
 		{A1208011-947A-475C-9011-E2657FAB5A31} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
 		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
 		{F27EF346-050A-4AC6-BCAA-D2446246240C} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
-		{309AB54C-C4ED-4E7E-870C-9032A970E3CF} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
+		{56EC1AA3-0060-4349-921F-59AAB8A93129} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {810FF428-282C-444B-9C2A-660B9AAE9D8F}

ASP.NET Core Basics/React/wwwroot/dist/main.js.map

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import { Link, NavLink } from 'react-router-dom';
+import 'isomorphic-fetch';
+import { Contact } from './contact';
+import { ContactService } from './contactService';
+
+interface ContactDetailState {
+    id: string;
+    contact: Contact | undefined;
+    loading: boolean;
+}
+
+export class ContactDetail extends React.Component<RouteComponentProps<{}>, ContactDetailState> {
+
+    constructor(props: any) {
+        super();
+        this.state = { id: props.match.params.id, contact: undefined, loading: true };
+
+        let contactService = new ContactService();
+        contactService.getById(this.state.id)
+            .then(data => {
+                this.setState({ contact: data, loading: false });
+            });
+    }
+
+    public render() {
+        let contents = this.state.loading
+            ? <p><em>Loading...</em></p>
+            : this.state.contact
+                ? ContactDetail.renderContactsTable(this.state.contact)
+                : <p>No contacts</p>;
+
+        return <div>
+            <h1>Contact Detail</h1>
+            <hr />
+            {contents}
+            <NavLink to={'/contactlist'}>Back to List</NavLink>
+            <hr />
+        </div>;
+    }
+
+    private static renderContactsTable(contact: Contact) {
+        return <dl className="dl-horizontal">
+                   <dt>ID</dt>
+                   <dd>{contact.id}</dd>
+                   <dt>Name</dt>
+                   <dd>{contact.name}</dd>
+                   <dt>Address</dt>
+                   <dd>{contact.getAddress()}</dd>
+                   <dt>Phone</dt>
+                   <dd>{contact.phone}</dd>
+                   <dt>Email</dt>
+                   <dd>{contact.email}</dd>
+               </dl>;
+    }
+}

ASP.NET Core Basics/React/ClientApp/boot.tsx renamed to ASP.NET Core Basics/src/React/ClientApp/boot.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
+import { Link } from 'react-router-dom';
 import 'isomorphic-fetch';
+import { Contact } from './contact';
+import { ContactService } from './contactService';
 
 interface ContactListState {
     contacts: Contact[];
@@ -12,8 +15,8 @@ export class ContactList extends React.Component<RouteComponentProps<{}>, Contac
         super();
         this.state = { contacts: [], loading: true };
 
-        fetch('http://localhost:13322/api/contactsApi/')
-            .then(response => response.json() as Promise<Contact[]>)
+        let contactService = new ContactService();
+        contactService.getAll()
             .then(data => {
                 this.setState({ contacts: data, loading: false });
             });
@@ -41,22 +44,11 @@ export class ContactList extends React.Component<RouteComponentProps<{}>, Contac
             <tbody>
                 {contacts.map(contact =>
                     <tr key={contact.id}>
-                        <td>{contact.id}</td>
+                        <td><Link to={`contactdetail/${contact.id}`}>{contact.id}</Link></td>
                         <td>{contact.name}</td>
                     </tr>
                 )}
             </tbody>
         </table>;
     }
 }
-
-interface Contact {
-    id: number;
-    name: string;
-    address: string;
-    city: string;
-    state: string;
-    postalCode: string;
-    phone: string;
-    email: string;
-}