-
Notifications
You must be signed in to change notification settings - Fork 84
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
feat: Changes #1
base: main
Are you sure you want to change the base?
Conversation
TLDR: Add movie info from API Create elements with React and make GET request to IMDB API. Returns movies now showing in theaters.
tldr: add more info from additional api request Added button at bottom of page that when pressed loads in 20 more movies. This is done by updating the page in fetch to api. it is able to load in as many times as is pressed.
src/MovieList.css
Outdated
padding: 20px; | ||
width: 75%; | ||
margin: 0 auto; | ||
|
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.
minor: use format to eliminate empty lines.
src/MovieList.jsx
Outdated
/> | ||
)) | ||
) : ( | ||
<p>Loading movies...</p> //error handle if data length == 0 |
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.
Can probably say "No Movies found instead"
src/MovieList.jsx
Outdated
}; | ||
|
||
const resetPage = () => { | ||
console.log("resetPage"); |
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.
remove console
src/MovieList.jsx
Outdated
}; | ||
useEffect(() => { | ||
fetchData(); | ||
}, [page]); //adds to update for every new page |
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.
Can probably remove page from this dependency array, as we are calling API once page is changed.
src/MovieList.jsx
Outdated
`https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${page}`, | ||
options | ||
); //fills link | ||
const Data = await resp.json(); |
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.
name it data or moviesList instead?
|
||
const searchMovies = () => { | ||
updatePage(1); | ||
setData([]); |
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.
Might not need this as data is being set in the fetchData function anyway
things I added- 1. Creating modal element that covers screen 2. input element from API 3. create on click events for modal
Made the following changes:
code and image of output-