ErnieTrevino

client/src/App.js

@@ -1,13 +1,90 @@
 import React, { Component } from 'react';
+import { BrowserRouter, Match, Miss } from 'react-router';
+import axios from 'axios';
+import './App.css';
+import SignUpSignIn from './SignUpSignIn';
+import TopNavbar from './TopNavbar';
+import Secret from './Secret';
+/* Before we started
+import React, { Component } from 'react';
 import { BrowserRouter, Route } from 'react-router-dom';
 import './App.css';
 import SignUpSignIn from './SignUpSignIn';
 import TopNavbar from './TopNavbar';
 import Secret from './Secret';
 import axios from 'axios';
+*/
+
+
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      signUpSignInError: '',
+      authenticated: localStorage.getItem('token')
+    };
+  }
+
+  handleSignUp(credentials) {
+    const { username, password, confirmPassword } = credentials;
+    if (!username.trim() || !password.trim() || password.trim() !== confirmPassword.trim()) {
+      this.setState({
+        ...this.state,
+        signUpSignInError: 'Must Provide All Fields'
+      });
+    } else {
+      axios.post('/api/signup', credentials)
+        .then(resp => {
+          const { token } = resp.data;
+          localStorage.setItem('token', token);
+
+          this.setState({
+            ...this.state,
+            signUpSignInError: '',
+            authenticated: token
+          });
+        });
+    }
+  }
+
+  handleSignIn(credentials) {
+    // Handle Sign Up
+    const {username, password} = credentials;
+  }
+
+  handleSignOut() {
+    localStorage.removeItem('token');
+    this.setState({
+      authenticated: false
+    });
+  }
+
+  renderSignUpSignIn() {
+    return <SignUpSignIn error={this.state.signUpSignInError} onSignUp={this.handleSignUp.bind(this)}/>
+  }
+
+  renderApp() {
+    return (
+      <div>
+        <Match exactly pattern="/" render={() => <h1>I am protected!</h1>} />
+        <Match exactly pattern="/secret" component={Secret} />
+        <Miss render={() => <h1>NOT FOUND!</h1>} />
+      </div>
+    );
+  }
 
+  render() {
+    return (
+      <BrowserRouter>
+        <div className="App">
+          <TopNavbar showNavItems={true} onSignOut={this.handleSignOut.bind(this)}/>
+          {this.state.authenticated ? this.renderApp() : this.renderSignUpSignIn()}
+        </div>
+      </BrowserRouter>
+    );
+  }
 }
 
 export default App;

client/src/BookList.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import Book from './Book';
+
+class BookList extends Component {
+  render() {
+    let val = <div className="BookList">No movies here!</div>;
+    if (this.props.books.length) {
+      const books = this.props.books.map((book) =>
+      <td id={book.title}>
+        <Book title={book.title}
+          addable={this.props.addable} add={this.props.add}
+          removeable={this.props.removeable} remove={this.props.remove} />
+      </td>);
+      val = <div className="BookList" width={this.props.book.length * 200}>
+        <table>
+          <tr>
+            {books}
+          </tr>
+        </table>
+      </div>;
+    }
+    return val;
+  }
+}
+
+export default BookList;

client/src/book.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+
+class Book extends Component {
+  render() {
+    let addButton = '';
+    let removeButton = '';
+    if (this.props.addable === "true") {
+      addButton = <button
+        onClick={(event) => this.props.add(event, this.props.title)}> Add Me
+      </button>;
+    }
+    else if (this.props.removeable === "true") {
+      removeButton = <button
+        onClick={(event) => this.props.remove(event, this.props.title)}> Remove Me
+      </button>;
+    }
+    return (
+      <div className="Book">
+        <img src={/>
+        <div>{this.props.title}</div>
+        <br />
+        {addButton}
+        {removeButton}
+      </div>
+    );
+  }
+}
+
+export default Book;