Heather Runyon

src/components/App/App.js

@@ -1,10 +1,26 @@
 import React, { Component } from 'react';
+import Header from './Header/Header'
+import ContactList from './ContactList/ContactList'
+import NewContact from './NewContact/NewContact'
+import{ Route } from 'react-router-dom'
 
 class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      contacts: props.contacts
+    }
+  }
   render() {
-    return <div className="App">
-        <p>app</p>
-      </div>;
+    return (
+      <div className="App">
+        <Header />
+        <p>app</p> 
+        <Route exact path='/' render= {props=> <ContactList {...props} contacts={this.props.contacts}/>}></Route>
+        <Route path='/new-contact' render= {props=> <NewContact {...props} contacts={this.props.contacts}/>}></Route>
+      </div>
+    )
   }
 }
 

src/components/Contact/Contact.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+class Contact extends Component{
+  render(){
+
+
+    return(
+        <div className='contact'>
+            <img src= {props.contacts[0].profile_picture} alt='profile picture'></img>
+            <h3>{props.contact[0].name}</h3>
+            <h4>{props.contact[0].email}</h4>
+        </div>
+
+    )
+  }
+}
+
+export default Contact;

src/components/ContactList/ContactList.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+class ContactList extends Component{
+  render(){
+
+      let contact= this.props.contacts.map(item => {
+          return(
+              <div className='contact-list' key={item.name}>
+                <img src= {"item.profile_picture"} alt='item image'></img>
+                {item.name}
+                {item.email}
+              </div>
+
+          )
+      })
+
+    return(
+        <div>
+        {contact}
+
+        </div>
+    )
+  }
+}
+
+export default ContactList;

src/components/Header/Header.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import{ Link } from 'react-router-dom'
+
+
+function Header(props) {
+
+    return (
+        <div>
+            <header>
+               <h1></h1> 
+            </header>
+            <nav>
+               <Link to ='/'>
+
+               </Link>
+               <Link to ='/new-contact'>
+
+               </Link>
+
+            </nav>
+
+
+
+        </div>
+    )
+}
+export default Header

src/components/NewContact/NewContact.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+
+class NewContact extends Component{
+  render(){
+
+
+    return(
+        <div>
+            <h1>New Contact</h1>
+            <form>
+                <input
+                    type='text'
+                    placeholder='name'
+                />
+                <input 
+                    type='text'
+                    placeholder='email'
+                />
+                <input
+                    type='img'
+                    placeholder="profile_picture"
+                />
+                <button>Submit</button>
+            </form>
+
+        </div>
+    )
+  }
+}
+
+export default NewContact;

src/contacts.json

@@ -51,5 +51,9 @@
     "name": "Wile E. Coyote",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/3/3c/Wile_E._Coyote.svg"
+  },{
+    "name": "Tweety",
+    "email": "[email protected]",
+    "profile_picture": "https://upload.wikimedia.org/wikipedia/en/0/02/Tweety.svg"
   }
 ]

src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './styles/index.css';
 import App from './components/App/App';
-
+import { BrowserRouter as Router } from 'react-router-dom'
 import contacts from "./contacts.json";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Router><App contacts={contacts}/></Router>, document.getElementById('root'));