Final deployment published on netlify

SAM-BOGHARA · Mar 21, 2023 · f6eefd6 · f6eefd6
1 parent e940bba
commit f6eefd6
Show file tree

Hide file tree

Showing 24 changed files with 210 additions and 283 deletions.
diff --git a/.env.example b/.env.example
@@ -1,2 +1,4 @@
 ESLINT_NO_DEV_ERRORS=true
-key=<put your key here>
+REACT_APP_ALAN_KEY=<put your key here>
+ESLINT_NO_DEV_ERRORS=true
+DISABLE_ESLINT_PLUGIN=true
diff --git a/.env.production b/.env.production
@@ -0,0 +1 @@
+DISABLE_ESLINT_PLUGIN=true
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/components/Actors/Actors.jsx b/src/components/Actors/Actors.jsx
@@ -13,7 +13,7 @@ const Actors = () => {
     const [page, setPage] = useState(1)
     const { data, isFetching, error } = useGetActorDetailsQuery(id);
     const { data : actorMovies, isFetching: isFetchingActorMovies, error : isErrorInActorMovies} = useGetMoviesByActorIdQuery({ id, page });
-    console.log(data)
+    // console.log(data)
     if (isFetching) {
         return (
             <Box display="flex" justifyContent="center">

diff --git a/src/components/Alan.jsx b/src/components/Alan.jsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useContext } from 'react';
+import alanBtn from '@alan-ai/alan-sdk-web';
+import { ColorModeContext } from '../utils/ToggleColorMode'
+import { fetchToken } from '../utils';
+import { useNavigate } from 'react-router-dom';
+import { selectGenreOrCategory, searchMovie } from '../features/createGenreOrCategory';
+import { useDispatch } from 'react-redux';
+
+const useAlan = () => {
+    const { setMode } = useContext(ColorModeContext);
+    const navigate = useNavigate();
+    const dispatch = useDispatch()
+    useEffect(() => {
+        alanBtn({
+            key: process.env.REACT_APP_ALAN_KEY,
+            onCommand: ({ command, mode, genres, genreOrCategory, query }) => {
+                if (command === 'chooseGenre' || command === 'recommendMovie') {
+
+                    const foundGenre = genres.find((g) => g.name.toLowerCase() === genreOrCategory.toLowerCase());
+                    if (foundGenre) {
+                        navigate('/')
+                        dispatch(selectGenreOrCategory(foundGenre.id))
+                    } else if (genreOrCategory) {
+                        const category = genreOrCategory.startsWith('top') ? 'top_rated' : genreOrCategory;
+                        navigate('/')
+                        dispatch(selectGenreOrCategory(category))
+                    }
+                    console.log(command, genreOrCategory)
+                } else if (command === 'changeMode') {
+                    if (mode === 'light') {
+                        setMode('light')
+                    } else {
+                        setMode('dark')
+                    }
+                } else if (command === 'login') {
+                    fetchToken();
+                } else if (command === 'logout') {
+                    localStorage.clear();
+                    window.location.href = '/';
+                } else if (command === 'search') {
+                    navigate('/')
+                    dispatch(searchMovie(query));
+                }
+            }
+        });
+    }, []);
+}
+
+export default useAlan;
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,13 +1,16 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { CssBaseline } from '@mui/material';
 import { Routes, Route } from 'react-router-dom';
-import { Actors, MovieInformation, Movies, NavBar, Profile } from './'
+import { Actors, MovieInformation, Movies, NavBar, Profile } from './';
+import useAlan from './Alan';
 // import useStyles from './styles'
 // import './styles.css';
 import './global.css'
 
 const App = () => {
-    // const classes = useStyles();
+    const alanBtnContainer = useRef()
+    useAlan();
+
     return (
         <div className='root' >
             <CssBaseline />
@@ -22,6 +25,7 @@ const App = () => {
                     <Route exact path="/profile/:id" element={<Profile />} /> 
                 </Routes>
             </main>
+            <div ref={alanBtnContainer} />
         </div>
     )
 };

diff --git a/src/components/FeaturedMovie/FeaturedMovie.jsx b/src/components/FeaturedMovie/FeaturedMovie.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Box, Typography, Card, CardContent, CardMedia } from '@mui/material'
+import '../global.css';
+import { Link } from 'react-router-dom';
+
+const FeaturedMovie = ({ movie }) => {
+    if (!movie) return null;
+
+    return (
+        <Box component={Link} to={`/movie/${movie.id}`} className='featured--movie--container' >
+            <Card className='featured--movie--card'  >
+                <CardMedia
+                    media='picture'
+                    alt={movie.title}
+                    image={`https://image.tmdb.org/t/p/original/${movie?.backdrop_path}`}
+                    title={movie.title}
+                    className='featured--movie--cardmedia'
+                />
+                <Box padding='20px'>
+                    <CardContent className='featured--movie--cardcontent'>
+                        <Typography variant='h5' gutterBottom>{movie.title}</Typography>
+                        <Typography variant='body2'>{movie.overview}</Typography>
+                    </CardContent>
+                </Box>
+
+            </Card>
+
+        </Box>
+    )
+}
+
+export default FeaturedMovie
diff --git a/src/components/Movie/styles.css b/src/components/Movie/styles.css
diff --git a/src/components/MovieInformation/MovieInformation.jsx b/src/components/MovieInformation/MovieInformation.jsx
@@ -10,33 +10,32 @@ import { useDispatch, useSelector } from 'react-redux';
 import { selectGenreOrCategory } from '../../features/createGenreOrCategory';
 import { MovieList } from "..";
 import { userSelector } from '../../features/auth';
-import {useTheme} from '@mui/material';
+import { useTheme } from '@mui/material';
 
 const MovieInformation = () => {
   const theme = useTheme();
   const { user } = useSelector(userSelector);
   const { id } = useParams();
   const dispatch = useDispatch();
   const [open, setopen] = useState(false);
-  const { data: recommendations, isFetching: isRecommendationsFetching, error: isErrorInRecommendations } = useGetRecommendationsQuery({ list: `/recommendations`, movie_id: id })
-
-  const { data: favoriteMovies } = useGetListQuery({ listName: 'favorite/movies', accountId: user.id, sessionId: localStorage.getItem('session_id'), page : 1 })
-  const { data: watchlistMovies } = useGetListQuery({ listName: 'watchlist/movies', accountId: user.id, sessionId: localStorage.getItem('session_id'), page : 1 })
   const { data, isFetching, error } = useGetMovieQuery(id);
+  const { data: recommendations, isFetching: isRecommendationsFetching, error: isErrorInRecommendations } = useGetRecommendationsQuery({ list: `/recommendations`, movie_id: id })
+  const { data: favoriteMovies } = useGetListQuery({ listName: 'favorite/movies', accountId: user.id, sessionId: localStorage.getItem('session_id'), page: 1 })
+  const { data: watchlistMovies } = useGetListQuery({ listName: 'watchlist/movies', accountId: user.id, sessionId: localStorage.getItem('session_id'), page: 1 })
   const [isMovieFavorited, setisMovieFavorited] = useState(false)
   const [isMovieWatchlisted, setisMovieWatchlisted] = useState(false)
 
 
   useEffect(() => {
     setisMovieFavorited(!!favoriteMovies?.results?.find((movie) => movie?.id === data?.id))
   }, [favoriteMovies, data]);
-  
+
 
   useEffect(() => {
     setisMovieWatchlisted(!!watchlistMovies?.results?.find((movie) => movie?.id === data?.id))
   }, [watchlistMovies, data]);
 
-// https://api.themoviedb.org/3/account/12689766/favorite/movies?api_key=39c8b7879c058f7b1551bf4f266ae699&session_id=2904a56cb4537ef7dfdd710072bafaf8bb71a9f5&language=en-US&sort_by=created_at.asc&page=1
+  // https://api.themoviedb.org/3/account/12689766/favorite/movies?api_key=39c8b7879c058f7b1551bf4f266ae699&session_id=2904a56cb4537ef7dfdd710072bafaf8bb71a9f5&language=en-US&sort_by=created_at.asc&page=1
 
 
 
@@ -48,7 +47,7 @@ const MovieInformation = () => {
       media_id: id,
       favorite: !isMovieFavorited
     })
-    
+
     setisMovieFavorited((prev) => !prev)
   }
 
@@ -57,7 +56,7 @@ const MovieInformation = () => {
       media_type: 'movie',
       media_id: id,
       watchlist: !isMovieWatchlisted,
- 
+
     })
     setisMovieWatchlisted((prev) => !prev)
   }
@@ -68,15 +67,15 @@ const MovieInformation = () => {
   // console.log(data)
   console.log(recommendations)
 
-  if (isFetching) {
+  if (isFetching || isRecommendationsFetching) {
     return (
       <Box display="flex" justifyContent="center">
         <CircularProgress size="4rem" />
       </Box>
     )
   }
 
-  if (error) {
+  if (error || isErrorInRecommendations) {
     return (
       <Box display="flex" justifyContent="center">
         <Link to="/">Something has gone wrong go back</Link>
@@ -106,7 +105,7 @@ const MovieInformation = () => {
             </Typography>
           </Box>
           <Typography variant="h6" align='center' gutterBottom>
-            {data?.runtime}min | Language : {data?.spoken_languages[0].name}
+            {data?.runtime}min | Language : {data?.spoken_languages[0]?.name}
           </Typography>
         </Grid>
         <Grid item className='movieinfo--genres--container'>
@@ -161,10 +160,8 @@ const MovieInformation = () => {
                 <Button onClick={addToWatchlist} endIcon={isMovieWatchlisted ? <Remove /> : <PlusOne />}>
                   {isMovieWatchlisted ? 'Remove' : 'Watchlist'}
                 </Button>
-                <Button endIcon={<ArrowBack />} sx={{ borderColor: 'primary.main' }} >
-                  <Typography component={Link} to='/' color='inherit' variant='subtitle2' style={{ textDecoration: 'none' }} >
-                    Back
-                  </Typography>
+                <Button endIcon={<ArrowBack />} sx={{ borderColor: 'primary.main' }}   >
+                  BACK
                 </Button>
               </ButtonGroup>
             </Grid>
@@ -175,15 +172,15 @@ const MovieInformation = () => {
 
 
       <Box marginTop='5rem' width='100%'>
-        <Typography variant='h3' gutterBottom align='center' >
+        <Typography variant='h3' color="textPrimary" gutterBottom align='center' >
           You might also like
         </Typography>
         {recommendations
-          ? <MovieList movies={recommendations} numberOfMovies={12}>
-          </MovieList>
-          : <Box>Sorry, nothing was found!</Box>}
+          ? <MovieList key={id} movies={recommendations} numberOfMovies={recommendations.results.length < 12 ? recommendations.results.length : 12}></MovieList>
+          : <Box>Sorry, nothing was found!</Box>
+        }
       </Box>
-
+        {console.log(id)}
       {console.log(data.videos.results[0].key)}
       <Modal closeAfterTransition className='movieinfo--modal' open={open} onClose={() => { setopen(false) }}
       >

diff --git a/src/components/MovieList/MovieList.jsx b/src/components/MovieList/MovieList.jsx
@@ -4,13 +4,17 @@ import { Grid } from '@mui/material';
 import { Movie } from '..';
 import '../global.css'
 
-const MovieList = (props) => {
-    const { results } = props.movies;
-    const noOfMovies = props.numberOfMovies;
+const MovieList = ({ movies, numberOfMovies, excludeFirst }) => {
+
+    const results = movies.results;
+    // const noOfMovies = numberOfMovies;
+    const noOfMovies = Math.min(numberOfMovies, results.length);
+    const startFrom = excludeFirst ? 1 : 0
+
     return (
         <Grid container className='movies-container' >
-            {results.slice(0, noOfMovies).map((movie, idx) => (
-                <Movie key={idx} movie={movie} i={idx} />
+            {results.slice(startFrom, noOfMovies).map((movie, idx) => (
+                <Movie key={movie.title} movie={movie} i={idx} />
             ))}
         </Grid>
     )

diff --git a/src/components/MovieList/styles.css b/src/components/MovieList/styles.css
diff --git a/src/components/Movies/Movies.jsx b/src/components/Movies/Movies.jsx
@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
 import { useGetMoviesQuery } from '../../services/TMDB';
-import { MovieList, Pagination } from '..';
+import { MovieList, Pagination , FeaturedMovie} from '..';
 import { Box, CircularProgress, Typography, useMediaQuery } from '@mui/material';
-import { selectGenreOrCategory } from '../../features/createGenreOrCategory';
 import { useSelector } from 'react-redux';
 const Movies = () => {
     const [page, setPage] = useState(1)
     const { genreIdOrCategoryName, searchQuery } = useSelector((state) => state.currentGenreOrCategory)
     const { data, error, isFetching } = useGetMoviesQuery({ genreIdOrCategoryName, page, searchQuery });
     const isLargeDevice = useMediaQuery((theme) => theme.breakpoints.only('lg'));
-    const numberOfMoviesToShowByScreenSize = isLargeDevice ? 16 : 18
+    const numberOfMoviesToShowByScreenSize = isLargeDevice ? 17 : 19
     // console.log(data)
 
     if (isFetching) {
@@ -35,7 +34,8 @@ const Movies = () => {
 
     return (
         <>
-            <MovieList  movies={data} numberOfMovies={numberOfMoviesToShowByScreenSize} />
+        <FeaturedMovie movie = {data.results[0]} />
+            <MovieList  movies={data} numberOfMovies={numberOfMoviesToShowByScreenSize} excludeFirst />
             <Pagination currentPage={ page } setPage = {setPage} totalPages = { data?.total_pages} />
         </>
 

diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -19,7 +19,7 @@ const NavBar = () => {
   const token = localStorage.getItem("request_token");
   const sessionIdFromLocalStorage = localStorage.getItem("session_id");
   const colorMode = useContext(ColorModeContext)
-  // console.log(user)
+  // console(user)
 
   useEffect(() => {
     const logInUser = async () => {
@@ -70,7 +70,8 @@ const NavBar = () => {
                 className='menubutton'
                 onClick={() => { }} >
                 {!isMobile && <>My Movies &nbsp;</>}
-                <Avatar style={{ width: 30, height: 30 }} alt="Profile" src='https://toppng.com/uploads/preview/roger-berry-avatar-placeholder-11562991561rbrfzlng6h.png' />
+                  <Avatar style={{ width: 30, height: 30 }} alt="Profile"
+                    src={`https://www.themoviedb.org/t/p/w64_and_h64_face${user?.avatar?.tmdb?.avatar_path}`} />
               </Button>
             )
             }
@@ -94,8 +95,7 @@ const NavBar = () => {
               ModalProps={{ keepMounted: true }}
             >
               <Sidebar
-
-                setmobileOpen={setmobileOpen}
+                setMobileOpen={setmobileOpen}
               />
             </Drawer>
           ) : (