diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts index 4b78663..6a0b117 100644 --- a/src/components/Layout/index.ts +++ b/src/components/Layout/index.ts @@ -1,17 +1,20 @@ -import { Color } from 'shared/enums'; import styled, { css } from 'styled-components'; -interface Props { - background?: string; - color?: string; - theme?: string; -} +import { Color } from 'shared/enums'; +import DefaultProps from 'shared/dtos'; -const BasicLayout = styled.div` +const BasicLayout = styled.div` background: ${props => props.background || 'inherit'}; color: ${props => props.color || 'inherit'}; ${props => { + if (props.theme === 'light') { + return css` + background: ${Color.Fill}; + color: ${Color.Primary}; + `; + } + if (props.theme === 'primary') { return css` background: ${Color.Primary}; @@ -33,7 +36,7 @@ const BasicLayout = styled.div` export const ColumnLayout = styled(BasicLayout)` position: absolute; min-height: 100%; - min-width: 100%; + width: 100%; display: flex; flex-direction: column; `; @@ -41,7 +44,7 @@ export const ColumnLayout = styled(BasicLayout)` export const RowLayout = styled(BasicLayout)` position: absolute; min-height: 100%; - min-width: 100%; + width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx index 9c4609b..33792cb 100644 --- a/src/containers/Footer/index.tsx +++ b/src/containers/Footer/index.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import { ReactComponent as Logo } from 'assets/logo.svg'; import { Color } from 'shared/enums'; -import RouteEnum from 'routes/enums/Route'; +import RouteEnum from 'routes/enums'; import { Wrapper } from 'components/Layout'; import { Container, LogoContainer, LinksContainer } from './styles'; diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx index 4fb4c53..c13042c 100644 --- a/src/containers/Header/index.tsx +++ b/src/containers/Header/index.tsx @@ -5,7 +5,7 @@ import { FiSearch } from 'react-icons/fi'; import { ReactComponent as Logo } from 'assets/logo.svg'; import { Color } from 'shared/enums'; -import RouteEnum from 'routes/enums/Route'; +import RouteEnum from 'routes/enums'; import { Wrapper } from 'components/Layout'; import Button from 'components/Button'; import { Container, MenuContainer, Link, ActionMenuContainer } from './styles'; diff --git a/src/containers/Movie/dtos/index.ts b/src/containers/Movie/dtos/index.ts new file mode 100644 index 0000000..f9697a1 --- /dev/null +++ b/src/containers/Movie/dtos/index.ts @@ -0,0 +1,5 @@ +import PopularProps from 'domains/Movie/api/Popular/Response'; + +export default interface Props extends PopularProps { + isFavorite?: boolean; +} diff --git a/src/containers/Movie/index.tsx b/src/containers/Movie/index.tsx new file mode 100644 index 0000000..63ac440 --- /dev/null +++ b/src/containers/Movie/index.tsx @@ -0,0 +1,32 @@ +import React, { useCallback, useState } from 'react'; +import { useHistory } from 'react-router-dom'; +import { BsHeartFill } from 'react-icons/bs'; + +import Route from 'routes/enums'; +import { Color } from 'shared/enums'; +import { Container, IconButton, Poster } from './styles'; + +import Props from './dtos'; + +const Movie: React.FC = ({ ...movie }) => { + const history = useHistory(); + const [isFavorite, setIsFavorite] = useState(false); + + const handleFavorite = useCallback(() => { + setIsFavorite(!isFavorite); + }, [isFavorite]); + + return ( + + + + + history.push(`${Route.MOVIE}/${movie.id}`)} + /> + + ); +}; + +export default Movie; diff --git a/src/containers/Movie/styles.ts b/src/containers/Movie/styles.ts new file mode 100644 index 0000000..5a722b5 --- /dev/null +++ b/src/containers/Movie/styles.ts @@ -0,0 +1,29 @@ +import styled from 'styled-components'; +import { PosterHeight, PosterWidth, Size } from 'shared/enums'; + +export const Container = styled.div` + position: relative; + width: ${PosterWidth.Default}; + height: ${PosterHeight.Default}; + border-radius: ${Size.Smallest}; + overflow: hidden; +`; + +export const IconButton = styled.button` + position: absolute; + right: ${Size.Smallest}; + top: ${Size.Smallest}; + background: transparent; + border: none; + + svg { + height: ${Size.Default}; + width: ${Size.Default}; + } +`; + +export const Poster = styled.img` + width: 100%; + height: 100%; + object-fit: cover; +`; diff --git a/src/containers/MovieList/dtos/index.ts b/src/containers/MovieList/dtos/index.ts new file mode 100644 index 0000000..f73c8d7 --- /dev/null +++ b/src/containers/MovieList/dtos/index.ts @@ -0,0 +1,6 @@ +import DefaultProps from 'shared/dtos'; + +export default interface Props extends DefaultProps { + title?: string; + data: any[]; +} diff --git a/src/containers/MovieList/index.tsx b/src/containers/MovieList/index.tsx new file mode 100644 index 0000000..b354df4 --- /dev/null +++ b/src/containers/MovieList/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import { Wrapper } from 'components/Layout'; +import Movie from 'containers/Movie'; +import { Container, Title, ListContainer, ListContent } from './styles'; + +import Props from './dtos'; + +const MovieList: React.FC = ({ + theme, + background, + color, + title, + data, +}) => { + return ( + + + {title && {title}} + + + {data.map(movie => ( + + ))} + + + + + ); +}; + +export default MovieList; diff --git a/src/containers/MovieList/styles.ts b/src/containers/MovieList/styles.ts new file mode 100644 index 0000000..eec8bae --- /dev/null +++ b/src/containers/MovieList/styles.ts @@ -0,0 +1,51 @@ +import styled from 'styled-components'; + +import { Container as DefaultContainer } from 'components/Layout'; +import { Size } from 'shared/enums'; + +export const Container = styled(DefaultContainer)` + padding: ${Size.Medium} 0; + display: flex; + flex-direction: column; +`; + +export const Title = styled.h2` + margin-bottom: ${Size.Small}; + margin-left: ${Size.Medium}; +`; + +export const ListContainer = styled.div` + /* overflow-x: hidden; + + &:hover { */ + overflow-x: auto; + /* } */ + + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; + + -ms-overflow-style: none; + scrollbar-width: 10px; + &::-webkit-scrollbar { + /* visibility: visible; */ + display: none; + } +`; + +export const ListContent = styled.div` + display: inline-flex; + margin-left: ${Size.Medium}; + + & > div { + flex: 1 0 auto; + scroll-snap-align: start; + scroll-margin-left: ${Size.Large}; + margin-right: ${Size.Medium}; + + @media (max-width: 915px) { + scroll-margin-left: ${Size.Medium}; + margin-right: ${Size.Smallest}; + } + } +`; diff --git a/src/routes/Route.tsx b/src/routes/Route.tsx index b41d03a..9c5194e 100644 --- a/src/routes/Route.tsx +++ b/src/routes/Route.tsx @@ -6,7 +6,7 @@ import { } from 'react-router-dom'; import { useAuth } from 'domains/Auth/hooks'; -import RouteEnum from 'routes/enums/Route'; +import RouteEnum from 'routes/enums'; interface RouteProps extends ReactDOMRouteProps { isPrivate?: boolean; diff --git a/src/routes/enums/Route.ts b/src/routes/enums/index.ts similarity index 100% rename from src/routes/enums/Route.ts rename to src/routes/enums/index.ts diff --git a/src/routes/index.tsx b/src/routes/index.tsx index c75cc04..f19dc4e 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Switch } from 'react-router-dom'; import Route from 'routes/Route'; -import RouteEnum from 'routes/enums/Route'; +import RouteEnum from 'routes/enums'; import { Home, Movie, Login, Signup, Profile, Favorites } from 'screens'; diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx index 615dd09..9194c92 100644 --- a/src/screens/Home/index.tsx +++ b/src/screens/Home/index.tsx @@ -1,15 +1,31 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; + +import Popular from 'domains/Movie/api/Popular'; +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'; const Home: React.FC = () => { + const [movieList, setMovieList] = useState([] as MovieResponse[]); + useEffect(() => { + Popular().then(response => { + setMovieList(response); + }); + }, []); + return (
-
+ {/*
*/} + + + + {/*
*/}