feat: add movie genre

package.json

@@ -1,6 +1,6 @@
 {
   "name": "randovie",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -13,7 +13,6 @@
     "axios": "0.25.0",
     "next": "11.1.2",
     "react": "17.0.2",
-    "react-device-detect": "2.1.2",
     "react-dom": "17.0.2",
     "tailwindcss": "2.2.9"
   },

src/@interfaces/pages/Home/IHomeProps.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { MovieType } from '../../../@types/pages/Home/Movies';
+import { MovieType, TGenre } from '../../../@types/pages/Home/Movies';
 
 export interface IHomeProps {
   movie: MovieType;
@@ -40,7 +40,7 @@ export interface IMovie {
       }[]
     },
     Genre: {
-      multi_select: string[]
+      multi_select: TGenre[]
     }
   }
 }

src/@types/pages/Home/Movies.ts

@@ -4,11 +4,16 @@ export type PlatformType = {
   color: string;
 }
 
+export type TGenre = {
+  id: string;
+  name: string;
+}
+
 export type MovieType = {
   title: string;
   originalTitle: string;
   sinopse: string;
-  genre: string[];
+  genres: TGenre[];
   cover: string;
   platforms: PlatformType[],
   duration: string;

src/components/Cover/index.tsx

@@ -2,7 +2,7 @@ import { isMobile } from 'react-device-detect';
 
 import { ICoverProps } from './@interfaces';
 
-function Cover({ cover, title, loading }: ICoverProps) {
+export function Cover({ cover, title, loading }: ICoverProps) {
   return (
     <div>
       {loading ? (
@@ -18,13 +18,11 @@ function Cover({ cover, title, loading }: ICoverProps) {
         <img
           src={cover}
           alt={title}
-          height={isMobile ? 280 : 480}
-          width={isMobile ? 280 : 480}
+          height={360}
+          width={360}
           className="rounded-2xl md:mr-86"
         />
       )}
     </div>
   );
 }
-
-export default Cover;

src/components/Duration/index.tsx

@@ -1,8 +1,8 @@
 import { IDurationProps } from './@interfaces';
 
-export default function Duration({ duration }: IDurationProps) {
+export function Duration({ duration }: IDurationProps) {
   return (
-    <section className="flex flex-row justify-center items-center mt-4 md:ml-8">
+    <section className="flex flex-row justify-center items-center mt-4">
       <p className="text-white text-lg font-bold">Duração:</p>
       <p className="text-white ml-2 text-lg">
         {duration}

src/components/Genres/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface IGenreProps {
+  genres: {
+    id: string;
+    name: string,
+  }[]
+}
+
+export function Genres({ genres }: IGenreProps) {
+  function randonColor() {
+    const colors = [
+      'bg-red-200',
+      'bg-blue-200',
+      'bg-green-200',
+      'bg-yellow-200',
+      'bg-pink-200',
+      'bg-purple-200',
+      'bg-indigo-200',
+    ];
+
+    const randomNumber = Math.floor(Math.random() * colors.length);
+
+    return colors[randomNumber];
+  }
+
+  return (
+    <div className="flex flex-row flex-wrap justify-center items-center mt-4">
+      {genres.map((genre) => (
+        <span
+          key={genre.id}
+          className={`${randonColor()} font-bold py-2 px-4 rounded-full text-xs mr-2 mb-2`}
+        >
+          {genre.name}
+        </span>
+      ))}
+    </div>
+  );
+}

src/components/Platform/index.tsx

@@ -4,9 +4,9 @@ import { IPlatformProps } from './@interfaces';
 
 import styles from './style.module.css';
 
-export default function Platform({ platforms }: IPlatformProps) {
+export function Platform({ platforms }: IPlatformProps) {
   return (
-    <section className="mt-4 md:ml-8">
+    <section className="mt-4">
       <h2 className="text-xl text-white text-center font-bold">Plataforma(s):</h2>
       <div className="flex flex-col justify-center items-center mt-2">
         <ul className="flex flex-row justify-center items-center">

src/components/Title/index.tsx

@@ -1,8 +1,8 @@
 import { ITitleProps } from './@interfaces';
 
-export default function Title({ title, originalTitle, description }: ITitleProps) {
+export function Title({ title, originalTitle, description }: ITitleProps) {
   return (
-    <section className="flex flex-col justify-center items-center mt-4 mx-10 md:mx-800">
+    <section className="flex flex-col justify-center items-center mt-4 mx-10 md:mx-96">
       <h1 className="md:text-4xl sm:text-2xl text-white text-center">
         {title}
       </h1>

src/components/index.ts

@@ -0,0 +1,6 @@
+export { Cover } from './Cover'
+export { Duration } from './Duration'
+export { Genres } from './Genres'
+export { Platform } from './Platform'
+export { Title } from './Title'
+

src/pages/index.tsx

@@ -3,10 +3,7 @@ import { GetServerSideProps } from 'next';
 
 import notion from '../services/notion';
 
-import Cover from '../components/Cover';
-import Title from '../components/Title';
-import Duration from '../components/Duration';
-import Platform from '../components/Platform';
+import { Cover, Duration, Genres, Platform, Title } from '../components';
 
 import { MovieType } from '../@types/pages/Home/Movies';
 import { IHomeProps, IMovie } from '../@interfaces/pages/Home/IHomeProps';
@@ -30,7 +27,9 @@ export default function Home({ movie, movies }: IHomeProps) {
   }
 
   useEffect(() => {
-    window.clearTimeout(timeLoadingRef.current);
+    return () => {
+      window.clearTimeout(timeLoadingRef.current);
+    }
   }, []);
 
   return (
@@ -51,6 +50,8 @@ export default function Home({ movie, movies }: IHomeProps) {
         description={movieShown.sinopse}
       />
 
+      <Genres genres={movieShown.genres} />
+
       <Duration duration={movieShown.duration} />
 
       <Platform platforms={movieShown.platforms} />

yarn.lock

@@ -3438,13 +3438,6 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-[email protected]:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.1.2.tgz#60abb6fa361ec4cc839469a0c4c3e9b8ea17d6b5"
-  integrity sha512-N42xttwez3ECgu4KpOL2ICesdfoz8NCBfmc1rH9FRYSjH7NmMyANPSrQ3EvAtJyj/6TzJNhrANSO38iXjCB2Ug==
-  dependencies:
-    ua-parser-js "^0.7.30"
-
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -4152,11 +4145,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86"
   integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==
 
-ua-parser-js@^0.7.30:
-  version "0.7.35"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
-  integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==
-
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"