AustinCodingAcademy · dsolis421 · Mar 3, 2017 · Mar 4, 2017 · Mar 9, 2017 · Mar 9, 2017
diff --git a/.env b/.env
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+#Environment config
+.env
diff --git a/Procfile b/Procfile
@@ -1,2 +1,2 @@
-api: npm run dev
+api-dev: npm run api-dev
 client: cd client && npm start && cd ..
diff --git a/README.md b/README.md
@@ -1,3 +1,8 @@
 # Final Project Starter
 
-A starter repository for the Final Project.
+A starter repository for the Final Project.  Danny Solis - Advanced 2
+
+## Movie Memory
+
+Host on Heroku:
+https://young-temple-99942.herokuapp.com/
diff --git a/client/package.json b/client/package.json
@@ -18,5 +18,6 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "proxy": "https://young-temple-99942.herokuapp.com/"
 }
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/img/ACA_logo.png b/client/public/img/ACA_logo.png
diff --git a/client/public/index.html b/client/public/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <script src="https://use.fontawesome.com/9822dc9e23.js"></script>
+    <link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +15,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Movie Memory</title>
   </head>
   <body>
     <div id="root"></div>
@@ -27,5 +29,13 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
+    <footer>
+      <div>
+        <h3>Danny Solis - ACA Advanced 2</h3>
+        <div>
+          <img src="/img/ACA_logo.png" alt="Austin Coding Academy" />
+        </div>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/client/src/App.css b/client/src/App.css
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,13 +1,99 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
-import './App.css';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import './css/App.css';
 import SignUpSignIn from './SignUpSignIn';
 import TopNavbar from './TopNavbar';
-import Secret from './Secret';
+import GameApp from './GameApp';
+import MemoryHelp from './MemoryHelp';
 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({
+        signUpSignInError: 'Must Provide All Fields'
+      });
+    } else {
+      axios.post('/api/signup', credentials)
+        .then(resp => {
+          const { token } = resp.data;
+          localStorage.setItem('token', token);
+
+          this.setState({
+            signUpSignInError: '',
+            authenticated: token
+          });
+        });
+    }
+  }
+
+  handleSignIn(credentials) {
+    // handle the signin yo
+    const { username, password } = credentials;
+    if(!username.trim() || !password.trim()) {
+      this.setState({
+        signUpSignInError: 'Must provide all fields!'
+      });
+    } else {
+      axios.post('/api/signin', credentials)
+        .then(resp => {
+          const { token } = resp.data;
+          localStorage.setItem('token', token);
+
+          this.setState({
+            signUpSignInError: '',
+            authenticated: token
+          });
+        });
+    }
+  }
+
+  handleSignOut() {
+    localStorage.removeItem('token');
+    this.setState({
+      authenticated: false
+    });
+  }
+
+  renderSignUpSignIn() {
+    return <SignUpSignIn error={this.state.signUpSignInError}
+              onSignUp={this.handleSignUp.bind(this)}
+              onSignIn={this.handleSignIn.bind(this)} />
+  }
+
+  renderApp() {
+    return (
+      <div>
+        <Switch>
+          <Route exact path="/mygames" component={GameApp} />
+          <Route exact path="/help" component={MemoryHelp} />
+          <Route exact path="/" component={GameApp} />
+          <Route render={() => <h1>NOT FOUND!</h1>} />
+        </Switch>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <BrowserRouter>
+        <div className="App">
+          <TopNavbar showNavItems={this.state.authenticated ? true : false} onSignOut={this.handleSignOut.bind(this)} />
+          {this.state.authenticated ? this.renderApp(): this.renderSignUpSignIn()}
+        </div>
+      </BrowserRouter>
+    );
+  }
 }
 
 export default App;
diff --git a/client/src/CreateGame.js b/client/src/CreateGame.js
@@ -0,0 +1,182 @@
+import React from 'react';
+import MovieSearchBar from './MovieSearchBar';
+import MovieSearchResults from './MovieSearchResults';
+import PendingGame from './PendingGame';
+import axios from 'axios';
+
+class CreateGame extends React.Component {
+  constructor() {
+    super();
+
+    this.game = [];
+
+    this.state = {
+      pendingGame: [],
+      searchText: '',
+      nameText: '',
+      searchResult: [],
+      showResults: false,
+      searchMessage: ''
+    };
+  }
+
+  componentDidMount() {
+    if(this.props.isUpdate) {
+      axios.get(`/api/movie-games/${this.props.id}`,{
+        headers: {
+          authorization: localStorage.getItem('token')
+        }
+      })
+      .then(resp => {
+        this.game = resp.data.game;
+        this.setState({
+          pendingGame: this.game,
+          nameText: resp.data.name
+        });
+      })
+      .catch(err => console.log('get gamer error',err));
+    }
+  }
+
+  captureSearch(event) {
+    this.setState({
+      searchText: event.target.value
+    });
+  }
+
+  captureName(event) {
+    this.setState({
+      nameText: event.target.value
+    });
+  }
+
+  saveThisGame() {
+    if(this.game.length === 0) {
+      this.setState({
+        searchMessage: 'Um... you have no movies in your game!'
+      });
+      return;
+    } else if(this.state.nameText === '') {
+      this.setState({
+        searchMessage: 'This awesome game needs a name!'
+      });
+      return;
+    } else {
+      const saveGame = {name: this.state.nameText, game: this.game};
+      axios.post('/api/movie-games', saveGame, {
+        headers: {
+          authorization: localStorage.getItem('token')
+        }
+      })
+      .then(() => {
+        this.props.buildGame(this.state.nameText, this.game);
+      })
+      .then(() => {
+        console.log("saved game", this.state.nameText);
+      })
+      .catch(err => {console.log("save error",err)});
+    }
+  }
+
+  updateThisGame(id) {
+    const updateGame = {name: this.state.nameText, game: this.game};
+    axios.put(`/api/movie-games/${id}`, updateGame, {
+      headers: {
+        authorization: localStorage.getItem('token')
+      }
+    })
+    .then(() => {
+      this.props.buildGame(this.game);
+    })
+    .then(() => {
+      console.log("updated game", this.state.nameText);
+    })
+    .catch(err => {console.log("update error",err)});
+  }
+
+  goSearch(search) {
+    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f092d5754221ae7340670fea92139433&language=en-US&query=${search}&page=1&include_adult=false`)
+    .then(resp => {
+      const RESULT = resp.data.results.map(resultMovie => {
+        return (
+          {
+            tmdb_id: resultMovie.id,
+            title: resultMovie.title,
+            poster_path: 'https://image.tmdb.org/t/p/w154' + resultMovie.poster_path,
+            release_date: this.formatDate(resultMovie.release_date)
+          }
+        )
+      });
+      this.setState({
+        searchResult: RESULT,
+        showResults: true
+      });
+    })
+    .catch(err => {
+        console.log(`Search Error! ${err}`)
+    });
+  }
+
+  addMovieToGame(movie) {
+    var x = 0;
+    if(this.game.length === 0) {
+      x = 1;
+    } else {
+      x = this.game[this.game.length - 1].game_id + 1;
+    };
+    this.game.push({
+      game_id: x,
+      poster: movie,
+      showPoster: false,
+      clickable: true,
+      matched: false
+    });
+    console.log('added this game', this.game);
+    this.setState({
+      pendingGame: this.game
+    });
+  }
+
+  removeMovieFromGame(id) {
+    let updatedPendingGame = this.state.pendingGame.filter(movie => movie.game_id !== id);
+    console.log('trying to remove movie from game', id);
+    this.game = updatedPendingGame;
+    this.setState({
+      pendingGame: updatedPendingGame
+    });
+  }
+
+  formatDate(date) {
+    let arrDate = date.split('-');
+    return arrDate[1] + '/' + arrDate[2] + '/' + arrDate[0];
+  }
+
+  render() {
+    return (
+      <div id="create-movie-game">
+        <h2>Create your game...</h2>
+        <MovieSearchBar
+          captureSearch={this.captureSearch.bind(this)}
+          goSearch={this.goSearch.bind(this)}
+          value={this.state.searchText}/>
+        <div id='load-game' onClick={() => {this.props.isUpdate ? this.updateThisGame(this.props.id) :
+          this.saveThisGame()}}>Load Game</div>
+        <div className='reset-mygames' onClick={() => this.props.resetMyGames()}>Nevermind</div>
+        <input id="input-gamename" type="text"
+          placeholder="Name this game..."
+          maxLength="25"
+          value={this.state.nameText}
+          onChange={event => this.captureName(event)}></input>
+        <p>{this.state.searchMessage}</p>
+        <div id="working-search">
+          <PendingGame pendingGame={this.state.pendingGame}
+            removeGame={this.removeMovieFromGame.bind(this)}/>
+          <MovieSearchResults searchResult={this.state.searchResult}
+            addMovie={this.addMovieToGame.bind(this)}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default CreateGame;
diff --git a/client/src/GameApp.js b/client/src/GameApp.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import MyGames from './MyGames';
+import './css/GameApp.css';
+
+const GameApp = props => {
+  return (
+    <div className="App">
+      <MyGames />
+    </div>
+  )
+}
+
+export default GameApp;