-
Notifications
You must be signed in to change notification settings - Fork 21
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
base: master
Are you sure you want to change the base?
Changes from 1 commit
7e3ad2e
4defbf8
7862885
7fe9f0c
e91c616
1c4882d
564ac35
21ff695
917a89f
54b5215
40a2b89
baab483
cd699b8
d762347
19973ae
1c70628
5a15555
2fb6ad0
2a6300c
a1e85ac
4b1059d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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); | ||
} | ||
} |
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 "); | ||
|
||
fetch(constructUrl(searchedTerm)) | ||
.then(data => data.json()) | ||
.then(data => { | ||
// console.log(data.results); | ||
setMovieList([...data.results]); | ||
console.log(movieList); | ||
// console.log(searchedTerm); | ||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. if you hit inter with an empty input will broke the code.
|
||
} | ||
|
||
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; |
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; |
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; |
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"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This link should take us to the main page use |
||
{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; |
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; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React, { Component } from "react"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; |
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} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 in Movie component :
and so on ... |
||
/> | ||
); | ||
})} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
export default MovieGrid; |
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; |
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; |
There was a problem hiding this comment.
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