projectshft · Peter-JC-Wu · May 23, 2023 · May 24, 2023 · lmicek · Jun 7, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,13 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^1.4.0",
+    "bootstrap": "^5.2.3",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.11.2",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React App - Contact List Project</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/add_new_contact.js b/src/components/add_new_contact.js
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+const AddNewContact = ({ addContact }) => {
+  const nav = useNavigate();
+
+  const [fullName, setFullName] = useState('');
+  const [emailAddress, setEmailAddress] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [imageURL, setImageURL] = useState('');
+
+  const generateId = () => Math.round(Math.random() * 100000000);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const newContact = {
+      id: generateId(),
+      fullName,
+      emailAddress,
+      phoneNumber,
+      imageURL
+    };
+
+    addContact(newContact);
+    nav('/');
+  };
+
+  return (
+    <div className="container">
+      <h2 className="text-center">Contact List</h2>
+      <div className="row col-md-6 offset-md-3">
+        <div>Full Name</div>
+        <input className="form-control" 
+          type="text" 
+          id="fullName" 
+          value={fullName} 
+          onChange={(e) => setFullName(e.target.value)} 
+          placeholder="Enter Full Name" 
+          required 
+        />
+        <div>Email Address</div>
+        <input className="form-control" 
+          type="text" 
+          id="emailAddress" 
+          value={emailAddress} 
+          onChange={(e) => setEmailAddress(e.target.value)} 
+          placeholder="Enter Email Address" 
+          required 
+        />
+        <div>Phone Number</div>
+        <input className="form-control" 
+          type="text" 
+          id="phoneNumber" 
+          value={phoneNumber} 
+          onChange={(e) => setPhoneNumber(e.target.value)} 
+          placeholder="Enter Phone Number" 
+          required 
+        />
+        <div>Image URL</div>
+        <input className="form-control" 
+          type="text" 
+          id="imageURL" 
+          value={imageURL} 
+          onChange={(e) => setImageURL(e.target.value)} 
+          placeholder="Enter Image URL" 
+          required 
+        />
+      </div>
+      <button className="btn btn-primary offset-md-3" onClick={handleSubmit} to="/contact_list">
+        Add Contact
+      </button>
+      <Link className="btn btn-primary offset-md-3" to="/">Back to Contact List</Link>
+    </div>
+  )
+};
+
+export default AddNewContact;
diff --git a/src/components/contact_list.js b/src/components/contact_list.js
@@ -0,0 +1,50 @@
+import React from "react";
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+const ContactList = ({ contacts }) => (
+  <div className="container">
+    <h2 className="text-center">Contact List</h2>
+    <Link className="btn btn-primary col-md-2" to="/new">Add Contact</Link>
+    <table className="table table-bordered table-hover">
+      <thead>
+        <tr>
+          <th scope="col">Profile Pic</th>
+          <th scope="col">Name</th>
+          <th scope="col">Email</th>
+          <th scope="col">Phone Number</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {contacts.map(contact => (
+            <tr 
+              key={contact.id}
+              className="contact-row"
+              onClick={() => (window.location.href = `/contacts/${contact.id}`)}
+            >
+              <td className="col-md-3">
+                <img 
+                  src={contact.imageURL} 
+                  width="50%"
+                  height="auto"
+                  className="thumbnail" 
+                  alt="contact profile" 
+                />
+              </td>
+              <td>{contact.fullName}</td>
+              <td>{contact.emailAddress}</td>
+              <td>{contact.phoneNumber}</td>
+            </tr>
+          ))
+        }
+      </tbody>
+    </table>
+  </div>
+)
+
+ContactList.propTypes = {
+  contacts: PropTypes.array.isRequired,
+};
+
+export default ContactList;
diff --git a/src/components/contact_profile.js b/src/components/contact_profile.js
@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { Link, useParams } from 'react-router-dom';
+
+const ContactProfileInfo = ({ contacts }) => {
+  const { id } = useParams();
+  const contact = contacts.find((c) => c.id === parseInt(id, 10));
+
+  return (
+    <div className="container">
+      <div className="card">
+        <img src={contact.imageURL} alt="contact profile" />
+        <div className="card-body">
+          <h4 className="card-title">{contact.fullName}</h4>
+          <h5 className="card-text">Email: {contact.emailAddress}</h5>
+          <h5 className="card-text">Phone Number: {contact.phoneNumber}</h5>
+        </div>
+        <div className="card-footer">
+          <Link className="btn btn-primary" to="/">Back</Link>
+        </div>
+      </div>
+    </div>
+  )
+};
+
+ContactProfileInfo.propTypes = {
+  contacts: PropTypes.array.isRequired,
+};
+
+export default ContactProfileInfo;
diff --git a/src/components/contact_row.js b/src/components/contact_row.js
@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from 'prop-types';
+
+const ContactRow = ({newContact, handleContactRowClick}) => {
+  return (
+    <tbody>
+      <tr id={newContact.id} onClick={handleContactRowClick}>
+        <td className="col-md-3"><img src={newContact.imageURL} className="thumbnail" alt="contact profile" /></td>
+        <td>{newContact.fullName}</td>
+        <td>{newContact.emailAddress}</td>
+        <td>{newContact.phoneNumber}</td>
+      </tr>
+    </tbody>
+  )
+};
+
+ContactRow.propTypes = {
+  newContact: PropTypes.object.isRequired,
+};
+
+export default ContactRow;
diff --git a/src/components/sampledata.json b/src/components/sampledata.json
@@ -0,0 +1,25 @@
+{
+  "contacts": [
+    {
+      "id": 70219577,
+      "name": "Albert Einstein",
+      "image_url": "https://en.wikipedia.org/wiki/Albert_Einstein#/media/File:Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
+      "email": "[email protected]",
+      "phone_number": "15555555555"
+    },
+    {
+      "id": 80319597,
+      "name": "Michele Besso",
+      "image_url": "https://upload.wikimedia.org/wikipedia/commons/f/f4/Photo_Michele_Besso.jpg",
+      "email": "[email protected]",
+      "phone_number": "15557778888"
+    },
+    {
+      "id": 61249876,
+      "name": "Marcel Grossmann",
+      "image_url": "https://upload.wikimedia.org/wikipedia/commons/e/e0/ETH-BIB-Grossmann%2C_Marcel_%281878-1936%29-Portrait-Portr_01239.tif_%28cropped%29.jpg",
+      "email": "[email protected]",
+      "phone_number": "15558889999"
+    }
+  ]
+}
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,18 @@
 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;
 }
+
+.btn {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import ContactList from './components/contact_list';
+import AddNewContact from './components/add_new_contact';
+import ContactProfileInfo from './components/contact_profile';
+
+const App = () => (
+  <div>
+    <Main />
+  </div>
+);
+
+const Main = () => {
+  const [contacts, setContacts] = useState([]);
+
+  const handleAddContact = (newContact) => {
+    setContacts(previousContact => [...previousContact, newContact])
+  }
+
+  return (
+    <div>
+      <Routes>
+        <Route exact path="/" element={<ContactList contacts={contacts} />} />
+        <Route path="/new" element={<AddNewContact addContact={handleAddContact} />} />
+        <Route path="/contacts/id" element={<ContactProfileInfo contacts={contacts} />} />
+      </Routes>
+    </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();