Connor Cook contact-list

package.json

@@ -6,8 +6,12 @@
     "@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-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
   },

src/App.css

@@ -1,3 +1,36 @@
+.centered {
+  height: 100vh; /* Magic here */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.same-image-size {
+  height: auto;
+  max-height: 200px;
+  width: auto;
+  max-width: 300px;
+}
+
+.same-card-size {
+  width: 100px;
+  height: 300px;
+  text-align: center;
+  border-style: solid !important;
+  border-color: black !important;
+  background-color: #282c34 !important;
+}
+
+.view-contact {
+  background-color: #282c34;
+}
+
+.full-contact-button {
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,25 +1,46 @@
-import logo from './logo.svg';
-import './App.css';
+import { Switch, Route } from 'react-router-dom'
+import { useState } from 'react';
+import Home from './Home'
+import Contacts from './Contacts'
+import NoMatch from './No-Match'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './App.css'
+
 
 function App() {
+  const [contacts, setContacts] = useState([]);
+
+  const addContact = (contact) => (
+    setContacts( contacts => {
+      return [...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>
+      <Switch>
+        <Route exact path='/' component={Home}/>
+        <Route path='/contacts' render={() => (
+          <Contacts addContact={addContact} contacts={contacts} />
+        )} />
+        <Route path='*' component={NoMatch}/>
+      </Switch>
     </div>
   );
 }
 
+
 export default App;
+
+
+// {
+//   "contacts": [
+//     {
+//       "id": 70219577,
+//       "name": "Albert Einstein",
+//       "image_url": "https://en.wikipedia.org/wiki/Albert_Einstein#/media/File:Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
+//       "email": "[email protected]",
+//       "phone_number": "15555555555"
+//     }
+//   ]
+// }

src/Contacts.js

@@ -0,0 +1,29 @@
+import { Route, Switch } from "react-router-dom"
+import FullContact from "./Full-Contact"
+import NewContact from "./New-Contact"
+import ViewContact from "./View-Contact"
+import PropTypes from 'prop-types'
+
+const Contacts = ({contacts, addContact}) => (
+  <Switch>
+    <Route exact path='/contacts' render={() => (
+      <FullContact contacts={contacts} />
+    )} />
+
+    <Route path='/contacts/new' render={(routerProps) => (
+      <NewContact addContact={addContact} history={routerProps.history} />
+    )} />
+
+    <Route path='/contacts/:Id' render={(routerProps) => (
+      <ViewContact contacts={contacts} history={routerProps.history} contactId={routerProps.match.params.Id} />
+    )} />
+  </Switch>
+
+)
+
+Contacts.propTypes = {
+addContact:PropTypes.func.isRequired
+}
+
+
+export default Contacts

src/Full-Contact.js

@@ -0,0 +1,55 @@
+import { Link } from 'react-router-dom'
+import Card from 'react-bootstrap/Card';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import PropTypes from 'prop-types';
+import { propTypes } from 'react-bootstrap/esm/Image';
+
+const FullContact = ({contacts}) => (
+  <div className='full-contact'>
+    <button className='full-contact-button'><Link to={'/contacts/new'}>Add Contact</Link></button>
+    <br/>
+    <button className='full-contact-button'><Link to={'/'}>Home</Link></button>
+
+  <Container>
+    <Row>
+
+      {contacts.map(individual => (
+
+        <Col sm='auto'>
+          <Card className='same-card-size' style={{ width: '18rem' }}>
+            <Card.Img  className='same-image-size' variant="top" src={`${individual.image}`} alt="Card image" />
+            <Card.Body>
+              <Card.Title><Link to={`/contacts/${individual.Id}`}>{individual.name}</Link></Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+
+      ))}
+
+    </Row>  
+  </Container>
+  </div>
+
+)
+
+FullContact.defaultProps = {
+  contacts: PropTypes.shape({
+    name: 'John Doe',
+    image: 'https://tse1.mm.bing.net/th?id=OIP.7o-Gaf6oMuM3_XvLGQZuMgHaEo&pid=Api&rs=1&c=1&qlt=95&w=181&h=113',
+    email: '[email protected]',
+    phoneNumber: 111223333
+  })
+}
+
+FullContact.propTypes = {
+  contacts: PropTypes.shape({
+    name: PropTypes.string,
+    image: PropTypes.string,
+    email: PropTypes.string,
+    phoneNumber: PropTypes.number
+  })
+};
+
+export default FullContact

src/Home.js

@@ -0,0 +1,22 @@
+import { Link, Switch } from "react-router-dom"
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import Container from 'react-bootstrap/Container'
+
+const Home = () => (
+  <Container className="centered">
+    <Row>
+      <Col>
+        <h1>Let's Begin</h1>
+      </Col>
+    </Row>
+    <Row>
+      <Col>
+        <Link to={'/contacts'}>View Contacts</Link>
+      </Col>
+    </Row>
+  </Container>
+
+)
+
+export default Home

src/New-Contact.js

@@ -0,0 +1,89 @@
+import React, { useState,useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import Form from 'react-bootstrap/Form'
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+
+const NewContact = (props) => {
+  const [Id, setId] = useState('')
+  const [name, setName] = useState('')
+  const [image, setImage] = useState('')
+  const [email, setEmail] = useState('')
+  const [phoneNumber, setphoneNumber] = useState('')
+
+  const handleSubmit = () => {
+    props.addContact({Id, name, image, email, phoneNumber})
+
+    props.history.push('/contacts')
+  }
+
+  const handleCancel = () => {
+    props.history.push('/contacts')
+  }
+
+  useEffect (() => {
+    setId(Math.random() * 100000000)
+  }, []);
+
+  return (
+    <div>
+      <Container>
+        <Row>
+          <Col md={8}>
+            <Form>
+
+              <Form.Group className="mb-3" controlId="formGroupEmail">
+                <Form.Label>Name:</Form.Label>
+                <Form.Control type="name" placeholder="ex: Connor Cook" onChange={event => setName(event.target.value)} />
+              </Form.Group>
+
+              <Form.Group className="mb-3" controlId="formGroupEmail">
+                <Form.Label>Image URL:</Form.Label>
+                <Form.Control type="URL" placeholder="ex: https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Feinstein%2F&psig=AOvVaw2CL1kMLuVk5fZX8B5YU_v9&ust=1673730333972000&source=images&cd=vfe&ved=0CA4QjRxqFwoTCPj2isK5xfwCFQAAAAAdAAAAABAE" onChange={event => setImage(event.target.value)} />
+              </Form.Group>
+
+              <Form.Group className="mb-3" controlId="formGroupEmail">
+                <Form.Label>Email:</Form.Label>
+                <Form.Control type="email" placeholder="ex: [email protected]" onChange={event => setEmail(event.target.value)} />
+              </Form.Group>
+
+
+              <Form.Group className="mb-3" controlId="formGroupEmail">
+                <Form.Label>Phone Number:</Form.Label>
+                <Form.Control type="number" placeholder="ex: 480-999-9999" onChange={event => setphoneNumber(parseInt(event.target.value, 10))} />
+              </Form.Group>        
+
+            </Form>
+          </Col>
+        </Row>
+      </Container>
+
+      <Row>
+      <Col sm='auto'>
+      <button onClick={handleSubmit}>Save</button>
+      </Col>
+      <Col>
+      <button onClick={handleCancel}>Cancel</button>
+      </Col>
+      </Row>
+
+    </div>
+  )
+
+}
+
+
+export default NewContact
+
+{/* <Form>
+      <Form.Group className="mb-3" controlId="formGroupEmail">
+        <Form.Label>Email address</Form.Label>
+        <Form.Control type="email" placeholder="Enter email" />
+      </Form.Group>
+      <Form.Group className="mb-3" controlId="formGroupPassword">
+        <Form.Label>Password</Form.Label>
+        <Form.Control type="password" placeholder="Password" />
+      </Form.Group>
+    </Form> */}

src/No-Match.js

@@ -0,0 +1,8 @@
+
+const NoMatch = () => {
+  return (
+    <div>404 Error, page not found</div>
+  )
+}
+
+export default NoMatch;