Ports - Faiza & Heather

package.json

@@ -3,14 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.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"
+    ]
   }
 }

public/index.html

@@ -25,7 +25,9 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
+
     <div id="root"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/App.css

@@ -1,8 +1,46 @@
+@import url('https://fonts.googleapis.com/css?family=Monoton&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
+
 .App {
   text-align: center;
 }
 
-.App-logo {
+body {
+  background: rgb(238,174,202);
+  background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+}
+
+.home-page {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-family: 'Monoton', cursive;
+  text-align: center;
+  font-size: 50px;
+  padding-top: 4.5em;
+}
+
+.sub-heading {
+  text-align: center;
+}
+
+
+.nav ul{
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  font-family: 'Press Start 2P', cursive;
+}
+
+/* .nav ul li{
+  padding-left: 8em;
+} */
+
+
+/* .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
 }
@@ -25,4 +63,4 @@
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-}
+} */

src/App.js

@@ -1,21 +1,169 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import Library from './components/Library';
+import Customers from './components/Customers';
+import Search from './components/Search';
+import Rental from './components/Rental';
 import './App.css';
+
+
+
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      allCustomers: [],
+      allMovies: [],
+      tmdbId: null,
+      selectedCustomer: null,
+      selectedMovie: null,
+      newMovie: null,
+      errorMessage: null,
+      successMessage: null,
+      newMovieAddedSuccessMessage: null,
+      newMovieNotAddedErrorMessage: null,
+    }
+  }
+
+  setAllMovies = (moviesArray) => {
+    this.setState({
+      allMovies: moviesArray,
+    });
+  }
+
+  selectMovie = (movie) => {
+    return () => {
+      this.setState({
+        selectedMovie: movie,
+        successMessage: null,
+      });
+    }
+  }
+
+  selectNewMovieFromExternalLibrary = (movie) => {
+    return () => {
+      this.setState({
+        newMovie: movie,
+      });
+    }
+  }
+
+  clearNewMovieFromExternalLibraryDetails = (movie) => {
+    this.setState({
+      newMovie: null,
+      newMovieAddedSuccessMessage: `${this.state.newMovie.title} was successfully added to the library!`
+    });
+  }
+
+  selectCustomer = (customer) => {
+    // console.log(id);
+    return () => {
+      this.setState({
+      selectedCustomer: customer,
+      successMessage: null,
+    })
+  }
+}
+
+  setAllCustomers = (customerArray) => {
+    this.setState({
+      allCustomers: customerArray,
+    })
+    console.log('hi', this.state.allCustomers);
+  }
+
+  clearRentalDetails = () => {
+    this.setState({
+      selectedCustomer: null,
+      selectedMovie: null,
+      successMessage: 'Successful rental!'
+    })
+  }
+
+
+
+
   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>
+
+
+    const {allCustomers, allMovies, selectedCustomer, selectedMovie, successMessage } = this.state;
+
+    return(
+      <div className='home-page'>
+      <Router>
+        <div className="nav">
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+
+            <li>
+              <Link to="/movies">Movies</Link>
+            </li>
+
+            <li>
+              <Link to="/customers">Customers</Link>
+            </li>
+
+            <li>
+              <Link to="/search">Search</Link>
+            </li>
+          </ul>
+
+          <hr />
+
+          <Route path="/" exact component={Title}/>
+          <Route path="/movies" 
+            render={(props) => 
+              <Library 
+                setAllMoviesCallback={this.setAllMovies}
+                movies={allMovies}
+                onSelectMovie={this.selectMovie}
+                isAuthed={true} 
+              />
+            } 
+          />
+          <Route path="/customers"
+          render={(props) => 
+            <Customers
+            setAllCustomersCallback={this.setAllCustomers}
+            customers={allCustomers}
+            selectCustomerCallback={this.selectCustomer}
+            isAuthed = {true}
+          />}/>
+
+          <Route path="/search" 
+            render={(props) => 
+              <Search 
+                onSelectMovie={this.selectNewMovieFromExternalLibrary}
+                newMovie={this.state.newMovie}
+                movies={allMovies}
+                clearNewMovieFromExternalLibraryDetailsCallback={this.clearNewMovieFromExternalLibraryDetails}
+              />
+            }
+          />
+        </div>
+        {successMessage && <div>{`${successMessage}`}</div>}
+
+          {(selectedCustomer || selectedMovie) && <div className='rentalSummary'><Rental 
+          rentalCustomer={selectedCustomer}
+          rentalMovie={selectedMovie}
+          clearRentalDetailsCallback={this.clearRentalDetails} /></div>}
+      </Router>
+    </div>
     );
   }
 }
 
+function Title() {
+  return (
+      <section>
+        <div className="title">Heaza Video Store </div>
+        <p className="sub-heading">Est. 1987</p>
+      </section>
+  );
+}
+
 export default App;

src/components/Customers.css

@@ -0,0 +1,9 @@
+.customers-table {
+  width: 50%;
+  text-align: center;
+}
+
+th, td {
+  border-bottom: 1px groove #ddd;
+  padding: 5px;
+}

src/components/Customers.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import './Customers.css';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+
+class Customers extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            displayCustomerList: true
+        }
+
+    }
+
+    componentDidMount() {
+        console.log('what is this.props', this.props);
+
+        axios.get('http://localhost:3000/customers')
+            .then((response) => {
+
+                console.log('customer response.data', response.data);
+
+                this.props.setAllCustomersCallback(response.data);
+            })
+    }
+
+    // onClickListCustomers = (props) => {
+    //     this.setState({
+    //         displayCustomerList: true
+    //     })
+    // }
+
+    render() {
+        const {displayCustomerList} = this.state;
+        const {customers} = this.props;
+
+        const mappedCustomers = customers.map((customer, i) => {
+            return (
+                <tr key={i} onClick={this.props.selectCustomerCallback(customer)} >
+                    <td>{customer.id}</td>
+                    <td>{customer.name}</td>
+                    <td>{customer.phone}</td>
+                </tr>
+            )
+        });
+        return (
+            <div>
+                {displayCustomerList && <table className="customers-table">
+                    <tr>
+                        <th>Id #</th>
+                        <th>Full Name</th>
+                        <th>Phone Number</th>
+                    </tr>
+                    {mappedCustomers}
+                </table>}
+                {/* <button type='button' onClick={this.onClickListCustomers}>List all Customers</button> */}
+            </div >
+        );
+    }
+}
+
+Customers.propTypes = {
+    setAllCustomersCallback: PropTypes.func.isRequired,
+    selectCustomerCallback: PropTypes.func.isRequired,
+    customers: PropTypes.array.isRequired
+};
+export default Customers;