Space and Time - HH Haben and Hala

.env

@@ -0,0 +1 @@
+PORT=8000

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+        "ecmaVersion": 8
+  },
+  "plugins": ["jest", "react", "react-hooks"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "max-len": [1, 120, 2, { "ignoreComments": true }],
+    "no-console": 0,
+    "no-var": 1,
+    "camelcase": ["error", {"properties": "always"}],
+    "jsx-a11y/href-no-hash": [0],
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "env": {
+    "node": true,
+    "browser": true,
+    "commonjs": true,
+    "jquery": true,
+    "jest/globals": true,
+    "es6": true
+  }
+}

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.env

__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+// __mocks__/fileMock.js
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+// __mocks__/styleMock.js
+module.exports = {};

package.json

@@ -2,15 +2,75 @@
   "name": "video-store-consumer",
   "version": "0.1.1",
   "private": true,
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-transform-runtime"
+    ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.3",
+    "@babel/node": "^7.10.3",
+    "@babel/plugin-transform-runtime": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/preset-react": "^7.10.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "axios-mock-adapter": "^1.18.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jasmine": "^4.1.0",
+    "eslint-plugin-jest": "^23.8.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "jasmine": "^3.5.0",
+    "jest-cli": "^25.2.3",
+    "react": "^16.13.1",
+    "react-test-renderer": "^16.13.1"
+  },
   "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
+    "react-bootstrap": "^1.0.1",
+    "react-bootstrap-sidebar": "0.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "node ./node_modules/jest-cli/bin/jest.js --env=jsdom",
+    "xtest": "jest",
+    "test:debug": "node --inspect-brk ./node_modules/jest-cli/bin/jest.js --runInBand",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
-}
+}

src/App.css

@@ -1,28 +1,57 @@
-.App {
-  text-align: center;
+.pages {
+  margin-top: 5em;
+}
+body {
+  background-color: darkslategray;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.customer-button {
+  display: inline-block !important;
+  padding: 7px 20px !important;
+  border-radius: 25px !important;
+  text-decoration: none !important;
+  color: #fff !important;
+  background-image: -webkit-linear-gradient(
+    45deg,
+    #2f4f4f 0%,
+    #b3a39c 100%
+  ) !important;
+  background-image: linear-gradient(45deg, #2f4f4f 0%, #b3a39c 100%) !important;
+  transition: 0.4s !important;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.customer-button:hover {
+  background-image: -webkit-linear-gradient(
+    45deg,
+    #bdac7c 0%,
+    #a88d84 100%
+  ) !important;
+  background-image: linear-gradient(45deg, #bdac7c 0%, #a88d84 100%) !important;
 }
 
-.App-title {
-  font-size: 1.5em;
+.rental-info {
+  border-radius: 1.25rem;
+  width: 45%;
+  padding: 10px;
+  background-color: rgb(137, 148, 148) !important;
+  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
+
 }
 
-.App-intro {
-  font-size: large;
+.rental-info .card {
+  /* margin: 15px 0 !important ; */
+  margin: auto !important;
 }
+/*
+.rental-tag {
+margin: auto;
+} */
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.carousel {
+  margin: 10px;
 }
+
+.pages .container {
+  margin: 15px 0!important;
+}
+

src/App.js

@@ -1,21 +1,156 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
-  render() {
-    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>
+import React, { useState, useEffect } from "react";
+import { Switch, Route, Link, useHistory } from "react-router-dom";
+import Customers from "./components/Customers";
+import SearchBar from "./components/SearchBar";
+import Library from "./components/Library";
+import Search from "./components/Search";
+import Home from "./components/Home";
+import axios from "axios";
+import {
+  Navbar,
+  Nav,
+  Card,
+  Button,
+  Container,
+  Row,
+  Col,
+} from "react-bootstrap";
+import "./App.css";
+
+const API_URL_BASE = "http://localhost:3000";
+
+const App = () => {
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [currentCustomer, setCurrentCustomer] = useState(null);
+  const [currentMovies, setCurrentMovies] = useState(null);
+  const history = useHistory();
+
+  const resetState = () => {
+    setCurrentMovies(null);
+    setCurrentCustomer(null);
+  };
+
+  const setMovieState = (movie) => {
+    setCurrentMovies(movie);
+  };
+
+  const setCustomerState = (customer) => {
+    setCurrentCustomer(customer);
+  };
+
+  const addRental = () => {
+    axios
+      .post(API_URL_BASE + `/rentals/${currentMovies.title}/check-out`, {
+        customer_id: currentCustomer.id,
+        due_date: new Date(
+          Date.now() + 1000 /*sec*/ * 60 /*min*/ * 60 /*hour*/ * 24 /*day*/ * 7
+        ),
+      })
+      .then(() => {
+        resetState();
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+  };
+  const handleSearch = (query) => {
+    const path = `/search/${query}`;
+    history.push(path);
+  };
+
+  return (
+    <div className="App">
+      <div>
+        <Navbar expand="md" fixed="top" bg="dark" variant="dark">
+          <Navbar.Brand href="#home">Blockbuster 2020</Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="mr-auto">
+              <Link className="nav-link" to="/">
+                Home
+              </Link>
+              <Link className="nav-link" to="/customers">
+                Customers
+              </Link>
+              <Link className="nav-link" to="/movies">
+                Library
+              </Link>
+            </Nav>
+            <SearchBar submitSearchTermCallback={handleSearch} />
+          </Navbar.Collapse>
+        </Navbar>
+        <Container className="pages">
+          <Row>
+            <Col>
+              <Card className="rental-info">
+                <h4>Rental Information</h4>
+                <p>
+                  {currentMovies ? "Selected Movie: " : null}
+                  <strong>{currentMovies ? currentMovies.title : null}</strong>
+                </p>
+                <p>
+                  {currentCustomer ? "Selected Customer: " : null}{" "}
+                  <strong>
+                    {currentCustomer ? currentCustomer.name : null}
+                  </strong>
+                </p>
+                {currentMovies && currentCustomer ? (
+                  <Button
+                    className="customer-button"
+                    onClick={addRental}
+                    variant="primary"
+                    type="submit"
+                  >
+                    {" "}
+                    Checkout
+                  </Button>
+                ) : null}
+              </Card>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Switch>
+                <Route
+                  path="/customers"
+                  render={(props) => (
+                    <Customers
+                      {...props}
+                      API_URL_BASE={API_URL_BASE}
+                      onSelectedCustomerCallback={setCustomerState}
+                    />
+                  )}
+                ></Route>
+                <Route
+                  path="/movies"
+                  render={(props) => (
+                    <Library
+                      {...props}
+                      API_URL_BASE={API_URL_BASE}
+                      onSelectedMovieCallback={setMovieState}
+                    />
+                  )}
+                ></Route>
+
+                <Route
+                  path="/search/:query"
+                  render={(props) => (
+                    <Search {...props} API_URL_BASE={API_URL_BASE} />
+                  )}
+                ></Route>
+                <Route
+                  path="/"
+                  render={(props) => (
+                    <Home {...props} API_URL_BASE={API_URL_BASE} />
+                  )}
+                ></Route>
+              </Switch>
+            </Col>
+          </Row>
+        </Container>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default App;