Ada-C13 · corinna-fab · Jun 22, 2020 · Jun 22, 2020 · Jun 22, 2020 · Jun 22, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,28 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.2",
     "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",
     "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"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -19,6 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -26,3 +26,18 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.movie_index_container {
+  background-color: #222;
+  width: 250px;
+  border-radius: 25px;
+  color: white;
+}
+
+.mt {
+  margin-top: 20px;
+}
+
+.mb {
+  margin-bottom: 20px;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,189 @@
-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>
-      </div>
-    );
-  }
-}
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import "./App.css";
+
+import Navbar from "./components/Navbar";
+import Library from "./components/Library";
+import Search from "./components/Search";
+import Home from "./components/Home";
+import Customers from "./components/Customers";
+import RentalBox from "./components/RentalBox";
+
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+
+import ErrorCard from "./components/ErrorCard";
+import SuccessCard from "./components/SuccessCard";
+
+const LIBRARY_URL = "http://localhost:3000/library";
+const CUSTOMERS_URL = "http://localhost:3000/customers";
+const RENTALS_URL = "http://localhost:3000/";
+
+const App = () => {
+  const [library, setLibrary] = useState();
+  const [customers, setCustomers] = useState();
+  const [moviePick, setMoviePick] = useState();
+  const [customerPick, setCustomerPick] = useState();
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+
+  const setErrorCallback = (data) => {
+    setErrorMessage(data);
+  };
+
+  const setSuccessCallback = (data) => {
+    setSuccessMessage(data);
+  };
+
+  useEffect(() => {
+    axios
+      .get(LIBRARY_URL)
+      .then((response) => {
+        const apiLibrary = response.data;
+        setLibrary(apiLibrary);
+        setErrorMessage(null);
+        setSuccessMessage(null);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error);
+      });
+  }, []);
+
+  useEffect(() => {
+    axios
+      .get(CUSTOMERS_URL)
+      .then((response) => {
+        const apiCustomers = response.data;
+        setCustomers(apiCustomers);
+        setSuccessMessage(null);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error);
+      });
+  }, []);
+
+  const addMovieCallback = (newMovie) => {
+    const updatedLibrary = [newMovie, ...library];
+    setLibrary(updatedLibrary);
+  };
+
+  const onSelectCustomer = (customer_id) => {
+    axios.get(CUSTOMERS_URL).then((response) => {
+      let count = 1;
+      const customerList = response.data.map((customer) => {
+        customer["id"] = count;
+        count += 1;
+        return customer;
+      });
+
+      const selectedCustomer = customerList.find((customer) => {
+        return customer.id === customer_id;
+      });
+
+      if (selectedCustomer) {
+        setCustomerPick(selectedCustomer);
+        setSuccessMessage(null);
+        console.log(customerPick);
+      }
+    });
+  };
+  // I don't really understand this part
+  const onSelectMovie = (movie_id) => {
+    axios.get(LIBRARY_URL).then((response) => {
+      let count = 1;
+      const movieList = response.data.map((movie) => {
+        movie["id"] = count;
+        count += 1;
+        return movie;
+      });
+
+      const selectedMovie = movieList.find((movie) => {
+        return movie.id === movie_id;
+      });
+
+      if (selectedMovie) {
+        setMoviePick(selectedMovie);
+        setSuccessMessage(null);
+        console.log(moviePick);
+      }
+    });
+  };
+
+  const clearSelections = () => {
+    setMoviePick(null);
+    setCustomerPick(null);
+    setSuccessMessage(null);
+  };
+
+  const submitSelections = () => {
+    if (moviePick != null && customerPick != null) {
+      let dueDate = new Date();
+      dueDate.setDate(new Date().getDate() + 7);
+      axios
+        .post(`${RENTALS_URL}rentals/${moviePick.title}/check-out`, {
+          customer_id: customerPick.id,
+          due_date: dueDate,
+        })
+        .then((response) => {
+          setMoviePick(null);
+          setCustomerPick(null);
+          setSuccessMessage("Rental successfully created.");
+          console.log(response.message);
+        })
+        .catch((error) => {
+          setErrorMessage(error.message);
+          console.log(error);
+        });
+    }
+  };
+
+  return (
+    <Router>
+      <header>
+        <Navbar setError={setErrorCallback} setSuccess={setSuccessCallback} />
+      </header>
+
+      <main>
+        <Switch>
+          <Route exact path="/" />
+          <Route path="/home" />
+          <Route path="/">
+            {errorMessage && <ErrorCard message={errorMessage} />}
+            {successMessage && <SuccessCard message={successMessage} />}
+            <RentalBox
+              moviePick={moviePick}
+              customerPick={customerPick}
+              clearSelectionsCallback={clearSelections}
+              submitSelectionsCallback={submitSelections}
+            />
+          </Route>
+        </Switch>
+
+        <Switch>
+          <Route path="/library">
+            <Library library={library} selectMovieCallback={onSelectMovie} />
+          </Route>
+          <Route path="/search">
+            <Search
+              library={library}
+              setError={setErrorCallback}
+              addMovie={addMovieCallback}
+            />
+          </Route>
+          <Route path="/customers">
+            <Customers
+              selectCustomerCallback={onSelectCustomer}
+              customers={customers}
+            />
+          </Route>
+          <Route path="/">
+            <Home moviePick={moviePick} />
+          </Route>
+        </Switch>
+      </main>
+    </Router>
+  );
+};
 
 export default App;
diff --git a/src/components/AddToLibraryButton.jsx b/src/components/AddToLibraryButton.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const AddToLibraryButton = (props) => {
+  const addToLibrary = (event) => {
+    event.preventDefault();
+    props.addToLibraryCallback();
+  };
+
+  if (props.inLibrary) {
+    return <button className="ui disabled button">Added</button>;
+  } else {
+    return (
+      <button className="ui blue button" onClick={addToLibrary}>
+        To Library
+      </button>
+    );
+  }
+};
+
+AddToLibraryButton.propTypes = {
+  inLibrary: PropTypes.bool.isRequired,
+  addToLibraryCallback: PropTypes.func.isRequired,
+};
+
+export default AddToLibraryButton;
diff --git a/src/components/Customer.css b/src/components/Customer.css
@@ -0,0 +1,10 @@
+.user_grid {
+  border-bottom: solid black 3px;
+  width: fit-content;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding: 20px;
+  align-items: center;
+}
diff --git a/src/components/Customer.jsx b/src/components/Customer.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./Customer.css";
+
+const Customer = (props) => {
+  // return(
+  //   <div className="cards">
+  //     <div className="card">
+  //       <div>
+  //         <td>{props.name}</td>
+  //         <td>
+  //           <button class="ui blue button" onClick={() => { props.customerCallback(props.id) } }>
+  //             Select Customer
+  //           </button>
+  //         </td>
+  //       </div>
+  //     </div>
+  //   </div>
+  // )
+
+  return (
+    <div className="user_grid">
+      <h3 class="ui header"> {props.name} </h3>
+      <button
+        class="ui blue button"
+        onClick={() => {
+          props.customerCallback(props.id);
+        }}
+      >
+        Select Customer
+      </button>
+    </div>
+  );
+};
+
+Customer.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  customerCallback: PropTypes.func.isRequired,
+};
+
+export default Customer;
diff --git a/src/components/Customers.css b/src/components/Customers.css
@@ -0,0 +1,7 @@
+.customerList {
+  padding: 50px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
diff --git a/src/components/Customers.jsx b/src/components/Customers.jsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import Customer from './Customer';
+import './Customers.css'
+
+
+const Customers = (props) => {
+
+  let customerList = [];
+
+  if (props.customers) {
+    customerList = props.customers.map((customer) => {
+      return (
+        <Customer 
+        name={customer.name} 
+        customerCallback={props.selectCustomerCallback}
+        id={customer.id}
+        key={customer.id} 
+      />
+      );
+    });
+  }
+
+  return (
+    <div className="customerList">
+        {customerList}
+    </div>
+  )
+}
+
+export default Customers;