Merge pull request #36 from 90lucasgabriel/feature/WJ-35

WJ-35 - Create Now Playing service

src/containers/Movie/index.tsx

@@ -16,13 +16,17 @@ const Movie: React.FC<Props> = ({ ...movie }) => {
     setIsFavorite(!isFavorite);
   }, [isFavorite]);
 
+  if (!movie.poster && !movie.backdrop) {
+    return null;
+  }
+
   return (
     <Container>
       <IconButton onClick={handleFavorite}>
         <BsHeartFill fill={isFavorite ? Color.Primary : Color.Empty} />
       </IconButton>
       <Poster
-        src={movie.poster}
+        src={movie.poster || movie.backdrop}
         onClick={() => history.push(`${Route.MOVIE}/${movie.id}`)}
       />
     </Container>

src/containers/Movie/styles.ts

@@ -7,6 +7,19 @@ export const Container = styled.div`
   height: ${PosterHeight.Default};
   border-radius: ${Size.Smallest};
   overflow: hidden;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    cursor: pointer;
+
+    img {
+      width: 110%;
+      height: 110%;
+    }
+  }
 `;
 
 export const IconButton = styled.button`
@@ -26,4 +39,5 @@ export const Poster = styled.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transition: width 0.2s, height 0.2s;
 `;

src/containers/MovieList/styles.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Container as DefaultContainer } from 'components/Layout';
-import { Size } from 'shared/enums';
+import { PosterHeight, Size } from 'shared/enums';
 
 export const Container = styled(DefaultContainer)`
   padding: ${Size.Medium} 0;
@@ -15,11 +15,8 @@ export const Title = styled.h2`
 `;
 
 export const ListContainer = styled.div`
-  /* overflow-x: hidden;
-
-  &:hover { */
+  height: ${PosterHeight.Default};
   overflow-x: auto;
-  /* } */
 
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;

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

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

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

@@ -0,0 +1,15 @@
+export default interface RawResponse {
+  poster_path?: string;
+  overview: string;
+  release_date: string;
+  genre_ids: number[];
+  id: number;
+  original_title: string;
+  original_language: string;
+  title: string;
+  backdrop_path?: string;
+  popularity: number;
+  vote_count: number;
+  video: boolean;
+  vote_average: number;
+}

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

@@ -0,0 +1,13 @@
+export default interface Response {
+  poster?: string;
+  backdrop?: string;
+  overview: string;
+  releaseDate: string;
+  genreIds: number[];
+  id: number;
+  originalTitle: string;
+  title: string;
+  popularity: number;
+  voteCount: number;
+  voteAverage: number;
+}

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

@@ -0,0 +1,50 @@
+import tmdb from 'services/api/tmdb';
+
+import Params from 'domains/Movie/api/NowPlaying/Params';
+import RawResponse from 'domains/Movie/api/NowPlaying/RawResponse';
+import Response from 'domains/Movie/api/NowPlaying/Response';
+import formatDate from 'shared/utils/formatDate';
+import formatTmdbImage from 'shared/utils/formatTmdbImage';
+
+const NowPlaying = async (params?: Params): Promise<Response[]> => {
+  const response = await rawNowPlaying(params);
+
+  return parseResponse(response);
+};
+
+export const rawNowPlaying = async (
+  params?: Params,
+): Promise<RawResponse[]> => {
+  const response = await tmdb.get('/movie/now_playing', {
+    params: { page: params?.page },
+  });
+
+  return response.data.results;
+};
+
+const parseResponse = (rawResponse: RawResponse[]): Response[] => {
+  let response = [] as Response[];
+
+  rawResponse.forEach(movie => {
+    const parsedMovie = {
+      overview: movie.overview,
+      genreIds: movie.genre_ids,
+      id: movie.id,
+      originalTitle: movie.original_title,
+      title: movie.title,
+      popularity: movie.popularity,
+      voteCount: movie.vote_count,
+      voteAverage: movie.vote_average,
+
+      releaseDate: formatDate({ value: movie.release_date }),
+      poster: formatTmdbImage({ value: movie.poster_path }),
+      backdrop: formatTmdbImage({ value: movie.backdrop_path }),
+    } as Response;
+
+    response = [...response, parsedMovie];
+  });
+
+  return response;
+};
+
+export default NowPlaying;

src/domains/Movie/api/index.ts

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

src/screens/Home/index.tsx

@@ -1,31 +1,30 @@
 import React, { useEffect, useState } from 'react';
 
-import Popular from 'domains/Movie/api/Popular';
+import { NowPlaying, Popular } from 'domains/Movie/api';
 import MovieResponse from 'domains/Movie/api/Popular/Response';
-import { Color } from 'shared/enums';
 
 import { ColumnLayout } from 'components/Layout';
 import Header from 'containers/Header';
 import MovieList from 'containers/MovieList';
 import Footer from 'containers/Footer';
-import { HeaderBackground } from './styles';
+import { HeaderBackground, ContentContainer } from './styles';
 
 const Home: React.FC = () => {
-  const [movieList, setMovieList] = useState([] as MovieResponse[]);
+  const [popularList, setPopularList] = useState([] as MovieResponse[]);
+  const [nowPlayingList, setNowPlayingList] = useState([] as MovieResponse[]);
+
   useEffect(() => {
-    Popular().then(response => {
-      setMovieList(response);
-    });
+    NowPlaying().then(response => setNowPlayingList(response));
+    Popular().then(response => setPopularList(response));
   }, []);
 
   return (
     <ColumnLayout>
       <Header />
-      {/* <div style={{ flex: 1 }}> */}
-      <MovieList theme="light" title="Populares" data={movieList} />
-      <MovieList theme="primary" title="Favoritos" data={movieList} />
-      <MovieList theme="secondary" title="Lançamentos" data={movieList} />
-      {/* </div> */}
+      <ContentContainer>
+        <MovieList theme="light" title="Populares" data={popularList} />
+        <MovieList theme="light" title="Lançamentos" data={nowPlayingList} />
+      </ContentContainer>
       <Footer />
       <HeaderBackground />
     </ColumnLayout>

src/screens/Home/styles.ts

@@ -11,3 +11,7 @@ export const HeaderBackground = styled.div`
   height: 376px;
   background: ${Color.Primary};
 `;
+
+export const ContentContainer = styled.div`
+  flex: 1;
+`;