From 7f43eba7d0ab93232c598a63d52fbbc2f92dec1b Mon Sep 17 00:00:00 2001
From: Pheerawit Wasinphongwanit <pheerawit@gmail.com>
Date: Sat, 2 Sep 2017 21:00:13 +0700
Subject: [PATCH] Dynamically Render Pages

---
 contacts/src/App.js           | 18 +++++++++++++++++-
 contacts/src/CreateContact.js | 12 ++++++++++++
 contacts/src/ListContacts.js  |  8 +++++++-
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 contacts/src/CreateContact.js

diff --git a/contacts/src/App.js b/contacts/src/App.js
index 1fc44b8..fe9ab72 100644
--- a/contacts/src/App.js
+++ b/contacts/src/App.js
@@ -1,9 +1,11 @@
 import React, {Component} from 'react'
 import ListContacts from './ListContacts'
 import * as ContactsAPI from './utils/ContactsAPI'
+import CreateContact from './CreateContact'
 
 class App extends Component {
   state = {
+    screen: 'list', // list, create
     contacts: []
   }
   removeContact = (contact) => {
@@ -23,7 +25,21 @@ class App extends Component {
   render() {  
     return (
       <div>
-        <ListContacts onDeleteContact={this.removeContact} contacts={this.state.contacts}/>
+        {this.state.screen === 'list' && (
+          <ListContacts 
+          onDeleteContact={this.removeContact} 
+          contacts={this.state.contacts}
+          onNavigate={()=>{
+            this.setState({ screen: 'create'})
+          }}
+          />
+        )}
+
+        {this.state.screen === 'create' && (
+          <CreateContact />
+        )}
+        
+        
       </div>
     )
   }
diff --git a/contacts/src/CreateContact.js b/contacts/src/CreateContact.js
new file mode 100644
index 0000000..c2bac81
--- /dev/null
+++ b/contacts/src/CreateContact.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+
+class CreateContact extends Component {
+    render() {
+        return (
+            <div>Create Contact!</div>
+        )
+    }
+}
+
+
+export default CreateContact
\ No newline at end of file
diff --git a/contacts/src/ListContacts.js b/contacts/src/ListContacts.js
index 30cb713..23f9627 100644
--- a/contacts/src/ListContacts.js
+++ b/contacts/src/ListContacts.js
@@ -22,7 +22,7 @@ class ListContacts extends Component {
     }
 
     render() {
-        const {contacts, onDeleteContact} = this.props
+        const {contacts, onDeleteContact, onNavigate} = this.props
         const {query} = this.state
 
         let showingContacts
@@ -45,6 +45,12 @@ class ListContacts extends Component {
                         value={this.state.query}
                         onChange={(event) => this.updateQuery(event.target.value)}
                     />
+
+                    <a
+                        href="#create"
+                        onClick={onNavigate}
+                        className="add-contact"
+                    >Add Contact</a>
                 </div>
                 {showingContacts.length !== contacts.length && (
                     <div className='showing-contacts'>