Let's break this code into parts to understand it.
Here we have a functional component called MoviesGrid mainly in charge of displaying all the movie cards, however when it reached the end of the page it didn't show any more movies, so I implemented an infinite scroll to solve this problem in line 31 that returns the length of the data after reaching the bottom.
Also very important is the search route, which starts on line 19. At first I wanted to show only movies but I went a step ahead and implemented a search bar.
The page had an infinite scroll but users didn't have a search tool to give them what they wanted to see.
I used the UseEffect hook and wrote a function as an argument. This function is executed by default when the component is rendered for the first time, and then each time the component is updated. I also specified when it should be executed with the optional "search" and "page" parameters. Inside it captures the value in the search and is used to search for movies, this is an effect waiting for changes in the search and if there is one it executes the search and modifies the path.
In the lines 22 and 23 ternary operators are used to evaluate a condition, this is if "searchUrl" is empty "/discover/movie?page=" it will bring movies in trend and if you make a search then it will give you the movies that coincide with that search condition "/search/movie?query="
- React
- Javascript
- CSS
- HTML
- Git