Walter Porzel React Checkpoint

src/components/App/App.js

@@ -1,10 +1,30 @@
 import React, { Component } from 'react';
+import { Route, Link } from "react-router-dom";
+import Header from "../Header/Header"
+import ContactList from "../ContactList/ContactList"
+import NewContact from "../NewContact/NewContact"
 
 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 />
+        <main>
+        <Route path="/" exact 
+          render = {routeProps => (
+            <ContactList contacts={this.state.contacts} {...routeProps}/>
+        )}/>
+        <Route path="/new-contact" exact component = {NewContact} />
+        </main>
+    </div>
+    )
   }
 }
 

src/components/Contact/Contact.js

@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+
+class Contact extends Component{
+    render(){
+        return(
+            <div className="contact">
+                <h3>{this.props.contact.name}</h3>
+                <h4>{this.props.contact.email}</h4>
+                <img src={this.props.contact.profile_picture} />
+            </div>
+        )
+    }
+}
+
+export default Contact;

src/components/ContactList/ContactList.js

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import Contact from "../Contact/Contact"
+
+class ContactList extends Component {
+    render() {
+        let contacts = this.props.contacts.map((contact, i) => {
+            return(
+                <Contact contact={contact} />
+            );
+        })
+        return( 
+          <div>
+              <h1>Contacts</h1>
+              <div className="contact-list">{contacts}</div>
+          </div>
+        )
+    }
+}
+
+export default ContactList

src/components/Header/Header.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+
+class Header extends Component {
+    render() {
+        return(
+        <div>
+            <nav>
+                <Link to="/">
+                    <h1>Home</h1>
+                </Link>
+                <Link to="/new-contact">
+                    <h1>New Contact</h1>
+                </Link>
+            </nav>
+        </div>
+        )
+    }
+}
+
+export default Header;

src/components/NewContact/NewContact.js

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+
+class NewContact extends Component{
+    render(){
+        return(
+            <div>
+                <h1>New Contact</h1>
+                <form>
+                    <label> Name: <input type="text" name="name" /></label>
+                    <label> Email: <input type="text" name="name" /></label>
+                    <label> Picture: <input type="text" name="name" /></label>
+                    <input type="submit" value="Submit" />
+                </form>
+            </div>
+        )
+    }
+}
+
+export default NewContact;

src/contacts.json

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

src/index.js

@@ -2,7 +2,11 @@ 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'));