Kate & Leti - Ampers - VideoStoreConsumer

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
@@ -13,4 +15,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -2,27 +2,29 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.nav ul {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.nav ul li {
+  list-style: none;
+  margin-right: 2em;
+  color: #00887A;
 }
 
-.App-title {
-  font-size: 1.5em;
+*:focus {
+  outline:none;
 }
 
-.App-intro {
-  font-size: large;
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0 5%;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+h1 {
+  font-size: 3.5em;
 }

src/App.js

@@ -1,19 +1,172 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter as Router, Route, Link, Switch, Redirect } from "react-router-dom";
+import CustomerCollection from './components/CustomerCollection.js'
+import LibraryCollection from './components/LibraryCollection.js'
+import SearchForm from './components/SearchForm.js'
+import SearchResults from './components/SearchResults.js'
+import SelectionBar from './components/SelectionBar.js'
+import CheckOutModal from './components/CheckOutModal.js'
+import AddtoLibModal from './components/AddtoLibModal.js'
 
 class App extends Component {
+
+  constructor() {
+    super();
+    this.state = {
+      selectedCustomerName: 'Please Select a Customer',
+      selectedCustomerId: 0,
+      selectedMovieName: 'Please Select a Movie',
+      selectedMovieId: 0,
+      searchQuery: '',
+      checkoutIsOpen: false,
+      showSearch: false,
+      addLibIsOpen: false
+    };
+  }
+
+  selectionCustomerBarComponent = (customerName, customerId) => {
+    // preventDefault();
+    const updateState = {};
+
+    if(customerName === this.state.selectedCustomerName && this.state.selectedCustomerName !== 'Please Select a Customer'){
+      updateState["selectedCustomerName"] = 'Please Select a Customer';
+      updateState["selectedCustomerId"] = 0;
+      this.setState(updateState);
+    }  else {
+      updateState["selectedCustomerName"] = customerName;
+      updateState["selectedCustomerId"] = customerId;
+      this.setState(updateState);
+    }
+ }
+
+
+selectionMovieBarComponent= (movieInfo) => {
+  const updateState = {};
+
+  if(movieInfo.title === this.state.selectedMovieName && this.state.selectedMovieName !== 'Please Select a Movie'){
+    updateState["selectedMovieName"] = 'Please Select a Movie';
+    updateState["selectedMovieId"] = 0;
+    this.setState(updateState);
+  }  else {
+    updateState["selectedMovieName"] = movieInfo.title;
+    updateState["selectedMovieId"] = movieInfo.id;
+    this.setState(updateState);
+  }
+}
+
+clearState =()=>{
+    this.setState({
+      selectedCustomerName: 'Please Select a Customer',
+      selectedCustomerId: 0,
+      selectedMovieName: 'Please Select a Movie',
+      selectedMovieId: 0,
+    });
+}
+
+  searchQuery = (query) => {
+    this.setState({
+      searchQuery: query,
+    });
+    this.toggleSearchresults("show");
+  }
+
+  renderSearchResults() {
+    if(this.state.showSearch) {
+      return (
+        <Redirect to='/search'/>
+      );
+    }
+  }
+
+
+  toggleCheckoutModal = () => {
+    this.setState({
+      checkoutIsOpen: !this.state.checkoutIsOpen
+    });
+  }
+
+  toggleLibModal= () => {
+    this.setState({
+      addLibIsOpen: !this.state.addLibIsOpen
+    });
+  }
+
+
+  toggleSearchresults = (bool) => {
+    if(bool === "show") {
+      this.setState({
+        // showSearch: !this.state.showSearch
+        showSearch: bool
+      });
+    } else {
+      this.setState({
+        // showSearch: !this.state.showSearch
+        showSearch: false
+      });
+    }
+  }
+
+
+
   render() {
+    const Library = () => (
+      <LibraryCollection selectionBarComponentCallBack={this.selectionMovieBarComponent}/>
+    )
+
+    const Customers = () => (
+      <CustomerCollection selectionBarComponentCallBack={this.selectionCustomerBarComponent}
+      />
+    )
+
+    const Search = () => (
+      <SearchResults query={this.state.searchQuery} toggleLibModalCallBack = {this.toggleLibModal} />
+    )
+
+
     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>
+      <Router>
+        <div className="App">
+          <header className="header">
+            <h1>THE Video Store</h1>
+            <nav className="nav">
+              <ul>
+                <li>
+                  <SearchForm searchQueryCallback={this.searchQuery} />
+                </li>
+                <li>
+                  <Link to="/library" onClick={this.toggleSearchresults}>Library</Link>
+                </li>
+                <li>
+                  <Link to="/customers" onClick={this.toggleSearchresults}>Customers</Link>
+                </li>
+                <li>{this.renderSearchResults()}</li>
+              </ul>
+            </nav>
+          </header>
+
+          <SelectionBar
+          customerName={this.state.selectedCustomerName} movieName={this.state.selectedMovieName}
+          customerId={this.state.selectedCustomerId}
+          movieId={this.state.selectedMovieId}
+          clearStateCallBack = {this.clearState}
+          toggleCheckoutModalCallBack = {this.toggleCheckoutModal}
+          />
+
+          <CheckOutModal show={this.state.checkoutIsOpen}
+          onClose={this.toggleCheckoutModal} />
+
+          <AddtoLibModal show={this.state.addLibIsOpen}
+          onClose={this.toggleLibModal} />
+
+          <Switch>
+            <Route path="/search" component={Search} />
+            <Route path="/library" component={Library} />
+            <Route path="/customers" component={Customers} />
+          </Switch>
+
+        </div>
+      </Router>
     );
   }
 }