WJ-14 - New: Movie component;

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<Props>`
+const BasicLayout = styled.div<DefaultProps>`
   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,15 +36,15 @@ const BasicLayout = styled.div<Props>`
 export const ColumnLayout = styled(BasicLayout)`
   position: absolute;
   min-height: 100%;
-  min-width: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
 `;
 
 export const RowLayout = styled(BasicLayout)`
   position: absolute;
   min-height: 100%;
-  min-width: 100%;
+  width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

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';

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';

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;
+}

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<Props> = ({ ...movie }) => {
+  const history = useHistory();
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  const handleFavorite = useCallback(() => {
+    setIsFavorite(!isFavorite);
+  }, [isFavorite]);
+
+  return (
+    <Container>
+      <IconButton onClick={handleFavorite}>
+        <BsHeartFill fill={isFavorite ? Color.Primary : Color.Empty} />
+      </IconButton>
+      <Poster
+        src={movie.poster}
+        onClick={() => history.push(`${Route.MOVIE}/${movie.id}`)}
+      />
+    </Container>
+  );
+};
+
+export default Movie;

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;
+`;

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[];
+}

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<Props> = ({
+  theme,
+  background,
+  color,
+  title,
+  data,
+}) => {
+  return (
+    <Wrapper theme={theme} background={background} color={color}>
+      <Container>
+        {title && <Title>{title}</Title>}
+        <ListContainer>
+          <ListContent>
+            {data.map(movie => (
+              <Movie key={movie.id} {...movie} />
+            ))}
+          </ListContent>
+        </ListContainer>
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default MovieList;

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};
+    }
+  }
+`;

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;

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';
 

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 (
     <ColumnLayout>
       <Header />
-      <div style={{ flex: 1 }}></div>
+      {/* <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> */}
       <Footer />
       <HeaderBackground />
     </ColumnLayout>

src/screens/Login/index.tsx

@@ -5,7 +5,7 @@ import { FormHandles } from '@unform/core';
 import * as Yup from 'yup';
 
 import { useAuth } from 'domains/Auth/hooks';
-import Route from 'routes/enums/Route';
+import Route from 'routes/enums';
 import LoginFormData from 'screens/Login/dtos/LoginFormData';
 import getValidationErrors from 'shared/utils/getValidationErrors';
 

src/screens/Signup/index.tsx

@@ -4,7 +4,7 @@ import { FiLock, FiMail, FiUser } from 'react-icons/fi';
 import { FormHandles } from '@unform/core';
 import * as Yup from 'yup';
 
-import Route from 'routes/enums/Route';
+import Route from 'routes/enums';
 import SignupFormData from 'screens/Signup/dtos/SignupFormData';
 import getValidationErrors from 'shared/utils/getValidationErrors';
 import api from 'services/api';

src/shared/dtos/index.ts

@@ -0,0 +1,5 @@
+export default interface Props {
+  theme?: string;
+  background?: string;
+  color?: string;
+}

src/shared/enums/Color.ts

@@ -5,6 +5,7 @@ enum Color {
   FillSecondary = '#EFEFEF',
   Text = '#777',
   Error = '#c53030',
+  Empty = '#0F0F0F',
 }
 
 export default Color;

src/shared/enums/PosterHeight.ts

@@ -0,0 +1,6 @@
+enum PosterHeight {
+  Default = '25.3rem',
+  Large = '45.2rem',
+}
+
+export default PosterHeight;

src/shared/enums/PosterWidth.ts

@@ -0,0 +1,6 @@
+enum PosterWidth {
+  Default = '16.5rem',
+  Large = '29.5rem',
+}
+
+export default PosterWidth;

src/shared/enums/Size.ts

@@ -1,5 +1,5 @@
 enum Size {
-  Smallest = '0.8rem',
+  Smallest = '1rem',
   Small = '1.4rem',
   Default = '1.8rem',
   Medium = '2.4rem',

src/shared/enums/index.ts

@@ -1,2 +1,4 @@
 export { default as Color } from './Color';
+export { default as PosterHeight } from './PosterHeight';
+export { default as PosterWidth } from './PosterWidth';
 export { default as Size } from './Size';

src/shared/styles/global.ts

@@ -30,9 +30,14 @@ export default createGlobalStyle`
     font-family: 'Ubuntu', -apple-system, system-ui, sans-serif;
     font-weight: 100;
   }
-  h1, h2, h3, h4, h5, h6, strong {
+  h1, strong {
     font-weight: 400,
   }
+
+  h2, h3, h4, h5, h6 {
+    font-weight: 100;
+  }
+
   button {
     cursor: pointer;
   }