new version of project

.env.example

@@ -1,2 +1,3 @@
+#Notion API
 NOTION_TOKEN=
 NOTION_DATABASE_ID=

package.json

@@ -1,6 +1,6 @@
 {
   "name": "randovie",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,32 +9,32 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@notionhq/client": "^0.3.1",
-    "axios": "^0.25.0",
+    "@notionhq/client": "2.2.6",
+    "axios": "0.25.0",
     "next": "11.1.2",
     "react": "17.0.2",
-    "react-device-detect": "^2.1.2",
+    "react-device-detect": "2.1.2",
     "react-dom": "17.0.2",
-    "tailwindcss": "^2.2.9"
+    "tailwindcss": "2.2.9"
   },
   "devDependencies": {
-    "@types/axios": "^0.14.0",
-    "@types/react": "^17.0.19",
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.30.0",
-    "autoprefixer": "^10.3.4",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "@types/axios": "0.14.0",
+    "@types/react": "17.0.19",
+    "@typescript-eslint/eslint-plugin": "4.30.0",
+    "@typescript-eslint/parser": "4.30.0",
+    "autoprefixer": "10.3.4",
+    "babel-eslint": "10.1.0",
+    "eslint": "7.32.0",
+    "eslint-config-airbnb": "18.2.1",
     "eslint-config-next": "11.1.2",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "postcss": "^8.3.6",
-    "prettier": "^2.3.2",
-    "typescript": "^4.4.2"
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.25.1",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "postcss": "8.3.6",
+    "prettier": "2.3.2",
+    "typescript": "4.4.2"
   }
 }

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

@@ -8,15 +8,18 @@ export interface IHomeProps {
 
 export interface IMovie {
   cover: {
-    external: {
+    external?: {
+      url: string;
+    }
+    file?: {
       url: string;
     }
   },
   properties: {
-    'Watch in': {
+    'Watch on': {
       multi_select: string[]
     },
-    'Duração': {
+    'Duration': {
       rich_text: {
         plain_text: string
       }[]
@@ -30,6 +33,14 @@ export interface IMovie {
       rich_text: {
         plain_text: string
       }[]
+    },
+    Sinopse: {
+      rich_text: {
+        plain_text: string
+      }[]
+    },
+    Genre: {
+      multi_select: string[]
     }
   }
 }

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

@@ -7,6 +7,8 @@ export type PlatformType = {
 export type MovieType = {
   title: string;
   originalTitle: string;
+  sinopse: string;
+  genre: string[];
   cover: string;
   platforms: PlatformType[],
   duration: string;

src/components/Container/index.tsx

@@ -2,7 +2,7 @@ import { IContainerProps } from './@interfaces';
 
 export default function Container({ children }: IContainerProps) {
   return (
-    <div className="flex flex-row justify-center items-center md:mt-4">
+    <div className="flex flex-col justify-center items-center md:mt-4">
       {children}
     </div>
   );

src/components/Cover/index.tsx

@@ -1,8 +1,10 @@
+import { isMobile } from 'react-device-detect';
+
 import { ICoverProps } from './@interfaces';
 
 function Cover({ cover, title, loading }: ICoverProps) {
   return (
-    <div className="md:mr-8 md:border-r-4 md:border-blue-500 sm:mb-2">
+    <div>
       {loading ? (
         <div className="flex flex-col justify-center items-center">
           <div className="text-center">
@@ -16,12 +18,11 @@ function Cover({ cover, title, loading }: ICoverProps) {
         <img
           src={cover}
           alt={title}
-          height={280}
-          width={280}
-          className="rounded-2xl md:mr-8 "
+          height={isMobile ? 280 : 480}
+          width={isMobile ? 280 : 480}
+          className="rounded-2xl md:mr-86"
         />
       )}
-
     </div>
   );
 }

src/components/Duration/index.tsx

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

src/components/Platform/PlatformsList/index.tsx

@@ -7,6 +7,7 @@ import hboImg from '../../../../public/hbomax.png';
 import paramountImg from '../../../../public/paramount.jpeg';
 import primeImg from '../../../../public/prime.png';
 import appleImg from '../../../../public/appletv.jpg';
+import telecineGloboplayImg from '../../../../public/telecineGloboplay.png';
 
 import { IPlatformsListProps } from './@interfaces';
 
@@ -26,6 +27,8 @@ export default function PlatformsList({
       'HBO Max': hboImg,
       'Paramount+': paramountImg,
       'AppleTV+': appleImg,
+      'Globoplay / Telecine': telecineGloboplayImg,
+
     };
 
     if (platformToShow[name]) {

src/components/Platform/index.tsx

@@ -6,8 +6,8 @@ import styles from './style.module.css';
 
 export default function Platform({ platforms }: IPlatformProps) {
   return (
-    <div className="mt-4 md:ml-8">
-      <h2 className="text-xl text-white text-center">Plataforma(s):</h2>
+    <section className="mt-4 md:ml-8">
+      <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">
           {platforms.length <= 0 ? (
@@ -27,6 +27,6 @@ export default function Platform({ platforms }: IPlatformProps) {
 
         </ul>
       </div>
-    </div>
+    </section>
   );
 }

src/components/Title/@interfaces/index.ts

@@ -1,4 +1,5 @@
 export interface ITitleProps {
   title: string
   originalTitle: string
+  description: string
 }

src/components/Title/index.tsx

@@ -1,13 +1,15 @@
 import { ITitleProps } from './@interfaces';
 
-export default function Title({ title, originalTitle }: ITitleProps) {
+export default function Title({ title, originalTitle, description }: ITitleProps) {
   return (
-    <section className="flex flex-col justify-center items-center ">
-      <h1 className="md:text-4xl sm:text-2xl text-white text-center md:ml-8">
+    <section className="flex flex-col justify-center items-center mt-4 mx-10 md:mx-800">
+      <h1 className="md:text-4xl sm:text-2xl text-white text-center">
         {title}
       </h1>
 
-      <h4 className="text-gray-400 font-bold text-center md:ml-8 mt-2">{originalTitle}</h4>
+      <h2 className="text-gray-400 font-bold text-center mt-2">{originalTitle}</h2>
+
+      <p className="text-gray-50 text-center mt-2 leading-6">{description}</p>
     </section>
   );
 }

src/pages/_app.tsx

@@ -13,9 +13,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta name="description" content="Randovie is a random movie generator" />
       </Head>
 
-      <main className="bg-gray-800 h-screen w-screen flex flex-col justify-center items-center">
-        <Component {...pageProps} />
-      </main>
+      <Component {...pageProps} />
     </>
   );
 }

src/pages/_document.tsx

@@ -9,7 +9,7 @@ export default class MyDocument extends Document {
         <Head>
           <link rel="shortcut icon" href="/randovie.svg" type="image/svg" />
         </Head>
-        <body>
+        <body className="h-screen bg-gray-800">
           <Main />
           <NextScript />
         </body>

src/pages/index.tsx

@@ -1,10 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { GetServerSideProps } from 'next';
 
-import { BrowserView, MobileView } from 'react-device-detect';
 import notion from '../services/notion';
 
-import Container from '../components/Container';
 import Cover from '../components/Cover';
 import Title from '../components/Title';
 import Duration from '../components/Duration';
@@ -36,34 +34,27 @@ export default function Home({ movie, movies }: IHomeProps) {
   }, []);
 
   return (
-    <>
+    <main className="flex flex-col justify-center items-center">
       <button
         onClick={getNewMovie}
         type="button"
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mb-4 mt-4 h-12 md:ml-8"
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mb-4 h-12 md:ml-8 mt-16"
       >
         Buscar Novo Filme
       </button>
 
-      <Container>
-        <BrowserView>
-          <Cover cover={movieShown.cover} title={movieShown.title} loading={loadingMovie} />
-        </BrowserView>
-
-        <section className="flex flex-col justify-center items-center border-separate">
-          <MobileView className="m-0">
-            <Cover cover={movieShown.cover} title={movieShown.title} loading={loadingMovie} />
-          </MobileView>
-          <Title title={movieShown.title} originalTitle={movieShown.originalTitle} />
-          <Duration duration={movieShown.duration} />
-          <Platform
-            platforms={movieShown.platforms}
-          />
-        </section>
-
-      </Container>
-
-    </>
+      <Cover cover={movieShown.cover} title={movieShown.title} loading={loadingMovie} />
+
+      <Title
+        title={movieShown.title}
+        originalTitle={movieShown.originalTitle}
+        description={movieShown.sinopse}
+      />
+
+      <Duration duration={movieShown.duration} />
+
+      <Platform platforms={movieShown.platforms} />
+    </main>
   );
 }
 
@@ -75,22 +66,27 @@ export const getServerSideProps: GetServerSideProps = async () => {
   });
 
   const randomMovie = response.results[randomNumber] as unknown as IMovie;
+
   const allMovies = response.results as unknown as IMovie[];
 
   const movie = {
     title: randomMovie.properties.Name.title[0].plain_text,
-    cover: randomMovie.cover.external.url,
-    platforms: randomMovie.properties['Watch in'].multi_select,
-    duration: randomMovie.properties.Duração.rich_text[0].plain_text,
     originalTitle: randomMovie.properties.i18n.rich_text[0].plain_text,
+    cover: randomMovie.cover.external.url || randomMovie.cover.file.url,
+    sinopse: randomMovie.properties.Sinopse.rich_text[0].plain_text,
+    platforms: randomMovie.properties['Watch on'].multi_select,
+    duration: randomMovie.properties.Duration.rich_text[0].plain_text,
+    genres: randomMovie.properties.Genre.multi_select,
   };
 
   const movies = allMovies.map((movieData) => ({
-    title: movieData.properties.Name.title[0].plain_text || '',
-    cover: movieData.cover.external?.url || '',
-    platforms: movieData.properties['Watch in'].multi_select || [],
-    duration: movieData.properties['Duração'].rich_text[0].plain_text || '',
-    originalTitle: movieData.properties.i18n.rich_text[0].plain_text || '',
+    title: movieData.properties.Name.title[0].plain_text,
+    originalTitle: movieData.properties.i18n.rich_text[0].plain_text,
+    cover: movieData.cover.external?.url || movieData.cover.file.url,
+    sinopse: movieData.properties.Sinopse.rich_text[0].plain_text,
+    platforms: movieData.properties['Watch on'].multi_select,
+    duration: movieData.properties.Duration.rich_text[0].plain_text,
+    genres: movieData.properties.Genre.multi_select,
   }));
 
   return {