WJ-19 - New: Person and PersonList;

WJ-19 - New: Map cast and crew;

src/components/Person/dtos/ContainerProps.ts

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

src/components/Person/dtos/index.ts

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

src/components/Person/index.tsx

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Route from 'routes/enums';
+import {
+  Container,
+  Profile,
+  NameContainer,
+  PersonName,
+  CharacterName,
+} from './styles';
+
+import Props from './dtos';
+
+const Person: React.FC<Props> = ({ large = false, ...person }) => {
+  const history = useHistory();
+
+  const handleRedirect = useCallback(() => {
+    // history.push(`${Route.MOVIE}/${person.id}`);
+  }, [history, person.id]);
+
+  return (
+    <Container large={large}>
+      <Profile src={person.profile} onClick={handleRedirect} />
+      <NameContainer>
+        <PersonName>{person.name}</PersonName>
+        <CharacterName>{person.character}</CharacterName>
+      </NameContainer>
+    </Container>
+  );
+};
+
+export default Person;

src/components/Person/styles.ts

@@ -0,0 +1,61 @@
+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;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    cursor: pointer;
+
+    img {
+      width: 110%;
+      height: 110%;
+    }
+  }
+`;
+
+export const Profile = styled.img`
+  margin-top: -5rem;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: width 0.2s, height 0.2s;
+`;
+
+export const NameContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  height: 7.4rem;
+  width: 100%;
+  background: ${Color.Fill};
+  overflow: hidden;
+  padding: ${Size.Smallest};
+`;
+
+export const PersonName = styled.div`
+  font-size: ${Size.Small};
+  color: ${Color.Secondary};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const CharacterName = styled.div`
+  font-size: ${Size.Small};
+  color: ${Color.Text};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

src/components/index.ts

@@ -5,4 +5,5 @@ export { default as EnvironmentLabel } from './EnvironmentLabel';
 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 Tooltip } from './Tooltip';

src/containers/PersonList/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/PersonList/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { ReactComponent as Loading } from 'assets/loading.svg';
+
+import { Wrapper } from 'components/Layout';
+import Person from 'components/Person';
+import {
+  Container,
+  Title,
+  LoadingContainer,
+  ListContainer,
+  ListContent,
+  MessageContainer,
+} from './styles';
+
+import Props from './dtos';
+
+const PersonList: React.FC<Props> = ({
+  theme,
+  background,
+  color,
+  title,
+  data,
+  isLoading = false,
+  loaderColor,
+  message = 'Não há resultados.',
+}) => {
+  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>
+            <ListContent>
+              {data.map(person => (
+                <Person key={person.id} {...person} />
+              ))}
+            </ListContent>
+          </ListContainer>
+        )}
+
+        {!isLoading && data.length === 0 && (
+          <MessageContainer>{message}</MessageContainer>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default PersonList;

src/containers/PersonList/styles.ts

@@ -0,0 +1,96 @@
+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`
+  height: calc(${PosterHeight.Default} + 5px);
+  overflow-y: hidden;
+  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;
+  padding: 0 2px;
+
+  @media (max-width: 1280px) {
+    margin-left: ${Size.Medium};
+    margin-right: ${Size.Smallest};
+  }
+
+  & > div {
+    flex: 1 0 auto;
+    scroll-snap-align: start;
+    scroll-margin-left: ${Size.Large};
+    margin-right: ${Size.Medium};
+
+    @media (max-width: 1280px) {
+      scroll-margin-left: ${Size.Medium};
+      margin-right: ${Size.Smallest};
+    }
+  }
+
+  & > div:last-child {
+    margin-right: 0;
+
+    @media (max-width: 1280px) {
+      margin-right: ${Size.Default};
+    }
+  }
+`;
+
+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

@@ -2,3 +2,4 @@ export { default as Footer } from './Footer';
 export { default as Header } from './Header';
 export { default as Highlights } from './Highlights';
 export { default as MovieList } from './MovieList';
+export { default as PersonList } from './PersonList';

src/domains/Movie/api/Credits/Response.ts

@@ -1,25 +1,7 @@
+import Cast from 'domains/Movie/api/Credits/dtos/Cast';
+import Crew from 'domains/Movie/api/Credits/dtos/Crew';
+
 export default interface Response {
-  cast: [
-    {
-      castId: number;
-      character: string;
-      creditId: string;
-      gender?: number;
-      id: number;
-      name: string;
-      order: number;
-      profilePath?: string;
-    },
-  ];
-  crew: [
-    {
-      creditId: string;
-      department: string;
-      gender?: number;
-      id: number;
-      job: string;
-      name: string;
-      profilePath?: string;
-    },
-  ];
+  cast: Cast[];
+  crew: Crew[];
 }

src/domains/Movie/api/Credits/dtos/Cast.ts

@@ -0,0 +1,10 @@
+export default interface Cast {
+  castId: number;
+  character: string;
+  creditId: string;
+  gender?: number;
+  id: number;
+  name: string;
+  order: number;
+  profile: string;
+}

src/domains/Movie/api/Credits/dtos/Crew.ts

@@ -0,0 +1,9 @@
+export default interface Crew {
+  creditId: string;
+  department: string;
+  gender?: number;
+  id: number;
+  job: string;
+  name: string;
+  profile: string;
+}

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

@@ -13,7 +13,7 @@ export default interface Response {
       name: string;
     },
   ];
-  genresNames: string[];
+  genresNames: string;
   homepage?: string;
   id: number;
   originalTitle: string;