Contact List submission # 1

package.json

@@ -6,9 +6,14 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^1.3.4",
+    "bootstrap": "^5.2.3",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^5.3.4",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

public/data.json

@@ -0,0 +1,32 @@
+{
+  "contacts": [
+    {
+      "id": 70219571,
+      "name": "Albert #1",
+      "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/800px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
+      "email": "[email protected]",
+      "phone_number": "15555555555"
+    },
+    {
+      "id": 70219572,
+      "name": "Albert #2",
+      "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/800px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
+      "email": "[email protected]",
+      "phone_number": "15555555555"
+    },
+    {
+      "id": 70219573,
+      "name": "Albert #3",
+      "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/800px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
+      "email": "[email protected]",
+      "phone_number": "15555555555"
+    },
+    {
+      "id": 70219574,
+      "name": "Albert #4",
+      "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/800px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
+      "email": "[email protected]",
+      "phone_number": "15555555555"
+    }
+  ]
+}

src/App.js

@@ -1,25 +1 @@
-import logo from './logo.svg';
-import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/components/contact_info.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useHistory } from 'react-router-dom';
+import _ from "lodash";
+
+const ContactInfo = ({contactID, contacts}) => {
+  const card = _.find(contacts, { id: contactID });
+  const history = useHistory();
+  const toContactList = () => {
+    history.push("/contacts")
+  };
+
+  console.log(card);
+  return (
+    <div className="card">
+      <img src={card.image_url} className="card-img-top" alt="..."/>
+      <div className="card-body">
+        <h5 className="card-title">{card.name}</h5>
+        <p className="card-text">{card.email}</p>
+        <p className="card-text">{card.phone_number}</p>
+        <button type="button" className="btn btn-primary btn-list" onClick={toContactList}>Back</button>
+      </div>
+    </div>
+  )
+  }
+
+export default ContactInfo;

src/components/contact_list.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useHistory } from 'react-router-dom';
+import ContactRow from './contact_row';
+
+
+const ContactList = (props) => {
+  const history = useHistory();
+  const contactRows = props.contacts.map((contact, index) => {
+    return (
+        <ContactRow key={contact.id} index={index} contact={contact} />
+
+    )
+  })
+
+  const addNewPage = () => {
+    history.push("/contacts/new")
+  }
+
+  return (
+      <div className="container-fluid">
+        <table className="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th>Profile Pic</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Phone Number</th>
+            </tr>
+          </thead>
+          <tbody className="table-group-divider">
+            {contactRows}
+          </tbody>
+        </table>
+        <button type="button" className="btn btn-primary btn-list" onClick={addNewPage}>Add Contact</button>
+      </div>
+  )
+};
+
+export default ContactList;

src/components/contact_row.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { useHistory } from 'react-router-dom';
+
+const ContactRow = ({contact}) => {
+  const history = useHistory();
+  const contactInfoPage = () => {
+    history.push(`/contacts/${contact.id}`)
+  }
+  return (
+
+      <tr onClick={contactInfoPage}>
+          <th><img className="img-thumbnail" src={contact.image_url} alt=""/></th>
+          <td>{contact.name}</td>
+          <td>{contact.email}</td>
+          <td>{contact.phone_number}</td>
+      </tr>
+  )
+}
+
+export default ContactRow

src/components/new.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import PropTypes from 'prop-types';
+
+
+const NewContact = ({addContact}) => {
+
+  const history = useHistory();
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [imageURL, setImageURL] = useState('')
+  const [phone, setPhone] = useState(null)
+
+  const handleName = (e) => setName(e.target.value)
+  const handleEmail = (e) => setEmail(e.target.value)
+  const handleImageURL = (e) => setImageURL(e.target.value)
+  const handlePhone = (e) => setPhone(e.target.value)
+
+  const contactsPage = () => {
+    history.push("/contacts")
+  }
+
+  const handleClick = () => {
+    const generateId = () => Math.round(Math.random() * 100000000);
+    let newID = generateId();
+    const newContact = {
+      id: newID,
+      name: name,
+      email: email,
+      phone_number: phone,
+      image_url: imageURL,
+    }
+    addContact(newContact);
+    contactsPage();
+
+  }
+
+  return (
+    <div className="container-fluid" id="form">
+      <form className="row g-3">
+        <div className="col-12">
+          <label className="col-sm-2 col-form-label" > Full Name</label>
+          <input className="form-control" onChange={handleName} placeholder="Enter Name Here"/>
+        </div>
+        <div className="col-12">
+          <label className="col-sm-2 col-form-label" >Email</label>
+          <input className="form-control" onChange={handleEmail} placeholder="Enter Email Here"/>
+        </div>
+        <div className="col-12">
+          <label className="col-sm-2 col-form-label" >Phone</label>
+          <input className="form-control" onChange={handlePhone} placeholder="Enter Phone Number Here"/>
+        </div>
+        <div className="col-12">
+          <label className="col-sm-2 col-form-label" >Profile Pic</label>
+          <input className="form-control" onChange={handleImageURL} placeholder="Enter Image URL Here"/>
+        </div>
+      </form>
+      <button type="button" className="btn btn-primary" id="btn-list" onClick={handleClick}>Add Contact</button>
+    </div>
+  )
+}
+
+NewContact.propTypes = {
+  name: PropTypes.string,
+  email: PropTypes.string,
+  phone: PropTypes.string,
+  image_url: PropTypes.string,
+  id: PropTypes.number
+} 
+
+export default NewContact;

src/index.css

@@ -1,13 +1,40 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.page-header {
+  text-align: center;
+}
+
+.container-fluid {
+  margin: 0px auto;
+  width: 70%;
+}
+
+#form {
+  margin: 30px auto 0px;
+  width: 50%;
+}
+
+form {
+  margin-bottom: 15px;
+}
+
+.img-thumbnail {
+  max-width: 100px;
+}
+
+.card {
+  width: 18rem;
+  margin: 0px auto;
+}

src/index.js

@@ -1,17 +1,83 @@
-import React from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+
+import ContactList from './components/contact_list';
+import NewContact from './components/new';
+import ContactInfo from './components/contact_info';
+import axios from "axios";
+
+
+class App extends Component {
+  constructor () {
+    super()
+
+    this.state = {
+      contacts: []
+    }
+
+    this.addContact = this.addContact.bind(this)
+  }
+  componentDidMount() {
+    axios.get('./data.json')
+    .then(response => {
+      console.log(response.data.contacts);
+      this.setState({contacts: response.data.contacts});
+
+    })
+    .catch(error => {
+      console.error(error);
+    });
+  }
+
+  addContact (contact) {
+    console.log('contact', contact);
+    this.setState({contacts: this.state.contacts.concat([contact])})
+  }
+  render() {
+
+
+
+    const Main = () => (
+      <main>
+        <Switch>
+          <Route exact path="/contacts" render={(props) => (<ContactList contacts={this.state.contacts} {...props} />)} />
+          <Route path="/contacts/new" render={(props) => (<NewContact addContact={this.addContact} />)} />
+          <Route path="/contacts/:id" render={(props) => (<ContactInfo contacts={this.state.contacts} contactID={parseInt(props.match.params.id, 10)} />)}/>
+        </Switch>
+      </main>
+    );
+
+    return (
+      <div>
+        <Header />
+        <Main />
+      </div>
+    )
+  }
+};
+
+App.propTypes = {
+  contacts: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+const Header = () => {
+  return (
+    <div className='page-header'>
+      <h1>Contact List</h1>
+      <hr/>
+    </div>
+  )
+}
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);