benefits
diff --git a/client/src/pages/Recommendation/Recommendation.js b/client/src/pages/Recommendation/Recommendation.js
index 537df51..73ae4c4 100644
--- a/client/src/pages/Recommendation/Recommendation.js
+++ b/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 (
-
+
-
setGenreModalOpen(false)} style={{ backgroundColor: '#2A2323' }}>
- Show pie chart of emotion
- show genre list selected
+ setGenreModalOpen(false)}
+ style={{ backgroundColor: "#2A2323" }}
+ >
+ Show pie chart of emotion show genre list selected
-
- {movies?.map((movie, i) => {
- return (
-
-
- genreNames[genreId])}
- release_data={movie?.release_date}
- rating={movie?.vote_average?.toFixed(1)} /* Only 1 decimal digit */
- overview={movie?.overview}
- />
-
-
- );
- })}
-
+ {movies?.map((movie, i) => {
+ return (
+
+ genreNames[genreId])}
+ release_data={movie?.release_date}
+ rating={movie?.vote_average?.toFixed(1)} /* Only 1 decimal digit */
+ overview={movie?.overview}
+ />
+
+ );
+ })}
+
);
}
diff --git a/data/Emotions-Movie_Genres_Results.xlsx b/data/Emotions-Movie_Genres_Results.xlsx
new file mode 100644
index 0000000..86413e7
Binary files /dev/null and b/data/Emotions-Movie_Genres_Results.xlsx differ
diff --git a/data/Movie-Emotions_Survey_Responses.xlsx b/data/Movie-Emotions_Survey_Responses.xlsx
new file mode 100644
index 0000000..df20f59
Binary files /dev/null and b/data/Movie-Emotions_Survey_Responses.xlsx differ