Merge pull request #99 from 90lucasgabriel/feature/WJ-98

WJ-98 - Fix favorites API by entity_id and type_id

src/components/Movie/dtos/index.ts

@@ -3,7 +3,7 @@ import ContainerProps from './ContainerProps';
 export default interface MovieProps extends ContainerProps {
   id: number;
   favorite: boolean;
-  mediaType?: string;
+  mediaType: number;
   poster?: string;
   backdrop?: string;
 }

src/components/Movie/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { BsHeartFill } from 'react-icons/bs';
 
+import { Type } from 'domains/Favorites/enums';
 import { useAuth } from 'domains/Auth/hooks';
 import { useFavorite } from 'domains/Favorites/hooks';
 import Route from 'routes/enums';
@@ -23,14 +24,16 @@ const Movie: React.FC<Props> = ({ size, ...movie }) => {
         return;
       }
 
-      await UpdateFavorite(movie.id);
+      await UpdateFavorite(movie.id, movie.mediaType);
     } catch (error) {
       console.log('handleFavorite -> error', error);
     }
-  }, [user, UpdateFavorite, movie.id]);
+  }, [user, UpdateFavorite, movie.id, movie.mediaType]);
 
   const handleRedirect = useCallback(() => {
-    if (movie.mediaType === 'tv') {
+    if (movie.mediaType === Type.TV) {
+      history.push(`${Route.TV}/${movie.id}`);
+
       return;
     }
 
@@ -39,14 +42,16 @@ const Movie: React.FC<Props> = ({ size, ...movie }) => {
 
   // Check if movie is in favorite list and change status
   useEffect(() => {
+    // console.log('movie', movie);
     if (user) {
       const response = favoriteList.find(
-        favorite => +favorite.movieId === +movie.id,
+        favorite =>
+          favorite.entityId === movie.id && favorite.typeId === movie.mediaType,
       );
 
       setIsFavorite(!!response);
     }
-  }, [user, favoriteList, movie.id]);
+  }, [user, favoriteList, movie.id, movie.mediaType]);
 
   if (!movie.poster && !movie.backdrop) {
     return null;

src/components/SearchInput/index.tsx

@@ -9,7 +9,7 @@ const SearchInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = ({
     <Container>
       <Input
         type="text"
-        placeholder="Digite o nome de um filme"
+        placeholder="Pesquise por filmes ou séries"
         autoFocus
         {...rest}
       />

src/components/SearchInput/styles.ts

@@ -8,7 +8,7 @@ export const Container = styled.div`
 `;
 
 export const Input = styled.input`
-  font-size: ${Size.Large};
+  font-size: ${Size.Medium};
   border: 0;
   width: 100%;
   text-align: center;

src/containers/Filmography/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Route from 'routes/enums';
+import { Type } from 'domains/Favorites/enums';
 
 import { ReactComponent as Loading } from 'assets/loading.svg';
 import { Wrapper } from 'components/Layout';
@@ -33,9 +34,13 @@ const Filmography: React.FC<Props> = ({
 
   const handleRedirect = useCallback(
     (movie: any) => {
-      if (movie.mediaType === 'movie') {
-        history.push(`${Route.MOVIE}/${movie.id}`);
+      if (movie.mediaType === Type.TV) {
+        history.push(`${Route.TV}/${movie.id}`);
+
+        return;
       }
+
+      history.push(`${Route.MOVIE}/${movie.id}`);
     },
     [history],
   );

src/containers/Result/index.tsx

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import Route from 'routes/enums';
 import Props from 'containers/Result/dtos';
+import { Type } from 'domains/Favorites/enums';
 
 import { Movie } from 'components';
 import {
@@ -18,8 +19,14 @@ const Result: React.FC<Props> = ({ data }) => {
   const history = useHistory();
 
   const handleRedirect = useCallback(() => {
+    if (data.mediaType === Type.TV) {
+      history.push(`${Route.TV}/${data.id}`);
+
+      return;
+    }
+
     history.push(`${Route.MOVIE}/${data.id}`);
-  }, [history, data.id]);
+  }, [history, data.id, data.mediaType]);
 
   return (
     <Container>

src/containers/SearchModal/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { debounce } from 'lodash';
 
-// import { debounce } from 'shared/utils';
 import { Multi } from 'domains/Search/api';
 
 import { ReactComponent as Loading } from 'assets/loading.svg';
@@ -20,7 +19,7 @@ import {
   EmptyLabel,
 } from './styles';
 
-const SearchModal: React.FC<any> = ({ onClose, isShow, children }) => {
+const SearchModal: React.FC<any> = ({ onClose, isShow }) => {
   const minLength = useMemo(() => 3, []);
   const wait = useMemo(() => 750, []);
   const [data, setData] = useState([] as any);

src/domains/Favorites/api/List/RawResponse.ts

@@ -1,7 +1,8 @@
 export default interface RawResponse {
   id: string;
   user_id: string;
-  movie_id: number;
+  entity_id: number;
+  type_id: number;
   created_at: string;
   updated_at: string;
 }

src/domains/Favorites/api/List/Response.ts

@@ -3,5 +3,6 @@ import DetailsResponse from 'domains/Movie/api/Details/Response';
 export default interface Response extends Omit<DetailsResponse, 'id'> {
   favoriteId: string;
   userId: string;
-  movieId: number;
+  entityId: number;
+  typeId: number;
 }

src/domains/Favorites/api/List/index.ts

@@ -1,8 +1,8 @@
 import api from 'services/api';
 
+import { getByType } from 'domains/Favorites/helpers';
 import RawResponse from 'domains/Favorites/api/List/RawResponse';
 import Response from 'domains/Favorites/api/List/Response';
-import { Details } from 'domains/Movie/api';
 
 const Favorites = async (): Promise<Response[]> => {
   const response = await rawFavorites();
@@ -20,16 +20,25 @@ const parseResponse = async (
   rawResponse: RawResponse[],
 ): Promise<Response[]> => {
   const response = rawResponse.map(async (favorite: RawResponse) => {
-    // Get favorites details from TMDB API and merge
-    const details = await Details(favorite.movie_id);
-
-    // Merge API and TMDB results
-    return {
-      ...details,
-      favoriteId: favorite.id,
-      userId: favorite.user_id,
-      movieId: +favorite.movie_id,
-    };
+    try {
+      // Get favorites details from TMDB API and merge
+      const details = await getByType(favorite);
+
+      if (!details) {
+        throw new Error('Media not found.');
+      }
+
+      // Merge API and TMDB results
+      return {
+        ...details,
+        favoriteId: favorite.id,
+        userId: favorite.user_id,
+        entityId: favorite.entity_id,
+        typeId: favorite.type_id,
+      };
+    } catch (error) {
+      console.log('error', error);
+    }
   });
 
   // Resolve async requests and promises

src/domains/Favorites/api/Update/RawResponse.ts

@@ -1,7 +1,8 @@
 export default interface RawResponse {
   id: string;
   user_id: string;
-  movie_id: number;
+  entity_id: number;
+  type_id: number;
   created_at: string;
   updated_at: string;
 }

src/domains/Favorites/api/Update/index.ts

@@ -1,11 +1,14 @@
 import api from 'services/api';
 
+import { getByType } from 'domains/Favorites/helpers';
 import RawResponse from 'domains/Favorites/api/Update/RawResponse';
 import Response from 'domains/Favorites/api/Update/Response';
-import { Details } from 'domains/Movie/api';
 
-const Update = async (movieId: number): Promise<Response | null> => {
-  const response = await rawFavorites(movieId);
+const Update = async (
+  entityId: number,
+  typeId: number,
+): Promise<Response | null> => {
+  const response = await rawFavorites(entityId, typeId);
 
   if (!response) {
     return null;
@@ -15,26 +18,29 @@ const Update = async (movieId: number): Promise<Response | null> => {
 };
 
 export const rawFavorites = async (
-  movieId: number,
+  entityId: number,
+  typeId: number,
 ): Promise<RawResponse | null> => {
   const response = await api.post('/favorites', {
-    movie_id: movieId.toString(),
+    entity_id: entityId.toString(),
+    type_id: typeId.toString(),
   });
 
-  if (!response.data.movie_id) {
+  if (!response.data.entity_id) {
     return null;
   }
 
   return response.data;
 };
 
 const parseResponse = async (rawResponse: RawResponse): Promise<Response> => {
-  const details = await Details(rawResponse.movie_id);
+  const details = await getByType(rawResponse);
   const response = {
     ...details,
     favoriteId: rawResponse.id,
     userId: rawResponse.user_id,
-    movieId: rawResponse.movie_id,
+    entityId: rawResponse.entity_id,
+    typeId: rawResponse.type_id,
   };
 
   return response;

src/domains/Favorites/dtos/ContextData.ts

@@ -7,5 +7,8 @@ export default interface ContextData {
   favoriteList: ListResponse[];
   setFavoriteList: Dispatch<SetStateAction<ListResponse[]>>;
   Favorites(): Promise<ListResponse[]>;
-  UpdateFavorite(movieId: number): Promise<UpdateResponse | null>;
+  UpdateFavorite(
+    entityId: number,
+    typeId: number,
+  ): Promise<UpdateResponse | null>;
 }

src/domains/Favorites/enums/Type.ts

@@ -0,0 +1,11 @@
+enum Type {
+  MOVIE = 1,
+  TV = 2,
+  PERSON = 3,
+  REVIEW = 4,
+  COMPANY = 5,
+  COLLECTION = 6,
+  KEYWORD = 7,
+}
+
+export default Type;

src/domains/Favorites/enums/index.ts

@@ -0,0 +1 @@
+export { default as Type } from './Type';

src/domains/Favorites/helpers/getByType.ts

@@ -0,0 +1,20 @@
+import { Type } from 'domains/Favorites/enums';
+import { Details as MovieDetails } from 'domains/Movie/api';
+import { Details as TvDetails } from 'domains/Tv/api';
+import { Details as PersonDetails } from 'domains/Person/api';
+
+const getByType = async (favorite: any): Promise<any> => {
+  if (favorite.type_id === Type.MOVIE) {
+    return MovieDetails(favorite.entity_id);
+  }
+
+  if (favorite.type_id === Type.TV) {
+    return TvDetails(favorite.entity_id);
+  }
+
+  if (favorite.type_id === Type.PERSON) {
+    return PersonDetails(favorite.entity_id);
+  }
+};
+
+export default getByType;

src/domains/Favorites/helpers/index.ts

@@ -0,0 +1 @@
+export { default as getByType } from './getByType';

src/domains/Favorites/hooks/index.tsx

@@ -26,13 +26,17 @@ const FavoriteProvider: React.FC = ({ children }) => {
   }, []);
 
   const UpdateFavorite = useCallback(
-    async (movieId: number): Promise<UpdateResponse | null> => {
-      const response = await UpdateFavoriteApi(movieId);
+    async (
+      entityId: number,
+      typeId: number,
+    ): Promise<UpdateResponse | null> => {
+      const response = await UpdateFavoriteApi(entityId, typeId);
 
       // Remove favorite
       if (!response) {
         const updatedFavoriteList = favoriteList.filter(
-          favorite => +favorite.movieId !== +movieId,
+          favorite =>
+            !(favorite.entityId === entityId && favorite.typeId === typeId),
         );
         setFavoriteList(updatedFavoriteList);
 

src/domains/Movie/api/Details/RawResponse.ts

@@ -28,4 +28,5 @@ export default interface RawResponse {
     results: Recommendations[];
   };
   credits?: Credits;
+  mediaType: string;
 }

src/domains/Movie/api/Details/Response.ts

@@ -28,4 +28,6 @@ export default interface Response {
   recommendations?: Recommendations[];
   credits?: Credits;
   directorName?: string;
+
+  mediaType: number;
 }

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

@@ -1,15 +1,16 @@
 import tmdb from 'services/api/tmdb';
 
+import { arrayToString, formatTmdbImage, formatDate } from 'shared/utils';
+
+import { Type } from 'domains/Favorites/enums';
 import Params from 'domains/Movie/api/Details/Params';
 import RawResponse from 'domains/Movie/api/Details/RawResponse';
 import Response from 'domains/Movie/api/Details/Response';
 import Recommendations from 'domains/Movie/api/Recommendations/Response';
 import Credits from 'domains/Movie/api/Credits/Response';
-import formatDate from 'shared/utils/formatDate';
-import formatTmdbImage from 'shared/utils/formatTmdbImage';
+
 import Crew from 'domains/Movie/api/Credits/dtos/Crew';
 import Cast from 'domains/Movie/api/Credits/dtos/Cast';
-import { arrayToString } from 'shared/utils';
 
 const Details = async (movieId: number, params?: Params): Promise<Response> => {
   const response = await rawPopular(movieId, params);
@@ -51,6 +52,7 @@ const parseResponse = (movie: RawResponse): Response => {
     poster: formatTmdbImage({ value: movie.poster_path }),
     backdrop: formatTmdbImage({ value: movie.backdrop_path }),
     favorite: false,
+    mediaType: Type.MOVIE,
   } as Response;
 
   const recommendations = movie.recommendations?.results.map(
@@ -60,6 +62,7 @@ const parseResponse = (movie: RawResponse): Response => {
       id: recommendation.id,
       title: recommendation.title,
       favorite: false,
+      mediaType: Type.MOVIE,
     }),
   ) as Recommendations[];
 

src/domains/Movie/api/NowPlaying/Response.ts

@@ -11,4 +11,5 @@ export default interface Response {
   voteCount: number;
   voteAverage: number;
   favorite: boolean;
+  mediaType: number;
 }