From 50655e39f6aa7504a7fa06b707de799041955805 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Mon, 31 Aug 2020 20:48:12 -0300 Subject: [PATCH 1/2] WJ-35 - New: Now playing service; WJ-35 - New: Zoom on mouse hover; --- src/containers/Movie/index.tsx | 6 ++- src/containers/Movie/styles.ts | 14 ++++++ src/containers/MovieList/styles.ts | 8 ++- src/domains/Movie/api/NowPlaying/Params.ts | 3 ++ .../Movie/api/NowPlaying/RawResponse.ts | 15 ++++++ src/domains/Movie/api/NowPlaying/Response.ts | 13 +++++ src/domains/Movie/api/NowPlaying/index.ts | 50 +++++++++++++++++++ src/domains/Movie/api/index.ts | 2 + src/screens/Home/index.tsx | 19 +++---- 9 files changed, 113 insertions(+), 17 deletions(-) create mode 100644 src/domains/Movie/api/NowPlaying/Params.ts create mode 100644 src/domains/Movie/api/NowPlaying/RawResponse.ts create mode 100644 src/domains/Movie/api/NowPlaying/Response.ts create mode 100644 src/domains/Movie/api/NowPlaying/index.ts create mode 100644 src/domains/Movie/api/index.ts diff --git a/src/containers/Movie/index.tsx b/src/containers/Movie/index.tsx index 63ac440..0e0cc3f 100644 --- a/src/containers/Movie/index.tsx +++ b/src/containers/Movie/index.tsx @@ -16,13 +16,17 @@ const Movie: React.FC = ({ ...movie }) => { setIsFavorite(!isFavorite); }, [isFavorite]); + if (!movie.poster && !movie.backdrop) { + return null; + } + return ( history.push(`${Route.MOVIE}/${movie.id}`)} /> diff --git a/src/containers/Movie/styles.ts b/src/containers/Movie/styles.ts index 5a722b5..83f831d 100644 --- a/src/containers/Movie/styles.ts +++ b/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; `; diff --git a/src/containers/MovieList/styles.ts b/src/containers/MovieList/styles.ts index eec8bae..d60f7db 100644 --- a/src/containers/MovieList/styles.ts +++ b/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; @@ -35,6 +32,7 @@ export const ListContainer = styled.div` export const ListContent = styled.div` display: inline-flex; + overflow: hidden; margin-left: ${Size.Medium}; & > div { diff --git a/src/domains/Movie/api/NowPlaying/Params.ts b/src/domains/Movie/api/NowPlaying/Params.ts new file mode 100644 index 0000000..d09e291 --- /dev/null +++ b/src/domains/Movie/api/NowPlaying/Params.ts @@ -0,0 +1,3 @@ +export default interface Params { + page?: number; +} diff --git a/src/domains/Movie/api/NowPlaying/RawResponse.ts b/src/domains/Movie/api/NowPlaying/RawResponse.ts new file mode 100644 index 0000000..be0625f --- /dev/null +++ b/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; +} diff --git a/src/domains/Movie/api/NowPlaying/Response.ts b/src/domains/Movie/api/NowPlaying/Response.ts new file mode 100644 index 0000000..c25aca8 --- /dev/null +++ b/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; +} diff --git a/src/domains/Movie/api/NowPlaying/index.ts b/src/domains/Movie/api/NowPlaying/index.ts new file mode 100644 index 0000000..72c62bd --- /dev/null +++ b/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 => { + const response = await rawNowPlaying(params); + + return parseResponse(response); +}; + +export const rawNowPlaying = async ( + params?: Params, +): Promise => { + 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; diff --git a/src/domains/Movie/api/index.ts b/src/domains/Movie/api/index.ts new file mode 100644 index 0000000..76a96a2 --- /dev/null +++ b/src/domains/Movie/api/index.ts @@ -0,0 +1,2 @@ +export { default as NowPlaying } from './NowPlaying'; +export { default as Popular } from './Popular'; diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx index 9194c92..dfd62c3 100644 --- a/src/screens/Home/index.tsx +++ b/src/screens/Home/index.tsx @@ -1,8 +1,7 @@ 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'; @@ -11,21 +10,19 @@ import Footer from 'containers/Footer'; import { HeaderBackground } 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 (
- {/*
*/} - - - - {/*
*/} + +