No more duplicates! The Ultimate Refresh. (#15)

* fixed: doesn't delete movie on Cancel button from edit

* potential fix

* cleaning code, making editmovie setstate

* fixed filter of genres so remove works

* removing console.logs, cleaning lines

* Scrolly polly olly! scroll works for roles what a party

* THE FIX

:

* no longer need scroll package. solution from CSS

* changing color of genres

package-lock.json

@@ -1456,9 +1456,9 @@
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
     },
     "@types/react": {
-      "version": "16.8.17",
+      "version": "16.8.23",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.17.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz",
-      "integrity": "sha512-pln3mgc6VfkNg92WXODul/ONo140huK9OMsx62GlBlZ2lvjNK86PQJhYMPLO1i66aF5O9OPyZefogvNltBIszA==",
+      "integrity": "sha512-abkEOIeljniUN9qB5onp++g0EY38h7atnDHxwKUFz1r3VH1+yG1OKi2sNPTyObL40goBmfKFpdii2lEzwLX1cA==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -1472,6 +1472,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-scroll": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/react-scroll/-/react-scroll-1.5.4.tgz",
+      "integrity": "sha512-EYJt9wDvyrcDZpZqI19eb2UlAzCoXBeoFu3yMkrBDC8zkwFXOhb8lv3tD9V9UAqptora096M7qWYktsWq1guEg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.1.tgz",

src/App.css

@@ -44,6 +44,11 @@
   border: orange;
 }
 
+.roleScroll {
+  height: 160px;
+  overflow-y: scroll;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/App.tsx

@@ -35,6 +35,7 @@ import MovieCard from './components/movieComp';
 import { Movie, Actor, Genre } from './models/models';
 import * as Yup from 'yup';
 import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+
 const heliumApi = 'https://heliumint.azurewebsites.net/api/';
 const cors = 'https://cors-anywhere.herokuapp.com/';
 
@@ -49,6 +50,13 @@ const styles = createStyles({
     margin: 0,
     backgroundColor: "#556cd6",
   },
+  drawer: {
+    width: 240,
+    flexShrink: 0,
+  },
+  newChip: {
+    backgroundColor: "#FFC730"
+  },
 })
 
 interface IState {
@@ -108,27 +116,18 @@ class App extends React.Component<AllProps> {
     // grab genre data from api
     axios.get(cors + heliumApi + 'genres').then(response => {
       const genreData: Genre[] = response.data
-      this.setState({
+      this.setState({genres: genreData})
-        genres: genreData
     })
-    })
-
     // grab movie data from api
     axios.get(cors + heliumApi + 'movies').then(response => {
       const moviesData: Movie[] = response.data
-      this.setState({
+      this.setState({movies: moviesData})
-        movies: moviesData
     })
-    })
-
     // grab actor data from api
     axios.get(cors + heliumApi + 'actors').then(response => {
       const actorsData: Actor[] = response.data
-      this.setState({
+      this.setState({actors: actorsData})
-        actors: actorsData
     })
-    })
-
     .catch(error => {
       console.log(error);
     });
@@ -190,9 +189,6 @@ class App extends React.Component<AllProps> {
       genres: movie.genres,
       movieId: movie.movieId,
     }})
- 
-   this.setState({movies: this.state.movies.filter(item => item !== movie)})
-
   }
 
   deleteMultipleMovies = () => {
@@ -213,43 +209,43 @@ class App extends React.Component<AllProps> {
   };
 
   checkBoxToggle = (id: string, checkBox: boolean) => {
-    console.log(id);
     // remove card from array of deleted movies
     if(checkBox === true) {
       this.state.deleteMovies.pop();
-      console.log(this.state.deleteMovies);
     }
-
     // add card to array of deleted movies
     if(checkBox === false) {
       this.state.deleteMovies.push(id);
-      console.log(this.state.deleteMovies);
     }
   }
 
   // handles edit on exisiting movie's form
   handleEdit = (subMovie: Movie) => {
-    let movies = this.state.movies;
+    let movies = this.state.movies.slice();
-    this.setState({snackBarMessage: "Edited " + this.state.formsMovie.title + " to " + subMovie.title, openForms: false, postSuccessAlert: true});
+    this.setState({snackBarMessage: "Edited " + subMovie.title, openForms: false, postSuccessAlert: true});
     
-    movies.push(subMovie);
+    for (let i = 0; i < movies.length; i++) {
+      if (movies[i].movieId === subMovie.movieId) {
+        movies[i].year = subMovie.year;
+        movies[i].title = subMovie.title;
+        movies[i].runtime = subMovie.runtime;
+        movies[i].genres = subMovie.genres;
+        movies[i].roles = subMovie.roles;
+      }
+    }
     this.setState({movies})
   }
 
   // on forms submit button clicked
   submitMovie = (values: Movie, action:FormikActions<Movie>) => {
     let movies = this.state.movies;
-    let formsMovie = this.state.formsMovie;
-    let subMovie: Movie;      
     let allGenres = [];
     let currentGenres = this.state.formsMovie.genres;
     let newGenres = this.state.movieGenres;
 
     allGenres = currentGenres.concat(newGenres);
-    console.log(allGenres);    
-    console.log("current " + currentGenres);
 
-    subMovie = {
+    let subMovie: Movie = {
       title: values.title,
       year: values.year,
       runtime: values.runtime,
@@ -265,13 +261,9 @@ class App extends React.Component<AllProps> {
     // if editing a movie, perform axios PUT
     if(this.state.formsTitle === "Edit Movie")
     {
-      axios.put(cors + heliumApi + 'movies/' + values.id, subMovie)
+      axios.put(cors + heliumApi + 'movies/' + values.movieId, subMovie)
       .then(action => {this.handleEdit(subMovie)})
       .catch(error => {console.log(error.response)})
-     // this.setState({movies: this.state.movies.filter(items => items.movieId !== this.state.formsMovie.movieId )})
-     // this.setState({movies: this.state.movies.filter(items => items !== this.state.formsMovie )})
-      console.log(values);
-      this.setState({movies: this.state.movies.filter(item => item !== values)})
 
     }
 
@@ -289,28 +281,16 @@ class App extends React.Component<AllProps> {
   handleSearchFilter = (movie: Movie) => {
     let input = this.state.textSearch;
 
-    if(this.state.textSearch === '') {
+    if(this.state.textSearch === '') {return true}
-      return true;
+    if(movie.title.toLowerCase().includes(input)){return movie} 
-    }
-    if(movie.title.toLowerCase().includes(input)){
-      return movie;
-    } 
   }
 
   handleCurrentGenreRemove = (selected: string) => {
-    console.log(selected);
+    this.setState({movieGenres: this.state.movieGenres.filter(genre => genre !== selected)})
-
+    this.state.formsMovie.genres.pop()
-    // remove selected genre from formsmovie genre list
-    this.setState({formsMovie: {
-      genres: this.state.formsMovie.genres.filter(genres => genres !== selected),
-    }});
-  
-    console.log(this.state.formsMovie.genres)
   }
 
   handleNewGenreRemove = (selected: string) => {    
-    console.log(selected);
-    
     // remove selected genre from moviegenre list
     this.setState({movieGenres: this.state.movieGenres.filter(genre => genre !== selected)})
     console.log(this.state.formsMovie.genres)
@@ -323,7 +303,6 @@ class App extends React.Component<AllProps> {
     // add new genre to list
     newMovies.push(selectedGenre);
     this.setState(newMovies);
-    console.log("movie genres" + this.state.movieGenres);
   }
 
   render() { 
@@ -410,6 +389,7 @@ class App extends React.Component<AllProps> {
                       </Grid>
                       <Grid item xs={12}>
                         <InputLabel>Roles</InputLabel>
+                        <div className="roleScroll">
                           {this.state.formsMovie.roles.map((item:any) => (
                             <List>
                               <ListItem>
@@ -424,6 +404,8 @@ class App extends React.Component<AllProps> {
                               </ListItem>
                             </List>
                             ))}
+                         
+                        </div>                    
                       </Grid>
                       <Grid item xs={12}>
                         <div>
@@ -434,7 +416,7 @@ class App extends React.Component<AllProps> {
                           ))}      
                           <br />       
                           {this.state.movieGenres.map(genre => (
-                            <Chip color="secondary" label={genre} onDelete={() => {this.handleNewGenreRemove(genre)}} />
+                            <Chip className={classes.newChip} label={genre} onDelete={() => {this.handleNewGenreRemove(genre)}} />
                           ))}
                         </div>
                       </Grid>

src/components/movieComp.tsx

@@ -68,7 +68,6 @@ class movieComp extends React.Component<IProps> {
 
     editMovie = (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
         this.props.editMovie(this.state.movie);
-        console.log(this.state.movie)
     }
 
     toggleCheck = (event: React.ChangeEvent<HTMLInputElement>) => {