Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Review latest version ! #2

Open
wants to merge 21 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
version 1.0.0
evanhameed99 committed Jun 27, 2020
commit 7862885c3b06f718497faa3db29272c405a5da17
37 changes: 1 addition & 36 deletions Evan-Sara-Jalal/movie-app/src/App.css
Original file line number Diff line number Diff line change
@@ -1,38 +1,3 @@
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

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

.App-header {
background-color: #282c34;
.main-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
49 changes: 47 additions & 2 deletions Evan-Sara-Jalal/movie-app/src/App.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,54 @@
import React from "react";

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Navigation from "./components/Navigation";
import MainComponent from "./components/mainComponent";
import Footer from "./components/Footer";
import { useState } from "react";

function App() {
return <div className="App">hey</div>;
const [movieList, setMovieList] = useState([]);
const [searchedTerm, setSearchedTerm] = useState("");

const TMDB_BASE_URL = "https://api.themoviedb.org/3";
const constructUrl = query => {
return `${TMDB_BASE_URL}/search/movie?api_key=${atob(
"ZDJmYTdhZDFlMjZhZjA4NDdkMzQ5ZDdkYmQ1ZjkzZTU="
)}&query=${query}`;
};

function handleSubmit(e) {
//e.preventDefault();
// console.log(e.target[0].value);
// console.log("it is working ");

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

usually, comments should be removed before pushing the code for the review


fetch(constructUrl(searchedTerm))
.then(data => data.json())
.then(data => {
// console.log(data.results);
setMovieList([...data.results]);
console.log(movieList);
// console.log(searchedTerm);
});

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you hit inter with an empty input will broke the code.
use

.catch((err) => {
        console.log(err);
      }); 

}

function handleChange(e) {
//console.log("working");
setSearchedTerm(e.target.value);
}
return (
<>
<Navigation
handleSubmit={handleSubmit}
handleChange={handleChange}
name="Netplex "
/>
<div className="main-wrapper">
<MainComponent movies={movieList} />
</div>
<Footer />
</>
);
}

export default App;
42 changes: 42 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from "react";
import { Container, Col, Row } from "react-bootstrap";
function Footer() {
return (
<>
<footer className="bg-dark text-white p-3">
<Container>
<Row>
<Col lg={6} md={6} xs={12}>
<h2>
Grab your popcorn and enjoy your night with
<span className="text-danger"> Netplex</span>
</h2>
</Col>
<Col lg={6} md={6} xs={12}>
{" "}
<nav className="nav flex-column">
{" "}
<strong>Founders:</strong>
<a
className="nav-link text-danger"
href="https://github.com/evanhameed99"
target="_blank"
>
Evan Hameed
</a>
<a className="nav-link text-danger" href="#">
Sara
</a>
<a className="nav-link text-danger" href="#">
Jalal
</a>
</nav>
</Col>
</Row>
</Container>
</footer>
</>
);
}

export default Footer;
29 changes: 29 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/Movie.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react";
import { Card, Button, Col } from "react-bootstrap";
import ViewDetail from "./viewDetail";
function Movie(props) {
return (
<Col lg={4} md={6} xs={12}>
<Card className="m-3" style={{ width: "18rem" }}>
<Card.Img
variant="top"
src={`https://image.tmdb.org/t/p/w500/${props.image}`}
alt="not working"
/>
<Card.Body>
<Card.Title>{props.title}</Card.Title>
<ViewDetail
image={props.image}
title={props.title}
overview={props.overview}
release_date={props.release_date}
popularity={props.popularity}
/>
{/* <Button variant="primary">View detail</Button> */}
</Card.Body>
</Card>
</Col>
);
}

export default Movie;
29 changes: 29 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/Navigation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { Component } from "react";
import SearchBox from "./searchBox";
import DropDown from "./dropDown";
import { useState } from "react";
import { Navbar, Nav } from "react-bootstrap";

function Navigation(props) {
return (
<>
<Navbar bg="dark" variant="dark" expand="sm">
<Navbar.Brand href="#home" className="text-danger">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This link should take us to the main page

use to with Link, not href

{props.name}
</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Movies</Nav.Link>
<Nav.Link href="#pricing">Series</Nav.Link>
</Nav>

<DropDown />
<SearchBox
handleSubmit={props.handleSubmit}
handleChange={props.handleChange}
/>
</Navbar>
</>
);
}
export default Navigation;
58 changes: 58 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/dropDown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { useState } from "react";
import { Dropdown, Button, Form } from "react-bootstrap";

const DropDown = () => {
const [value, setValue] = useState(null);
const [genreList, setGenreList] = useState([]);
function handleChange(evt) {
setValue(evt.target.value);
}
function fetchGeneres() {
fetch(
"https://api.themoviedb.org/3/genre/movie/list?api_key=542003918769df50083a13c415bbc602&language=en-US"
)
.then((data) => data.json())
.then((genres) => {
setGenreList(genres.genres);
console.log(genreList);
});
}
return (
<React.Fragment>
<Form.Control as="select" onChange={handleChange}>
{genreList.map((genre) => {
return (
<option id={genre.id} key={genre.id}>
{genre.name}
</option>
);
})}
</Form.Control>
<Button onClick={fetchGeneres}> change genere</Button>
</React.Fragment>

// <React.Fragment>
// <Dropdown className="mr-3">
// <Dropdown.Toggle variant="danger" id="dropdown-basic">
// Geners
// </Dropdown.Toggle>

// <Dropdown.Menu>
// {/* <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
// <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
// <Dropdown.Item href="#/action-3">Something else</Dropdown.Item> */}
// {genreList.map(genre => {
// return (
// <Dropdown.Item id={genre.id} href="#/action-2" key={genre.id}>
// {genre.name}
// </Dropdown.Item>
// );
// })}
// </Dropdown.Menu>
// </Dropdown>
// <Button onClick={fetchGeneres}> change genere</Button>
// </React.Fragment>
);
};

export default DropDown;
10 changes: 10 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/mainComponent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React, { Component } from "react";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you think we need to import Component here?

import MovieGrid from "./movieGrid";
function MainComponent(props) {
return (
<>
<MovieGrid movies={props.movies} />
</>
);
}
export default MainComponent;
23 changes: 23 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/movieGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import Movie from "./Movie";
const MovieGrid = props => {
return (
<div className="container">
<div className="row mt-5">
{props.movies.map((movie, index) => {
return (
<Movie
image={movie.poster_path}
title={movie.title}
overview={movie.overview}
popularity={movie.popularity}
release_date={movie.release_date}
key={index}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for a short cut, you can pass the movie object to Movie component and in that component put what you want to you form it
ex:
{props.movies.map((movie) => (<Movie movie={movie} />))}

in Movie component :

<h1>{movie.original_title}</h1>
<p>{movie.release_date}</p>

and so on ...

/>
);
})}
</div>
</div>
);
};
export default MovieGrid;
50 changes: 50 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/searchBox.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React, { Component } from "react";
import { useState } from "react";
import { Form, FormControl, Button, Spinner } from "react-bootstrap";

function SearchBox(props) {
const [isHidden, setIsHidden] = useState(true);

function handleOnKeyDown(e) {
setIsHidden(false);
}
function handleSubmit(e) {
//e.preventDefault();
setIsHidden(!isHidden);
}

return (
<>
<Form
inline
onSubmit={(evt) => {
evt.preventDefault();
handleSubmit();
props.handleSubmit();
}}
expand="md"
>
<FormControl
onChange={props.handleChange}
type="text"
placeholder="Search"
className="mr-sm-2"
onKeyDown={handleOnKeyDown}
expand="md"
/>

<Button type="submit" variant="outline-light">
<Spinner
animation="grow"
variant="danger"
size="sm"
hidden={isHidden}
/>
Search
</Button>
</Form>
</>
);
}

export default SearchBox;
35 changes: 35 additions & 0 deletions Evan-Sara-Jalal/movie-app/src/components/viewDetail.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { useState } from "react";
import { Modal, Button, Col } from "react-bootstrap";
function ViewDetail(props) {
const [show, setShow] = useState();

const handleShow = () => setShow(true);
const handleClose = () => setShow(false);

return (
<>
<Button variant="danger" onClick={handleShow}>
View Detail
</Button>

<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{props.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
<p> {props.overview}</p>
<hr />
<p>Rlease date : {props.release_date}</p>
<p>Popularity : {props.popularity}</p>
</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
);
}

export default ViewDetail;