Contact List Submission

package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^3.4.1",
+    "eslint-config-wesbos": "^3.2.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.17.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
@@ -19,6 +22,7 @@
   },
   "eslintConfig": {
     "extends": [
+      "wesbos",
       "react-app",
       "react-app/jest"
     ]

src/App.js

@@ -1,23 +1,85 @@
-import logo from './logo.svg';
-import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React, { useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import Home from './Home';
+import NewContact from './NewContact';
+import Contact from './Contact';
 
 function App() {
+  const [contacts, setContacts] = useState([
+    {
+      index: 1,
+      name: 'Scott Bouchard',
+      email: '[email protected]',
+      phone: '3606740888',
+      imgURL: (
+        <img
+          src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.18169-9/1377351_4732623293036_414716838_n.jpg?stp=c0.53.480.480a_dst-jpg_s851x315&_nc_cat=101&ccb=1-7&_nc_sid=c21ed2&_nc_ohc=eci7-yZXE7cAX8s7Kil&_nc_ht=scontent-sea1-1.xx&oh=00_AfDm77OMGeyh0jmSlxH32HHGESUYnvv4VM4N9rc1WLzTag&oe=6562E62E"
+          alt="Invalid Link"
+          height="250"
+          width="250"
+        />
+      ),
+    },
+    {
+      index: 2,
+      name: 'John Doe',
+      email: '[email protected]',
+      phone: '5555555555',
+      imgURL: (
+        <img
+          src="https://scontent-sea1-1.xx.fbcdn.net/v/t39.30808-6/278182625_10216502601637066_370310320185790075_n.jpg?_nc_cat=101&ccb=1-7&_nc_sid=5f2048&_nc_ohc=Cjm4VE-oSEMAX--msJm&_nc_ht=scontent-sea1-1.xx&oh=00_AfAqu6DGxPVVWvbJGWD1gc_awoaD9lAlqNOL2rSqb8kMjg&oe=6541177E"
+          alt="Invalid Link"
+          height="250"
+          width="250"
+        />
+      ),
+    },
+    {
+      index: 3,
+      name: 'Jive Turkeys',
+      email: '[email protected]',
+      phone: '123456789',
+      imgURL: (
+        <img
+          src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.18169-9/534154_3313540696858_1477825511_n.jpg?stp=c120.0.720.720a_dst-jpg_s851x315&_nc_cat=106&ccb=1-7&_nc_sid=c21ed2&_nc_ohc=hfVMsS-1_wUAX8cAbSO&_nc_ht=scontent-sea1-1.xx&oh=00_AfCU0BXEXzbNhKUctnvbeuYAT8Lcy3DUUQty8OP_c8T_bg&oe=6562C192"
+          alt="Invalid Link"
+          height="250"
+          width="250"
+        />
+      ),
+    },
+  ]);
+
+  const addContact = (contact) => {
+    // eslint-disable-next-line no-shadow
+    setContacts((contacts) => [...contacts, contact]);
+  };
+
   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>
+      <div>
+        <Routes>
+          <Route
+            exact
+            path="/"
+            element={<Home addContact={addContact} contacts={contacts} />}
+          />
+          <Route
+            path="/contacts/newcontact"
+            element={<NewContact addContact={addContact} contacts={contacts} />}
+          />
+          <Route
+            path="/contacts/:index"
+            element={
+              <Contact
+                contactId={parseInt(contacts.index, 10)}
+                contacts={contacts}
+              />
+            }
+          />
+        </Routes>
+      </div>
     </div>
   );
 }

src/Contact.js

@@ -0,0 +1,34 @@
+import { Link, useParams } from 'react-router-dom';
+import React from 'react';
+
+// eslint-disable-next-line react/prop-types
+const Contact = ({ contacts }) => {
+  const destructuredContacts = contacts;
+  const { index } = useParams();
+  const indexToMatch = parseInt(index);
+  const contact = destructuredContacts.find(
+    (item) => item.index === indexToMatch
+  );
+  if (!contact) {
+    return (
+      <div>
+        <h1>Sorry, but the contact was not found</h1>
+        <Link to="/">Back</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>{contact.imgURL}</h1>
+      <h1>
+        {contact.name} (ID#{contact.index})
+      </h1>
+      <h2>Email: {contact.email}</h2>
+      <h2>Phone: {contact.phone}</h2>
+      <Link to="/">Back</Link>
+    </div>
+  );
+};
+
+export default Contact;

src/Home.js

@@ -0,0 +1,75 @@
+import { Link, Routes, Route } from 'react-router-dom';
+import Contact from './Contact';
+
+// eslint-disable-next-line react/prop-types
+const Home = ({ contacts }) => {
+  const destructuredContacts = contacts;
+  const contactsTableHeadings = [
+    { head: 'Picture', prop: 'imgURL' },
+    { head: 'Name', prop: 'name' },
+    { head: 'Email', prop: 'email' },
+    { head: 'Phone', prop: 'phone' },
+  ];
+
+  function convertToImgElement(input) {
+    const destructuredInput = input;
+    const inputIsImg = destructuredInput[0].props;
+    if (typeof inputIsImg === 'object') {
+      const urlString = inputIsImg.src;
+      const imgElement = (
+        <img src={urlString} alt="Invalid Link" height="150" width="150" />
+      );
+      return imgElement;
+    }
+    return input;
+  }
+
+  const contactsTable = (columns, data, key) => (
+    <>
+      <thead>
+        <tr>
+          {columns.map((col) => (
+            <th key={col.head}>{col.head}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item) => (
+          <tr key={item[key]}>
+            {columns.map((col) => (
+              <td key={`${item[key]}-${col.prop}`}>
+                <Link to={`/contacts/${item.index}`}>
+                  {convertToImgElement([item[col.prop]])}
+                </Link>
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </>
+  );
+
+  return (
+    <div>
+      <Routes>
+        <Route
+          path="/contacts/:index"
+          element={<Contact contacts={contacts} />}
+        />
+      </Routes>
+      <h1>Contacts</h1>
+      <Link to="/contacts/newcontact">
+        <button type="button" className="btn-default">
+          Add New Contact
+        </button>
+      </Link>
+      <div>
+        <table id="contact-table" className="table table-hover">
+          {contactsTable(contactsTableHeadings, destructuredContacts)};
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

src/NewContact.js

@@ -0,0 +1,81 @@
+import { Link } from 'react-router-dom';
+import React, { useState } from 'react';
+
+// eslint-disable-next-line react/prop-types
+const NewContact = ({ contacts, addContact }) => {
+  const destructuredProps = { contacts, addContact };
+  const contactsArr = destructuredProps.contacts;
+
+  const generatedIndex = Math.round(Math.random() * 100);
+
+  const index = generatedIndex;
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [imgURL, setPic] = useState('');
+
+  const handleAddContactClick = () => {
+    const newContact = {
+      index,
+      name,
+      email,
+      phone,
+      imgURL: <img src={imgURL} alt="Invalid Link" width="250" height="250" />,
+    };
+    contactsArr.push(newContact);
+  };
+
+  return (
+    <div>
+      <h1>Add Contact</h1>
+      <form>
+        <label>
+          Full Name
+          <input
+            id="full-name"
+            type="text"
+            className="form-control"
+            onChange={(event) => setName(event.target.value)}
+          />
+        </label>
+        <label>
+          Email Address
+          <input
+            id="email"
+            type="text"
+            className="form-control"
+            onChange={(event) => setEmail(event.target.value)}
+          />
+        </label>
+        <label>
+          Phone Number
+          <input
+            type="text"
+            className="form-control"
+            onChange={(event) => setPhone(event.target.value)}
+          />
+        </label>
+        <label>
+          Image URL
+          <input
+            type="text"
+            className="form-control"
+            onChange={(event) => setPic(event.target.value)}
+          />
+        </label>
+        <Link to="/">
+          <button type="button" onClick={handleAddContactClick}>
+            Add Contact
+          </button>
+        </Link>
+        <div>
+          <Link to="/" contacts={contactsArr}>
+            Cancel
+          </Link>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default NewContact;

src/index.js

@@ -1,12 +1,16 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/reportWebVitals.js

@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);