projectshft · Will9214 · May 21, 2023 · May 21, 2023 · May 22, 2023 · lmicek
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/data.json b/public/data.json
@@ -0,0 +1,11 @@
+{
+  "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"
+    }
+  ]
+}
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>Contact List</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Contact.js b/src/components/Contact.js
@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from 'prop-types';
+
+//returning jsx to add new contact to contacts list
+const Contact = ({contact, handleRowClick}) => {
+
+  return(
+    <tbody>
+        <tr id={contact.id} onClick={handleRowClick}>
+          <td className='col-md-3'><img src={contact.imageUrl} className='col-md-12 border' alt='' /></td>
+          <td>{contact.fullName}</td>
+          <td>{contact.email}</td>
+          <td>{contact.phoneNumber}</td>
+        </tr>
+      </tbody>
+  )
+};
+
+Contact.propTypes = {
+  contact: PropTypes.object.isRequired,
+}
+
+export default Contact;
diff --git a/src/components/ContactsList.js b/src/components/ContactsList.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Contact from './Contact';
+import PropTypes from 'prop-types';
+
+const ContactsList = ({contacts}) => {
+  //navigate to individual contact page (ShowContact component) when a contact is clicked
+  const navigate = useNavigate();
+  const handleRowClick = (e) => {
+    const contactId = e.currentTarget.id;
+    navigate(`/contacts/${contactId}`);
+  }
+
+  return (
+    <div>
+      <h1 className='text-center'>Contacts List</h1>
+      <table className='table offset-md-1 table-bordered table-hover' style={{"width" : "80%"}}>
+        <thead>
+          <tr>
+            <th key="pic" scope='col' className=''>Profile Pic</th>
+            <th key='name' scope='col' className=''>Name</th>
+            <th key='email' scope='col' className=''>Email</th>
+            <th key='phoneNumber' scope='col' className=''>Phone Number</th>
+          </tr>
+        </thead>
+
+        {/* maps through contacts and displays each contact */}
+        {contacts.map(contact => {
+          return(
+            <Contact contact={contact} handleRowClick={handleRowClick} />
+          )
+        })}
+
+      </table>
+    <Link to='/new' className='btn btn-primary offset-md-1'>Add Contact</Link>
+  </div>
+  )
+};
+//PropType for the contacts prop being passed in
+ContactsList.propTypes = {
+  contacts: PropTypes.array
+}
+
+export default ContactsList;
diff --git a/src/components/NewContact.js b/src/components/NewContact.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+
+const NewContact = ({onSubmit}) => {
+  const navigate = useNavigate();
+
+  //creating individual states for each user input
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [imageUrl, setImageUrl] = useState('');
+
+  //id generator to give unique id for each contact created
+  const generateId = () => Math.round(Math.random() * 1000000000);
+
+  //creating contact object that will be added to the contacts state in index.js. Clicking will also result in navigating back to ContactsList
+  const handleSubmit = () => {
+    const contact = {
+      id: generateId(),
+      fullName,
+      email,
+      phoneNumber,
+      imageUrl
+    };
+
+    onSubmit(contact);
+    navigate('/');
+  }
+
+  return (
+    <div>
+    <h1 className='text-center'>Add Contact</h1>
+    <div className='row offset-md-3 col-md-6'>
+      <div>Full Name</div>
+      <input className='form-control' onChange={(e) => setFullName(e.target.value)}></input>
+      <div>Email Address</div>
+      <input className='form-control' onChange={(e) => setEmail(e.target.value)}></input>
+      <div>Phone Number</div>
+      <input className='form-control' onChange={(e) => setPhoneNumber(e.target.value)}></input>
+      <div>Image URL</div>
+      <input className='form-control' onChange={(e) => setImageUrl(e.target.value)}></input>
+      <hr />
+    </div>
+
+    <button to='/contacts' className='btn btn-primary offset-md-3' onClick={handleSubmit}>Add Contact</button>
+    <Link to='/' className='btn btn-primary offset-md-4'>Back</Link>
+  </div>
+  )
+};
+
+export default NewContact;
diff --git a/src/components/ShowContact.js b/src/components/ShowContact.js
@@ -0,0 +1,34 @@
+import React from "react"
+import { Link, useLocation, matchPath } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+const ShowContact = ({contacts}) => {
+  //matching id of the path to id of the contact object that was clicked so the correct individual contact is shown. 
+  //There seems like there could be an easier way to do this?
+  const location = useLocation();
+  const path = matchPath("/contacts/:id", location.pathname);
+  const pathId = parseInt(path.params.id);
+  const contact = contacts.find(obj => obj.id === pathId);
+
+  return (
+    <div>
+      <h1 className="text-center">Contact</h1>
+      <br />
+      <div className='col-md-2 offset-md-5 border'>
+        <img src={contact.imageUrl} className='col-md-12' alt=""/>
+        <div className='text-center'>
+          <h4><strong>{contact.fullName}</strong></h4>
+          <div>{contact.email}</div>
+          <div><strong>{contact.phoneNumber}</strong></div>
+        </div>
+      </div>
+      <Link to='/' className='btn btn-primary offset-md-5'>Back</Link>
+    </div>
+  )
+};
+
+ShowContact.propTypes = {
+  contact: PropTypes.object,
+}
+
+export default ShowContact;
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,25 @@
 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;
 }
+
+input {
+  margin-bottom: 10px;
+}
+
+.btn {
+  margin-bottom: 10px;
+}
+
+.contact:hover {
+  background-color: lightgrey;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,40 @@
-import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import ContactsList from './components/ContactsList';
+import NewContact from './components/NewContact';
+import ShowContact from './components/ShowContact';
+
+//App component
+const App = () => (
+  <div>
+    <Main />
+  </div>
+)
+//Create contacts state. An array that will have objects added to it.
+const Main = () => {
+  const [contacts, setContacts] = useState([]);
+
+  const handleAddContacts = (contact) => {
+    setContacts(prevState => [...prevState, contact])
+  }
+
+  return (
+    <Routes>
+      <Route exact path="/" element={<ContactsList contacts={contacts} />} />
+      <Route path="/new" element={<NewContact onSubmit={handleAddContacts}/>} />
+      <Route path="/contacts/:number" element={<ShowContact contacts={contacts} />} />
+    </Routes>
+  )
+}
 
 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();