Tym's React CheckPoint

src/components/App/App.js

@@ -1,10 +1,48 @@
 import React, { Component } from 'react';
+import { Route, Link } from "react-router-dom";
+
+//Specific Imports
+import Contacts from "../Contact/Contact"
+import Header from "../Header/Header"
+import ContactList from "../ContactList/ContactList"
+import NewContactList 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>;
+    // console.log()
+    return( 
+    <div className="App">
+      <Header></Header>
+      <nav className="navBar">
+        <Link to="/">
+          <h3>Contact List</h3>
+        </Link>
+        <Route path="/" exact component={ContactList}></Route>
+
+        <Link to="/new-contact">
+          <h3>New Contact List</h3>
+        </Link>
+        <Route path="/new-contact" exact component={NewContactList}></Route>
+      </nav>
+
+      <ContactList contactsComponent={Contacts}></ContactList>
+
+
+
+      </div>
+    )
   }
 }
 

src/components/Contact/Contact.js

@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+import ContactsData from "../../contacts.json";
+
+class Contacts extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      contactsD: [ContactsData]
+    };
+  }
+  render() {
+    return ContactsData.map(data => {
+      return(
+        <div className="contact" key={data}>
+            <img src={data.profile_picture} alt={"profile picture"}></img>
+            <h3>{data.name}</h3>
+            <h4>{data.email}</h4>
+        </div>
+      ) 
+    });
+  }
+}
+
+export default Contacts;

src/components/ContactList/ContactList.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react'
+import Contacts from '../Contact/Contact'
+
+class ContactList extends Component{
+    constructor(props){
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render(){
+        return(
+            <div>
+                <Contacts>{this.props}</Contacts>
+                <div className="contact-list"></div>
+            </div>
+        )
+    }
+}
+export default ContactList

src/components/Header/Header.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react'
+import { Route, Link } from "react-router-dom";
+
+
+class Header extends Component{
+    constructor(props){
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render(){
+        return(
+            <div>
+                <header>CheckPoint React</header>
+                <nav>
+                    <Link to="/">HomePage</Link>
+                    <Link to="/new-contact">New Conacts</Link>
+                </nav>
+            </div>
+        )
+    }
+}
+export default Header

src/components/NewContact/NewContact.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react'
+
+class NewContactList extends Component{
+    constructor(props){
+        super(props)
+
+        this.state ={
+
+        }
+    }
+
+    render(){
+        return(
+            <div>
+                <h1>New Contact</h1>
+            </div>
+        )
+    }
+}
+export default NewContactList

src/contacts.json

@@ -3,53 +3,70 @@
     "name": "Bugs Bunny",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/1/17/Bugs_Bunny.svg"
-  }, {
+  },
+  {
     "name": "Daffy Duck",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/f/f4/Daffy_Duck.svg"
-  }, {
+  },
+  {
     "name": "Porky Pig",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/8/88/Porky_Pig.svg"
-  }, {
+  },
+  {
     "name": "Elmer Fudd",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/6/66/ElmerFudd.gif"
-  }, {
+  },
+  {
     "name": "Sylvester J. Pussycat Sr.",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/8/82/Sylvester_the_Cat.svg"
-  }, {
+  },
+  {
     "name": "Yosemite Sam",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/2/2d/Yosemite_Sam.svg"
-  }, {
+  },
+  {
     "name": "Foghorn Leghorn",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/a/a0/Foghorn_Leghorn.png"
-  }, {
+  },
+  {
     "name": "Marvin the Martian",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/d/d5/Marvin_the_Martian.svg"
-  }, {
+  },
+  {
     "name": "Pepé Le Pew",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/9/9a/Pep%C3%A9_Le_Pew.svg"
-  }, {
+  },
+  {
     "name": "Speedy Gonzales",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/f/fe/Speedy_Gonzales.svg"
-  }, {
+  },
+  {
     "name": "Tasmanian Devil",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/c/c4/Taz-Looney_Tunes.svg"
-  }, {
+  },
+  {
     "name": "Road Runnery",
     "email": "[email protected]",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/e/ee/Roadrunner_looney_tunes.png"
-  }, {
+  },
+  {
     "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,12 @@ 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 />
+    </Router>,
+    document.getElementById("root")
+  );
+