Octos - VideoStore - Brandy and Jamila

package.json

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

src/App.css

@@ -1,5 +1,7 @@
 .App {
   text-align: center;
+  background-color: #00064d;
+  color: #bbbbbb;
 }
 
 .App-logo {
@@ -15,7 +17,9 @@
 }
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 2em;
+  margin-top: 1em;
+
 }
 
 .App-intro {
@@ -26,3 +30,22 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+table {
+  border: 2px solid black;
+  padding: 10px;
+  margin: 20px;
+  background-color: lightyellow;
+  width: 95%;
+  text-align: left;
+}
+
+.ul {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+  border: 1px ;
+  margin-top: 5em;
+
+
+}

src/App.js

@@ -1,19 +1,100 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import FormPage from './components/FormPage';
+import Home from './components/Home';
+import Search from './components/Search';
+import Status from './components/Status';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+
+
 
 class App extends Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+
+      movieTitle: '',
+      customerId: '',
+      customerName: '',
+
+      status: {
+        message: 'loaded the page',
+        type: 'success'
+      }
+    }
+  }
+
+  updateStatus = (message, type) => {
+    this.setState({
+      status: {
+        message: message,
+        type: type
+      }
+    })
+  }
+
+  custHandler = (customerInfo) => {
+    console.log('in custHandler');
+    console.log(customerInfo);
+    this.setState({
+      customerId: customerInfo.id,
+      customerName: customerInfo.name
+    });
+  }
+
+  movHandler = (movieTitle) => {
+    console.log('in movHandler');
+    console.log(movieTitle);
+    this.setState({
+      movieTitle: movieTitle
+    });
+  }
+
   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>
+      <section className="App">
+
+        <div>
+          <Status message={this.state.status.message} types={this.state.status.type} />
+        </div>
+
+        <header>
+          <h1 className="App-title">blockbuster</h1>
+
+          <Router>
+            <div>
+              <ul className="ul">
+                <li>
+                  <Link to="/Home">Home</Link>
+                </li>
+                <li>
+                  <Link to="/Search">Search</Link>
+                </li>
+                <li>
+                  <Link to="/MovieLibrary">Library</Link>
+                </li>
+                <li>
+                  <Link to="/Customers">Customers</Link>
+                </li>
+              </ul>
+
+              <hr/>
+
+              <Route path="/Home" component={Home} />
+
+              <Route path="/Search" component={Search} />
+
+              <Route path="/MovieLibrary" component={() => <FormPage selectedCustHandler={this.custHandler} selectedMovHandler={this.movHandler} movieTitle={this.state.movieTitle} customerId={this.state.customerId} customerName={this.state.customerName} hideMovies={false} hideCustomers={true} />}  />
+
+              <Route path="/Customers" component={() => <FormPage selectedCustHandler={this.custHandler} selectedMovHandler={this.movHandler} movieTitle={this.state.movieTitle} customerId={this.state.customerId} customerName={this.state.customerName} hideMovies={true} hideCustomers={false} />} />
+            </div>
+          </Router>
+
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+
+      </section>
     );
   }
 }

src/components/AddToLibraryForm.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+class AddToLibraryForm extends Component {
+
+  static propTypes = {
+    title: PropTypes.string.isRequired
+  }
+
+  constructor(props) {
+    super();
+
+    this.state = {
+      title: props.title,
+      overview: props.overview,
+      release_date: props.release_date,
+      image_url: props.image_url,
+    };
+
+  }
+
+  onFormSubmit = (event) => {
+    let URL = `http://localhost:3000/movies?title=${this.state.title}&overview=${this.state.overview}&release_date=${this.state.release_date}&image_url=${this.state.image_url}`
+    event.preventDefault();
+    axios.post(URL)
+    .then((response)=> {
+    })
+    .catch((error) => {
+      // this.props.updateStatusCallback(error.message, 'error');
+
+    });
+  }
+
+  render(){
+
+    return(
+      <form onSubmit={this.onFormSubmit}>
+        <input type="hidden" name='title' value={this.state.title} />
+        <input type="hidden" name='overview' value={this.state.overview} />
+        <input type="hidden" name='release_date' value={this.state.release_date} />
+        <input type="hidden" name='image_url' value={this.state.image_url} />
+
+        <button type="submit">Add {this.state.title} to Library</button>
+      </form>
+    )
+  }
+}
+
+export default AddToLibraryForm;