projectshft · brodieheg · Oct 8, 2023 · lmicek · Oct 24, 2023 · lmicek
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.1"
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -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>My Contacts</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,45 @@
-import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+import { useState } from 'react';
+import { Routes, Route, useNavigate } from 'react-router-dom'
+import ContactTable from './contact-table';
+import NewContact from './new-contact';
+import ContactView from './contact-view'
+
 
 function App() {
+  const navigate = useNavigate();
+  const [contactList, SetcontactList] = useState([
+    ]
+  );
+
+  const HandleNewContactSubmit = (event) => {
+    event.preventDefault();
+    const generateId = () => Math.round(Math.random() * 100000000);
+    const newContact =  {
+      id: generateId(), 
+      name: event.target.name.value,
+      email: event.target.email.value,
+      phone_number: event.target.phoneNumber.value,
+      image_url: event.target.url.value
+    }
+      SetcontactList([...contactList, newContact]); 
+      event.target.name.value = '';
+      event.target.email.value = '';
+      event.target.phoneNumber.value = '';
+      event.target.url.value = '';
+      navigate('/')
+    }
+
   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>
+    <Routes>
+      <Route exact path="/" element={
+        <ContactTable contacts = {contactList} setContact = {SetcontactList}/>
+        } />
+      <Route path="/new" element={<NewContact HandleNewContactSubmit = {HandleNewContactSubmit}/>} />
+      <Route path = '/:id' element = {<ContactView contacts = {contactList}/>}/>
+    </Routes> 
     </div>
   );
 }

diff --git a/src/contact-rows.js b/src/contact-rows.js
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+
+const ContactRows = (props) => {
+  const contacts = props.contacts
+  const navigate = useNavigate();
+
+  return (
+    contacts.map ((contact) => {
+      // Map through contacts array and create a table row for each one, complete with navigation on click //
+      const ContactView = (event) => {
+        navigate(`/${event.currentTarget.id}`)}
+       return (
+      <tr onClick = {ContactView} key = {contact.id} id = {contact.id}>
+        <td><img alt = "contact" src = {contact.image_url}/></td>
+         <td>{contact.name}</td>
+         <td>{contact.email}</td>
+         <td>{contact.phone_number}</td>
+    </tr>
+      )
+    }))
+  }
+
+    // PropTypes. 
+ContactRows.propTypes = {
+  contacts: PropTypes.array.isRequired
+}
+
+export default ContactRows
diff --git a/src/contact-table.js b/src/contact-table.js
@@ -0,0 +1,32 @@
+import ContactRows from './contact-rows'
+import { useNavigate } from 'react-router-dom'
+
+const ContactTable = (props) => {
+  // New Contact form navigation
+  const navigate = useNavigate();
+  const HandleClick = () => {
+    navigate("/new")
+  }
+
+return (
+  <div className = "col-md-8 offset-2">
+    <h1 className='mt-4 h1 text-center'>Contact List</h1>
+    <table className="mt-3 table">
+    <thead>
+     <tr>
+        <th className = "text-center" >Profile Pic</th>
+        <th className = "text-center" >Name</th>
+        <th className = "text-center" >Email</th>
+        <th className = "text-center" >Phone Number</th>
+     </tr>
+   </thead>
+    <tbody>
+      <ContactRows contacts = {props.contacts}/>
+    </tbody>
+    </table>
+    <button className='btn btn-primary' onClick={HandleClick}> New Contact </button>
+  </div>
+)
+}
+
+export default ContactTable;
diff --git a/src/contact-view.js b/src/contact-view.js
@@ -0,0 +1,25 @@
+import { useNavigate } from "react-router-dom";
+const ContactView = (props) => {
+
+  // Find contact from state using current URL
+  const contactId = window.location.pathname.replace(/\//, '');
+  const contact = props.contacts.find(contact => contact.id == contactId);
+
+  // Navigation back to contact list
+  const navigate = useNavigate();
+  const handleBackSubmit = () => {
+    navigate('/');
+  }
+
+  return (
+  <div>     
+    <h1> {contact.name}</h1>
+    <img src = {contact.image_url}></img>
+    <h3> Phone Number: {contact.phone_number}</h3>
+    <h3> Email: {contact.email}</h3>
+    <button onClick = {handleBackSubmit} className="btn btn-primary">Back</button>
+  </div>
+  )
+}
+
+export default ContactView;
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;
 }
+
+tr:hover td {
+  background: gainsboro;
+  cursor: pointer;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
+import ReactDOM from 'react-dom/client';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <React.StrictMode>
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <BrowserRouter>
     <App />
-  </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();
+  </BrowserRouter>
+);
diff --git a/src/new-contact.js b/src/new-contact.js
@@ -0,0 +1,20 @@
+
+const NewContact = (props) => {
+
+  // New Contact form: all fields are required, according to type.
+
+  return ( 
+  <form onSubmit = {props.HandleNewContactSubmit} className = "col-md-4 offset-md-4">
+    <h3>Add Contact</h3>
+    <span>
+     <input required name = "name" type="name" className="form-control" id="InputName" placeholder="Name"/>
+     <input required name = "email" type="email" className="form-control" id="InputEmail1"  placeholder="Email"/>
+     <input required name = "phoneNumber" type="tel" className="form-control" id="InputPhoneNumber" placeholder="Phone Number"/>
+     <input required name = "url" type="url" className="form-control" id="InputImageUrl" placeholder="Image Url"/>
+    </span>
+    <button type="submit" className="btn btn-primary">Add Contact</button>
+  </form>
+)
+}
+
+export default NewContact