diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx index 2d898e1..2dddb3e 100644 --- a/src/components/Button/index.stories.tsx +++ b/src/components/Button/index.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Story, Meta } from '@storybook/react'; import { FaRegUserCircle } from 'react-icons/fa'; -import Props from 'components/Button/dtos'; +import Props from 'components/Button/types'; import Button from 'components/Button'; // Config and Controls diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index b6e5818..e6068e9 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ReactComponent as Loading } from 'assets/loading.svg'; import { Color } from 'shared/enums'; -import Props from './dtos'; +import Props from './types'; import { Container } from './styles'; const Button: React.FC = ({ diff --git a/src/components/Button/dtos/index.ts b/src/components/Button/types/index.ts similarity index 100% rename from src/components/Button/dtos/index.ts rename to src/components/Button/types/index.ts diff --git a/src/components/Input/index.stories.tsx b/src/components/Input/index.stories.tsx index 691beac..729db9e 100644 --- a/src/components/Input/index.stories.tsx +++ b/src/components/Input/index.stories.tsx @@ -4,7 +4,7 @@ import { FormHandles } from '@unform/core'; import { Form } from '@unform/web'; import { FaRegUserCircle } from 'react-icons/fa'; -import Props from 'components/Input/dtos'; +import Props from 'components/Input/types'; import Input from 'components/Input'; // Config and Controls diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 43ebde3..ca411c8 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -3,7 +3,7 @@ import { FiAlertTriangle } from 'react-icons/fi'; import { useField } from '@unform/core'; import { Color } from 'shared/enums'; -import Props from './dtos'; +import Props from './types'; import { Container, Error } from './styles'; const Input: React.FC = ({ diff --git a/src/components/Input/dtos/index.ts b/src/components/Input/types/index.ts similarity index 100% rename from src/components/Input/dtos/index.ts rename to src/components/Input/types/index.ts diff --git a/src/components/Movie/dtos/ContainerProps.ts b/src/components/Movie/dtos/ContainerProps.ts deleted file mode 100644 index e1ea761..0000000 --- a/src/components/Movie/dtos/ContainerProps.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default interface ContainerProps { - size?: 'small' | 'large'; -} diff --git a/src/components/Movie/index.tsx b/src/components/Movie/index.tsx deleted file mode 100644 index 79b0f0a..0000000 --- a/src/components/Movie/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; -import { BsHeartFill } from 'react-icons/bs'; - -import { Type } from 'domains/Favorites/enums'; -import { useAuth } from 'domains/Auth/hooks'; -import { useFavorite } from 'domains/Favorites/hooks'; -import Route from 'routes/enums'; -import { Color } from 'shared/enums'; -import { Container, IconButton, Poster } from './styles'; - -import Props from './dtos'; - -const Movie: React.FC = ({ size, ...movie }) => { - const history = useHistory(); - const { user } = useAuth(); - const { favoriteList = [], UpdateFavorite } = useFavorite(); - const [isFavorite, setIsFavorite] = useState(movie.favorite); - - const handleFavorite = useCallback(async () => { - try { - if (!user) { - alert('Entre com sua conta para adicionar aos favoritos.'); - return; - } - - await UpdateFavorite(movie.id, movie.mediaType); - } catch (error) { - console.log('handleFavorite -> error', error); - } - }, [user, UpdateFavorite, movie.id, movie.mediaType]); - - const handleRedirect = useCallback(() => { - if (movie.mediaType === Type.TV) { - history.push(`${Route.TV}/${movie.id}`); - - return; - } - - history.push(`${Route.MOVIE}/${movie.id}`); - }, [history, movie.id, movie.mediaType]); - - // Check if movie is in favorite list and change status - useEffect(() => { - // console.log('movie', movie); - if (user) { - const response = favoriteList.find( - favorite => - favorite.entityId === movie.id && favorite.typeId === movie.mediaType, - ); - - setIsFavorite(!!response); - } - }, [user, favoriteList, movie.id, movie.mediaType]); - - if (!movie.poster && !movie.backdrop) { - return null; - } - - return ( - - - - - - - ); -}; - -export default Movie; diff --git a/src/components/Movie/styles.ts b/src/components/Movie/styles.ts deleted file mode 100644 index deb90db..0000000 --- a/src/components/Movie/styles.ts +++ /dev/null @@ -1,63 +0,0 @@ -import styled, { css } from 'styled-components'; - -import { Color, PosterHeight, PosterWidth, Size } from 'shared/enums'; -import ContainerProps from './dtos/ContainerProps'; - -export const Container = styled.div` - position: relative; - border-radius: ${Size.Smallest}; - overflow: hidden; - - width: ${PosterWidth.Default}; - height: ${PosterHeight.Default}; - border: 1px solid ${Color.FillSecondary}; - - ${props => - props?.size === 'small' && - css` - width: ${PosterWidth.Small}; - height: ${PosterHeight.Small}; - border: 1px solid ${Color.FillSecondary}; - `} - - ${props => - props.size === 'large' && - css` - width: ${PosterWidth.Large}; - height: ${PosterHeight.Large}; - border: 0; - `} - - display: flex; - align-items: center; - justify-content: center; - - &:hover { - cursor: pointer; - - img { - width: 110%; - height: 110%; - } - } -`; - -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; - transition: width 0.2s, height 0.2s; -`; diff --git a/src/components/MovieHighlight/index.stories.tsx b/src/components/MovieHighlight/index.stories.tsx index d0c399b..c9b3933 100644 --- a/src/components/MovieHighlight/index.stories.tsx +++ b/src/components/MovieHighlight/index.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Story, Meta } from '@storybook/react'; -import Props from 'components/MovieHighlight/dtos'; +import Props from 'components/MovieHighlight/types'; import MovieHighlight from 'components/MovieHighlight'; // Config and Controls diff --git a/src/components/MovieHighlight/index.tsx b/src/components/MovieHighlight/index.tsx index b673cff..38f5953 100644 --- a/src/components/MovieHighlight/index.tsx +++ b/src/components/MovieHighlight/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Route from 'routes/enums'; -import Props from './dtos'; +import Props from './types'; import { Container, Backdrop, Caption, Title, Overview } from './styles'; const MovieHighlight: React.FC = ({ showOverview = true, ...movie }) => { diff --git a/src/components/MovieHighlight/dtos/index.ts b/src/components/MovieHighlight/types/index.ts similarity index 100% rename from src/components/MovieHighlight/dtos/index.ts rename to src/components/MovieHighlight/types/index.ts diff --git a/src/components/Person/dtos/index.ts b/src/components/Person/dtos/index.ts deleted file mode 100644 index 7c57e1d..0000000 --- a/src/components/Person/dtos/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import ContainerProps from './ContainerProps'; - -export default interface PersonProps extends ContainerProps { - id: number; - profile: string; - name: string; - character: string; -} diff --git a/src/components/Person/index.tsx b/src/components/Person/index.tsx deleted file mode 100644 index f03a913..0000000 --- a/src/components/Person/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -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 = ({ large = false, ...person }) => { - const history = useHistory(); - - const handleRedirect = useCallback(() => { - history.push(`${Route.PERSON}/${person.id}`); - }, [history, person.id]); - - return ( - - - - {person.name} - {person.character} - - - ); -}; - -export default Person; diff --git a/src/components/Person/styles.ts b/src/components/Person/styles.ts deleted file mode 100644 index c1684ec..0000000 --- a/src/components/Person/styles.ts +++ /dev/null @@ -1,61 +0,0 @@ -import styled from 'styled-components'; - -import { Color, PosterHeight, PosterWidth, Size } from 'shared/enums'; -import ContainerProps from './dtos/ContainerProps'; - -export const Container = styled.div` - 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 2px 4px rgba(0, 0, 0, 0.3); - 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; -`; diff --git a/src/components/Profile/dtos/ContainerProps.ts b/src/components/Profile/dtos/ContainerProps.ts deleted file mode 100644 index a543f27..0000000 --- a/src/components/Profile/dtos/ContainerProps.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default interface ContainerProps { - large?: boolean; -} diff --git a/src/components/Profile/dtos/index.ts b/src/components/Profile/dtos/index.ts deleted file mode 100644 index b1d158f..0000000 --- a/src/components/Profile/dtos/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import ContainerProps from './ContainerProps'; - -export default interface PersonProps extends ContainerProps { - id: number; - profile?: string; -} diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx deleted file mode 100644 index 2a53d68..0000000 --- a/src/components/Profile/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -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 = ({ large = false, ...person }) => { - const history = useHistory(); - - const handleRedirect = useCallback(() => { - history.push(`${Route.PERSON}/${person.id}`); - }, [history, person.id]); - - if (!person.profile) { - return null; - } - - return ( - - - - ); -}; - -export default Movie; diff --git a/src/components/Profile/styles.ts b/src/components/Profile/styles.ts deleted file mode 100644 index 39a479e..0000000 --- a/src/components/Profile/styles.ts +++ /dev/null @@ -1,33 +0,0 @@ -import styled from 'styled-components'; - -import { Color, PosterHeight, PosterWidth, Size } from 'shared/enums'; -import ContainerProps from './dtos/ContainerProps'; - -export const Container = styled.div` - 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; -`; diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx index 667bc27..50c3ab8 100644 --- a/src/components/SearchInput/index.tsx +++ b/src/components/SearchInput/index.tsx @@ -9,7 +9,7 @@ const SearchInput: React.FC> = ({ diff --git a/src/components/SearchInput/styles.ts b/src/components/SearchInput/styles.ts index 6bc411a..2084b75 100644 --- a/src/components/SearchInput/styles.ts +++ b/src/components/SearchInput/styles.ts @@ -4,7 +4,7 @@ import { Color, Size } from 'shared/enums'; export const Container = styled.div` display: flex; flex: 1; - padding: ${Size.Default}; + padding: ${Size.Default} 0; `; export const Input = styled.input` diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 08fad7e..82cae85 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import TooltipProps from 'components/Tooltip/dtos'; +import TooltipProps from 'components/Tooltip/types'; import { Container, Content } from './styles'; const Tooltip: React.FC = ({ value, children, ...rest }) => { diff --git a/src/components/Tooltip/dtos/index.ts b/src/components/Tooltip/types/index.ts similarity index 100% rename from src/components/Tooltip/dtos/index.ts rename to src/components/Tooltip/types/index.ts diff --git a/src/components/index.ts b/src/components/index.ts index 32841b2..8fe95bf 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,9 +3,6 @@ export { ColumnLayout, RowLayout, Wrapper, Container } from 'components/Layout'; export { default as Button } from './Button'; 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 Profile } from './Profile'; export { default as SearchInput } from './SearchInput'; export { default as Tooltip } from './Tooltip'; diff --git a/src/components/Movie/index.spec.tsx b/src/containers/EntityImage/index.spec.tsx similarity index 78% rename from src/components/Movie/index.spec.tsx rename to src/containers/EntityImage/index.spec.tsx index c20cf98..2b249ca 100644 --- a/src/components/Movie/index.spec.tsx +++ b/src/containers/EntityImage/index.spec.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { render, fireEvent, waitFor, act } from '@testing-library/react'; -import { Color } from 'shared/enums'; -import Movie from 'components/Movie'; +import { Color, EntityType } from 'shared/enums'; +import EntityImage from 'containers/EntityImage'; const mockedUpdateFavorite = jest.fn(); const mockedHistoryPush = jest.fn(); @@ -15,11 +15,16 @@ jest.mock('react-router-dom', () => { }; }); -describe('Movie Component', () => { +describe('EntityImage Component', () => { it('should render a movie with poster.', () => { // Arrange const { container, getByRole } = render( - , + , ); // Act @@ -33,7 +38,12 @@ describe('Movie Component', () => { it('should render a movie with backdrop.', () => { // Arrange const { container, getByRole } = render( - , + , ); // Act @@ -46,7 +56,9 @@ describe('Movie Component', () => { it('should not render a movie when poster and backdrop are null.', () => { // Arrange and Act - const { container } = render(); + const { container } = render( + , + ); // Assert expect(container).toBeEmptyDOMElement(); @@ -57,7 +69,12 @@ describe('Movie Component', () => { // Arrange const handleRedirect = jest.fn(); const { getByRole } = render( - , + , ); // Act @@ -92,7 +109,12 @@ describe('Movie Component', () => { }); const { getByRole } = render( - , + , ); // Act @@ -125,7 +147,12 @@ describe('Movie Component', () => { }); const { getByRole } = render( - , + , ); // Act @@ -158,7 +185,12 @@ describe('Movie Component', () => { }); const { getByRole } = render( - , + , ); // Act diff --git a/src/components/Movie/index.stories.tsx b/src/containers/EntityImage/index.stories.tsx similarity index 73% rename from src/components/Movie/index.stories.tsx rename to src/containers/EntityImage/index.stories.tsx index 97f6b27..c34e209 100644 --- a/src/components/Movie/index.stories.tsx +++ b/src/containers/EntityImage/index.stories.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { Story, Meta } from '@storybook/react'; -import Props from 'components/Movie/dtos'; -import Movie from 'components/Movie'; +import Props from 'containers/EntityImage/types'; +import { EntityImage } from 'containers'; // Config and Controls export default { - title: 'Components/Movie', - component: Movie, + title: 'Containers/EntityImage', + component: EntityImage, argTypes: { favorite: { control: 'boolean' }, poster: { control: 'text' }, @@ -23,7 +23,7 @@ export default { // Component const Template: Story = args => { - return ; + return ; }; // Stories diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx new file mode 100644 index 0000000..1393f16 --- /dev/null +++ b/src/containers/EntityImage/index.tsx @@ -0,0 +1,102 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { useHistory } from 'react-router-dom'; +import { BsHeartFill } from 'react-icons/bs'; + +import { getEntityRoute } from 'shared/utils'; +import { useAuth } from 'domains/Auth/hooks'; +import { useFavorite } from 'domains/Favorites/hooks'; +import { Color } from 'shared/enums'; +import { + Container, + EntityContainer, + IconButton, + FeaturedImage, + InfoContainer, + InfoTitle, + InfoSubtitle, +} from './styles'; + +import Props from './types'; + +const EntityImage: React.FC = ({ + size, + showShadow, + hideFavoriteButton, + disabled, + showInfo, + hideSubtitle, + showEmpty, + ...entity +}) => { + const history = useHistory(); + const { user } = useAuth(); + const { favoriteList = [], UpdateFavorite } = useFavorite(); + const [isFavorite, setIsFavorite] = useState(entity.favorite); + + const handleFavorite = useCallback(async () => { + try { + if (!user) { + alert('Entre com sua conta para adicionar aos favoritos.'); + return; + } + + await UpdateFavorite(entity.id, entity.mediaType); + } catch (error) { + console.log('handleFavorite -> error', error); + } + }, [user, UpdateFavorite, entity.id, entity.mediaType]); + + const handleRedirect = useCallback(() => { + if (!disabled) { + const entityRoute = getEntityRoute(entity.mediaType); + history.push(`${entityRoute}/${entity.id}`); + } + }, [disabled, history, entity.id, entity.mediaType]); + + // Check if entity is in favorite list and change status + useEffect(() => { + if (user) { + const response = favoriteList.find( + favorite => + favorite.entityId === entity.id && + favorite.typeId === entity.mediaType, + ); + + setIsFavorite(!!response); + } + }, [user, favoriteList, entity.id, entity.mediaType]); + + if (!entity.featuredImage && !entity.backdrop && !showEmpty) { + return null; + } + + return ( + + {!hideFavoriteButton && ( + + + + )} + + + + {showInfo && ( + + {entity.title} + {!hideSubtitle && {entity?.subtitle}} + + )} + + + ); +}; + +export default EntityImage; diff --git a/src/containers/EntityImage/styles.ts b/src/containers/EntityImage/styles.ts new file mode 100644 index 0000000..c960cdc --- /dev/null +++ b/src/containers/EntityImage/styles.ts @@ -0,0 +1,128 @@ +import styled, { css } from 'styled-components'; + +import { Color, PosterHeight, PosterWidth, Size } from 'shared/enums'; +import ContainerProps from './types/ContainerProps'; + +export const Container = styled.div` + position: relative; + border-radius: ${Size.Smallest}; + background: ${Color.FillSecondary}; + + ${props => + props.showShadow && + css` + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); + `} +`; + +export const EntityContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + + border-radius: ${Size.Smallest}; + overflow: hidden; + + width: ${PosterWidth.Default}; + height: ${PosterHeight.Default}; + + ${props => + props?.size === 'small' && + css` + width: ${PosterWidth.Small}; + height: ${PosterHeight.Small}; + border: 0; + `} + + ${props => + props.size === 'large' && + css` + width: ${PosterWidth.Large}; + height: ${PosterHeight.Large}; + border: 0; + `} + + + ${props => + props.showInfo && + css` + overflow: hidden; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + `} + + + ${props => + !props.disabled && + css` + &:hover { + cursor: pointer; + + img { + width: 110%; + height: 110%; + } + } + `} +`; + +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 FeaturedImage = styled.img` + width: 100%; + height: 100%; + object-fit: cover; + transition: width 0.2s, height 0.2s; + border: 0; + + ${props => + props.showInfo && + css` + margin-top: -${Size.Largest}; + `} +`; + +export const InfoContainer = styled.div` + position: absolute; + bottom: 0; + width: 100%; + line-height: ${Size.Default}; + background: ${Color.Fill}; + overflow: hidden; + padding: ${Size.Smallest}; + border-radius: 0 0 ${Size.Smallest} ${Size.Smallest}; + height: ${props => (props.hideSubtitle ? '5.4rem' : '7rem')}; +`; + +export const InfoTitle = styled.p` + font-size: ${Size.Small}; + color: ${Color.Secondary}; + + ${props => + props.hideSubtitle === false && + css` + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + `} +`; + +export const InfoSubtitle = styled.p` + font-size: ${Size.Small}; + color: ${Color.Text}; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; diff --git a/src/containers/EntityImage/types/ContainerProps.ts b/src/containers/EntityImage/types/ContainerProps.ts new file mode 100644 index 0000000..5064338 --- /dev/null +++ b/src/containers/EntityImage/types/ContainerProps.ts @@ -0,0 +1,9 @@ +export default interface ContainerProps { + size?: 'small' | 'large'; + showShadow?: boolean; + hideFavoriteButton?: boolean; + showInfo?: boolean; + hideSubtitle?: boolean; + disabled?: boolean; + showEmpty?: boolean; +} diff --git a/src/components/Movie/dtos/index.ts b/src/containers/EntityImage/types/index.ts similarity index 74% rename from src/components/Movie/dtos/index.ts rename to src/containers/EntityImage/types/index.ts index bc61813..6d28a03 100644 --- a/src/components/Movie/dtos/index.ts +++ b/src/containers/EntityImage/types/index.ts @@ -4,6 +4,9 @@ export default interface MovieProps extends ContainerProps { id: number; favorite: boolean; mediaType: number; - poster?: string; backdrop?: string; + + featuredImage?: string; + title?: string; + subtitle?: string; } diff --git a/src/containers/MovieList/index.stories.tsx b/src/containers/EntityImageList/index.stories.tsx similarity index 92% rename from src/containers/MovieList/index.stories.tsx rename to src/containers/EntityImageList/index.stories.tsx index 4554c9d..07071d5 100644 --- a/src/containers/MovieList/index.stories.tsx +++ b/src/containers/EntityImageList/index.stories.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { Story, Meta } from '@storybook/react'; -import Props from 'containers/MovieList/dtos'; -import MovieList from 'containers/MovieList'; +import Props from 'containers/EntityImageList/types'; +import EntityImageList from 'containers/EntityImageList'; // Config and Controls export default { - title: 'Containers/MovieList', - component: MovieList, + title: 'Containers/EntityImageList', + component: EntityImageList, argTypes: { data: { control: 'object' }, title: { control: 'text' }, @@ -95,7 +95,7 @@ export default { // Component const Template: Story = args => { - return ; + return ; }; // Stories diff --git a/src/containers/MovieList/index.tsx b/src/containers/EntityImageList/index.tsx similarity index 64% rename from src/containers/MovieList/index.tsx rename to src/containers/EntityImageList/index.tsx index 97e827a..c4e8a67 100644 --- a/src/containers/MovieList/index.tsx +++ b/src/containers/EntityImageList/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { ReactComponent as Loading } from 'assets/loading.svg'; import { Wrapper } from 'components/Layout'; -import Movie from 'components/Movie'; +import { EntityImage } from 'containers'; import { Container, Title, @@ -13,9 +13,9 @@ import { MessageContainer, } from './styles'; -import Props from './dtos'; +import Props from './types'; -const MovieList: React.FC = ({ +const EntityImageList: React.FC = ({ theme, background, color, @@ -24,6 +24,11 @@ const MovieList: React.FC = ({ isLoading = false, loaderColor, message = 'Não há resultados.', + showShadow, + hideFavoriteButton, + disabled, + showInfo, + hideSubtitle, }) => { return ( @@ -43,8 +48,16 @@ const MovieList: React.FC = ({ {!isLoading && data.length > 0 && ( - {data.map(movie => ( - + {data.map(entity => ( + ))} @@ -58,4 +71,4 @@ const MovieList: React.FC = ({ ); }; -export default MovieList; +export default EntityImageList; diff --git a/src/containers/PersonList/styles.ts b/src/containers/EntityImageList/styles.ts similarity index 100% rename from src/containers/PersonList/styles.ts rename to src/containers/EntityImageList/styles.ts diff --git a/src/containers/EntityImageList/types/index.ts b/src/containers/EntityImageList/types/index.ts new file mode 100644 index 0000000..62d7646 --- /dev/null +++ b/src/containers/EntityImageList/types/index.ts @@ -0,0 +1,13 @@ +import DefaultProps from 'shared/dtos'; +// import MovieProps from 'containers/EntityImage/dtos'; +// import FavoriteProps from 'domains/Favorites/api/List/Response'; +import { Color } from 'shared/enums'; +import ContainerProps from 'containers/EntityImage/types/ContainerProps'; + +export default interface Props extends DefaultProps, ContainerProps { + title?: string; + data: any[]; + isLoading?: boolean; + loaderColor?: Color; + message?: string; +} diff --git a/src/containers/EntitySummary/index.tsx b/src/containers/EntitySummary/index.tsx new file mode 100644 index 0000000..da7eccd --- /dev/null +++ b/src/containers/EntitySummary/index.tsx @@ -0,0 +1,39 @@ +import React, { useCallback } from 'react'; +import { useHistory } from 'react-router-dom'; + +import { getEntityRoute } from 'shared/utils'; +import Props from 'containers/EntitySummary/types'; + +import { EntityImage } from 'containers'; +import { + Container, + ImageContainer, + DetailsContainer, + Title, + Subtitle, + Description, +} from './styles'; + +const EntitySummary: React.FC = ({ data }) => { + const history = useHistory(); + + const handleRedirect = useCallback(() => { + const entityRoute = getEntityRoute(data.mediaType); + history.push(`${entityRoute}/${data.id}`); + }, [history, data.id, data.mediaType]); + + return ( + + + + + + {data.title} + {data.subtitle} + {data.description} + + + ); +}; + +export default EntitySummary; diff --git a/src/containers/Result/styles.ts b/src/containers/EntitySummary/styles.ts similarity index 75% rename from src/containers/Result/styles.ts rename to src/containers/EntitySummary/styles.ts index 371f962..18bd3b0 100644 --- a/src/containers/Result/styles.ts +++ b/src/containers/EntitySummary/styles.ts @@ -1,8 +1,7 @@ import styled from 'styled-components'; -import DefaultProps from 'shared/dtos'; -import { Color, Size } from 'shared/enums'; -import { getColor } from 'shared/utils'; +import ContainerProps from 'containers/EntitySummary/types/ContainerProps'; +import { Color, EntityType, Size } from 'shared/enums'; export const Container = styled.div` display: flex; @@ -26,9 +25,11 @@ export const DetailsContainer = styled.div` margin-left: ${Size.Medium}; `; -export const Title = styled.h3` +export const Title = styled.h3` margin-bottom: ${Size.Smallest}; - color: ${props => getColor(props.theme, props.color)}; + + color: ${props => + props.mediaType === EntityType.PERSON ? Color.Secondary : Color.Primary}; `; export const Subtitle = styled.p` diff --git a/src/components/Person/dtos/ContainerProps.ts b/src/containers/EntitySummary/types/ContainerProps.ts similarity index 66% rename from src/components/Person/dtos/ContainerProps.ts rename to src/containers/EntitySummary/types/ContainerProps.ts index a543f27..153420a 100644 --- a/src/components/Person/dtos/ContainerProps.ts +++ b/src/containers/EntitySummary/types/ContainerProps.ts @@ -1,3 +1,3 @@ export default interface ContainerProps { - large?: boolean; + mediaType?: number; } diff --git a/src/containers/EntitySummary/types/index.ts b/src/containers/EntitySummary/types/index.ts new file mode 100644 index 0000000..a867907 --- /dev/null +++ b/src/containers/EntitySummary/types/index.ts @@ -0,0 +1,6 @@ +import DefaultProps from 'shared/dtos'; +import ContainerProps from './ContainerProps'; + +export default interface ResultProps extends DefaultProps, ContainerProps { + data: any; +} diff --git a/src/containers/ResultList/index.tsx b/src/containers/EntitySummaryList/index.tsx similarity index 61% rename from src/containers/ResultList/index.tsx rename to src/containers/EntitySummaryList/index.tsx index 012303a..e083482 100644 --- a/src/containers/ResultList/index.tsx +++ b/src/containers/EntitySummaryList/index.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import Props from 'containers/ResultList/dtos'; +import Props from 'containers/EntitySummaryList/types'; import { ReactComponent as Loading } from 'assets/loading.svg'; -import { Result } from 'containers'; +import { EntitySummary } from 'containers'; import { Container } from './styles'; -const ResultList: React.FC = ({ +const EntitySummaryList: React.FC = ({ data = [], isLoading = false, theme, @@ -23,10 +23,10 @@ const ResultList: React.FC = ({ return ( {data.map((result: any) => { - return ; + return ; })} ); }; -export default ResultList; +export default EntitySummaryList; diff --git a/src/containers/ResultList/styles.ts b/src/containers/EntitySummaryList/styles.ts similarity index 100% rename from src/containers/ResultList/styles.ts rename to src/containers/EntitySummaryList/styles.ts diff --git a/src/containers/ResultList/dtos/index.ts b/src/containers/EntitySummaryList/types/index.ts similarity index 100% rename from src/containers/ResultList/dtos/index.ts rename to src/containers/EntitySummaryList/types/index.ts diff --git a/src/containers/Filmography/dtos/index.ts b/src/containers/Filmography/dtos/index.ts deleted file mode 100644 index bfc1e5d..0000000 --- a/src/containers/Filmography/dtos/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -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; -} diff --git a/src/containers/Filmography/index.tsx b/src/containers/Filmography/index.tsx index c12d352..537c68c 100644 --- a/src/containers/Filmography/index.tsx +++ b/src/containers/Filmography/index.tsx @@ -1,8 +1,7 @@ import React, { useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import Route from 'routes/enums'; -import { Type } from 'domains/Favorites/enums'; +import { getEntityRoute } from 'shared/utils'; import { ReactComponent as Loading } from 'assets/loading.svg'; import { Wrapper } from 'components/Layout'; @@ -18,7 +17,7 @@ import { MessageContainer, } from './styles'; -import Props from './dtos'; +import Props from './types'; const Filmography: React.FC = ({ theme, @@ -33,14 +32,9 @@ const Filmography: React.FC = ({ const history = useHistory(); const handleRedirect = useCallback( - (movie: any) => { - if (movie.mediaType === Type.TV) { - history.push(`${Route.TV}/${movie.id}`); - - return; - } - - history.push(`${Route.MOVIE}/${movie.id}`); + (entity: any) => { + const entityRoute = getEntityRoute(entity.mediaType); + history.push(`${entityRoute}/${entity.id}`); }, [history], ); @@ -62,15 +56,15 @@ const Filmography: React.FC = ({ {!isLoading && data.length > 0 && ( - {data.map(movie => ( + {data.map(entity => ( handleRedirect(movie)} + key={entity.id} + onClick={() => handleRedirect(entity)} > - {movie.year} - - {movie.title || movie.name} + {entity.year} - + {entity.title || entity.name} - {movie.character && ` como ${movie.character}`} + {entity.character && ` como ${entity.character}`} ))} diff --git a/src/containers/PersonList/dtos/index.ts b/src/containers/Filmography/types/index.ts similarity index 65% rename from src/containers/PersonList/dtos/index.ts rename to src/containers/Filmography/types/index.ts index 62323c6..a84b857 100644 --- a/src/containers/PersonList/dtos/index.ts +++ b/src/containers/Filmography/types/index.ts @@ -1,4 +1,6 @@ import DefaultProps from 'shared/dtos'; +// import MovieProps from 'containers/EntityImage/dtos'; +// import FavoriteProps from 'domains/Favorites/api/List/Response'; import { Color } from 'shared/enums'; export default interface Props extends DefaultProps { diff --git a/src/containers/Highlights/index.stories.tsx b/src/containers/Highlights/index.stories.tsx index 978f68e..bb525a2 100644 --- a/src/containers/Highlights/index.stories.tsx +++ b/src/containers/Highlights/index.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Story, Meta } from '@storybook/react'; -import Props from 'containers/Highlights/dtos'; +import Props from 'containers/Highlights/types'; import Highlights from 'containers/Highlights'; // Config and Controls diff --git a/src/containers/Highlights/index.tsx b/src/containers/Highlights/index.tsx index e9daff3..e80354b 100644 --- a/src/containers/Highlights/index.tsx +++ b/src/containers/Highlights/index.tsx @@ -4,7 +4,7 @@ import { Wrapper } from 'components/Layout'; import { MovieHighlight } from 'components'; import { Container, MajorContainer, MinorContainer } from './styles'; -import Props from './dtos'; +import Props from './types'; const Highlights: React.FC = ({ theme, background, color, movies }) => { if (!movies || movies.length === 0) { diff --git a/src/containers/Highlights/dtos/index.ts b/src/containers/Highlights/types/index.ts similarity index 100% rename from src/containers/Highlights/dtos/index.ts rename to src/containers/Highlights/types/index.ts diff --git a/src/containers/MovieList/dtos/index.ts b/src/containers/MovieList/dtos/index.ts deleted file mode 100644 index bfc1e5d..0000000 --- a/src/containers/MovieList/dtos/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -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; -} diff --git a/src/containers/MovieList/styles.ts b/src/containers/MovieList/styles.ts deleted file mode 100644 index 508922f..0000000 --- a/src/containers/MovieList/styles.ts +++ /dev/null @@ -1,95 +0,0 @@ -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` - margin-bottom: ${Size.Small}; - color: ${props => getColor(props.theme, props.color)}; - - @media (max-width: 1280px) { - margin-left: ${Size.Medium}; - } -`; - -export const LoadingContainer = styled.div` - 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: ${PosterHeight.Default}; - 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; - - @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}; - } -`; diff --git a/src/containers/PersonList/index.tsx b/src/containers/PersonList/index.tsx deleted file mode 100644 index 33fa697..0000000 --- a/src/containers/PersonList/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -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 = ({ - theme, - background, - color, - title, - data, - isLoading = false, - loaderColor, - message = 'Não há resultados.', -}) => { - return ( - - - {title && ( - - {title} - - )} - - {isLoading && ( - - - - )} - - {!isLoading && data.length > 0 && ( - - - {data.map(person => ( - - ))} - - - )} - - {!isLoading && data.length === 0 && ( - {message} - )} - - - ); -}; - -export default PersonList; diff --git a/src/containers/Result/dtos/index.ts b/src/containers/Result/dtos/index.ts deleted file mode 100644 index 6196c31..0000000 --- a/src/containers/Result/dtos/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import DefaultProps from 'shared/dtos'; - -export default interface ResultProps extends DefaultProps { - data: any; -} diff --git a/src/containers/Result/index.tsx b/src/containers/Result/index.tsx deleted file mode 100644 index e7b61f1..0000000 --- a/src/containers/Result/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; - -import Route from 'routes/enums'; -import Props from 'containers/Result/dtos'; -import { Type } from 'domains/Favorites/enums'; - -import { Movie } from 'components'; -import { - Container, - ImageContainer, - DetailsContainer, - Title, - Subtitle, - Description, -} from './styles'; - -const Result: React.FC = ({ data }) => { - const history = useHistory(); - - const handleRedirect = useCallback(() => { - if (data.mediaType === Type.TV) { - history.push(`${Route.TV}/${data.id}`); - - return; - } - - history.push(`${Route.MOVIE}/${data.id}`); - }, [history, data.id, data.mediaType]); - - return ( - - - - - - {data.title} - {data.releaseYear} - {data.overview} - - - ); -}; - -export default Result; diff --git a/src/containers/SearchModal/index.tsx b/src/containers/SearchModal/index.tsx index 4c2580d..badc067 100644 --- a/src/containers/SearchModal/index.tsx +++ b/src/containers/SearchModal/index.tsx @@ -6,7 +6,7 @@ import { Multi } from 'domains/Search/api'; import { ReactComponent as Loading } from 'assets/loading.svg'; import { ReactComponent as Empty } from 'assets/empty.svg'; import { SearchInput } from 'components'; -import { ResultList } from 'containers'; +import { EntitySummaryList } from 'containers'; import { Container, Backdrop, @@ -77,7 +77,7 @@ const SearchModal: React.FC = ({ onClose, isShow }) => { )} {!isLoading && data?.length > 0 && ( - + )} {!isLoading && data?.length === 0 && ( diff --git a/src/containers/index.ts b/src/containers/index.ts index 0f94c36..17e300c 100644 --- a/src/containers/index.ts +++ b/src/containers/index.ts @@ -1,9 +1,9 @@ +export { default as EntityImage } from './EntityImage'; +export { default as EntityImageList } from './EntityImageList'; +export { default as EntitySummary } from './EntitySummary'; +export { default as EntitySummaryList } from './EntitySummaryList'; export { default as Filmography } from './Filmography'; 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'; -export { default as Result } from './Result'; -export { default as ResultList } from './ResultList'; export { default as SearchModal } from './SearchModal'; diff --git a/src/domains/Auth/api/PostAuth/index.ts b/src/domains/Auth/api/PostAuth/index.ts index 82ae3fc..8b651b7 100644 --- a/src/domains/Auth/api/PostAuth/index.ts +++ b/src/domains/Auth/api/PostAuth/index.ts @@ -1,6 +1,6 @@ -import RawResponse from 'domains/Auth/api/PostAuth/RawResponse'; -import Response from 'domains/Auth/api/PostAuth/Response'; -import LoginCredentials from 'domains/Auth/dtos/LoginCredentials'; +import RawResponse from 'domains/Auth/api/PostAuth/types/RawResponse'; +import Response from 'domains/Auth/api/PostAuth/types/Response'; +import LoginCredentials from 'domains/Auth/types/LoginCredentials'; import api from 'services/api'; export const postRawAuth = async ({ diff --git a/src/domains/Auth/api/PostAuth/RawResponse.ts b/src/domains/Auth/api/PostAuth/types/RawResponse.ts similarity index 100% rename from src/domains/Auth/api/PostAuth/RawResponse.ts rename to src/domains/Auth/api/PostAuth/types/RawResponse.ts diff --git a/src/domains/Auth/api/PostAuth/Response.ts b/src/domains/Auth/api/PostAuth/types/Response.ts similarity index 100% rename from src/domains/Auth/api/PostAuth/Response.ts rename to src/domains/Auth/api/PostAuth/types/Response.ts diff --git a/src/domains/Auth/hooks/index.tsx b/src/domains/Auth/hooks/index.tsx index d355682..bd62d62 100644 --- a/src/domains/Auth/hooks/index.tsx +++ b/src/domains/Auth/hooks/index.tsx @@ -2,8 +2,8 @@ import React, { createContext, useCallback, useContext, useState } from 'react'; import api from 'services/api'; import { postRawAuth } from 'domains/Auth/api/PostAuth'; -import ContextData from '../dtos/ContextData'; -import AuthState from '../dtos/AuthState'; +import ContextData from '../types/ContextData'; +import AuthState from '../types/AuthState'; const AuthContext = createContext({} as ContextData); diff --git a/src/domains/Auth/dtos/AuthState.ts b/src/domains/Auth/types/AuthState.ts similarity index 100% rename from src/domains/Auth/dtos/AuthState.ts rename to src/domains/Auth/types/AuthState.ts diff --git a/src/domains/Auth/dtos/ContextData.ts b/src/domains/Auth/types/ContextData.ts similarity index 100% rename from src/domains/Auth/dtos/ContextData.ts rename to src/domains/Auth/types/ContextData.ts diff --git a/src/domains/Auth/dtos/LoginCredentials.ts b/src/domains/Auth/types/LoginCredentials.ts similarity index 100% rename from src/domains/Auth/dtos/LoginCredentials.ts rename to src/domains/Auth/types/LoginCredentials.ts diff --git a/src/domains/Environment/hooks/index.tsx b/src/domains/Environment/hooks/index.tsx index b726316..4705ac4 100644 --- a/src/domains/Environment/hooks/index.tsx +++ b/src/domains/Environment/hooks/index.tsx @@ -1,8 +1,8 @@ import React, { createContext, useContext } from 'react'; -import Environment from 'domains/Environment/dtos/Environment'; +import Environment from 'domains/Environment/types/Environment'; import { Environment as EnvironmentEnum } from 'domains/Environment/enums/Environment'; -import ContextData from '../dtos/ContextData'; +import ContextData from '../types/ContextData'; const EnvironmentContext = createContext({} as ContextData); diff --git a/src/domains/Environment/dtos/ContextData.ts b/src/domains/Environment/types/ContextData.ts similarity index 60% rename from src/domains/Environment/dtos/ContextData.ts rename to src/domains/Environment/types/ContextData.ts index ca96932..9fc3247 100644 --- a/src/domains/Environment/dtos/ContextData.ts +++ b/src/domains/Environment/types/ContextData.ts @@ -1,4 +1,4 @@ -import Environment from 'domains/Environment/dtos/Environment'; +import Environment from 'domains/Environment/types/Environment'; export default interface ContextData { isProduction: boolean; diff --git a/src/domains/Environment/dtos/Environment.ts b/src/domains/Environment/types/Environment.ts similarity index 100% rename from src/domains/Environment/dtos/Environment.ts rename to src/domains/Environment/types/Environment.ts diff --git a/src/domains/Favorites/api/List/Response.ts b/src/domains/Favorites/api/List/Response.ts deleted file mode 100644 index 0da803c..0000000 --- a/src/domains/Favorites/api/List/Response.ts +++ /dev/null @@ -1,8 +0,0 @@ -import DetailsResponse from 'domains/Movie/api/Details/Response'; - -export default interface Response extends Omit { - favoriteId: string; - userId: string; - entityId: number; - typeId: number; -} diff --git a/src/domains/Favorites/api/List/index.ts b/src/domains/Favorites/api/List/index.ts index 9aa43da..a7a1d8c 100644 --- a/src/domains/Favorites/api/List/index.ts +++ b/src/domains/Favorites/api/List/index.ts @@ -1,8 +1,8 @@ import api from 'services/api'; import { getByType } from 'domains/Favorites/helpers'; -import RawResponse from 'domains/Favorites/api/List/RawResponse'; -import Response from 'domains/Favorites/api/List/Response'; +import RawResponse from 'domains/Favorites/api/List/types/RawResponse'; +import Response from 'domains/Favorites/api/List/types/Response'; const Favorites = async (): Promise => { const response = await rawFavorites(); diff --git a/src/domains/Favorites/api/List/RawResponse.ts b/src/domains/Favorites/api/List/types/RawResponse.ts similarity index 100% rename from src/domains/Favorites/api/List/RawResponse.ts rename to src/domains/Favorites/api/List/types/RawResponse.ts diff --git a/src/domains/Favorites/api/List/types/Response.ts b/src/domains/Favorites/api/List/types/Response.ts new file mode 100644 index 0000000..4e28d91 --- /dev/null +++ b/src/domains/Favorites/api/List/types/Response.ts @@ -0,0 +1,11 @@ +import MovieResponse from 'domains/Movie/api/Details/types/Response'; +import PersonResponse from 'domains/Person/api/Details/types/Response'; + +export default interface Response + extends Omit, + Omit { + favoriteId: string; + userId: string; + entityId: number; + typeId: number; +} diff --git a/src/domains/Favorites/api/Update/index.ts b/src/domains/Favorites/api/Update/index.ts index ef180c2..24e9455 100644 --- a/src/domains/Favorites/api/Update/index.ts +++ b/src/domains/Favorites/api/Update/index.ts @@ -1,8 +1,8 @@ import api from 'services/api'; import { getByType } from 'domains/Favorites/helpers'; -import RawResponse from 'domains/Favorites/api/Update/RawResponse'; -import Response from 'domains/Favorites/api/Update/Response'; +import RawResponse from 'domains/Favorites/api/Update/types/RawResponse'; +import Response from 'domains/Favorites/api/Update/types/Response'; const Update = async ( entityId: number, diff --git a/src/domains/Favorites/api/Update/RawResponse.ts b/src/domains/Favorites/api/Update/types/RawResponse.ts similarity index 100% rename from src/domains/Favorites/api/Update/RawResponse.ts rename to src/domains/Favorites/api/Update/types/RawResponse.ts diff --git a/src/domains/Favorites/api/Update/Response.ts b/src/domains/Favorites/api/Update/types/Response.ts similarity index 65% rename from src/domains/Favorites/api/Update/Response.ts rename to src/domains/Favorites/api/Update/types/Response.ts index 8fbb690..443ee6b 100644 --- a/src/domains/Favorites/api/Update/Response.ts +++ b/src/domains/Favorites/api/Update/types/Response.ts @@ -1,4 +1,4 @@ -import DetailsResponse from 'domains/Movie/api/Details/Response'; +import DetailsResponse from 'domains/Movie/api/Details/types/Response'; export default interface Response extends Omit { favoriteId: string; diff --git a/src/domains/Favorites/enums/index.ts b/src/domains/Favorites/enums/index.ts deleted file mode 100644 index ef5fd40..0000000 --- a/src/domains/Favorites/enums/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Type } from './Type'; diff --git a/src/domains/Favorites/helpers/getByType.ts b/src/domains/Favorites/helpers/getByType.ts index 054bf23..34e395d 100644 --- a/src/domains/Favorites/helpers/getByType.ts +++ b/src/domains/Favorites/helpers/getByType.ts @@ -1,18 +1,18 @@ -import { Type } from 'domains/Favorites/enums'; +import { EntityType } from 'shared/enums'; import { Details as MovieDetails } from 'domains/Movie/api'; import { Details as TvDetails } from 'domains/Tv/api'; import { Details as PersonDetails } from 'domains/Person/api'; const getByType = async (favorite: any): Promise => { - if (favorite.type_id === Type.MOVIE) { - return MovieDetails(favorite.entity_id); + if (favorite.type_id === EntityType.TV) { + return TvDetails(favorite.entity_id); } - if (favorite.type_id === Type.TV) { - return TvDetails(favorite.entity_id); + if (favorite.type_id === EntityType.MOVIE) { + return MovieDetails(favorite.entity_id); } - if (favorite.type_id === Type.PERSON) { + if (favorite.type_id === EntityType.PERSON) { return PersonDetails(favorite.entity_id); } }; diff --git a/src/domains/Favorites/hooks/index.tsx b/src/domains/Favorites/hooks/index.tsx index cbbf7bb..8b63120 100644 --- a/src/domains/Favorites/hooks/index.tsx +++ b/src/domains/Favorites/hooks/index.tsx @@ -1,12 +1,12 @@ import React, { createContext, useCallback, useContext, useState } from 'react'; -import ListResponse from 'domains/Favorites/api/List/Response'; -import UpdateResponse from 'domains/Favorites/api/Update/Response'; +import ListResponse from 'domains/Favorites/api/List/types/Response'; +import UpdateResponse from 'domains/Favorites/api/Update/types/Response'; import { Favorites as FavoritesApi, UpdateFavorite as UpdateFavoriteApi, } from 'domains/Favorites/api'; -import ContextData from '../dtos/ContextData'; +import ContextData from '../types/ContextData'; const FavoriteContext = createContext({} as ContextData); @@ -15,8 +15,8 @@ const FavoriteProvider: React.FC = ({ children }) => { const Favorites = useCallback(async (): Promise => { const response = await FavoritesApi(); - const updatedResponse = response.map(movie => ({ - ...movie, + const updatedResponse = response.map(entity => ({ + ...entity, favorite: true, })); diff --git a/src/domains/Favorites/dtos/ContextData.ts b/src/domains/Favorites/types/ContextData.ts similarity index 69% rename from src/domains/Favorites/dtos/ContextData.ts rename to src/domains/Favorites/types/ContextData.ts index b2a1a27..4592d6f 100644 --- a/src/domains/Favorites/dtos/ContextData.ts +++ b/src/domains/Favorites/types/ContextData.ts @@ -1,7 +1,7 @@ import { Dispatch, SetStateAction } from 'react'; -import ListResponse from 'domains/Favorites/api/List/Response'; -import UpdateResponse from 'domains/Favorites/api/Update/Response'; +import ListResponse from 'domains/Favorites/api/List/types/Response'; +import UpdateResponse from 'domains/Favorites/api/Update/types/Response'; export default interface ContextData { favoriteList: ListResponse[]; diff --git a/src/domains/Favorites/dtos/Environment.ts b/src/domains/Favorites/types/Environment.ts similarity index 100% rename from src/domains/Favorites/dtos/Environment.ts rename to src/domains/Favorites/types/Environment.ts diff --git a/src/domains/Movie/api/Credits/Response.ts b/src/domains/Movie/api/Credits/Response.ts deleted file mode 100644 index cd876fb..0000000 --- a/src/domains/Movie/api/Credits/Response.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Cast from 'domains/Movie/api/Credits/dtos/Cast'; -import Crew from 'domains/Movie/api/Credits/dtos/Crew'; - -export default interface Response { - cast: Cast[]; - crew: Crew[]; -} diff --git a/src/domains/Movie/api/Credits/dtos/Cast.ts b/src/domains/Movie/api/Credits/types/Cast.ts similarity index 100% rename from src/domains/Movie/api/Credits/dtos/Cast.ts rename to src/domains/Movie/api/Credits/types/Cast.ts diff --git a/src/domains/Movie/api/Credits/dtos/Crew.ts b/src/domains/Movie/api/Credits/types/Crew.ts similarity index 100% rename from src/domains/Movie/api/Credits/dtos/Crew.ts rename to src/domains/Movie/api/Credits/types/Crew.ts diff --git a/src/domains/Movie/api/Credits/RawResponse.ts b/src/domains/Movie/api/Credits/types/RawResponse.ts similarity index 100% rename from src/domains/Movie/api/Credits/RawResponse.ts rename to src/domains/Movie/api/Credits/types/RawResponse.ts diff --git a/src/domains/Movie/api/Credits/types/Response.ts b/src/domains/Movie/api/Credits/types/Response.ts new file mode 100644 index 0000000..3925f7c --- /dev/null +++ b/src/domains/Movie/api/Credits/types/Response.ts @@ -0,0 +1,7 @@ +import Cast from 'domains/Movie/api/Credits/types/Cast'; +import Crew from 'domains/Movie/api/Credits/types/Crew'; + +export default interface Response { + cast: Cast[]; + crew: Crew[]; +} diff --git a/src/domains/Movie/api/Details/index.ts b/src/domains/Movie/api/Details/index.ts index 224e1f2..b854f20 100644 --- a/src/domains/Movie/api/Details/index.ts +++ b/src/domains/Movie/api/Details/index.ts @@ -1,16 +1,24 @@ import tmdb from 'services/api/tmdb'; -import { arrayToString, formatTmdbImage, formatDate } from 'shared/utils'; - -import { Type } from 'domains/Favorites/enums'; -import Params from 'domains/Movie/api/Details/Params'; -import RawResponse from 'domains/Movie/api/Details/RawResponse'; -import Response from 'domains/Movie/api/Details/Response'; -import Recommendations from 'domains/Movie/api/Recommendations/Response'; -import Credits from 'domains/Movie/api/Credits/Response'; - -import Crew from 'domains/Movie/api/Credits/dtos/Crew'; -import Cast from 'domains/Movie/api/Credits/dtos/Cast'; +import { arrayToString } from 'shared/utils'; +import { + getBackdrop, + getFeaturedImage, + getReleaseDate, + getReleaseYear, + getSubtitle, + getTitle, +} from 'shared/utils/Entity'; + +import { EntityType } from 'shared/enums'; +import Params from 'domains/Movie/api/Details/types/Params'; +import RawResponse from 'domains/Movie/api/Details/types/RawResponse'; +import Response from 'domains/Movie/api/Details/types/Response'; +import Recommendations from 'domains/Movie/api/Recommendations/types/Response'; +import Credits from 'domains/Movie/api/Credits/types/Response'; + +import Crew from 'domains/Movie/api/Credits/types/Crew'; +import Cast from 'domains/Movie/api/Credits/types/Cast'; const Details = async (movieId: number, params?: Params): Promise => { const response = await rawPopular(movieId, params); @@ -37,7 +45,6 @@ const parseResponse = (movie: RawResponse): Response => { genresNames: arrayToString(movie.genres, 'name'), id: movie.id, originalTitle: movie.original_title, - title: movie.title, popularity: movie.popularity, voteCount: movie.vote_count, voteAverage: movie.vote_average, @@ -48,21 +55,28 @@ const parseResponse = (movie: RawResponse): Response => { person => person.job.toUpperCase() === 'DIRECTOR', )?.name, - releaseDate: formatDate({ value: movie.release_date }), - poster: formatTmdbImage({ value: movie.poster_path }), - backdrop: formatTmdbImage({ value: movie.backdrop_path }), + releaseDate: getReleaseDate(movie), + backdrop: getBackdrop(movie), + + featuredImage: getFeaturedImage(movie), + releaseYear: getReleaseYear(movie), + subtitle: getReleaseDate(movie), + title: getTitle(movie), favorite: false, - mediaType: Type.MOVIE, + mediaType: EntityType.MOVIE, } as Response; const recommendations = movie.recommendations?.results.map( recommendation => ({ - poster: formatTmdbImage({ value: recommendation.poster_path }), - backdrop: formatTmdbImage({ value: recommendation.poster_path }), + backdrop: getBackdrop(recommendation), id: recommendation.id, - title: recommendation.title, + + featuredImage: getFeaturedImage(recommendation), + releaseYear: getReleaseYear(recommendation), + subtitle: getSubtitle(recommendation), + title: getTitle(recommendation), favorite: false, - mediaType: Type.MOVIE, + mediaType: EntityType.MOVIE, }), ) as Recommendations[]; @@ -74,7 +88,13 @@ const parseResponse = (movie: RawResponse): Response => { castId: person.cast_id, creditId: person.credit_id, gender: person.gender, - profile: formatTmdbImage({ value: person.profile_path }), + profile: getFeaturedImage(person), + + featuredImage: getFeaturedImage(person), + subtitle: person.character, + title: getTitle(person), + favorite: false, + mediaType: EntityType.PERSON, })) as Cast[]; const crew = movie.credits?.crew.map(person => ({ @@ -84,7 +104,13 @@ const parseResponse = (movie: RawResponse): Response => { department: person.department, creditId: person.credit_id, gender: person.gender, - profile: formatTmdbImage({ value: person.profile_path }), + profile: getFeaturedImage(person), + + featuredImage: getFeaturedImage(person), + subtitle: person.job, + title: person.name, + favorite: false, + mediaType: EntityType.PERSON, })) as Crew[]; const credits = { cast, crew } as Credits; diff --git a/src/domains/Movie/api/Details/Params.ts b/src/domains/Movie/api/Details/types/Params.ts similarity index 100% rename from src/domains/Movie/api/Details/Params.ts rename to src/domains/Movie/api/Details/types/Params.ts diff --git a/src/domains/Movie/api/Details/RawResponse.ts b/src/domains/Movie/api/Details/types/RawResponse.ts similarity index 78% rename from src/domains/Movie/api/Details/RawResponse.ts rename to src/domains/Movie/api/Details/types/RawResponse.ts index 169e4d0..5e35edd 100644 --- a/src/domains/Movie/api/Details/RawResponse.ts +++ b/src/domains/Movie/api/Details/types/RawResponse.ts @@ -1,5 +1,5 @@ -import Recommendations from 'domains/Movie/api/Recommendations/RawResponse'; -import Credits from 'domains/Movie/api/Credits/RawResponse'; +import Recommendations from 'domains/Movie/api/Recommendations/types/RawResponse'; +import Credits from 'domains/Movie/api/Credits/types/RawResponse'; export default interface RawResponse { poster_path?: string; diff --git a/src/domains/Movie/api/Details/Response.ts b/src/domains/Movie/api/Details/types/Response.ts similarity index 71% rename from src/domains/Movie/api/Details/Response.ts rename to src/domains/Movie/api/Details/types/Response.ts index a72a8b6..686dc32 100644 --- a/src/domains/Movie/api/Details/Response.ts +++ b/src/domains/Movie/api/Details/types/Response.ts @@ -1,5 +1,5 @@ -import Recommendations from 'domains/Movie/api/Recommendations/Response'; -import Credits from 'domains/Movie/api/Credits/Response'; +import Recommendations from 'domains/Movie/api/Recommendations/types/Response'; +import Credits from 'domains/Movie/api/Credits/types/Response'; export default interface Response { poster?: string; @@ -17,17 +17,20 @@ export default interface Response { homepage?: string; id: number; originalTitle: string; - title: string; popularity: number; runtime: string; voteCount: number; voteAverage: number; tagline: string; - favorite: boolean; recommendations?: Recommendations[]; credits?: Credits; directorName?: string; + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; } diff --git a/src/domains/Movie/api/NowPlaying/index.ts b/src/domains/Movie/api/NowPlaying/index.ts index eff632a..bd87b08 100644 --- a/src/domains/Movie/api/NowPlaying/index.ts +++ b/src/domains/Movie/api/NowPlaying/index.ts @@ -1,11 +1,17 @@ import tmdb from 'services/api/tmdb'; -import { formatDate, formatTmdbImage } from 'shared/utils'; - -import { Type } from 'domains/Favorites/enums'; -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 { + getBackdrop, + getFeaturedImage, + getReleaseDate, + getReleaseYear, + getTitle, +} from 'shared/utils/Entity'; + +import { EntityType } from 'shared/enums'; +import Params from 'domains/Movie/api/NowPlaying/types/Params'; +import RawResponse from 'domains/Movie/api/NowPlaying/types/RawResponse'; +import Response from 'domains/Movie/api/NowPlaying/types/Response'; const NowPlaying = async (params?: Params): Promise => { const response = await rawNowPlaying(params); @@ -32,16 +38,19 @@ const parseResponse = (rawResponse: RawResponse[]): Response[] => { 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 }), + releaseDate: getReleaseDate(movie), + backdrop: getBackdrop(movie), + + featuredImage: getFeaturedImage(movie), + releaseYear: getReleaseYear(movie), + subtitle: getReleaseDate(movie), + title: getTitle(movie), favorite: false, - mediaType: Type.MOVIE, + mediaType: EntityType.MOVIE, } as Response; response = [...response, parsedMovie]; diff --git a/src/domains/Movie/api/NowPlaying/Params.ts b/src/domains/Movie/api/NowPlaying/types/Params.ts similarity index 100% rename from src/domains/Movie/api/NowPlaying/Params.ts rename to src/domains/Movie/api/NowPlaying/types/Params.ts diff --git a/src/domains/Movie/api/NowPlaying/RawResponse.ts b/src/domains/Movie/api/NowPlaying/types/RawResponse.ts similarity index 100% rename from src/domains/Movie/api/NowPlaying/RawResponse.ts rename to src/domains/Movie/api/NowPlaying/types/RawResponse.ts diff --git a/src/domains/Movie/api/NowPlaying/Response.ts b/src/domains/Movie/api/NowPlaying/types/Response.ts similarity index 80% rename from src/domains/Movie/api/NowPlaying/Response.ts rename to src/domains/Movie/api/NowPlaying/types/Response.ts index b1ba704..27ea11c 100644 --- a/src/domains/Movie/api/NowPlaying/Response.ts +++ b/src/domains/Movie/api/NowPlaying/types/Response.ts @@ -1,15 +1,18 @@ 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; + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; } diff --git a/src/domains/Movie/api/Popular/index.ts b/src/domains/Movie/api/Popular/index.ts index b771e4a..a0eea03 100644 --- a/src/domains/Movie/api/Popular/index.ts +++ b/src/domains/Movie/api/Popular/index.ts @@ -1,11 +1,17 @@ import tmdb from 'services/api/tmdb'; -import { formatDate, formatTmdbImage } from 'shared/utils'; - -import { Type } from 'domains/Favorites/enums'; -import Params from 'domains/Movie/api/Popular/Params'; -import RawResponse from 'domains/Movie/api/Popular/RawResponse'; -import Response from 'domains/Movie/api/Popular/Response'; +import { + getBackdrop, + getFeaturedImage, + getReleaseDate, + getReleaseYear, + getTitle, +} from 'shared/utils/Entity'; + +import { EntityType } from 'shared/enums'; +import Params from 'domains/Movie/api/Popular/types/Params'; +import RawResponse from 'domains/Movie/api/Popular/types/RawResponse'; +import Response from 'domains/Movie/api/Popular/types/Response'; const Popular = async (params?: Params): Promise => { const response = await rawPopular(params); @@ -30,16 +36,19 @@ const parseResponse = (rawResponse: RawResponse[]): Response[] => { 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 }), + releaseDate: getReleaseDate(movie), + backdrop: getBackdrop(movie), + + featuredImage: getFeaturedImage(movie), + releaseYear: getReleaseYear(movie), + subtitle: getReleaseDate(movie), + title: getTitle(movie), favorite: false, - mediaType: Type.MOVIE, + mediaType: EntityType.MOVIE, } as Response; response = [...response, parsedMovie]; diff --git a/src/domains/Movie/api/Popular/Params.ts b/src/domains/Movie/api/Popular/types/Params.ts similarity index 100% rename from src/domains/Movie/api/Popular/Params.ts rename to src/domains/Movie/api/Popular/types/Params.ts diff --git a/src/domains/Movie/api/Popular/RawResponse.ts b/src/domains/Movie/api/Popular/types/RawResponse.ts similarity index 100% rename from src/domains/Movie/api/Popular/RawResponse.ts rename to src/domains/Movie/api/Popular/types/RawResponse.ts diff --git a/src/domains/Movie/api/Popular/Response.ts b/src/domains/Movie/api/Popular/types/Response.ts similarity index 80% rename from src/domains/Movie/api/Popular/Response.ts rename to src/domains/Movie/api/Popular/types/Response.ts index b1ba704..27ea11c 100644 --- a/src/domains/Movie/api/Popular/Response.ts +++ b/src/domains/Movie/api/Popular/types/Response.ts @@ -1,15 +1,18 @@ 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; + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; } diff --git a/src/domains/Movie/api/Recommendations/index.ts b/src/domains/Movie/api/Recommendations/index.ts index d517c61..fd81ddd 100644 --- a/src/domains/Movie/api/Recommendations/index.ts +++ b/src/domains/Movie/api/Recommendations/index.ts @@ -2,9 +2,9 @@ import tmdb from 'services/api/tmdb'; import { formatDate, formatTmdbImage } from 'shared/utils'; -import { Type } from 'domains/Favorites/enums'; -import RawResponse from 'domains/Movie/api/Recommendations/RawResponse'; -import Response from 'domains/Movie/api/Recommendations/Response'; +import { EntityType } from 'shared/enums'; +import RawResponse from 'domains/Movie/api/Recommendations/types/RawResponse'; +import Response from 'domains/Movie/api/Recommendations/types/Response'; const Recommendations = async (movieId: number): Promise => { const response = await rawPopular(movieId); @@ -36,7 +36,7 @@ const parseResponse = (rawResponse: RawResponse[]): Response[] => { poster: formatTmdbImage({ value: movie.poster_path }), backdrop: formatTmdbImage({ value: movie.backdrop_path }), favorite: false, - mediaType: Type.MOVIE, + mediaType: EntityType.MOVIE, } as Response; response = [...response, parsedMovie]; diff --git a/src/domains/Movie/api/Recommendations/RawResponse.ts b/src/domains/Movie/api/Recommendations/types/RawResponse.ts similarity index 100% rename from src/domains/Movie/api/Recommendations/RawResponse.ts rename to src/domains/Movie/api/Recommendations/types/RawResponse.ts diff --git a/src/domains/Tv/api/Recommendations/Response.ts b/src/domains/Movie/api/Recommendations/types/Response.ts similarity index 81% rename from src/domains/Tv/api/Recommendations/Response.ts rename to src/domains/Movie/api/Recommendations/types/Response.ts index a36b718..6597aea 100644 --- a/src/domains/Tv/api/Recommendations/Response.ts +++ b/src/domains/Movie/api/Recommendations/types/Response.ts @@ -1,10 +1,13 @@ export default interface Response { - poster?: string; backdrop?: string; id: number; - title: string; + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; // overview: string; // releaseDate: string; // genresIds: number[]; diff --git a/src/domains/Person/api/Details/index.ts b/src/domains/Person/api/Details/index.ts index 118cf63..31b0113 100644 --- a/src/domains/Person/api/Details/index.ts +++ b/src/domains/Person/api/Details/index.ts @@ -1,14 +1,22 @@ import tmdb from 'services/api/tmdb'; -import Params from 'domains/Person/api/Details/Params'; -import RawResponse from 'domains/Person/api/Details/RawResponse'; -import Response from 'domains/Person/api/Details/Response'; -import Movie from 'domains/Person/api/Details/Movie'; -// import Credits from 'domains/Person/api/Credits/Response'; -import { formatDate, formatTmdbImage, getMediaTypeId } from 'shared/utils'; -// import Crew from 'domains/Person/api/Credits/dtos/Crew'; -// import Cast from 'domains/Person/api/Credits/dtos/Cast'; -// import { arrayToString } from 'shared/utils'; +import { formatDate, getMediaTypeId } from 'shared/utils'; +import { EntityType } from 'shared/enums'; +import { + getCharacter, + getFeaturedImage, + getGender, + getOriginalDate, + getReleaseDate, + getReleaseYear, + getSubtitle, + getTitle, +} from 'shared/utils/Entity'; + +import Params from 'domains/Person/api/Details/types/Params'; +import RawResponse from 'domains/Person/api/Details/types/RawResponse'; +import Response from 'domains/Person/api/Details/types/Response'; +import Movie from 'domains/Person/api/Details/types/Movie'; const Details = async ( personId: number, @@ -39,46 +47,54 @@ const parseResponse = (person: RawResponse): Response => { popularity: person.popularity, knownForDepartment: person.known_for_department, - gender: person.gender === 2 ? 'Masculino' : 'Feminino', + gender: getGender(person), alsoKnownAs: person.also_known_as, adult: person.adult, imdbId: person.imdb_id, homepage: person.homepage, - profile: formatTmdbImage({ value: person.profile_path }), - birthday: formatDate({ value: person.birthday }), + birthday: getReleaseDate(person), deathday: formatDate({ value: person.deathday }), + + featuredImage: getFeaturedImage(person), + releaseYear: person.birthday?.substring(0, 4), + subtitle: getReleaseDate(person), + title: person.name, + favorite: false, + mediaType: EntityType.PERSON, } as Response; - const movies = person.combined_credits?.cast - .map(movie => ({ - poster: formatTmdbImage({ value: movie.poster_path }), - backdrop: formatTmdbImage({ value: movie.poster_path }), - id: movie.id, - title: movie.title, + const combinedProductions = person.combined_credits?.cast + .map(production => ({ + poster: getFeaturedImage(production), + backdrop: getFeaturedImage(production), + id: production.id, + character: getCharacter(production), + releaseDate: getReleaseDate(production), + originalDate: getOriginalDate(production), + year: getReleaseYear(production), + popularity: production.popularity, + name: production.name, + + featuredImage: getFeaturedImage(production), + releaseYear: getReleaseYear(production), + subtitle: getSubtitle(production), + title: getTitle(production), favorite: false, - character: movie.character.toUpperCase().includes('SELF') - ? '' - : movie.character, - releaseDate: formatDate({ - value: movie.release_date || movie.first_air_date, - }), - originalDate: movie.release_date || movie.first_air_date, - year: - (movie.release_date && movie.release_date.substring(0, 4)) || - (movie.first_air_date && movie.first_air_date.substring(0, 4)), - popularity: movie.popularity, - name: movie.name, - mediaType: getMediaTypeId(movie.media_type), + mediaType: getMediaTypeId(production.media_type), })) .filter(item => item.originalDate && item.character.length > 0) as Movie[]; - const knownFor = [...movies] - .sort((a, b) => (a.popularity < b.popularity ? 1 : -1)) - .slice(0, 30); - const filmography = [...movies].sort((a, b) => - Date.parse(a.originalDate) < Date.parse(b.originalDate) ? 1 : -1, - ); + const knownFor = + combinedProductions && + [...combinedProductions] + ?.sort((a, b) => (a.popularity < b.popularity ? 1 : -1)) + .slice(0, 30); + const filmography = + combinedProductions && + [...combinedProductions]?.sort((a, b) => + Date.parse(a.originalDate) < Date.parse(b.originalDate) ? 1 : -1, + ); parsedPerson = { ...parsedPerson, knownFor, filmography }; diff --git a/src/domains/Person/api/Details/Movie.ts b/src/domains/Person/api/Details/types/Movie.ts similarity index 70% rename from src/domains/Person/api/Details/Movie.ts rename to src/domains/Person/api/Details/types/Movie.ts index 93362b9..e3b4ec8 100644 --- a/src/domains/Person/api/Details/Movie.ts +++ b/src/domains/Person/api/Details/types/Movie.ts @@ -1,4 +1,4 @@ -import MovieDetails from 'domains/Movie/api/Details/Response'; +import MovieDetails from 'domains/Movie/api/Details/types/Response'; export default interface Movie extends MovieDetails { character: string; diff --git a/src/domains/Person/api/Details/Params.ts b/src/domains/Person/api/Details/types/Params.ts similarity index 100% rename from src/domains/Person/api/Details/Params.ts rename to src/domains/Person/api/Details/types/Params.ts diff --git a/src/domains/Person/api/Details/RawMovie.ts b/src/domains/Person/api/Details/types/RawMovie.ts similarity index 72% rename from src/domains/Person/api/Details/RawMovie.ts rename to src/domains/Person/api/Details/types/RawMovie.ts index 85b71ab..fd08f6a 100644 --- a/src/domains/Person/api/Details/RawMovie.ts +++ b/src/domains/Person/api/Details/types/RawMovie.ts @@ -1,4 +1,4 @@ -import RawMovieDetails from 'domains/Movie/api/Details/RawResponse'; +import RawMovieDetails from 'domains/Movie/api/Details/types/RawResponse'; export default interface RawMovie extends RawMovieDetails { character: string; diff --git a/src/domains/Person/api/Details/RawResponse.ts b/src/domains/Person/api/Details/types/RawResponse.ts similarity index 87% rename from src/domains/Person/api/Details/RawResponse.ts rename to src/domains/Person/api/Details/types/RawResponse.ts index 2653590..493a171 100644 --- a/src/domains/Person/api/Details/RawResponse.ts +++ b/src/domains/Person/api/Details/types/RawResponse.ts @@ -1,5 +1,5 @@ // import Recommendations from 'domains/Movie/api/Recommendations/RawResponse'; -import RawMovie from 'domains/Person/api/Details/RawMovie'; +import RawMovie from 'domains/Person/api/Details/types/RawMovie'; export default interface RawResponse { id: number; diff --git a/src/domains/Person/api/Details/Response.ts b/src/domains/Person/api/Details/types/Response.ts similarity index 72% rename from src/domains/Person/api/Details/Response.ts rename to src/domains/Person/api/Details/types/Response.ts index 42c9a3e..03b48fa 100644 --- a/src/domains/Person/api/Details/Response.ts +++ b/src/domains/Person/api/Details/types/Response.ts @@ -1,10 +1,9 @@ // import Recommendations from 'domains/Movie/api/Recommendations/Response'; -import Movie from 'domains/Person/api/Details/Movie'; +import Movie from 'domains/Person/api/Details/types/Movie'; export default interface Response { id: number; name: string; - profile?: string; placeOfBirth?: string; biography: string; @@ -21,5 +20,11 @@ export default interface Response { knownFor?: Movie[]; filmography?: Movie[]; + + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; } diff --git a/src/domains/Search/api/Multi/index.ts b/src/domains/Search/api/Multi/index.ts index 7c63e81..0895f40 100644 --- a/src/domains/Search/api/Multi/index.ts +++ b/src/domains/Search/api/Multi/index.ts @@ -1,10 +1,21 @@ import tmdb from 'services/api/tmdb'; -import { Type } from 'domains/Favorites/enums'; -import Params from 'domains/Search/api/Multi/Params'; -import RawResponse from 'domains/Search/api/Multi/RawResponse'; -import Response from 'domains/Search/api/Multi/Response'; -import { formatDate, formatTmdbImage, getMediaTypeId } from 'shared/utils'; +import { EntityType } from 'shared/enums'; +import { getMediaTypeId } from 'shared/utils'; +import { + getBackdrop, + getDescription, + getFeaturedImage, + getOriginalTitle, + getReleaseDate, + getReleaseYear, + getSubtitle, + getTitle, +} from 'shared/utils/Entity'; + +import Params from 'domains/Search/api/Multi/types/Params'; +import RawResponse from 'domains/Search/api/Multi/types/RawResponse'; +import Response from 'domains/Search/api/Multi/types/Response'; const Multi = async (params: Params): Promise => { const response = await rawPopular(params); @@ -28,31 +39,37 @@ const parseResponse = (rawResponse: RawResponse[]): Response[] => { overview: result.overview, genreIds: result.genre_ids, id: result.id, - originalTitle: result.original_title || result.original_name, - title: result.title || result.name, + originalTitle: getOriginalTitle(result), popularity: result.popularity, voteCount: result.vote_count, voteAverage: result.vote_average, - releaseYear: - result.release_date?.substring(0, 4) || - result.first_air_date?.substring(0, 4), - releaseDate: - formatDate({ value: result.release_date }) || - formatDate({ value: result.first_air_date }), - poster: formatTmdbImage({ value: result.poster_path }), - backdrop: formatTmdbImage({ value: result.backdrop_path }), - favorite: false, + releaseDate: getReleaseDate(result), + poster: getFeaturedImage(result), + backdrop: getBackdrop(result), + featuredImage: getFeaturedImage(result), + releaseYear: getReleaseYear(result), + subtitle: getSubtitle(result), + title: getTitle(result), + favorite: false, mediaType: getMediaTypeId(result.media_type), + description: getDescription(result), } as Response; response = [...response, parsedMovie]; }); - response = [...response] - .filter(item => item.mediaType === Type.MOVIE || item.mediaType === Type.TV) - .sort((a, b) => (a.popularity < b.popularity ? 1 : -1)); + response = + response && + [...response] + .filter( + item => + item.mediaType === EntityType.MOVIE || + item.mediaType === EntityType.TV || + item.mediaType === EntityType.PERSON, + ) + .sort((a, b) => (a.popularity < b.popularity ? 1 : -1)); return response; }; diff --git a/src/domains/Search/api/Multi/Movie.ts b/src/domains/Search/api/Multi/types/Movie.ts similarity index 70% rename from src/domains/Search/api/Multi/Movie.ts rename to src/domains/Search/api/Multi/types/Movie.ts index 93362b9..e3b4ec8 100644 --- a/src/domains/Search/api/Multi/Movie.ts +++ b/src/domains/Search/api/Multi/types/Movie.ts @@ -1,4 +1,4 @@ -import MovieDetails from 'domains/Movie/api/Details/Response'; +import MovieDetails from 'domains/Movie/api/Details/types/Response'; export default interface Movie extends MovieDetails { character: string; diff --git a/src/domains/Search/api/Multi/Params.ts b/src/domains/Search/api/Multi/types/Params.ts similarity index 100% rename from src/domains/Search/api/Multi/Params.ts rename to src/domains/Search/api/Multi/types/Params.ts diff --git a/src/domains/Search/api/Multi/RawMovie.ts b/src/domains/Search/api/Multi/types/RawMovie.ts similarity index 84% rename from src/domains/Search/api/Multi/RawMovie.ts rename to src/domains/Search/api/Multi/types/RawMovie.ts index fb5ffa9..9e5feb7 100644 --- a/src/domains/Search/api/Multi/RawMovie.ts +++ b/src/domains/Search/api/Multi/types/RawMovie.ts @@ -1,4 +1,4 @@ -import RawMovieDetails from 'domains/Movie/api/Details/RawResponse'; +import RawMovieDetails from 'domains/Movie/api/Details/types/RawResponse'; export default interface RawMovie extends RawMovieDetails { poster_path?: string; diff --git a/src/domains/Search/api/Multi/RawResponse.ts b/src/domains/Search/api/Multi/types/RawResponse.ts similarity index 79% rename from src/domains/Search/api/Multi/RawResponse.ts rename to src/domains/Search/api/Multi/types/RawResponse.ts index 71ef6aa..b2b12e4 100644 --- a/src/domains/Search/api/Multi/RawResponse.ts +++ b/src/domains/Search/api/Multi/types/RawResponse.ts @@ -1,5 +1,5 @@ // import Recommendations from 'domains/Movie/api/Recommendations/RawResponse'; -import RawMovie from 'domains/Person/api/Details/RawMovie'; +import RawMovie from 'domains/Person/api/Details/types/RawMovie'; export default interface RawResponse { poster_path?: string; @@ -20,4 +20,7 @@ export default interface RawResponse { first_air_date?: string; original_name?: string; name?: string; + birthday?: string; + profile_path?: string; + known_for?: any[]; } diff --git a/src/domains/Search/api/Multi/Response.ts b/src/domains/Search/api/Multi/types/Response.ts similarity index 71% rename from src/domains/Search/api/Multi/Response.ts rename to src/domains/Search/api/Multi/types/Response.ts index 7f5c66d..afe5c54 100644 --- a/src/domains/Search/api/Multi/Response.ts +++ b/src/domains/Search/api/Multi/types/Response.ts @@ -1,20 +1,23 @@ // import Recommendations from 'domains/Movie/api/Recommendations/Response'; -import Movie from 'domains/Person/api/Details/Movie'; +import Movie from 'domains/Person/api/Details/types/Movie'; export default interface Response { poster?: string; backdrop?: string; overview: string; releaseDate: string; - releaseYear: string; genreIds: number[]; id: number; originalTitle: string; - title: string; popularity: number; voteCount: number; voteAverage: number; - favorite: boolean; + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; + description?: string; } diff --git a/src/domains/Tv/api/Credits/Response.ts b/src/domains/Tv/api/Credits/Response.ts deleted file mode 100644 index 37fc3d9..0000000 --- a/src/domains/Tv/api/Credits/Response.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Cast from 'domains/Tv/api/Credits/dtos/Cast'; -import Crew from 'domains/Tv/api/Credits/dtos/Crew'; - -export default interface Response { - cast: Cast[]; - crew: Crew[]; -} diff --git a/src/domains/Tv/api/Credits/dtos/Cast.ts b/src/domains/Tv/api/Credits/types/Cast.ts similarity index 100% rename from src/domains/Tv/api/Credits/dtos/Cast.ts rename to src/domains/Tv/api/Credits/types/Cast.ts diff --git a/src/domains/Tv/api/Credits/dtos/Crew.ts b/src/domains/Tv/api/Credits/types/Crew.ts similarity index 100% rename from src/domains/Tv/api/Credits/dtos/Crew.ts rename to src/domains/Tv/api/Credits/types/Crew.ts diff --git a/src/domains/Tv/api/Credits/RawResponse.ts b/src/domains/Tv/api/Credits/types/RawResponse.ts similarity index 100% rename from src/domains/Tv/api/Credits/RawResponse.ts rename to src/domains/Tv/api/Credits/types/RawResponse.ts diff --git a/src/domains/Tv/api/Credits/types/Response.ts b/src/domains/Tv/api/Credits/types/Response.ts new file mode 100644 index 0000000..91332d6 --- /dev/null +++ b/src/domains/Tv/api/Credits/types/Response.ts @@ -0,0 +1,7 @@ +import Cast from 'domains/Tv/api/Credits/types/Cast'; +import Crew from 'domains/Tv/api/Credits/types/Crew'; + +export default interface Response { + cast: Cast[]; + crew: Crew[]; +} diff --git a/src/domains/Tv/api/Details/index.ts b/src/domains/Tv/api/Details/index.ts index 728a9e8..d48ac81 100644 --- a/src/domains/Tv/api/Details/index.ts +++ b/src/domains/Tv/api/Details/index.ts @@ -1,16 +1,24 @@ import tmdb from 'services/api/tmdb'; -import { arrayToString, formatTmdbImage, formatDate } from 'shared/utils'; - -import { Type } from 'domains/Favorites/enums'; -import Params from 'domains/Tv/api/Details/Params'; -import RawResponse from 'domains/Tv/api/Details/RawResponse'; -import Response from 'domains/Tv/api/Details/Response'; -import Recommendations from 'domains/Tv/api/Recommendations/Response'; -import Credits from 'domains/Tv/api/Credits/Response'; - -import Crew from 'domains/Tv/api/Credits/dtos/Crew'; -import Cast from 'domains/Tv/api/Credits/dtos/Cast'; +import { arrayToString } from 'shared/utils'; +import { + getBackdrop, + getFeaturedImage, + getReleaseDate, + getReleaseYear, + getSubtitle, + getTitle, +} from 'shared/utils/Entity'; + +import { EntityType } from 'shared/enums'; +import Params from 'domains/Tv/api/Details/types/Params'; +import RawResponse from 'domains/Tv/api/Details/types/RawResponse'; +import Response from 'domains/Tv/api/Details/types/Response'; +import Recommendations from 'domains/Tv/api/Recommendations/types/Response'; +import Credits from 'domains/Tv/api/Credits/types/Response'; + +import Crew from 'domains/Tv/api/Credits/types/Crew'; +import Cast from 'domains/Tv/api/Credits/types/Cast'; const Details = async (tvId: number, params?: Params): Promise => { const response = await rawPopular(tvId, params); @@ -36,7 +44,6 @@ const parseResponse = (tv: RawResponse): Response => { genresNames: arrayToString(tv.genres, 'name'), id: tv.id, originalTitle: tv.original_name, - title: tv.name, popularity: tv.popularity, voteCount: tv.vote_count, voteAverage: tv.vote_average, @@ -46,20 +53,27 @@ const parseResponse = (tv: RawResponse): Response => { person => person.job.toUpperCase() === 'DIRECTOR', )?.name, - releaseDate: formatDate({ value: tv.first_air_date }), - poster: formatTmdbImage({ value: tv.poster_path }), - backdrop: formatTmdbImage({ value: tv.backdrop_path }), + releaseDate: getReleaseDate(tv), + backdrop: getBackdrop(tv), + + featuredImage: getFeaturedImage(tv), + releaseYear: getReleaseYear(tv), + subtitle: getReleaseDate(tv), + title: getTitle(tv), favorite: false, - mediaType: Type.TV, + mediaType: EntityType.TV, } as Response; const recommendations = tv.recommendations?.results.map(recommendation => ({ - poster: formatTmdbImage({ value: recommendation.poster_path }), - backdrop: formatTmdbImage({ value: recommendation.poster_path }), + backdrop: getBackdrop(recommendation), id: recommendation.id, - title: recommendation.title, + + featuredImage: getFeaturedImage(recommendation), + releaseYear: getReleaseYear(recommendation), + subtitle: getSubtitle(recommendation), + title: getTitle(recommendation), favorite: false, - mediaType: Type.TV, + mediaType: EntityType.TV, })) as Recommendations[]; const cast = tv.credits?.cast.slice(0, 15).map(person => ({ @@ -70,7 +84,13 @@ const parseResponse = (tv: RawResponse): Response => { castId: person.cast_id, creditId: person.credit_id, gender: person.gender, - profile: formatTmdbImage({ value: person.profile_path }), + profile: getFeaturedImage(person), + + featuredImage: getFeaturedImage(person), + subtitle: person.character, + title: person.name, + favorite: false, + mediaType: EntityType.PERSON, })) as Cast[]; const crew = tv.credits?.crew.map(person => ({ @@ -80,7 +100,13 @@ const parseResponse = (tv: RawResponse): Response => { department: person.department, creditId: person.credit_id, gender: person.gender, - profile: formatTmdbImage({ value: person.profile_path }), + profile: getFeaturedImage(person), + + featuredImage: getFeaturedImage(person), + subtitle: person.job, + title: person.name, + favorite: false, + mediaType: EntityType.PERSON, })) as Crew[]; const credits = { cast, crew } as Credits; diff --git a/src/domains/Tv/api/Details/Params.ts b/src/domains/Tv/api/Details/types/Params.ts similarity index 100% rename from src/domains/Tv/api/Details/Params.ts rename to src/domains/Tv/api/Details/types/Params.ts diff --git a/src/domains/Tv/api/Details/RawResponse.ts b/src/domains/Tv/api/Details/types/RawResponse.ts similarity index 77% rename from src/domains/Tv/api/Details/RawResponse.ts rename to src/domains/Tv/api/Details/types/RawResponse.ts index 040b1e9..98ec1a9 100644 --- a/src/domains/Tv/api/Details/RawResponse.ts +++ b/src/domains/Tv/api/Details/types/RawResponse.ts @@ -1,5 +1,5 @@ -import Recommendations from 'domains/Movie/api/Recommendations/RawResponse'; -import Credits from 'domains/Movie/api/Credits/RawResponse'; +import Recommendations from 'domains/Tv/api/Recommendations/types/RawResponse'; +import Credits from 'domains/Tv/api/Credits/types/RawResponse'; export default interface RawResponse { poster_path?: string; diff --git a/src/domains/Tv/api/Details/Response.ts b/src/domains/Tv/api/Details/types/Response.ts similarity index 70% rename from src/domains/Tv/api/Details/Response.ts rename to src/domains/Tv/api/Details/types/Response.ts index 713dc59..c4d61ed 100644 --- a/src/domains/Tv/api/Details/Response.ts +++ b/src/domains/Tv/api/Details/types/Response.ts @@ -1,8 +1,7 @@ -import Recommendations from 'domains/Movie/api/Recommendations/Response'; -import Credits from 'domains/Movie/api/Credits/Response'; +import Recommendations from 'domains/Movie/api/Recommendations/types/Response'; +import Credits from 'domains/Movie/api/Credits/types/Response'; export default interface Response { - poster?: string; backdrop?: string; budget: number; overview: string; @@ -16,17 +15,20 @@ export default interface Response { genresNames: string; homepage?: string; id: number; - title: string; originalTitle: string; popularity: number; runtime: string; voteCount: number; voteAverage: number; - favorite: boolean; recommendations?: Recommendations[]; credits?: Credits; directorName?: string; + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; } diff --git a/src/domains/Tv/api/Popular/index.ts b/src/domains/Tv/api/Popular/index.ts index ad61887..5cd87e2 100644 --- a/src/domains/Tv/api/Popular/index.ts +++ b/src/domains/Tv/api/Popular/index.ts @@ -1,11 +1,17 @@ import tmdb from 'services/api/tmdb'; -import { formatDate, formatTmdbImage } from 'shared/utils'; - -import { Type } from 'domains/Favorites/enums'; -import Params from 'domains/Tv/api/Popular/Params'; -import RawResponse from 'domains/Tv/api/Popular/RawResponse'; -import Response from 'domains/Tv/api/Popular/Response'; +import { + getBackdrop, + getFeaturedImage, + getReleaseDate, + getReleaseYear, + getTitle, +} from 'shared/utils/Entity'; + +import { EntityType } from 'shared/enums'; +import Params from 'domains/Tv/api/Popular/types/Params'; +import RawResponse from 'domains/Tv/api/Popular/types/RawResponse'; +import Response from 'domains/Tv/api/Popular/types/Response'; const Popular = async (params?: Params): Promise => { const response = await rawPopular(params); @@ -34,11 +40,15 @@ const parseResponse = (rawResponse: RawResponse[]): Response[] => { popularity: tv.popularity, voteCount: tv.vote_count, - releaseDate: formatDate({ value: tv.first_air_date }), - poster: formatTmdbImage({ value: tv.poster_path }), - backdrop: formatTmdbImage({ value: tv.backdrop_path }), + releaseDate: getReleaseDate(tv), + backdrop: getBackdrop(tv), + + featuredImage: getFeaturedImage(tv), + releaseYear: getReleaseYear(tv), + subtitle: getReleaseYear(tv), + title: getTitle(tv), favorite: false, - mediaType: Type.TV, + mediaType: EntityType.TV, } as Response; response = [...response, parsedMovie]; diff --git a/src/domains/Tv/api/Popular/Params.ts b/src/domains/Tv/api/Popular/types/Params.ts similarity index 100% rename from src/domains/Tv/api/Popular/Params.ts rename to src/domains/Tv/api/Popular/types/Params.ts diff --git a/src/domains/Tv/api/Popular/RawResponse.ts b/src/domains/Tv/api/Popular/types/RawResponse.ts similarity index 100% rename from src/domains/Tv/api/Popular/RawResponse.ts rename to src/domains/Tv/api/Popular/types/RawResponse.ts diff --git a/src/domains/Tv/api/Popular/Response.ts b/src/domains/Tv/api/Popular/types/Response.ts similarity index 74% rename from src/domains/Tv/api/Popular/Response.ts rename to src/domains/Tv/api/Popular/types/Response.ts index a858005..e278f54 100644 --- a/src/domains/Tv/api/Popular/Response.ts +++ b/src/domains/Tv/api/Popular/types/Response.ts @@ -1,5 +1,4 @@ export default interface Response { - poster?: string; backdrop?: string; overview: string; releaseDate: string; @@ -9,6 +8,11 @@ export default interface Response { name: string; popularity: number; voteCount: number; + favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; } diff --git a/src/domains/Tv/api/Recommendations/RawResponse.ts b/src/domains/Tv/api/Recommendations/types/RawResponse.ts similarity index 100% rename from src/domains/Tv/api/Recommendations/RawResponse.ts rename to src/domains/Tv/api/Recommendations/types/RawResponse.ts diff --git a/src/domains/Movie/api/Recommendations/Response.ts b/src/domains/Tv/api/Recommendations/types/Response.ts similarity index 81% rename from src/domains/Movie/api/Recommendations/Response.ts rename to src/domains/Tv/api/Recommendations/types/Response.ts index a36b718..699cca0 100644 --- a/src/domains/Movie/api/Recommendations/Response.ts +++ b/src/domains/Tv/api/Recommendations/types/Response.ts @@ -1,10 +1,12 @@ export default interface Response { - poster?: string; backdrop?: string; id: number; - title: string; favorite: boolean; mediaType: number; + featuredImage?: string; + title: string; + subtitle?: string; + releaseYear?: string; // overview: string; // releaseDate: string; // genresIds: number[]; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 79f59b4..a67eae6 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,15 +1,15 @@ import React, { useCallback, useEffect, useState } from 'react'; +import { EntityType } from 'shared/enums'; import { useAuth } from 'domains/Auth/hooks'; import { useFavorite } from 'domains/Favorites/hooks'; import { NowPlaying, Popular } from 'domains/Movie/api'; import { Popular as TvPopular } from 'domains/Tv/api'; -import MovieResponse from 'domains/Movie/api/Popular/Response'; -import TvPopularResponse from 'domains/Tv/api/Popular/Response'; -import { Type } from 'domains/Favorites/enums'; +import MovieResponse from 'domains/Movie/api/Popular/types/Response'; +import TvPopularResponse from 'domains/Tv/api/Popular/types/Response'; import { ColumnLayout } from 'components'; -import { Footer, Header, Highlights, MovieList } from 'containers'; +import { Footer, Header, Highlights, EntityImageList } from 'containers'; import { HeaderBackground, ContentContainer } from './styles'; const Home: React.FC = () => { @@ -65,17 +65,17 @@ const Home: React.FC = () => {
- - - { /> {user && ( - item.typeId === Type.MOVIE || item.typeId === Type.TV, + item => + item.typeId === EntityType.MOVIE || + item.typeId === EntityType.TV, )} isLoading={isFavoriteLoading} message="Você ainda não possui favoritos." diff --git a/src/pages/Movie/index.tsx b/src/pages/Movie/index.tsx index 4bcab58..c6d9792 100644 --- a/src/pages/Movie/index.tsx +++ b/src/pages/Movie/index.tsx @@ -2,14 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import Params from 'pages/Movie/dtos/Params'; -import MovieDetails from 'domains/Movie/api/Details/Response'; +import MovieDetails from 'domains/Movie/api/Details/types/Response'; import { Color } from 'shared/enums'; import { Details } from 'domains/Movie/api'; import { useAuth } from 'domains/Auth/hooks'; import { useFavorite } from 'domains/Favorites/hooks'; -import { ColumnLayout, Container, Movie as Poster } from 'components'; -import { Header, PersonList, MovieList, Footer } from 'containers'; +import { ColumnLayout, Container } from 'components'; +import { Header, EntityImage, EntityImageList, Footer } from 'containers'; import { ContentContainer, MovieContainer, @@ -79,7 +79,13 @@ const Movie: React.FC = () => { - + @@ -105,14 +111,15 @@ const Movie: React.FC = () => { - - div { - box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - } -`; +export const PosterContainer = styled.div``; export const MovieDetailsContainer = styled.div` display: flex; diff --git a/src/pages/Person/index.tsx b/src/pages/Person/index.tsx index e4c4a3d..ddb8b83 100644 --- a/src/pages/Person/index.tsx +++ b/src/pages/Person/index.tsx @@ -2,14 +2,20 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import Params from 'pages/Person/dtos/Params'; -import PersonDetails from 'domains/Person/api/Details/Response'; +import PersonDetails from 'domains/Person/api/Details/types/Response'; import { Color } from 'shared/enums'; import { Details } from 'domains/Person/api'; import { useAuth } from 'domains/Auth/hooks'; import { useFavorite } from 'domains/Favorites/hooks'; -import { ColumnLayout, Container, Profile } from 'components'; -import { Header, MovieList, Footer, Filmography } from 'containers'; +import { ColumnLayout, Container } from 'components'; +import { + Header, + EntityImageList, + Footer, + Filmography, + EntityImage, +} from 'containers'; import { ContentContainer, PersonContainer, @@ -26,7 +32,7 @@ import { const Person: React.FC = () => { const { id } = useParams(); - const [person, setMovie] = useState({} as PersonDetails); + const [person, setPerson] = useState({} as PersonDetails); const [isLoading, setIsLoading] = useState(false); const { user } = useAuth(); @@ -41,7 +47,7 @@ const Person: React.FC = () => { const response = await Details(+id, params); - setMovie(response); + setPerson(response); return response; } catch (error) { console.log('getPerson -> error', error); @@ -72,7 +78,13 @@ const Person: React.FC = () => { - + @@ -81,7 +93,6 @@ const Person: React.FC = () => { {person.birthday} | {person.gender} | {person.placeOfBirth} - {/* {person.tagline && {`"${person.tagline}"`}} */} Biografia @@ -92,7 +103,7 @@ const Person: React.FC = () => { - div { - box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - } -`; +export const ProfileContainer = styled.div``; export const PersonDetailsContainer = styled.div` display: flex; diff --git a/src/pages/Tv/index.tsx b/src/pages/Tv/index.tsx index b763715..0b06d9a 100644 --- a/src/pages/Tv/index.tsx +++ b/src/pages/Tv/index.tsx @@ -2,14 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import Params from 'pages/Tv/dtos/Params'; -import MovieDetails from 'domains/Tv/api/Details/Response'; +import MovieDetails from 'domains/Tv/api/Details/types/Response'; import { Color } from 'shared/enums'; import { Details } from 'domains/Tv/api'; import { useAuth } from 'domains/Auth/hooks'; import { useFavorite } from 'domains/Favorites/hooks'; -import { ColumnLayout, Container, Movie as Poster } from 'components'; -import { Header, PersonList, MovieList, Footer } from 'containers'; +import { ColumnLayout, Container } from 'components'; +import { Header, EntityImage, EntityImageList, Footer } from 'containers'; import { ContentContainer, MovieContainer, @@ -30,7 +30,7 @@ import { const Tv: React.FC = () => { const { id } = useParams(); - const [movie, setMovie] = useState({} as MovieDetails); + const [tv, setMovie] = useState({} as MovieDetails); const [isLoading, setIsLoading] = useState(false); const { user } = useAuth(); @@ -71,48 +71,49 @@ const Tv: React.FC = () => {
- backdrop + backdrop - + - {movie.title} + {tv.title} - {movie.releaseDate} | {movie.genresNames} | {movie.runtime} + {tv.releaseDate} | {tv.genresNames} | {tv.runtime} Sinopse - {movie.overview} + {tv.overview} Votação do público:{' '} - {movie.voteAverage} + {tv.voteAverage} Diretor: - {movie.directorName} + {tv.directorName} - - diff --git a/src/pages/Tv/styles.ts b/src/pages/Tv/styles.ts index f4dd3b4..31259ab 100644 --- a/src/pages/Tv/styles.ts +++ b/src/pages/Tv/styles.ts @@ -43,13 +43,7 @@ export const MovieContainer = styled.div` } `; -export const PosterContainer = styled.div` - /* display: flex; - flex: 1; */ - & > div { - box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - } -`; +export const PosterContainer = styled.div``; export const MovieDetailsContainer = styled.div` display: flex; diff --git a/src/domains/Favorites/enums/Type.ts b/src/shared/enums/EntityType.ts similarity index 69% rename from src/domains/Favorites/enums/Type.ts rename to src/shared/enums/EntityType.ts index 896d904..1069803 100644 --- a/src/domains/Favorites/enums/Type.ts +++ b/src/shared/enums/EntityType.ts @@ -1,4 +1,4 @@ -enum Type { +enum EntityType { MOVIE = 1, TV = 2, PERSON = 3, @@ -8,4 +8,4 @@ enum Type { KEYWORD = 7, } -export default Type; +export default EntityType; diff --git a/src/shared/enums/index.ts b/src/shared/enums/index.ts index 780d00b..25eab32 100644 --- a/src/shared/enums/index.ts +++ b/src/shared/enums/index.ts @@ -1,4 +1,5 @@ export { default as Color } from './Color'; +export { default as EntityType } from './EntityType'; export { default as PosterHeight } from './PosterHeight'; export { default as PosterWidth } from './PosterWidth'; export { default as Size } from './Size'; diff --git a/src/shared/utils/Entity/getBackdrop.ts b/src/shared/utils/Entity/getBackdrop.ts new file mode 100644 index 0000000..879cf81 --- /dev/null +++ b/src/shared/utils/Entity/getBackdrop.ts @@ -0,0 +1,9 @@ +import { formatTmdbImage } from 'shared/utils'; + +const getBackdrop = (value: any): string | null => { + return formatTmdbImage({ + value: value.backdrop_path || value.profile_path, + }); +}; + +export default getBackdrop; diff --git a/src/shared/utils/Entity/getCharacter.ts b/src/shared/utils/Entity/getCharacter.ts new file mode 100644 index 0000000..37df398 --- /dev/null +++ b/src/shared/utils/Entity/getCharacter.ts @@ -0,0 +1,5 @@ +const getCharacter = (value: any): string => { + return value.character?.toUpperCase().includes('SELF') ? '' : value.character; +}; + +export default getCharacter; diff --git a/src/shared/utils/Entity/getDescription.ts b/src/shared/utils/Entity/getDescription.ts new file mode 100644 index 0000000..dcd1105 --- /dev/null +++ b/src/shared/utils/Entity/getDescription.ts @@ -0,0 +1,16 @@ +import { arrayToString } from 'shared/utils'; + +const getDescription = (value: any): string | null => { + return ( + (value.overview && value.overview) || + (value.known_for && + arrayToString( + value.known_for.map((item: any) => ({ + title: item.title || item.name, + })), + 'title', + )) + ); +}; + +export default getDescription; diff --git a/src/shared/utils/Entity/getFeaturedImage.ts b/src/shared/utils/Entity/getFeaturedImage.ts new file mode 100644 index 0000000..9dcd678 --- /dev/null +++ b/src/shared/utils/Entity/getFeaturedImage.ts @@ -0,0 +1,9 @@ +import { formatTmdbImage } from 'shared/utils'; + +const getFeaturedImage = (value: any): string | null => { + return formatTmdbImage({ + value: value.poster_path || value.profile_path, + }); +}; + +export default getFeaturedImage; diff --git a/src/shared/utils/Entity/getGender.ts b/src/shared/utils/Entity/getGender.ts new file mode 100644 index 0000000..5ae3620 --- /dev/null +++ b/src/shared/utils/Entity/getGender.ts @@ -0,0 +1,5 @@ +const getGender = (value: any): string => { + return value.gender === 2 ? 'Masculino' : 'Feminino'; +}; + +export default getGender; diff --git a/src/shared/utils/Entity/getOriginalDate.ts b/src/shared/utils/Entity/getOriginalDate.ts new file mode 100644 index 0000000..68fca5e --- /dev/null +++ b/src/shared/utils/Entity/getOriginalDate.ts @@ -0,0 +1,5 @@ +const getOriginalDate = (value: any): string => { + return value?.release_date || value?.first_air_date || value?.birthday; +}; + +export default getOriginalDate; diff --git a/src/shared/utils/Entity/getOriginalTitle.ts b/src/shared/utils/Entity/getOriginalTitle.ts new file mode 100644 index 0000000..5902c94 --- /dev/null +++ b/src/shared/utils/Entity/getOriginalTitle.ts @@ -0,0 +1,5 @@ +const getOriginalTitle = (value: any): string | null => { + return value.original_title || value.original_name; +}; + +export default getOriginalTitle; diff --git a/src/shared/utils/Entity/getReleaseDate.ts b/src/shared/utils/Entity/getReleaseDate.ts new file mode 100644 index 0000000..0f15248 --- /dev/null +++ b/src/shared/utils/Entity/getReleaseDate.ts @@ -0,0 +1,9 @@ +import { formatDate } from 'shared/utils'; + +const getReleaseDate = (value: any): string => { + return formatDate({ + value: value?.release_date || value?.first_air_date || value?.birthday, + }); +}; + +export default getReleaseDate; diff --git a/src/shared/utils/Entity/getReleaseYear.ts b/src/shared/utils/Entity/getReleaseYear.ts new file mode 100644 index 0000000..b94856d --- /dev/null +++ b/src/shared/utils/Entity/getReleaseYear.ts @@ -0,0 +1,9 @@ +const getReleaseYear = (value: any): string => { + return ( + value.release_date?.substring(0, 4) || + value.first_air_date?.substring(0, 4) || + value.birthday?.substring(0, 4) + ); +}; + +export default getReleaseYear; diff --git a/src/shared/utils/Entity/getSubtitle.ts b/src/shared/utils/Entity/getSubtitle.ts new file mode 100644 index 0000000..fbff1c9 --- /dev/null +++ b/src/shared/utils/Entity/getSubtitle.ts @@ -0,0 +1,9 @@ +const getSubtitle = (value: any): string | null => { + return ( + value.release_date?.substring(0, 4) || + value.first_air_date?.substring(0, 4) || + (value.known_for && 'Conhecido(a) por: ') + ); +}; + +export default getSubtitle; diff --git a/src/shared/utils/Entity/getTitle.ts b/src/shared/utils/Entity/getTitle.ts new file mode 100644 index 0000000..3a98480 --- /dev/null +++ b/src/shared/utils/Entity/getTitle.ts @@ -0,0 +1,5 @@ +const getTitle = (value: any): string | null => { + return value.title || value.name; +}; + +export default getTitle; diff --git a/src/shared/utils/Entity/index.ts b/src/shared/utils/Entity/index.ts new file mode 100644 index 0000000..ef2fb89 --- /dev/null +++ b/src/shared/utils/Entity/index.ts @@ -0,0 +1,11 @@ +export { default as getBackdrop } from './getBackdrop'; +export { default as getCharacter } from './getCharacter'; +export { default as getDescription } from './getDescription'; +export { default as getFeaturedImage } from './getFeaturedImage'; +export { default as getGender } from './getGender'; +export { default as getOriginalDate } from './getOriginalDate'; +export { default as getOriginalTitle } from './getOriginalTitle'; +export { default as getReleaseDate } from './getReleaseDate'; +export { default as getReleaseYear } from './getReleaseYear'; +export { default as getSubtitle } from './getSubtitle'; +export { default as getTitle } from './getTitle'; diff --git a/src/shared/utils/enums/index.ts b/src/shared/utils/enums/index.ts new file mode 100644 index 0000000..2c99b60 --- /dev/null +++ b/src/shared/utils/enums/index.ts @@ -0,0 +1 @@ +export { default as TmdbImageSize } from './TmdbImageSize'; diff --git a/src/shared/utils/formatDate.ts b/src/shared/utils/formatDate.ts index cd3c1c8..eae83a4 100644 --- a/src/shared/utils/formatDate.ts +++ b/src/shared/utils/formatDate.ts @@ -1,4 +1,4 @@ -import FormatDate from 'shared/utils/dtos/FormatDate'; +import FormatDate from 'shared/utils/types/FormatDate'; const formatDate = ({ value }: FormatDate): string => { if (!value) { diff --git a/src/shared/utils/formatTmdbImage.ts b/src/shared/utils/formatTmdbImage.ts index a073874..ce451b7 100644 --- a/src/shared/utils/formatTmdbImage.ts +++ b/src/shared/utils/formatTmdbImage.ts @@ -1,4 +1,4 @@ -import FormatTmdbImage from 'shared/utils/dtos/FormatTmdbImage'; +import FormatTmdbImage from 'shared/utils/types/FormatTmdbImage'; import TmdbImageSize from 'shared/utils/enums/TmdbImageSize'; const formatTmdbImage = ({ diff --git a/src/shared/utils/getEntityRoute.ts b/src/shared/utils/getEntityRoute.ts new file mode 100644 index 0000000..5d9f924 --- /dev/null +++ b/src/shared/utils/getEntityRoute.ts @@ -0,0 +1,18 @@ +import Route from 'routes/enums'; +import { EntityType } from 'shared/enums'; + +const getEntityRoute = (mediaTypeId?: number): string | undefined => { + if (mediaTypeId === EntityType.TV) { + return Route.TV; + } + + if (mediaTypeId === EntityType.MOVIE) { + return Route.MOVIE; + } + + if (mediaTypeId === EntityType.PERSON) { + return Route.PERSON; + } +}; + +export default getEntityRoute; diff --git a/src/shared/utils/getMediaTypeId.ts b/src/shared/utils/getMediaTypeId.ts index 6022e9d..8622e5c 100644 --- a/src/shared/utils/getMediaTypeId.ts +++ b/src/shared/utils/getMediaTypeId.ts @@ -1,16 +1,16 @@ -import { Type } from 'domains/Favorites/enums'; +import { EntityType } from 'shared/enums'; const getMediaTypeId = (mediaType?: string): number | undefined => { if (mediaType === 'tv') { - return Type.TV; + return EntityType.TV; } if (mediaType === 'movie') { - return Type.MOVIE; + return EntityType.MOVIE; } if (mediaType === 'person') { - return Type.PERSON; + return EntityType.PERSON; } }; diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts index 17bc6e0..68ead60 100644 --- a/src/shared/utils/index.ts +++ b/src/shared/utils/index.ts @@ -5,5 +5,6 @@ export { default as getBackground } from './colors/getBackground'; export { default as getBackgroundByTheme } from './colors/getBackgroundByTheme'; export { default as getColor } from './colors/getColor'; export { default as getColorByTheme } from './colors/getColorByTheme'; +export { default as getEntityRoute } from './getEntityRoute'; export { default as getMediaTypeId } from './getMediaTypeId'; export { default as getValidationErrors } from './getValidationErrors'; diff --git a/src/shared/utils/dtos/FormatDate.ts b/src/shared/utils/types/FormatDate.ts similarity index 100% rename from src/shared/utils/dtos/FormatDate.ts rename to src/shared/utils/types/FormatDate.ts diff --git a/src/shared/utils/dtos/FormatTmdbImage.ts b/src/shared/utils/types/FormatTmdbImage.ts similarity index 100% rename from src/shared/utils/dtos/FormatTmdbImage.ts rename to src/shared/utils/types/FormatTmdbImage.ts