Earth - Denise & Jasmine Lopez - Video Store Consumer

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json

package.json

@@ -3,15 +3,21 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/system": "^4.11.2",
+    "axios": "^0.21.1",
+    "humps": "^2.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.1",
+    "react-select": "^3.2.0"
   },
   "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",

public/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@800&display=swap" rel="stylesheet"> 
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

src/App.css

@@ -1,4 +1,78 @@
+html {
+  box-sizing: border-box;
+  /* overflow: hidden; */
+  height: 100%;
+  background-color: #FFC40A;
+
+}
+#root {
+  height: 100%;
+
+}
+
+body {
+  height: 100%;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
 .App {
+  /* width: 90%; */
+  margin: 0 auto;
+  /* padding: 20px; */
+  display: grid;
+  grid-template-columns: 1fr [main-start] 5fr [main-end] 1fr;
+  grid-template-rows: auto;
+  font-family: "Roboto", sans-serif;
+  /* background-image: url("./homepage-hero3.png") ;
+  background-size: cover;
+  background-repeat: repeat;
+  height: 100%; */
+
+}
+
+.main-content {
+  grid-column: main;
+
+}
+
+/* .hero-image {
+  background-image: url("./homepage-hero.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 100%;
+  width: 100%;
+  grid-column: 1 / -1;
+
+} */
+
+.display-message {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 1fr [main-start] 5fr [main-end] 1fr;
+  background-color: white;
+  padding: 2rem 0;
+
+}
+
+.display-message > h1 {
+  grid-column: main;
+  text-align: center;
+  color: #679BF1;
+}
+/* h1 {
+  margin-bottom: 20px;
+}
+
+p {
+  margin-bottom: 15px;
+} */
+
+/* .App {
   text-align: center;
 }
 
@@ -25,4 +99,4 @@
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-}
+} */

src/App.js

@@ -1,21 +1,38 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
+import Navigation from './components/Navigation';
+import Main from './components/Main';
+import Checkout from './components/Checkout'
+// import Search from './components/Search';
 import './App.css';
 
-class App extends Component {
-  render() {
+const App = () => {
+    const [video, setVideo] = useState(null);
+    const [customer, setCustomer] = useState(null);
+    const [displayMessage, setDisplayMessage] = useState('');
+
+    if (displayMessage) {
+      setTimeout(() => {
+        setDisplayMessage('');
+      }, 3000)
+    }
+
+
     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>
+
+        <Navigation />
+        {displayMessage && <div className="display-message">
+          <h1>{displayMessage}</h1>
+        </div>}
+        {(video || customer) && <Checkout video={video} customer={customer} videoCallback={setVideo} customerCallback={setCustomer} setDisplayMessage={setDisplayMessage} /> }
+        <div className="main-content">
+          <Main videoCallback={setVideo} customerCallback={setCustomer} className="main" setDisplayMessage={setDisplayMessage} video={video} customer={customer} />
+        </div>
+        {/* <div className="hero-image"><img src="./homepage-hero.png" alt="" /></div> */}
+
+
       </div>
     );
-  }
-}
+};
 
 export default App;

src/components/AddVideo.css

@@ -0,0 +1,14 @@
+.add-to-video__button {
+  font-size: 1rem;
+  padding: 0.5em 0.75em;
+  border-radius: 5px;
+  border: none;
+  background-color: #2F2E2C;
+  color: white;
+  transition: 0.1s ease-out;
+}
+
+.add-to-video__button:hover {
+  background-color: #2F2E2C;
+  color: white;
+}

src/components/AddVideo.js

@@ -0,0 +1,48 @@
+import React, {useState, useEffect} from 'react';
+import './AddVideo.css';
+// import humps from 'humps';
+// import PropTypes from 'prop-types';
+const axios = require('axios')
+
+
+
+const BASE_URL = 'http://localhost:3000/add';
+
+
+const AddVideo = (props) => {
+    const [AddedVideo, setAddedVideo] = useState({});
+
+    const onSubmitAdd = (event) => {
+        event.preventDefault();
+        setAddedVideo(props.video);
+    }
+
+    useEffect(() => {
+        if (AddedVideo.title === undefined) {
+            return;
+        }
+        axios.post(BASE_URL, AddedVideo)
+
+            .then((response) => {
+                if (response.data) {
+                    props.setDisplayMessage(AddedVideo.title + ' added! Cool!');
+                    console.log(response.data);
+                } else {
+                    props.setDisplayMessage(AddedVideo.title + ' has already been added');
+                }
+            })
+            .catch((error) => {
+                console.log(error.response.data.errors);
+                props.setDisplayMessage('Unable to add this title to the library.');
+            });
+
+        setAddedVideo('');
+    },[AddedVideo]);
+
+    return <button className="add-to-video__button" onClick = {onSubmitAdd}>
+        Add to Library
+    </button>
+} ;
+
+
+export default AddVideo

src/components/Checkout.css

@@ -0,0 +1,55 @@
+.checkout__content {
+  display: grid;
+  grid-template-columns: 1fr 5fr 1fr;
+
+  /* margin: 2rem 0; */
+  padding: 2rem;
+  grid-column: 1 / -1;
+  background-color: white;
+  margin-bottom: 2rem;
+
+}
+
+.checkout > h3:nth-child(2)::before {
+  content: '   &  ' ;
+  white-space: pre;
+
+}
+
+.checkout {
+  grid-column: 2;
+  /* margin: 0 auto; */
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.checkout > * {
+  align-self: center;
+}
+
+.checkout em {
+  color: #2F2E2C;
+  font-style: normal;
+  font-size: 1.5rem;
+  font-weight: 800;
+}
+
+.checkout__btn {
+  font-size: 1rem;
+  padding: 0.5em 0.75em;
+  border-radius: 5px;
+  border: none;
+  background-color: #2F2E2C;
+  color: white;
+  transition: 0.1s ease-out;
+  margin-left: 1rem;
+}
+
+.checkout__btn:hover {
+  background-color: #2F2E2C;
+  color: white;
+}
+
+.checkout__text {
+  font-weight: 400;
+}

src/components/Checkout.js

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import React from 'react';
+import './Checkout.css'
+import humps from 'humps';
+
+const BASE_API_URL = 'http://localhost:3000';
+
+const Checkout = (props) => {
+  const {video, customer} = props
+
+  const handleClick = () => {
+    const date = new Date();
+    date.setDate(date.getDate() + 7);
+
+    axios.post(
+      `${BASE_API_URL}/rentals/${video.title}/check-out`, 
+      humps.decamelizeKeys({
+        customerId: customer.id,
+        dueDate: date
+      }))
+    .then( (response) => {
+      props.setDisplayMessage(` successfully checked out ${video.title} to ${customer.name}`)
+      props.videoCallback(null);
+      props.customerCallback(null);
+    })
+    .catch( (error) => {
+      props.setDisplayMessage(error.message);
+    })
+  }
+  return (
+    <div className="checkout__content">
+      <div className="checkout">
+        {video && <h3 className="checkout__text">Video Selected: <em>{video.title}</em></h3>}
+        {customer && <h3 className="checkout__text">Customer Selected: <em>{customer.name}</em></h3>}
+        {(video && customer) && <button className="checkout__btn" onClick={handleClick}>CHECKOUT</button>}  
+        {/* {(video || customer) && <button className="checkout__btn" onClick={handleClick}>CANCEL</button>}   */}
+      </div>
+    </div>
+  )
+}
+
+export default Checkout;
+
+// If there is a video saved to state
+// Show text or something "You selected video: [video]"
+// some sort of indicator to show that a video has been selected
+// if customer is aved to state
+// indicate that somehow
+
+// if both video and customer are saved to state, show a button to trigger checkout (post request to rails)

src/components/Customer.css

@@ -0,0 +1,30 @@
+/* customer__content
+customer__name
+customer__select */
+
+.customer__container {
+  margin: 2rem;
+  border-radius: 5px;
+  background-color:white;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
+  transition: 0.1s ease-out;
+  padding: 2rem;
+}
+
+.customer__content {
+  line-height: 1.3em;
+}
+
+hr {
+  margin: 1rem 0;
+  color: lightgray;
+}
+
+.customer__container:hover {
+  transform: translateY(10px);
+}
+
+.active{
+  opacity: 0.5; /* Real browsers */
+  filter: alpha(opacity = 50); /* MSIE */
+}