Siuuuuuuuuuu

Author: htoann

client/src/components/list/List.jsx

@@ -25,8 +25,7 @@ function List({ list, type }) {
     <div className="list">
       {type && type === "movie"
         ? genreMapTitle(MOVIE_GENRES, list, "Movies")
-        : genreMapTitle(TV_GENRES, list, "TV Series")}
-
+        : genreMapTitle(TV_GENRES, list, "TV Shows")}
       <span className="listTitle">{list.title}</span>
       <Swiper
         className="movieShowcase__container"

client/src/components/listItem/ListItem.jsx

@@ -25,7 +25,9 @@ function ListItem({ movie }) {
       {isClicked && (
         <div className={isClicked ? "listItem__active" : ""}>
           <div className="itemInfo">
-            <h1 className="listItem__active_title">{movie.title}</h1>
+            <h1 className="listItem__active_title">
+              {movie.title || movie.name}
+            </h1>
             <div className="icons">
               <Link to={{ pathname: "/watch" }} state={{ movie: movie }}>
                 <PlayCircleFilledRounded className="icon" />
@@ -39,7 +41,9 @@ function ListItem({ movie }) {
                 {movie.vote_average} Rating
               </span>
               {/* <span className="border p-1 limit">Hello</span> */}
-              <span className="isSeries">{movie.release_date}</span>
+              <span className="isSeries">
+                {movie.release_date || movie.first_air_date}
+              </span>
             </div>
             {/* <div className="itemInfoBottom pb-2">
               <span className="listItem__itemInfoBottom_genre">Genre</span>

client/src/components/listItem/listItem.scss

@@ -47,6 +47,7 @@
 
       .listItem__active_title {
         font-size: 20px;
+        padding: 0 5px;
       }
 
       .icon {

client/src/services/getAll.js

@@ -1,16 +1,14 @@
 import { shuffle } from "../utils";
-import { getMoviesByType } from "./getApi";
+import { getMoviesByType, getTVByType } from "./getApi";
 import {
   getLatestMovies,
-  getMostPopularMovies,
   getPopularMovies,
   getTopRatedMovies,
   getTrendingMovies,
   getUpcomingMovies,
 } from "./getMovies";
 import {
   getLatestTV,
-  getMostPopularTV,
   getPopularTV,
   getTopRatedTV,
   getTrendingTV,
@@ -22,36 +20,38 @@ export const getAll = async (genre, setGenre, type, setIsLoading, setLists) => {
   let allList = [];
 
   if (type) {
-    allList.push(await getMoviesByType(genre, setGenre, type, setIsLoading));
+    type === "movie" &&
+      allList.push(await getMoviesByType(genre, setGenre, type, setIsLoading));
+
+    type === "series" &&
+      allList.push(await getTVByType(genre, setGenre, type, setIsLoading));
 
     if (type === "movie" && genre == null) {
+      setGenre(null);
+
       allList.push(
         await getTrendingMovies,
         await getUpcomingMovies,
         await getPopularMovies,
         await getTopRatedMovies,
-        await getLatestMovies,
-        await getMostPopularMovies
+        await getLatestMovies
       );
     } else if (type === "series" && genre == null) {
       allList.push(
         await getTrendingTV,
         await getPopularTV,
-        await getMostPopularTV,
         await getTopRatedTV,
         await getTVOnTheAir,
         await getTVOnTheAirToday,
         await getLatestTV
       );
-    } else if (type === "popular" && genre == null) {
+    } else if (type === "popular") {
       allList.push(
         await getPopularTV,
-        await getMostPopularTV,
         await getLatestTV,
         await getUpcomingMovies,
         await getPopularMovies,
-        await getLatestMovies,
-        await getMostPopularMovies
+        await getLatestMovies
       );
     }
   } else {
@@ -61,10 +61,8 @@ export const getAll = async (genre, setGenre, type, setIsLoading, setLists) => {
       await getPopularMovies,
       await getTopRatedMovies,
       await getLatestMovies,
-      await getMostPopularMovies,
       await getTrendingTV,
       await getPopularTV,
-      await getMostPopularTV,
       await getTopRatedTV,
       await getTVOnTheAir,
       await getTVOnTheAirToday,

client/src/services/getApi.js

@@ -73,17 +73,27 @@ export const getByUrl = async (url, title, config) => {
 
 export const getMoviesByType = async (genre, setGenre, type, setIsLoading) => {
   setIsLoading(true);
-  if (genre) {
+  try {
+    const res = await axiosMovie.get(
+      // `/list/${genre ? genre : type === "movie" ? 28 : 10759}`
+      `/discover/movie?api_key=${
+        process.env.REACT_APP_API_KEY_MOVIE
+      }&with_genres=${genre ? genre : type === "movie" ? 28 : 10759}`
+    );
     setIsLoading(false);
+    return res.data;
+  } catch (err) {
+    console.log(err);
   }
-  if (type) {
-    setIsLoading(true);
-    setGenre(null);
-  }
+};
 
+export const getTVByType = async (genre, setGenre, type, setIsLoading) => {
+  setIsLoading(true);
   try {
     const res = await axiosMovie.get(
-      `/list/${genre ? genre : type === "movie" ? 28 : 10759}`
+      `/discover/tv?api_key=${
+        process.env.REACT_APP_API_KEY_MOVIE
+      }&with_genres=${genre ? genre : type === "movie" ? 28 : 10759}`
     );
     setIsLoading(false);
     return res.data;

client/src/services/getMovies.js

@@ -13,7 +13,6 @@ export const getPopularMovies = getByUrl(
   "/movie/popular",
   "Popular on Netflix"
 );
-export const getMostPopularMovies = getByUrl("/discover/movie", "Most Popular");
 export const getTopRatedMovies = getByUrl(
   "/movie/top_rated",
   "Top Rated Movies"

client/src/services/getTv.js

@@ -6,7 +6,6 @@ export const getTrendingTV = getByUrl("/trending/tv/week", "Trending Now", {
   },
 });
 export const getPopularTV = getByUrl("/tv/popular", "Popular on Netflix");
-export const getMostPopularTV = getByUrl("/discover/tv", "Most Popular");
 export const getTopRatedTV = getByUrl("/tv/top_rated", "Top Rated TV Shows");
 export const getTVOnTheAir = getByUrl("/tv/on_the_air", "TV On The Air");
 export const getTVOnTheAirToday = getByUrl(

client/src/utils/constants.js

@@ -4,25 +4,34 @@ export const NETFLIX_NETWORK_ID = 213;
 
 export const MOVIE_GENRES = [
   { id: 28, name: "Action" },
+  { id: 12, name: "Adventure" },
+  { id: 16, name: "Animation" },
   { id: 35, name: "Comedy" },
   { id: 80, name: "Crime" },
   { id: 99, name: "Documentary" },
+  { id: 18, name: "Drama" },
+  { id: 10751, name: "Family" },
   { id: 14, name: "Fantasy" },
   { id: 36, name: "History" },
   { id: 27, name: "Horror" },
   { id: 10402, name: "Music" },
   { id: 9648, name: "Mystery" },
+  { id: 10749, name: "Romance" },
   { id: 878, name: "Science Fiction" },
+  { id: 10770, name: "TV Movie" },
   { id: 53, name: "Thriller" },
   { id: 10752, name: "War" },
   { id: 37, name: "Western" },
 ];
 
 export const TV_GENRES = [
   { id: 10759, name: "Action & Adventure" },
+  { id: 16, name: "Animation" },
   { id: 35, name: "Comedy" },
   { id: 80, name: "Crime" },
   { id: 99, name: "Documentary" },
+  { id: 18, name: "Drama" },
+  { id: 10751, name: "Family" },
   { id: 10762, name: "Kids" },
   { id: 9648, name: "Mystery" },
   { id: 10763, name: "News" },