Earth - Ringo & Schanen

.gitignore

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

package.json

@@ -3,15 +3,19 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "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

@@ -1,28 +1,31 @@
-.App {
-  text-align: center;
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 55%;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  margin: 10px;
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
 }
 
-.App-title {
-  font-size: 1.5em;
+.footer-div, .footer-div-button {
+  margin-left: 50px;
+  margin-right: 50px;
 }
 
-.App-intro {
-  font-size: large;
+.footer-div-button {
+  margin-top: 15px;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.selection-header {
+  color: #2887d1;
+  padding-bottom: 25px;
 }

src/App.js

@@ -1,19 +1,17 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import Store from './components/Store';
+
+// import child components: search
+
 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>
+      <Store />
     );
   }
 }

src/components/Customer.css

@@ -0,0 +1,8 @@
+.card-subtitle {
+    line-height: 200%;
+    font-weight: bold;
+}
+
+.card-text {
+    line-height: 120%;
+}

src/components/Customer.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Customer.css';
+
+const Customer = (props) => {
+
+    const onButtonClick = () => {
+        const selected = {
+            id: props.id,
+            name: props.name
+        }
+        props.selectCustomerCallback(selected);
+    }
+
+        return (
+        <div className="card">
+            <div className="card-body">
+                <h4 className="card-title">{props.name}</h4>
+                <h5 className="card-subtitle">Videos currently rented: {props.videosCheckedOutCount}</h5>
+                <p className="card-text">Customer since {props.registeredAt.slice(0, 4)}<br />
+                Account Credit: {props.accountCredit}<br/>
+                {props.phone}<br/>
+                {props.address}<br/>
+                {props.city}, {props.state} {props.postalCode}</p>
+                {props.isSelected? <button className="btn btn-primary selected" onClick={onButtonClick}>SELECTED</button> : <button className="btn btn-primary select" onClick={onButtonClick}>SELECT</button> }
+            </div>
+        </div>
+    )
+}
+
+Customer.propTypes = {
+    id: PropTypes.number,
+    name: PropTypes.string,
+    registeredAt: PropTypes.string,
+    address: PropTypes.string,
+    city: PropTypes.string,
+    state: PropTypes.string,
+    postalCode: PropTypes.string,
+    phone: PropTypes.string,
+    accountCredit: PropTypes.number,
+    videosCheckedOutCount: PropTypes.number,
+    isSelected: PropTypes.bool,
+    selectCustomerCallback: PropTypes.func
+}
+
+export default Customer;

src/components/CustomerList.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Customer from './Customer';
+import axios from 'axios';
+
+const CustomerList = (props) => {
+    const [customers, setCustomers] = useState([]);
+    const [error, setError] = useState('');
+
+
+    useEffect(() => {
+        axios.get(`http://localhost:3000/customers/`)
+            .then((response) => {
+                const allCustomers = [];
+                response.data.forEach((customer) => {
+                    allCustomers.push(customer);
+                });
+                setCustomers(allCustomers);
+            })
+            .catch((error) => {
+                setError(`Error: ${error.response.statusText}`);
+            })
+    }, []);
+
+    const formatCustomer = customer => {
+        return <Customer 
+            key={customer.id}
+            id={customer.id}
+            name={customer.name}
+            registeredAt={customer.registered_at}
+            address={customer.address}
+            city={customer.city}
+            state={customer.state}
+            postalCode={customer.postal_code}
+            phone={customer.phone}
+            accountCredit={customer.account_credit}
+            videosCheckedOutCount={customer.videos_checked_out_count}
+            selectCustomerCallback={props.selectCustomerCallback}
+            isSelected={props.selectedCustomer? customer.id === props.selectedCustomer.id : null}
+        />
+    }
+
+    return (
+        <div>
+            { customers.map(formatCustomer) }
+            { error ? error : '' }
+        </div>
+    );
+}
+
+// PROPS? - should App hold the URL for the api call and pass it down to CustomerList?
+CustomerList.propTypes = {
+    selectCustomerCallback: PropTypes.func,
+    selectedCustomer: PropTypes.object
+};
+
+
+export default CustomerList;

src/components/Rental.js

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import scarecrow from '../scarecrow.jpg'
+import axios from 'axios';
+
+const Rental = (props) => {
+
+    const [error, setError] = useState('');
+    const [alert, setAlert] = useState('');
+
+    const returnDate = () => {
+        const dueDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+
+        const year = dueDate.getFullYear();
+        const month = dueDate.getMonth() + 1;
+        const day = dueDate.getDate();
+
+
+
+        return (
+            `${year}-${month}-${day}`
+        )
+    }
+
+    const rentVideo = () => {
+        if (props.video !== null && props.customer !== null) {
+
+            const date = returnDate();
+
+            axios.post(`http://localhost:3000/rentals/${props.video.title}/check-out?customer_id=${props.customer.id}&due_date=${date}`)
+            .then((response) => {
+                setAlert(`You have successfully rented ${props.video.title}!`);
+                setError('');
+
+            props.setSelectedCustomer(null);
+            props.setSelectedVideo(null);
+            })
+            .catch((error) => {
+                setError('Could not create a rental. Not enough inventory.');
+                setAlert('');
+            })
+        }
+    }
+
+    const returnVideo = () => {
+        if (props.video !== null && props.customer !== null) {
+        axios.post(`http://localhost:3000/rentals/${props.video.title}/return?customer_id=${props.customer.id}`)
+            .then((response) => {
+                setAlert(`Thank you for returning ${props.video.title}!`);
+                setError('');
+            // clear sessionContext after rental made
+            props.setSelectedCustomer(null);
+            props.setSelectedVideo(null);
+            })
+            .catch((error) => {
+                setError('Something went wrong, could not return video!');
+                setAlert('');
+            })
+        }
+    }
+
+    const rentalButtons = () => {
+        if (props.video !== null && props.customer !== null) {
+            return (
+                <div>
+                    <button className="btn btn-primary mr-1" onClick={() => rentVideo()} >
+                        Rent Movie
+                    </button>
+                    <button className="btn btn-primary mr-1" onClick={() => returnVideo()} >
+                        Return Movie
+                    </button>
+                </div>
+            )
+        }
+    }
+
+    return (
+        <div>
+            { error ? <div className="alert alert-warning">{error}</div> : '' }
+            { alert ? <div className="alert alert-success">{alert}</div> : '' }
+
+            <img className="center" src={scarecrow} alt="Scarecrowz Video" />;
+
+            <h3 className="selection-header text-center">Select a Video and Customer to Check-out or Check-in a VIDEO!</h3>
+            <div>
+                <div className="footer">
+                    <div className="footer-div">
+                        <p>Selected Video: <strong>{props.video === null ? 'no video selected' : props.video.title}</strong></p>
+                        <p>Selected Customer: <strong>{props.customer === null ? 'no customer selected' : props.customer.name}</strong></p>
+                    </div>
+                    <div className="footer-div-button">
+                        {rentalButtons()}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+Rental.propTypes = {
+    video: PropTypes.object,
+    customer: PropTypes.object,
+    setSelectedCustomer: PropTypes.func,
+    setSelectedVideo: PropTypes.func
+}
+
+export default Rental;

src/components/SearchForm.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const SearchForm = ({ onSubmitCallback }) => {
+    const [titleField, setTitleField] = useState('');
+
+    const onInputChange = (event) => {
+        setTitleField(event.target.value);
+    };
+
+    const onSubmitSearch = (event) => {
+        event.preventDefault();
+        if (titleField.length > 0) {
+            onSubmitCallback(titleField);
+        }
+    };
+
+    return (
+        <div className="search-form">
+            <h3>Need to add a movie to your library?</h3>
+            <form className="search-form__form" onSubmit={ onSubmitSearch } >
+                <label>Title:</label>
+                <input type="text" value={titleField} onChange={ onInputChange } />
+                <input type="submit" value="Search" className="btn btn-primary"/>
+            </form>
+        </div>
+    );
+};
+
+SearchForm.propTypes = {
+    onSubmitCallback: PropTypes.func.isRequired,
+}
+
+export default SearchForm;