React Contacts

package.json

@@ -6,8 +6,13 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^5.2.3",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.7.0",
     "react-dom": "^17.0.2",
+    "react-router-bootstrap": "^0.26.2",
+    "react-router-dom": "^6.6.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
   },

src/App.css

@@ -36,3 +36,13 @@
     transform: rotate(360deg);
   }
 }
+
+.form-floating {
+  margin-bottom: 20px;
+}
+
+.contactPhoto,
+.welcome_gif {
+  width: 250px;
+  height: auto;
+}

src/App.js

@@ -1,25 +1,60 @@
-import logo from './logo.svg';
+import React, { useState, useEffect} from "react";
 import './App.css';
+import Home from "./componenets/home";
+import ContactItem from "./componenets/ContactItem";
+import ContactsList from "./componenets/ContactList";
+import AddContact from "./componenets/AddContact";
+import NotFound from "./componenets/NotFound";
+import { Routes, Route, Link } from 'react-router-dom';
+import { Navbar, Nav } from "react-bootstrap";
+import data from "./data.json";
+
 
 function App() {
+  // Rename Document Title (using as componentDidMount)
+  useEffect(() => {
+    document.title = "Contacts App";
+  }, []);
+
+  // Define initial state of contacts and define setContacts method(?) -- setup useState hook
+  const [contacts, setContacts] = useState(data.contacts)
+
+  // Func to add new contact
+  const addNewContact = (newContact) => {
+    console.log(newContact);
+    setContacts(() => [...contacts, 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>
-  );
+    <>
+      <Navbar bg="purple" className="gradient-navbar" variant="dark" expand="lg">
+        <Navbar.Brand as={Link} to="/">Contacts App</Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="mr-auto">
+            <Nav.Link as={Link} to="/">Home</Nav.Link>
+            <Nav.Link as={Link} to="/contacts">Contacts</Nav.Link>
+            <Nav.Link as={Link} to="/contacts/new">New Contact</Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Navbar>
+
+      <div className="container">
+        <div className="row">
+          <h1 className="text-center gradient-color">Contacts App</h1>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/contacts" >
+              <Route index element={<ContactsList contacts={contacts} />} />
+              <Route path=":id" element={<ContactItem />} />
+              <Route path="new" element={<AddContact onSubmit={addNewContact} />} />
+            </Route>
+            <Route path="/*" element={<NotFound />} />
+          </Routes>
+        </div>
+      </div>
+    </>
+  )
 }
 
-export default App;
+export default App;

src/componenets/AddContact.js

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
+import Form from 'react-bootstrap/Form';
+
+const AddContact = ({onSubmit}) => {
+
+  const navigate = useNavigate();
+
+  // Define local state array, object keys, and set methods
+  const [contactData, setContactData] = useState([]);
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [phone, setPhone] = useState("")
+  const [photo, setPhoto] = useState("")
+
+  const addContact = () => {
+    const generateID = () => {
+      return (Math.round(Math.random() * 100000000))
+    };
+    const id = generateID();
+    const newContact = {id:id, name: name, email: email, phone_number: phone, image_url: photo};
+    setContactData([...contactData, newContact])
+    onSubmit(newContact);
+    navigate("/contacts");
+  }
+
+  const goBack = () => {
+    navigate("/contacts");
+  }
+
+  return (
+    <div>
+      <button className='btn btn-dark d-flex float-end' onClick={goBack} type="button" value="Submit">Go Back</button>
+      <br />
+      <h2>Add a New Contact</h2>
+      <hr />
+      <Form id="add-contact-form" onSubmit={addContact}>
+        <FloatingLabel controlId="floatingInput" label="Name">
+          <Form.Control
+            type="text" 
+            name="name" 
+            placeholder='name' 
+            value={name} 
+            onChange={(e) => setName(e.target.value)} 
+            required>
+          </Form.Control>
+        </FloatingLabel>
+        <FloatingLabel controlId="floatingInput" label="Email Address">
+          <Form.Control
+            // className='was-validated'
+            type="email" 
+            name="email" 
+            placeholder='email' 
+            value={email} 
+            onChange={(e) => setEmail(e.target.value)} 
+            required>
+          </Form.Control>
+          {/* <Form.Control.Feedback type="invalid">
+            Please provide a valid email address.
+          </Form.Control.Feedback> */}
+        </FloatingLabel>
+        <FloatingLabel controlId="floatingInput" label="Phone Number">
+          <Form.Control
+            type="tel" 
+            name="phone" 
+            placeholder='xxx-xxx-xxxx'
+            pattern='[0-9]{3}-[0-9]{3}-[0-9]{4}' 
+            value={phone} 
+            onChange={(e) => setPhone(e.target.value)} 
+            required>
+          </Form.Control>
+          <small className='form-text'>format: xxx-xxx-xxxx</small>
+        </FloatingLabel>
+        <FloatingLabel controlId="floatingInput" label="Photo URL">
+          <Form.Control
+            type="url" 
+            name="photo" 
+            placeholder='photo' 
+            value={photo} 
+            onChange={(e) => setPhoto(e.target.value)} 
+            required>
+          </Form.Control>
+        </FloatingLabel>
+        <button className='btn btn-dark' type="submit" value="Submit">Submit</button>
+      </Form>
+    </div>
+  );
+};
+
+// typecheck with proptypes
+AddContact.propTypes = {
+  onSubmit: PropTypes.func.isRequired
+}
+
+export default AddContact;

src/componenets/ContactItem.js

@@ -0,0 +1,30 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import NotFound from "./NotFound";
+
+const ContactItem = () => {
+  const { state } = useLocation()
+  const navigate = useNavigate();
+
+  const goBack = () => {
+    navigate("/contacts");
+  }
+
+  if (state) {
+    return (
+      <div className="text-center mt-5">
+        <img className="contactPhoto" src={state.image_url} alt="A photo of the contact" />
+        <div>{state.name}</div>
+        <div>{state.phone_number}</div>
+        <div>{state.email}</div>
+        <hr />
+        <button className='btn btn-dark' onClick={goBack} type="button" value="Submit">Go Back</button>
+      </div>
+    );
+  } else {
+    return (
+      <NotFound />
+    )
+  }
+};
+
+export default ContactItem;

src/componenets/ContactList.js

@@ -0,0 +1,57 @@
+import Table from 'react-bootstrap/Table'
+import PropTypes from 'prop-types';
+import { Link } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
+
+
+const ContactsList = ({contacts}) => {
+  const navigate = useNavigate();
+
+  const contactClick = (data) => {
+    navigate(`/contacts/${data.id}`, {state: data} )
+  }
+
+  return (
+    <div>
+      <h2>Contacts List</h2>
+
+      <Link to="new">
+        <button className="btn btn-dark">Create New Contact</button>
+      </Link>
+
+      <hr />
+
+      <Table striped bordered hover className="table">
+        <thead>
+          <tr>
+            <th scope="col">Photo</th>
+            <th scope="col">Name</th>
+            <th scope="col">Phone</th>
+            <th scope="col">Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          {contacts.map((contact, index) => {
+            return (
+              <tr key={index} onClick={() => contactClick(contact)}>
+                <td width='250px'>
+                  <img className='contactPhoto' src={contact.image_url} alt="A photo of the contact"  />
+                </td>
+                <td>{contact.name}</td>
+                <td>{contact.phone_number}</td>
+                <td>{contact.email}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    </div>
+  )
+};
+
+// typecheck props with propTypes
+ContactsList.propTypes = {
+ contacts: PropTypes.array.isRequired,
+}
+
+export default ContactsList;

src/componenets/NotFound.js

@@ -0,0 +1,9 @@
+const NotFound = (props) => {
+  return (
+    <div>
+      <h2>404 Error: <br/> Page Not Found <br/> ¯\_(ツ)_/¯</h2>
+    </div>
+  );
+};
+
+export default NotFound;

src/componenets/home.js

@@ -0,0 +1,23 @@
+import { Link } from "react-router-dom";
+import { Row, Col } from 'react-bootstrap';
+import gif from './welcome.gif'
+
+const Home = (props) => {
+  return (
+    <>
+      <h2>Welcome!</h2>
+      <img src={gif} className="welcome_gif" alt="A waiving hand and smile" />
+      <h5>Choose an Option Below:</h5>
+      <div style={{display: 'flex', justifyContent: 'start'}}>
+        <Link to="contacts">
+          <button className="btn btn-dark">View Contacts</button>
+        </Link>
+        <Link to="contacts/new">
+          <button className="btn btn-dark mx-1">Create New Contact</button>
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export default Home;

src/data.json

@@ -0,0 +1,25 @@
+{
+  "contacts": [
+    {
+      "id": 70219577,
+      "name": "Albert Einstein",
+      "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/1280px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
+      "email": "[email protected]",
+      "phone_number": "949-468-2750"
+    },
+    {
+      "id": 70219578,
+      "name": "Rick Rubin",
+      "image_url": "https://cdn.britannica.com/98/108998-050-1531FDB8/American-record-producer-Rick-Rubin-2014.jpg",
+      "email": "[email protected]",
+      "phone_number": "949-468-2750"
+    },
+    {
+      "id": 70219578,
+      "name": "Giannis Antetokounmpo",
+      "image_url": "https://imageio.forbes.com/specials-images/imageserve/627bd323672c41ea74c88a13/0x0.jpg?format=jpg&crop=1834,1833,x583,y167,safe&height=416&width=416&fit=bounds",
+      "email": "[email protected]",
+      "phone_number": "949-468-2750"
+    }
+  ]
+}

src/index.css

@@ -1,13 +1,35 @@
 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;
 }
+
+:root {
+  --gradient-color: linear-gradient(to right, #7c4dff, #18a9e6);
+}
+
+.gradient-navbar {
+  background: var(--gradient-color);
+  text-indent: 25px;
+}
+
+h1,
+button {
+  font-size: 50px;
+  background: var(--gradient-color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+button:hover {
+  background: white;
+  -webkit-text-fill-color: rgba(255, 255, 255, 0.967);
+}