WJ-17 - New: Favorite list;

WJ-17 - Update: Refactoring Movie container to component;

src/containers/MovieList/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Wrapper } from 'components/Layout';
-import Movie from 'containers/Movie';
+import Movie from 'components/Movie';
 import { Container, Title, ListContainer, ListContent } from './styles';
 
 import Props from './dtos';

src/containers/index.ts

@@ -1,5 +1,5 @@
 export { default as Footer } from './Footer';
 export { default as Header } from './Header';
 export { default as Highlights } from './Highlights';
-export { default as Movie } from './Movie';
+export { default as Movie } from '../components/Movie';
 export { default as MovieList } from './MovieList';

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

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

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

@@ -0,0 +1,5 @@
+export default interface Response {
+  id: string;
+  userId: string;
+  movieId: string;
+}

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

@@ -0,0 +1,34 @@
+import api from 'services/api';
+
+import RawResponse from 'domains/Favorites/api/List/RawResponse';
+import Response from 'domains/Favorites/api/List/Response';
+
+const Favorites = async (): Promise<Response[]> => {
+  const response = await rawFavorites();
+
+  return parseResponse(response);
+};
+
+export const rawFavorites = async (): Promise<RawResponse[]> => {
+  const response = await api.get('/favorites');
+
+  return response.data;
+};
+
+const parseResponse = (rawResponse: RawResponse[]): Response[] => {
+  let response = [] as Response[];
+
+  rawResponse.forEach(favorite => {
+    const parsedFavorite = {
+      id: favorite.id,
+      userId: favorite.user_id,
+      movieId: favorite.movie_id,
+    } as Response;
+
+    response = [...response, parsedFavorite];
+  });
+
+  return response;
+};
+
+export default Favorites;

src/domains/Favorites/api/index.ts

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

src/domains/Favorites/dtos/ContextData.ts

@@ -0,0 +1,7 @@
+// import LoginCredentials from './LoginCredentials';
+
+export default interface ContextData {
+  user?: object;
+  // login(loginCredentials: LoginCredentials): Promise<void>;
+  // logout(): void;
+}

src/domains/Favorites/dtos/FavoritesState.ts

@@ -0,0 +1,4 @@
+export default interface FavoritesState {
+  token?: string;
+  user?: object;
+}

src/domains/Favorites/hooks/index.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+import api from 'services/api';
+
+// import { postRawFavorites } from 'domains/Favorites/api/PostFavorites';
+import ContextData from '../dtos/ContextData';
+import FavoritesState from '../dtos/FavoritesState';
+
+const FavoritesContext = createContext<ContextData>({} as ContextData);
+
+const FavoritesProvider: React.FC = ({ children }) => {
+  const [data, setData] = useState<FavoritesState>(() => {
+    return {} as FavoritesState;
+  });
+
+  // const update = useCallback(async ({ movieId }): Promise<void> => {
+  //   const response = await updateFavorites({ movieId });
+
+  //   if (response) {
+  //     setData({ ...data, response });
+  //     return;
+  //   }
+
+  //   const newData = data.filter(favorite => favorite)
+
+  // }, []);
+
+  return (
+    <FavoritesContext.Provider value={{}}>{children}</FavoritesContext.Provider>
+  );
+};
+
+function useFavorites(): ContextData {
+  const context = useContext(FavoritesContext);
+
+  if (!context) {
+    throw new Error('useFavorites must be used within an FavoritesProvider.');
+  }
+
+  return context;
+}
+
+export { FavoritesProvider, useFavorites };

src/screens/Home/index.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
 import { NowPlaying, Popular } from 'domains/Movie/api';
+import { Favorites } from 'domains/Favorites/api';
 import MovieResponse from 'domains/Movie/api/Popular/Response';
+import FavoriteResponse from 'domains/Favorites/api/List/Response';
 
 import { ColumnLayout } from 'components/Layout';
 import { Footer, Header, Highlights, MovieList } from 'containers';
@@ -10,10 +12,15 @@ import { HeaderBackground, ContentContainer } from './styles';
 const Home: React.FC = () => {
   const [popularList, setPopularList] = useState([] as MovieResponse[]);
   const [nowPlayingList, setNowPlayingList] = useState([] as MovieResponse[]);
+  const [favoriteList, setFavoriteList] = useState([] as FavoriteResponse[]);
 
   useEffect(() => {
     NowPlaying().then(response => setNowPlayingList(response));
     Popular().then(response => setPopularList(response));
+    Favorites().then(response => {
+      console.log('response', response);
+      setFavoriteList(response);
+    });
   }, []);
 
   return (