Merge pull request #33 from 90lucasgabriel/feature/WJ-18

WJ-18 - Create and connect TMDB API

.env.example

@@ -1,4 +1,5 @@
 REACT_APP_IS_PRODUCTION=
 REACT_APP_API_URL=
 REACT_APP_TMDB_API_URL=https://api.themoviedb.org/3
+REACT_APP_TMDB_API_KEY=
 REACT_APP_TMDB_IMAGE_URL=https://image.tmdb.org/t/p

src/domains/Movie/api/Popular/RawResponse.ts

@@ -0,0 +1,15 @@
+export default interface RawResponse {
+  poster_path?: string;
+  overview: string;
+  release_date: string;
+  genre_ids: number[];
+  id: number;
+  original_title: string;
+  original_language: string;
+  title: string;
+  backdrop_path?: string;
+  popularity: number;
+  vote_count: number;
+  video: boolean;
+  vote_average: number;
+}

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

@@ -0,0 +1,13 @@
+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;
+}

src/domains/Movie/api/Popular/index.ts

@@ -0,0 +1,45 @@
+import tmdb from 'services/api/tmdb';
+
+import RawResponse from 'domains/Movie/api/Popular/RawResponse';
+import Response from 'domains/Movie/api/Popular/Response';
+import formatDate from 'shared/utils/formatDate';
+import formatTmdbImage from 'shared/utils/formatTmdbImage';
+
+const Popular = async (): Promise<Response[]> => {
+  const response = await rawPopular();
+
+  return parseResponse(response);
+};
+
+export const rawPopular = async (): Promise<RawResponse[]> => {
+  const response = await tmdb.get('/movie/popular');
+
+  return response.data.results;
+};
+
+const parseResponse = (rawResponse: RawResponse[]): Response[] => {
+  let response = [] as Response[];
+
+  rawResponse.forEach(movie => {
+    const parsedMovie = {
+      overview: movie.overview,
+      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 }),
+    } as Response;
+
+    response = [...response, parsedMovie];
+  });
+
+  return response;
+};
+
+export default Popular;

src/services/api/tmdb.ts

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const tmdb = axios.create({
+  baseURL: process.env.REACT_APP_TMDB_API_URL,
+});
+
+tmdb.interceptors.request.use(config => {
+  const params = config.params || {};
+
+  params.api_key = process.env.REACT_APP_TMDB_API_KEY;
+  params.language = 'pt-BR';
+  params.region = 'BR';
+
+  return { ...config, params };
+});
+
+export default tmdb;

src/shared/utils/dtos/FormatDate.ts

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

src/shared/utils/dtos/FormatTmdbImage.ts

@@ -0,0 +1,6 @@
+import TmdbImageSize from 'shared/utils/enums/TmdbImageSize';
+
+export default interface FormatTmdbImage {
+  value?: string;
+  size?: TmdbImageSize;
+}

src/shared/utils/enums/TmdbImageSize.ts

@@ -0,0 +1,8 @@
+enum TmdbImageSize {
+  SMALL = 'w300',
+  MEDIUM = 'w780',
+  LARGE = 'w1280',
+  ORIGINAL = 'original',
+}
+
+export default TmdbImageSize;

src/shared/utils/formatDate.ts

@@ -0,0 +1,16 @@
+import FormatDate from 'shared/utils/dtos/FormatDate';
+
+const formatDate = ({ value }: FormatDate): string => {
+  if (!value) {
+    return '-';
+  }
+
+  const date = new Date(value);
+  date.setDate(date.getDate() + 1);
+
+  const formattedDate = Intl.DateTimeFormat('pt-BR').format(date);
+
+  return formattedDate;
+};
+
+export default formatDate;

src/shared/utils/formatTmdbImage.ts

@@ -0,0 +1,15 @@
+import FormatTmdbImage from 'shared/utils/dtos/FormatTmdbImage';
+import TmdbImageSize from 'shared/utils/enums/TmdbImageSize';
+
+const formatTmdbImage = ({
+  value,
+  size = TmdbImageSize.MEDIUM,
+}: FormatTmdbImage): string | null => {
+  if (!value) {
+    return null;
+  }
+
+  return `${process.env.REACT_APP_TMDB_IMAGE_URL}/${size}${value}`;
+};
+
+export default formatTmdbImage;