projectshft · kelseyb55 · May 18, 2023 · May 22, 2023 · May 22, 2023 · May 22, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.0.0-beta.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,48 @@
-import logo from './logo.svg';
+
 import './App.css';
+import React, {useState, useEffect} from 'react'
+import {Routes, Route} from 'react-router-dom'
+import AddNewContact from './components/add_new_contact';
+import Contact from './components/contact_id';
+import ContactList from './components/contact_list';
+
 
 function App() {
+  const [contacts, setContacts] = useState(
+    JSON.parse(localStorage.getItem('contacts')) || [
+      {
+        id: 1,
+        name: 'Maximus Mighty-Dog Mueller II',
+        email: '[email protected]',
+        phoneNumber: '5558881234',
+        ImageUrl: 'https://ghk.h-cdn.co/assets/17/18/2560x2560/square-gettyimages-147786673.jpg'
+      }
+    ]
+  );
+
+  useEffect(() => {
+    storeContact(contacts);
+  }, [contacts]);
+
+  const addContact = (newContact) => {
+    setContacts((previousContact) => [...previousContact, newContact]);
+  };
   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>
+      <h1>Contact List</h1>
+      <Routes>
+        <Route exact path="/" element={<ContactList contacts={contacts} />} />
+        <Route path="/new" element={<AddNewContact addContact={addContact} setContacts={setContacts}/>}/>
+        <Route path="contacts/:id" element={<Contact contacts={contacts}/>} />
+      </Routes>
     </div>
   );
 }
+
+const storeContact = (contacts) => {
+  localStorage.setItem('contacts',JSON.stringify(contacts));
+};
+
+
 
 export default App;
diff --git a/src/components/add_new_contact.js b/src/components/add_new_contact.js
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types'
+import { useNavigate, Link } from 'react-router-dom';
+
+const AddNewContact = ({ addContact }) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phoneNumber, setNumber] = useState('');
+  const [ImageUrl, setImageUrl] = useState('');
+
+  const nav = useNavigate();
+
+  const handleNameChange = (e) => {
+    setName(e.target.value);
+  };
+
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+};
+
+const handleNumberChange = (e) => {
+  setNumber(e.target.value);
+};
+
+const handleImageUrlChange = (e) => {
+  setImageUrl(e.target.value);
+};
+
+const giveId = () => Math.round(Math.random() * 100000000);
+
+const handleSubmit = (e) => {
+  e.preventDefault();
+  const newContact = {
+    id: giveId(),
+    name,
+    email,
+    phoneNumber,
+    ImageUrl,
+  };
+
+  addContact(newContact);
+  nav('/contactList');
+};
+
+
+
+return (
+  <div className="container">
+  <h2>Add Contact</h2>
+  <form onSubmit={handleSubmit}>
+    <div className="form-group">
+      <label htmlFor="name">Full Name</label>
+      <input
+        type="text"
+        className="form-control"
+        id="name"
+        value={name}
+        onChange={handleNameChange}
+        placeholder="Enter Full Name"
+        required
+      />
+    </div>
+    <div className="form-group">
+      <label htmlFor="phone">Phone Number</label>
+      <input
+        type="text"
+        className="form-control"
+        id="phone"
+        onChange={handleNumberChange}
+        value={phoneNumber}
+        pattern="[0-9]{10}"
+        placeholder="5552223333"
+        required
+      />
+    </div>
+    <div className="form-group">
+      <label htmlFor="email">Email</label>
+      <input
+        type="text"
+        className="form-control"
+        id="email"
+        onChange={handleEmailChange}
+        value={email}
+        placeholder="[email protected]"
+        required
+      />
+    </div>
+    <div className="form-group">
+      <label htmlFor="image">Image URL</label>
+      <input
+        type="text"
+        className="form-control"
+        id="image"
+        onChange={handleImageUrlChange}
+        value={ImageUrl}
+        placeholder="https://URL.jpg"
+        required
+      />
+    </div>
+    <button type="submit" className="btn btn-primary">
+      Add Contact
+    </button>
+    <Link to="/contactList" className="btn btn-primary" > Back to Contact List
+    </Link>
+  </form>
+</div>
+);
+};
+
+
+AddNewContact.propTypes = {
+  addContact :PropTypes.func.isRequired,
+};
+
+export default AddNewContact;
diff --git a/src/components/contact_id.js b/src/components/contact_id.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useParams, Link } from 'react-router-dom';
+
+
+const Contact = ({ 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 info"
+    />
+    <div className="card-body">
+      <h5 className="card-title">{contact.name}</h5>
+      <h6 className="card-subtitle mb-2 text-muted">Email: {contact.email}</h6>
+      <p className="card-text">Phone Number: {contact.phoneNumber}</p>
+    </div>
+    <div className="card-footer">
+      <Link to="/" className="btn btn-primary"> Back to Contact List
+      </Link>
+    </div>
+  </div>
+  </div>
+  )
+  }
+
+
+  Contact.propTypes = {
+    contacts: PropTypes.array.isRequired,
+  };
+
+  export default Contact;
diff --git a/src/components/contact_list.js b/src/components/contact_list.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom'
+
+
+const ContactList = ({ contacts }) => (
+  <div className="container">
+    <Link to="/new" className="btn btn-primary">
+      Add Contact
+    </Link>
+    <table className="table table-bordered">
+    <thead>
+      <tr>
+        <th scope="col">Profile Picture</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>
+        <img
+                src={contact.ImageUrl}
+                className="rounded mx-auto d-block"
+                width="25%"
+                height="auto"
+                alt="new"
+              />
+        </td>
+          <td>{contact.name}</td>
+          <td>{contact.email}</td>
+          <td>{contact.phoneNumber}</td>
+        </tr>
+    ))}
+    </tbody>
+  </table>
+</div>
+);
+
+ContactList.propType = {
+  contacts: PropTypes.array.isRequired
+}
+
+  export default ContactList;
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );