Merge pull request #94 from 90lucasgabriel/feature/WJ-24

WJ-24 - Create Person screen

src/components/Profile/dtos/ContainerProps.ts

@@ -0,0 +1,3 @@
+export default interface ContainerProps {
+  large?: boolean;
+}

src/components/Profile/dtos/index.ts

@@ -0,0 +1,6 @@
+import ContainerProps from './ContainerProps';
+
+export default interface PersonProps extends ContainerProps {
+  id: number;
+  profile?: string;
+}

src/components/Profile/index.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Route from 'routes/enums';
+import { Container, ProfileImage } from './styles';
+
+import Props from './dtos';
+
+const Movie: React.FC<Props> = ({ large = false, ...person }) => {
+  const history = useHistory();
+
+  const handleRedirect = useCallback(() => {
+    history.push(`${Route.PERSON}/${person.id}`);
+  }, [history, person.id]);
+
+  if (!person.profile) {
+    return null;
+  }
+
+  return (
+    <Container large={large}>
+      <ProfileImage src={person.profile} onClick={handleRedirect} />
+    </Container>
+  );
+};
+
+export default Movie;

src/components/Profile/styles.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import { Color, PosterHeight, PosterWidth, Size } from 'shared/enums';
+import ContainerProps from './dtos/ContainerProps';
+
+export const Container = styled.div<ContainerProps>`
+  position: relative;
+  width: ${props => (props.large ? PosterWidth.Large : PosterWidth.Default)};
+  height: ${props => (props.large ? PosterHeight.Large : PosterHeight.Default)};
+  border-radius: ${Size.Smallest};
+  overflow: hidden;
+
+  border: ${props => (props.large ? 0 : `1px solid ${Color.FillSecondary}`)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    cursor: pointer;
+
+    img {
+      width: 110%;
+      height: 110%;
+    }
+  }
+`;
+
+export const ProfileImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: width 0.2s, height 0.2s;
+`;

src/components/index.ts

@@ -6,4 +6,5 @@ export { default as Input } from './Input';
 export { default as Movie } from './Movie';
 export { default as MovieHighlight } from './MovieHighlight';
 export { default as Person } from './Person';
+export { default as Profile } from './Profile';
 export { default as Tooltip } from './Tooltip';

src/containers/Filmography/dtos/index.ts

@@ -0,0 +1,12 @@
+import DefaultProps from 'shared/dtos';
+import MovieProps from 'components/Movie/dtos';
+import FavoriteProps from 'domains/Favorites/api/List/Response';
+import { Color } from 'shared/enums';
+
+export default interface Props extends DefaultProps {
+  title?: string;
+  data: any[];
+  isLoading?: boolean;
+  loaderColor?: Color;
+  message?: string;
+}

src/containers/Filmography/index.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Route from 'routes/enums';
+
+import { ReactComponent as Loading } from 'assets/loading.svg';
+import { Wrapper } from 'components/Layout';
+import {
+  Container,
+  Title,
+  LoadingContainer,
+  ListContainer,
+  ItemContainer,
+  YearLabel,
+  MovieName,
+  CharacterName,
+  MessageContainer,
+} from './styles';
+
+import Props from './dtos';
+
+const Filmography: React.FC<Props> = ({
+  theme,
+  background,
+  color,
+  title,
+  data,
+  isLoading = false,
+  loaderColor,
+  message = 'Não há resultados.',
+}) => {
+  const history = useHistory();
+
+  const handleRedirect = useCallback(
+    (movie: any) => {
+      if (movie.mediaType === 'movie') {
+        history.push(`${Route.MOVIE}/${movie.id}`);
+      }
+    },
+    [history],
+  );
+
+  return (
+    <Wrapper theme={theme} background={background} color={color}>
+      <Container>
+        {title && (
+          <Title theme={theme} color={color}>
+            {title}
+          </Title>
+        )}
+
+        {isLoading && (
+          <LoadingContainer theme={theme} loaderColor={loaderColor}>
+            <Loading />
+          </LoadingContainer>
+        )}
+
+        {!isLoading && data.length > 0 && (
+          <ListContainer>
+            {data.map(movie => (
+              <ItemContainer
+                key={movie.id}
+                onClick={() => handleRedirect(movie)}
+              >
+                <YearLabel>{movie.year} - </YearLabel>
+                <MovieName>{movie.title || movie.name}</MovieName>
+                <CharacterName>
+                  {movie.character && ` como ${movie.character}`}
+                </CharacterName>
+              </ItemContainer>
+            ))}
+          </ListContainer>
+        )}
+
+        {!isLoading && data.length === 0 && (
+          <MessageContainer>{message}</MessageContainer>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default Filmography;

src/containers/Filmography/styles.ts

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+
+import DefaultProps from 'shared/dtos';
+import { Container as DefaultContainer } from 'components/Layout';
+import { Color, PosterHeight, Size } from 'shared/enums';
+import { getColor } from 'shared/utils';
+
+interface LoadingProps {
+  loaderColor?: string;
+}
+
+export const Container = styled(DefaultContainer)`
+  padding: ${Size.Medium} 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Title = styled.h2<DefaultProps>`
+  margin-bottom: ${Size.Small};
+  color: ${props => getColor(props.theme, props.color)};
+
+  @media (max-width: 1280px) {
+    margin-left: ${Size.Medium};
+  }
+`;
+
+export const LoadingContainer = styled.div<LoadingProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(${PosterHeight.Default});
+
+  svg {
+    height: ${Size.Largest};
+    width: ${Size.Largest};
+    fill: ${props => getColor(props.theme, props.loaderColor)};
+  }
+`;
+
+export const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ItemContainer = styled.div`
+  font-size: ${Size.Default};
+  color: ${Color.Text};
+  padding: ${Size.Medium} 0;
+  border-bottom: 1px solid ${Color.FillSecondary};
+  text-decoration: none;
+  transition: background 0.4s;
+
+  &:hover {
+    background: ${Color.FillSecondary};
+    cursor: pointer;
+  }
+
+  @media (max-width: 1280px) {
+    margin-left: ${Size.Medium};
+    margin-right: ${Size.Medium};
+  }
+`;
+
+export const YearLabel = styled.span``;
+
+export const MovieName = styled.span`
+  font-weight: 500;
+`;
+
+export const CharacterName = styled.span``;
+
+export const MessageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  height: calc(${PosterHeight.Default} / 3);
+  color: ${Color.Text};
+
+  @media (max-width: 1280px) {
+    margin-left: ${Size.Medium};
+  }
+`;

src/containers/index.ts

@@ -1,3 +1,4 @@
+export { default as Filmography } from './Filmography';
 export { default as Footer } from './Footer';
 export { default as Header } from './Header';
 export { default as Highlights } from './Highlights';

src/domains/Person/api/Details/Movie.ts

@@ -0,0 +1,11 @@
+import MovieDetails from 'domains/Movie/api/Details/Response';
+
+export default interface Movie extends MovieDetails {
+  character: string;
+  year?: string;
+  originalDate: string;
+
+  firstAirDate?: string;
+  name?: string;
+  mediaType?: string;
+}

src/domains/Person/api/Details/Params.ts

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

src/domains/Person/api/Details/RawMovie.ts

@@ -0,0 +1,11 @@
+import RawMovieDetails from 'domains/Movie/api/Details/RawResponse';
+
+export default interface RawMovie extends RawMovieDetails {
+  character: string;
+  year?: string;
+  originalDate: string;
+
+  first_air_date?: string;
+  name?: string;
+  media_type?: string;
+}

src/domains/Person/api/Details/RawResponse.ts

@@ -0,0 +1,24 @@
+// import Recommendations from 'domains/Movie/api/Recommendations/RawResponse';
+import RawMovie from 'domains/Person/api/Details/RawMovie';
+
+export default interface RawResponse {
+  id: number;
+  name: string;
+
+  biography: string;
+  popularity: number;
+  place_of_birth?: string;
+  profile_path?: string;
+
+  known_for_department: string;
+  birthday?: string;
+  deathday?: string;
+
+  gender: number;
+  also_known_as: string[];
+  adult: boolean;
+  imdb_id: string;
+  homepage?: string;
+
+  combined_credits?: { cast: RawMovie[] };
+}

src/domains/Person/api/Details/Response.ts

@@ -0,0 +1,24 @@
+// import Recommendations from 'domains/Movie/api/Recommendations/Response';
+import Movie from 'domains/Person/api/Details/Movie';
+
+export default interface Response {
+  id: number;
+  name: string;
+  profile?: string;
+
+  placeOfBirth?: string;
+  biography: string;
+  birthday?: string;
+  deathday?: string;
+  popularity: number;
+
+  knownForDepartment: string;
+  gender: string;
+  alsoKnownAs: string[];
+  adult: boolean;
+  imdbId: string;
+  homepage?: string;
+
+  knownBy?: Movie[];
+  filmography?: Movie[];
+}