WJ-98 - New: TV Popular list on the Home page;

src/domains/Movie/api/Popular/index.ts

@@ -3,7 +3,7 @@ import tmdb from 'services/api/tmdb';
 import { formatDate, formatTmdbImage } from 'shared/utils';
 
 import { Type } from 'domains/Favorites/enums';
-import Params from 'domains/Movie/api/NowPlaying/Params';
+import Params from 'domains/Movie/api/Popular/Params';
 import RawResponse from 'domains/Movie/api/Popular/RawResponse';
 import Response from 'domains/Movie/api/Popular/Response';
 

src/domains/Tv/api/Popular/Params.ts

@@ -0,0 +1,3 @@
+export default interface Params {
+  page?: number;
+}

src/domains/Tv/api/Popular/RawResponse.ts

@@ -0,0 +1,13 @@
+export default interface RawResponse {
+  poster_path?: string;
+  overview: string;
+  first_air_date: string;
+  genre_ids: number[];
+  id: number;
+  original_language: string;
+  original_name: string;
+  name: string;
+  backdrop_path?: string;
+  popularity: number;
+  vote_count: number;
+}

src/domains/Tv/api/Popular/Response.ts

@@ -0,0 +1,14 @@
+export default interface Response {
+  poster?: string;
+  backdrop?: string;
+  overview: string;
+  releaseDate: string;
+  genreIds: number[];
+  id: number;
+  originalName: string;
+  name: string;
+  popularity: number;
+  voteCount: number;
+  favorite: boolean;
+  mediaType: number;
+}

src/domains/Tv/api/Popular/index.ts

@@ -0,0 +1,50 @@
+import tmdb from 'services/api/tmdb';
+
+import { formatDate, formatTmdbImage } from 'shared/utils';
+
+import { Type } from 'domains/Favorites/enums';
+import Params from 'domains/Tv/api/Popular/Params';
+import RawResponse from 'domains/Tv/api/Popular/RawResponse';
+import Response from 'domains/Tv/api/Popular/Response';
+
+const Popular = async (params?: Params): Promise<Response[]> => {
+  const response = await rawPopular(params);
+
+  return parseResponse(response);
+};
+
+export const rawPopular = async (params?: Params): Promise<RawResponse[]> => {
+  const response = await tmdb.get('/tv/popular', {
+    params: { page: params?.page },
+  });
+
+  return response.data.results;
+};
+
+const parseResponse = (rawResponse: RawResponse[]): Response[] => {
+  let response = [] as Response[];
+
+  rawResponse.forEach(tv => {
+    const parsedMovie = {
+      overview: tv.overview,
+      genreIds: tv.genre_ids,
+      id: tv.id,
+      originalName: tv.original_name,
+      name: tv.name,
+      popularity: tv.popularity,
+      voteCount: tv.vote_count,
+
+      releaseDate: formatDate({ value: tv.first_air_date }),
+      poster: formatTmdbImage({ value: tv.poster_path }),
+      backdrop: formatTmdbImage({ value: tv.backdrop_path }),
+      favorite: false,
+      mediaType: Type.TV,
+    } as Response;
+
+    response = [...response, parsedMovie];
+  });
+
+  return response;
+};
+
+export default Popular;

src/domains/Tv/api/index.ts

@@ -1 +1,2 @@
 export { default as Details } from './Details';
+export { default as Popular } from './Popular';

src/pages/Home/index.tsx

@@ -3,16 +3,19 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useAuth } from 'domains/Auth/hooks';
 import { useFavorite } from 'domains/Favorites/hooks';
 import { NowPlaying, Popular } from 'domains/Movie/api';
+import { Popular as TvPopular } from 'domains/Tv/api';
 import MovieResponse from 'domains/Movie/api/Popular/Response';
+import TvPopularResponse from 'domains/Tv/api/Popular/Response';
+import { Type } from 'domains/Favorites/enums';
 
 import { ColumnLayout } from 'components';
 import { Footer, Header, Highlights, MovieList } from 'containers';
 import { HeaderBackground, ContentContainer } from './styles';
-import { Type } from 'domains/Favorites/enums';
 
 const Home: React.FC = () => {
   const [popularList, setPopularList] = useState([] as MovieResponse[]);
   const [nowPlayingList, setNowPlayingList] = useState([] as MovieResponse[]);
+  const [tvPopularList, setTvPopularList] = useState([] as TvPopularResponse[]);
   const [isFavoriteLoading, setIsFavoriteLoading] = useState(true);
 
   const { user } = useAuth();
@@ -32,6 +35,13 @@ const Home: React.FC = () => {
     return response;
   }, []);
 
+  const getTvPopular = useCallback(async () => {
+    const response = await TvPopular({ page: 1 });
+    setTvPopularList(response);
+
+    return response;
+  }, []);
+
   const getFavorites = useCallback(async () => {
     setIsFavoriteLoading(true);
     const response = await Favorites();
@@ -43,11 +53,12 @@ const Home: React.FC = () => {
   useEffect(() => {
     getNowPlaying();
     getPopular();
+    getTvPopular();
 
     if (user) {
       getFavorites();
     }
-  }, [user, getNowPlaying, getPopular, getFavorites]);
+  }, [user, getNowPlaying, getPopular, getTvPopular, getFavorites]);
 
   return (
     <ColumnLayout>
@@ -64,6 +75,12 @@ const Home: React.FC = () => {
           data={nowPlayingList}
           isLoading={nowPlayingList.length === 0}
         />
+        <MovieList
+          title="Séries Populares"
+          data={tvPopularList}
+          isLoading={tvPopularList.length === 0}
+          theme="light"
+        />
 
         {user && (
           <MovieList

src/shared/utils/colors/getBackgroundByTheme.ts

@@ -1,10 +1,14 @@
 import { Color } from 'shared/enums';
 
 const getBackgroundByTheme = (theme?: string): Color | null => {
-  if (!theme || theme === 'light') {
+  if (!theme) {
     return Color.Fill;
   }
 
+  if (theme === 'light') {
+    return Color.FillSecondary;
+  }
+
   if (theme === 'primary') {
     return Color.Primary;
   }