Dev

client/package.json

@@ -16,6 +16,7 @@
     "react-awesome-reveal": "^3.8.1",
     "react-dom": "^18.1.0",
     "react-image-gallery": "^1.2.8",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-loader-spinner": "^5.1.5",
     "react-lottie-player": "^1.4.3",
     "react-router-dom": "^6.3.0",

client/src/elements/ModalMovieCard/ModalMovieCard.css

@@ -13,7 +13,7 @@
 
 /* Movie poster */
 .moviePoster {
-  height: 300px;
+  height: 260px;
   margin: min(5vmin, 20px);
 }
 

client/src/elements/ModalMovieCard/ModalMovieCard.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {RatingCircle} from "./../RatingCircle";
-import {Divider} from "../Divider";
+// import {Divider} from "../Divider";
 
 import "./ModalMovieCard.css";
 
@@ -66,7 +66,7 @@ function ModalMovieCard({poster_path, title, genres, rating, overview, release_d
 
           <div className="overviewContainer pad-10">
             <div className="overviewHeader orangeLine">Overview</div>
-            <div className="movieOverview">{overview}</div>
+            <div className="movieOverview">{overview?.length > 0 ? overview : `No overview available.`}</div>
           </div>
         </div>
       </div>

client/src/elements/MovieCard/MovieCard.css

@@ -1,5 +1,5 @@
 :root {
-  --movieCardHeight: max(50vh, 250px);
+  --movieCardHeight: max(50vh, 260px);
   --movieCardWidth: 100%;
   --posterImageUrl: "";
 }
@@ -47,7 +47,7 @@
   display: flex;
   flex-direction: column;
   width: var(--movieCardWidth);
-  height: 227px;
+  height: 240px;
 }
 
 .movieDetailContainer > * {

client/src/pages/AboutUs/AboutUs.css

@@ -1,5 +1,7 @@
 .aboutUsBody {
-  background-color: #e7eeed;
+  /* background-color: #e7eeed; */
+  background: url("../../assets/images/aboutUsBackground.svg");
+  background-size: cover;
 }
 
 .profileCardParent {

client/src/pages/Home/Home.css

@@ -13,14 +13,15 @@
 
 .altText {
     color: var(--altTextColor);
-    background: linear-gradient(45deg, var(--altColorBgstart), var(--altColorBgend));
+    /* background: linear-gradient(45deg, var(--altColorBgstart), var(--altColorBgend)); */
+    background: url("../../assets/images/homeBG2.svg");
+    background-size: cover;
 }
 
-/* Maybe use for alternate if need..  
-.altText2 {
-    color: var(--altTextColor);
-    background: linear-gradient(-45deg, var(--altColor), transparent);
-} */
+.normalBG {
+    background: url("../../assets/images/homeBG1.svg");
+    background-size: cover;
+}
 
 .home-container {
     display: flex;
@@ -158,6 +159,10 @@ img.lottie-animation {
     max-width: 20rem;
 }
 
+.extra-features-content {
+    font-weight: 600;
+}
+
 .icon {
     max-height: max(100px, 20vh);
     margin: 0 auto;

client/src/pages/Home/Home.jsx

@@ -23,7 +23,7 @@ export default function Home() {
 
       {/* HEADING SENTIMO AND ONE LINER */}
       <Fade triggerOnce>
-        <div className="home-heading">
+        <div className="home-heading normalBG">
           <Lottie
             className="lottie-animation"
             animationData={landingPageAnimation}
@@ -72,7 +72,7 @@ export default function Home() {
         </Fade>
       </div>
 
-      <div className="solution-container">
+      <div className="solution-container normalBG">
         <div className="confused-lottie lottie-animation">
         <Fade triggerOnce>
           <Lottie
@@ -139,7 +139,7 @@ export default function Home() {
         </Fade>
       </div>
 
-      <div className="extra-features-container">
+      <div className="extra-features-container normalBG">
         <Fade triggerOnce>
           <div className="extra-features-heading">benefits</div>
         </Fade>

client/src/pages/Recommendation/Recommendation.js

@@ -4,18 +4,20 @@ import { ModalContainer } from "../../components";
 import "./Recommendation.css";
 import { useLoading } from "../../utils/hooks/useLoading";
 import { useDate } from "../../utils/hooks/useDate";
-import { fetchStats } from '../../utils/api/stats';
+import { fetchStats } from "../../utils/api/stats";
 import { toast } from "react-toastify";
 
 import { MovieCard, ModalMovieCard } from "../../elements";
-import { MapGenre } from '../../utils/MapGenre'
+import { MapGenre } from "../../utils/MapGenre";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { modalClasses } from "@mui/material";
 
 export default function Recommendation() {
   const [page, setPage] = useState(1);
   const [movies, setMovies] = useState([]);
   const [genreNames, setGenreNames] = useState({});
   const [emotion, setEmotion] = useState([0, 0, 0, 0, 0]);
-  const [userGenre, setUserGenre] = useState()
+  const [userGenre, setUserGenre] = useState();
   const [genreModalOpen, setGenreModalOpen] = useState(true);
   const [lazyFetch, setLazyFetch] = useState(0);
   const { setLoading, setError, LoadingScreen } = useLoading();
@@ -24,20 +26,22 @@ export default function Recommendation() {
   const genreUrl = `https://api.themoviedb.org/3/genre/movie/list?api_key=4d3bc810d8690d3649ca4f41960de9b4&language=en-US`;
 
   const getMoviesOnPage = async (page) => {
-    const res = await fetch(`https://api.themoviedb.org/3/discover/movie?api_key=4d3bc810d8690d3649ca4f41960de9b4&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}&with_watch_monetization_types=flatrate`);
+    const res = await fetch(
+      `https://api.themoviedb.org/3/discover/movie?api_key=4d3bc810d8690d3649ca4f41960de9b4&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}&with_watch_monetization_types=flatrate`
+    );
     const body = await res.json();
     return body.results;
-  }
+  };
 
-  window.addEventListener('scroll', (e) => {
-    if ( //buggy this code not working right
-      document.documentElement.scrollTop +
-      document.documentElement.clientHeight ===
-      document.documentElement.scrollHeight) {
-      setLazyFetch(lazyFetch + 1);
-    }
-    console.log("Reached end of the movies...")
-  })
+  // window.addEventListener('scroll', (e) => {
+  //   if ( //buggy this code not working right
+  //     document.documentElement.scrollTop +
+  //     document.documentElement.clientHeight ===
+  //     document.documentElement.scrollHeight) {
+  //     setLazyFetch(lazyFetch + 1);
+  //   }
+  //   console.log("Reached end of the movies...")
+  // })
 
   useEffect(() => {
     const getStats = async () => {
@@ -49,16 +53,16 @@ export default function Recommendation() {
         //clear and update the emotions array
         const updatedEmotion = [0, 0, 0, 0, 0];
         res?.data?.map((e) => {
-          updatedEmotion[0] += e.emotion.Happy * 100
-          updatedEmotion[1] += e.emotion.Sad * 100
-          updatedEmotion[2] += e.emotion.Angry * 100
-          updatedEmotion[3] += e.emotion.Surprise * 100
-          updatedEmotion[4] += e.emotion.Fear * 100
+          updatedEmotion[0] += e.emotion.Happy * 100;
+          updatedEmotion[1] += e.emotion.Sad * 100;
+          updatedEmotion[2] += e.emotion.Angry * 100;
+          updatedEmotion[3] += e.emotion.Surprise * 100;
+          updatedEmotion[4] += e.emotion.Fear * 100;
           return e;
         });
         setEmotion(updatedEmotion);
       } else {
-        toast.error("Something went wrong.")
+        toast.error("Something went wrong.");
       }
       setLoading(false);
     };
@@ -80,55 +84,89 @@ export default function Recommendation() {
 
   useEffect(() => {
     const genreSelected = MapGenre(emotion);
-    setUserGenre(genreSelected)
-  }, [emotion])
+    setUserGenre(genreSelected);
+  }, [emotion]);
 
-  useEffect(() => {
-    //filter the movies with required genre ID for user
-    const getMovies = async () => {
-      let fetchedMovies = [];
-      let currentPage = page;
-      while (fetchedMovies.length < 20) {
-        //keep searching for more movies
-        const res = await getMoviesOnPage(currentPage);
-        fetchedMovies.push(...res)
-        currentPage += 1;
-      }
-      //get next 20 movies and push to original array
-      console.log(fetchedMovies);
-      setMovies([...movies, ...fetchedMovies]);
-      setPage(currentPage);
-    };
-    getMovies();
-  }, [lazyFetch]) //fetch 20 more movies every time lazy fetch changes
+  // useEffect(() => {
+  //   //filter the movies with required genre ID for user
+  //   const getMovies = async () => {
+  //     let fetchedMovies = [];
+  //     let currentPage = page;
+  //     while (fetchedMovies.length < 20) {
+  //       //keep searching for more movies
+  //       const res = await getMoviesOnPage(currentPage);
+  //       fetchedMovies.push(...res)
+  //       currentPage += 1;
+  //     }
+  //     //get next 20 movies and push to original array
+  //     console.log(fetchedMovies);
+  //     setMovies([...movies, ...fetchedMovies]);
+  //     setPage(currentPage);
+  //   };
+  //   getMovies();
+  // }, [lazyFetch]) //fetch 20 more movies every time lazy fetch changes
+
+  // (TODO: Stop if there is no next page available)
+  //filter the movies with required genre ID for user (copied this function from above)
+  const getMovies = async () => {
+    // console.log("Called getMovies now from page: ", page);
 
+    let fetchedMovies = [];
+    let currentPage = page;
+    while (fetchedMovies.length < 20) 
+    {
+      //keep searching for more movies
+      const res = await getMoviesOnPage(currentPage);
+      fetchedMovies.push(...res);
+      currentPage += 1;
+    }
+
+    // get next 20 movies and push to original array
+    setMovies([...movies, ...fetchedMovies]);
+    setPage(currentPage);
+  };
+
+  // Initially there must be some movies
+  if (movies.length === 0) {
+    getMovies();
+  }
+
   return (
-    <div className="reccomendationContain">
+    <div className="recommendationContainer">
       <Sidebar />
       <LoadingScreen />
-      <ModalContainer isOpen={genreModalOpen} close={() => setGenreModalOpen(false)} style={{ backgroundColor: '#2A2323' }}>
-        Show pie chart of emotion
-        show genre list selected
+      <ModalContainer
+        isOpen={genreModalOpen}
+        close={() => setGenreModalOpen(false)}
+        style={{ backgroundColor: "#2A2323" }}
+      >
+        Show pie chart of emotion show genre list selected
       </ModalContainer>
 
-      <div className="movieCardContainer">
-        {movies?.map((movie, i) => {
-          return (
-            <div className="movieCard" key={i}>
-
-              <MovieCard
-                poster_path={`https://image.tmdb.org/t/p/w185${movie?.poster_path}`}
-                title={movie?.title}
-                genres={movie?.genre_ids?.map((genreId, i) => genreNames[genreId])}
-                release_data={movie?.release_date}
-                rating={movie?.vote_average?.toFixed(1)} /* Only 1 decimal digit */
-                overview={movie?.overview}
-              />
-
-            </div>
-          );
-        })}
-      </div>
+      <InfiniteScroll
+        dataLength={movies?.length}
+        next={getMovies} // setMovies(movies.concat( next_movie_array_here )) inside function 
+        hasMore={true}
+        // loader={<h1 color="white">Loading...</h1>} // Loader Component
+      >
+        <div className="movieCardContainer">
+          {movies?.map((movie, i) => {
+            return (
+              <div className="movieCard" key={i}>
+                <MovieCard
+                  poster_path={`https://image.tmdb.org/t/p/w185${movie?.poster_path}`}
+                  title={movie?.title}
+                  genres={movie?.genre_ids?.map((genreId, i) => genreNames[genreId])}
+                  release_data={movie?.release_date}
+                  rating={movie?.vote_average?.toFixed(1)} /* Only 1 decimal digit */
+                  overview={movie?.overview}
+                />
+              </div>
+             );
+           })}
+        </div>
+       </InfiniteScroll>
+
     </div>
   );
 }