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..959ff0b 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; 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..f1f9ae5 100644 --- a/src/screens/Home/index.tsx +++ b/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 (
- {/*
*/} - - - - {/*
*/} + + + +