Permalink
Browse files

Update code with toggle movies and search

1. Moved the filter functionality into the header links.
2. Added the ability to toggle the movie list to demonstrate
   conditionally displaying content.
3. Added the search feature in forms mini-list.
  • Loading branch information...
jmeade11 committed Jan 14, 2020
1 parent 98b0c29 commit 03f62bd8f3cadf7e098d22e36cbe07650c943a10
Showing with 424 additions and 40 deletions.
  1. +104 −24 src/App.css
  2. +72 −11 src/App.js
  3. +4 −4 src/Header.js
  4. +11 −0 src/Movie.js
  5. +17 −0 src/Movies.js
  6. +215 −0 src/data.js
  7. +1 −1 src/index.js
@@ -1,38 +1,118 @@
.App {
text-align: center;
body {
background-color: gray;
padding: 1rem;
}

.App-logo {
height: 40vmin;
pointer-events: none;
header {
background-color: #222222;
color: white;
display: flex;
flex-direction: column;
margin: -1rem -1rem 1rem;
padding: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
header h1 {
margin: 0;
}

.App-header {
background-color: #282c34;
min-height: 100vh;
header ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}

header li {
cursor: pointer;
margin-right: 1rem;
}

.App-link {
color: #61dafb;
header li:hover {
color: blue;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
img {
width: 100%;
}

section {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.movie {
position: relative;
}

.rating {
align-items: center;
background-color: #222222;
border-radius: 50%;
color: #ffffff;
display: flex;
font-size: 0.9rem;
font-weight: bold;
height: 4.5rem;
justify-content: center;
padding-top: 0.25rem;
position: absolute;
right: -1rem;
text-shadow: 1px 1px 0 #000;
top: -1rem;
width: 4.5rem;
}

@media (min-width: 900px) {
header {
align-items: center;
flex-direction: row;
justify-content: space-between;
}
to {
transform: rotate(360deg);

header li + li {
margin-right: 0;
}
}

/* NEW FOR TOGGLE BUTTON & SEARCH FORM */
button {
border: 0;
background-color: transparent;
color: #ffffff;
display: block;
font-size: 1.25rem;
padding: 0.75rem 1rem;
margin: auto;
}

button:focus {
outline: none;
text-decoration: underline;
}

form {
display: flex;
margin-bottom: 1rem;
}

input {
border: 0;
flex-grow: 1;
font-size: 1rem;
padding: 0.5rem 0.75rem;
}

input + button,
button + button {
margin-left: 0.5rem;
}

button[type='submit'] {
background-color: navy;
}

button[type='reset'] {
background-color: red;
}
@@ -1,19 +1,80 @@
import React from 'react';
import logo from './logo.svg';
import { movies } from './data.js';
import './App.css';
import Header from './Header.js';
import Movies from './Movies.js';

const movie = {
title: 'Star Wars: The Rise of Skywalker',
poster: 'https://image.tmdb.org/t/p/w500/db32LaOibwEliAmSL2jjDF6oDdj.jpg',
rotten_tomatoes: 53,
audience_score: 86,
summary:
'The surviving Resistance faces the First Order once again as the journey of Rey, Finn and Poe Dameron continues. With the power and knowledge of generations behind them, the final battle begins.'
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
movies: movies,
showMovieList: true,
searchString: ''
};
}
showAllMovies = () => {
this.setState({ movies: movies, searchString: '' });
};
filterMovies = () => {
const filteredArray = this.state.movies.filter(
movie => movie.audience_score >= 60
);
this.setState({ movies: filteredArray });
};
toggleMovies = () => {
// OPTION 1:
// if (this.state.showMovieList) {
// this.setState({ showMovieList: false });
// } else {
// this.setState({ showMovieList: true });
// }
// OPTION 2:
// const value = this.state.showMovieList ? true : false;
// this.setState({ showMovieList: value });
// OPTION 3:
this.setState({ showMovieList: !this.state.showMovieList });
};
handleSubmit = event => {
event.preventDefault();
const filteredMovies = this.state.movies.filter(movie =>
movie.title.toLowerCase().includes(this.state.searchString.toLowerCase())
);
this.setState({ movies: filteredMovies });
};
handleChange = event => {
this.setState({ [event.target.id]: event.target.value });
};
render() {
return (
<>
<Header
filterMovies={this.filterMovies}
showAllMovies={this.showAllMovies}
/>
<form onSubmit={this.handleSubmit}>
<input
type="text"
id="searchString"
placeholder="search"
value={this.state.searchString}
onChange={this.handleChange}
/>
<button type="submit">search</button>
<button type="reset" onClick={this.showAllMovies}>
clear results
</button>
</form>

function App() {
return <Header />;
<button onClick={this.toggleMovies}>Toggle Movie List</button>
{this.state.showMovieList ? (
<Movies movies={this.state.movies} />
) : (
<p>Toggle the movies with the link above</p>
)}
</>
);
}
}

export default App;
@@ -3,17 +3,17 @@ import Welcome from './Welcome.js';

// Welcome({ name: 'Joe' })

function Header() {
function Header(props) {
return (
<header>
<h1>Reelz: The Movie App</h1>
<Welcome name={'Jen'} newUser={false} />
<div>
<ul>
<li>Now Playing</li>
<li>Must See Movies</li>
<li onClick={props.showAllMovies}>Now Playing</li>
<li onClick={props.filterMovies}>Must See Movies</li>
</ul>
</div>
<Welcome name={'Jen'} newUser={false} />
</header>
);
}
@@ -0,0 +1,11 @@
import React from 'react';

function Movie(props) {
return (
<div className="movie">
<img src={props.poster} alt={props.title} />
</div>
);
}

export default Movie;
@@ -0,0 +1,17 @@
import React from 'react';
import Movie from './Movie.js';

function Movies(props) {
return (
<>
<h2>Now Playing</h2>
<section>
{props.movies.map(movie => (
<Movie key={movie.id} title={movie.title} poster={movie.poster} />
))}
</section>
</>
);
}

export default Movies;
Oops, something went wrong.

0 comments on commit 03f62bd

Please sign in to comment.