Earth | Christina & Genevieve

package.json

@@ -3,15 +3,23 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "react-moment": "^1.1.1",
+    "react-onclickoutside": "^6.9.1",
+    "react-router-bootstrap": "^0.25.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1"
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.0"
+    "@testing-library/user-event": "^12.6.0",
+    "gh-pages": "^3.1.0"
   },
   "scripts": {
     "start": "PORT=3001 react-scripts start",

src/App.css

@@ -2,11 +2,6 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
 .App-header {
   background-color: #222;
   height: 150px;
@@ -18,11 +13,42 @@
   font-size: 1.5em;
 }
 
-.App-intro {
-  font-size: large;
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+
+.nav-links {
+  list-style: none;
+  display: flex;
+  background-color: black;
+
+}
+
+nav ul li {
+  padding: 20px;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+nav ul li a {
+  color: white;
+  text-decoration: none;
+}
+
+.selected {
+  color: rgb(158, 152, 152);
+}
+.current {
+  border-bottom: 4px solid white;
 }
+
+
+ul {
+  list-style-type: none;
+}
+

src/App.js

@@ -1,21 +1,130 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+/* eslint-disable camelcase */
+import React, { useState } from 'react';
+import axios from 'axios'
 import './App.css';
+import { BrowserRouter as Router, Switch, Route, NavLink} from 'react-router-dom';
+import {Alert, Button} from 'react-bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Search from './components/Search/Search'
+import CustomerList from './components/CustomerList'
+import VideoLibrary from './components/VideoLibrary/VideoLibrary'
 
-class App extends Component {
-  render() {
+
+
+const App = () => {
+  const BASE_URL = 'http://localhost:3000/'
+
+  const [errorMessage, setErrorMessage] = useState(null)
+  const [videoLibrary, setVideoLibrary] = useState([])
+  const [selectedCustomer, setSelectedCustomer] = useState(null)
+  const [selectedVideo, setSelectedVideo] = useState(null)
+  const [rentalMessage, setRentalMessage] = useState(null)
+
+  const addVideo = (video) => {
+    axios.post(BASE_URL+'videos', video)
+      .then( response => {
+        const newVideoList = [...videoLibrary, response.data]
+        setVideoLibrary(newVideoList)
+        setTimeout(() => setErrorMessage(null), 6000);
+      })
+      .catch( error => {
+        const errors = error.response.data.errors
+        setErrorMessage(errors)
+        setTimeout(() => setErrorMessage(null), 6000);
+      })
+    };
+
+    const setCustomer = (id, name) => {
+      if (selectedCustomer && id === selectedCustomer.id) {
+        setSelectedCustomer(null)
+      } else {
+        setSelectedCustomer({id: id, name: name})
+      }
+    };
+
+    const setVideo = (title) => {
+      if (selectedVideo && title === selectedVideo) {
+        setSelectedVideo(null)
+      } else {
+        setSelectedVideo(title)
+      }
+    }
+
+
+    const rentVideo = () => {
+      axios.post(`${BASE_URL}rentals/${selectedVideo}/check-out`, {customer_id: selectedCustomer.id})
+        .then(() => {
+          setRentalMessage(`Rental successfully created`);
+          setTimeout(() => setRentalMessage(''), 6000);
+          setSelectedCustomer(null);
+          setSelectedVideo(null);
+        })
+        .catch((error) => {
+          setRentalMessage(error.message);
+          setTimeout(() => setRentalMessage(''), 6000)
+        })
+    }
+
+    const parseErrorMessages = (errors) => {
+      return (
+        <ul>
+          {
+            Object.entries(errors).map(([key, value]) => (
+              <li>{value}</li>
+            )) 
+          }
+        </ul>
+      );
+    }
+
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+
+      <Router>
+        <div className='App'>
+          <header className='App-header'>
+
+          </header>
+
+          <nav>
+              <ul className='nav-links'>
+                <li>
+                  <NavLink exact activeClassName='current' to='/'>Home</NavLink>
+                </li>
+                <li>
+                  <NavLink exact activeClassName='current' to='/library'>Video List</NavLink>
+                </li>
+                <li>
+                  <NavLink exact activeClassName='current'to='/customers'>Customer List</NavLink>
+                </li>
+                <li>
+                  <NavLink exact activeClassName='current' to='/search'>Search The Movie DB</NavLink>
+                </li>
+                {selectedCustomer ? <li className='selected'>Customer: {selectedCustomer.name}</li> : ''}
+                {selectedVideo ? <li className='selected'>Video: {selectedVideo}</li> : ''}
+                {selectedCustomer && selectedVideo ? <li><Button variant="secondary" size="sm" onClick={() => {rentVideo()}}>Create Rental</Button></li> : ''}
+              </ul>
+          </nav>
+
+
+          { rentalMessage ? <Alert variant='success'> {rentalMessage} </Alert> : null}
+          { errorMessage ? <Alert variant='danger'>{parseErrorMessages(errorMessage)}</Alert> : null}
+
+          <Switch>
+              <Route path='/search'>
+                <Search setErrorMessage={setErrorMessage} addVideoCallback={addVideo} baseUrl={BASE_URL}/>
+              </Route>
+              <Route path='/customers'>
+                <CustomerList setCustomer={setCustomer} />
+              </Route>
+              <Route path='/library'>
+                <VideoLibrary baseUrl={BASE_URL} videoLibrary={videoLibrary} setVideoLibraryCallback={setVideoLibrary} setVideo={setVideo} setErrorMessage={setErrorMessage}/>
+              </Route>
+            </Switch>
+        </div>
+      </Router>
     );
   }
-}
+
+
 
 export default App;

src/components/Customer.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Customer.css'
+
+const Customer = (props) => {
+
+  return(
+    <div className="customer">
+      <button onClick={() => {props.setCustomer(props.id, props.name)}}>select</button>
+      <h3 className="customer__content">{props.name}</h3>
+    </div>
+
+  )
+};
+
+Customer.propTypes = {
+  name: PropTypes.string.isRequired,
+}
+
+export default Customer;

src/components/CustomerList.css

@@ -0,0 +1,4 @@
+.customer-list {
+  display: flex;
+  flex-wrap: wrap;
+}

src/components/CustomerList.js

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Customer from './Customer';
+import axios from 'axios';
+import './CustomerList.css'
+
+const CustomerList = (props) => {
+  const [customers, setCustomers] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  useEffect(() => {
+    axios.get('http://localhost:3000/customers?sort=name')
+      .then((response) => {
+        setCustomers(response.data)
+      })
+      .catch((error) => {
+      setErrorMessage(error.message);
+      });
+  },[]);
+
+  const customerComponents = customers.map((customer) => {
+    return(< Customer key={customer.id} name={customer.name} id={customer.id} setCustomer={props.setCustomer} />)
+  })
+
+  return(
+    <div className="customer-list">
+      {customerComponents}
+      { errorMessage ? <div><h2>{errorMessage}</h2></div> : ''}
+    </div>
+  )};
+
+CustomerList.propTypes = {
+  setCustomer: PropTypes.func.isRequired
+}
+
+export default CustomerList;

src/components/Search/NewVideoForm.css

@@ -0,0 +1,17 @@
+.add-video-form {
+  padding-bottom: 1rem;
+  overflow: visible;
+}
+
+.add-video-form label {
+  font-size: medium;
+}
+
+.add-video-dropdown {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.add-video-dropdown *{
+  font-size: small;
+}

src/components/Search/NewVideoForm.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownButton, Button } from 'react-bootstrap'
+import './NewVideoForm.css'
+
+
+const NewVideoForm = ({video, addVideoCallback}) => {
+  const [startingInventory, setStartingInventory] = useState(0)
+  const [addedToLibrary, setAddedToLibrary] = useState(false)
+
+  const onAddToLibrary = (event) => {
+    const newVideo = {...video}
+    newVideo.inventory = event.target.value
+
+    addVideoCallback(newVideo)
+    setAddedToLibrary(true)
+  }
+
+  const showDropdown = () => {
+    return (
+      <div className='add-video-form'>
+        <h4><label>Stock Video</label></h4>
+        <div className='add-video-dropdown'>
+          <DropdownButton title={startingInventory}>
+            {[...Array(21).keys()].map(i => (
+              <Dropdown.Item onSelect={(eventKey) => {setStartingInventory(eventKey)}} value={i} eventKey={i} >{i}</Dropdown.Item>
+            ))}
+          </DropdownButton> 
+
+          <Button onClick={onAddToLibrary} value={startingInventory} variant="outline-secondary">Add to Library</Button>
+        </div>
+
+      </div> 
+    )
+  }
+
+
+ return(
+    <div>
+      {addedToLibrary ? <Button variant="secondary" disabled>In Video Library</ Button> : showDropdown()}
+    </div>
+
+ )
+}
+
+NewVideoForm.propTypes = {
+  video: PropTypes.object.isRequired,
+  addVideoCallback: PropTypes.func.isRequired
+}
+
+export default NewVideoForm

src/components/Search/Search.css

@@ -0,0 +1,11 @@
+.search-results {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.search {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}