doc: create Movies function

2022-09-03 12:36:40 -07:00
parent 0f6d36f777
commit 1afd40fae5
1 changed files with 47 additions and 0 deletions
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Box, CircularProgress, useMediaQuery, Typography } from '@mui/material';
+import { useSelector } from 'react-redux';
+
+import { MovieList, Pagination, FeaturedMovie } from '../index';
+import { useGetMoviesQuery } from '../../services/TMDB';
+
+function Movies() {
+    const [page, setPage] = useState(1);
+    const { genreIdOrCategoryName, searchQuery } = useSelector((state) => state.currentGenreOrCategory);
+    const { data, error, isFetching } = useGetMoviesQuery({ genreIdOrCategoryName, page, searchQuery });
+
+    const lg = useMediaQuery((theme) => theme.breakpoints.only('lg'));
+    const numberOfMovies = lg ? 17 : 19;
+
+    if (isFetching) {
+        return (
+            <Box display="flex" justifyContent="center">
+                <CircularProgress size="4rem" />
+            </Box>
+        );
+    }
+
+    if (!data.results.length) {
+        return (
+            <Box display="flex" justifyContent="center" alignItems="center" mt="20px">
+                <Typography variant="h4">
+                    No movies that match that name.
+                    <br />
+                    Please searh for something else.
+                </Typography>
+            </Box>
+        );
+    }
+
+    if (error) return 'An error has occured.';
+
+    return (
+        <div>
+            <FeaturedMovie movie={data.results[0]} />
+            <MovieList movies={data} numberOfMovies={numberOfMovies} excludeFirst />
+            <Pagination currentPage={page} setPage={setPage} totalPages={data.total_pages} />
+        </div>
+    );
+}
+
+export default Movies;