Contact List

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^4.6.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
   },
@@ -19,8 +22,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "wesbos"
     ]
   },
   "browserslist": {
@@ -34,5 +36,19 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.8.1",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-wesbos": "^1.0.1",
+    "eslint-plugin-html": "^6.1.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "prettier": "^2.1.1"
   }
 }

src/App.css

@@ -2,37 +2,7 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+img {
+  width: 100%;
+  max-width: 200px;
 }

src/App.js

@@ -1,25 +1,79 @@
-import logo from './logo.svg';
 import './App.css';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { useState } from 'react';
+import Home from './components/Home';
+import IndividualContact from './components/IndividualContact';
+import NewContact from './components/NewContact';
+import EditContact from './components/EditContact';
+import Header from './components/Header';
 
-function App() {
-  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>
+const Header = () => (
+  <div className="row">
+    <h1>Your Contact List</h1>
+    <div className="col-md-12 text-center">
+      <h1>Your Contact List</h1>
     </div>
+  </div>
+);
+
+const App = () => {
+  const [contacts, setContacts] = useState([]);
+
+  const addContact = (newContact) => {
+    setContacts(contacts.concat([newContact]));
+  };
+
+  const editContact = (newContactInfo) => {
+    setContacts((prevState) =>
+      [...prevState].map((c) =>
+        c.id === newContactInfo.id ? newContactInfo : c
+      )
+    );
+  };
+
+  const deleteContact = (id) => {
+    setContacts((prevState) =>
+      [...prevState].filter((c) => c.id !== parseInt(id))
+    );
+  };
+
+
+  return (
+    <div className="App container">
+    <Header />
+    <Switch>
+      <Route
+        exact
+        path="/contacts"
+        render={() => (
+          <Home contacts={contacts} deleteContact={deleteContact} />
+        )}
+      />
+      <Route
+        path="/contacts/new"
+        render={() => <NewContact addContact={addContact} />}
+      />
+      <Route
+        exact
+        path="/contacts/:id"
+        render={({ match }) => (
+          <IndividualContact contacts={contacts} match={match} />
+        )}
+      />
+      <Route
+        path="/contacts/:id/edit"
+        render={({ match }) => (
+          <EditContact
+            contacts={contacts}
+            match={match}
+            editContact={editContact}
+          />
+        )}
+      />
+      <Redirect to="/contacts" />
+    </Switch>
+  </div>
   );
-}
+};
 
-export default App;
+export default App;

src/components/Contact.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link, Redirect } from 'react-router-dom';
+
+const Contact = ({ contact, deleteContact }) => {
+  const [redirect, setRedirect] = useState(false);
+
+  const handleContactClick = () => {
+    setRedirect(true);
+  };
+
+  const handleDeleteButtonClick = (e) => {
+    e.stopPropagation();
+    deleteContact(contact.id);
+  };
+
+  if (redirect) {
+    return <Redirect push to={`/contacts/${contact.id}`} />;
+  }
+
+  return (
+    <tr
+      idnum={contact.id}
+      onClick={handleContactClick}
+      style={{ cursor: 'pointer' }}
+    >
+      <td>
+        <img src={contact.image_url} alt="..." />
+      </td>
+      <td>{contact.name}</td>
+      <td>{contact.email}</td>
+      <td>{contact.phone_number}</td>
+      <td>
+        <Link to={`/contacts/${contact.id}/edit`}>Edit</Link>
+        <br />
+        <button
+          type="button"
+          className="btn btn-primary btn-sm"
+          onClick={handleDeleteButtonClick}
+        >
+          Delete
+        </button>
+      </td>
+    </tr>
+  );
+};
+
+Contact.propTypes = {
+  contact: PropTypes.object,
+  deleteContact: PropTypes.func,
+};
+
+export default Contact;

src/components/EditContact.js

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link, Redirect } from 'react-router-dom';
+
+const EditContact = ({ match, contacts, editContact }) => {
+  const { id } = match.params;
+  const [contact] = contacts.filter((c) => c.id === parseInt(id));
+
+  const [nameInput, setNameInput] = useState(contact.name);
+  const [emailInput, setEmailInput] = useState(contact.email);
+  const [phoneNumberInput, setPhoneNumberInput] = useState(
+    contact.phone_number
+  );
+  const [imageURLInput, setImageURLInput] = useState(contact.image_url);
+  const [redirect, setRedirect] = useState(false);
+
+  const handleEditContactClick = () => {
+    if (!nameInput || !imageURLInput || !emailInput || !phoneNumberInput) {
+      alert('No field can be left blank');
+      return;
+    }
+    const updatedContactInfo = {
+      name: nameInput,
+      image_url: imageURLInput,
+      email: emailInput,
+      phone_number: phoneNumberInput,
+      id: parseInt(id),
+    };
+    editContact(updatedContactInfo);
+    setRedirect(true);
+  };
+
+  if (redirect) {
+    return <Redirect push to="/contacts" />;
+  }
+
+  return (
+    <div className="row">
+      <div className="col-md-6 new-contact-form text-left">
+        <h2>Edit Contact</h2>
+        <p>
+          <Link to="/contacts">Go Back</Link>
+        </p>
+        <div className="form-group">
+          <label htmlFor="name-input">
+            Full Name
+            <input
+              className="form-control"
+              id="name-input"
+              type="text"
+              placeholder="Enter Name"
+              value={nameInput}
+              onChange={(e) => setNameInput(e.target.value)}
+            />
+          </label>
+        </div>
+        <div className="form-group">
+          <label htmlFor="email-input">
+            Email Address
+            <input
+              className="form-control"
+              id="email-input"
+              type="text"
+              placeholder="Enter Email Address"
+              value={emailInput}
+              onChange={(e) => setEmailInput(e.target.value)}
+            />
+          </label>
+        </div>
+        <div className="form-group">
+          <label htmlFor="phone-number-input">
+            Phone Number
+            <input
+              className="form-control"
+              id="phone-number-input"
+              type="text"
+              placeholder="Enter Phone Number"
+              value={phoneNumberInput}
+              onChange={(e) => setPhoneNumberInput(e.target.value)}
+            />
+          </label>
+        </div>
+        <div className="form-group">
+          <label htmlFor="image-url-input">
+            Image url
+            <input
+              className="form-control"
+              id="image-url-input"
+              type="text"
+              placeholder="ImageURL"
+              value={imageURLInput}
+              onChange={(e) => setImageURLInput(e.target.value)}
+            />
+          </label>
+        </div>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={handleEditContactClick}
+        >
+          Edit Contact
+        </button>
+      </div>
+    </div>
+  );
+};
+
+EditContact.propTypes = {
+  match: PropTypes.object,
+  contacts: PropTypes.array,
+  editContact: PropTypes.func,
+};
+
+export default EditContact;

src/components/Header.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Header = () => (
+  <div className="row">
+    <div className="col-md-12 text-center">
+      <h1>Your Contact List</h1>
+    </div>
+  </div>
+);
+
+export default Header;