bring all movies and using next image

.eslintrc.json

@@ -1,45 +1,3 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "jest": true
-  },
-  "extends": [
-    "next",
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "airbnb"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react",
-    "@typescript-eslint"
-  ],
-  "rules": {
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
-    "react/jsx-props-no-spreading": "off",
-    "react/prop-types": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "import/prefer-default-export": "off",
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "ts": "never",
-        "tsx": "never"
-      }
-    ]
-  }
+  "extends": ["eslint-config-henrique/react"]
 }

.nvmrc

@@ -0,0 +1 @@
+16.20.0

next.config.js

@@ -1,3 +1,7 @@
 module.exports = {
   reactStrictMode: true,
-}
+
+  images: {
+    domains: ['s3.us-west-2.amazonaws.com'],
+  },
+};

package.json

@@ -2,6 +2,9 @@
   "name": "randovie",
   "version": "1.2.1",
   "private": true,
+  "engines": {
+    "node": "> 16.0.0"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -11,29 +14,20 @@
   "dependencies": {
     "@notionhq/client": "2.2.6",
     "axios": "0.25.0",
+    "lottie-react": "2.4.0",
     "next": "11.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "tailwindcss": "2.2.9"
+    "tailwindcss": "3.3.3"
   },
   "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",
+    "autoprefixer": "10.4.14",
     "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",
+    "eslint": "8.46.0",
+    "eslint-config-henrique": "^1.1.0",
+    "postcss": "8.4.27",
     "typescript": "4.4.2"
   }
 }

src/components/Cover/index.tsx

@@ -1,26 +1,24 @@
+import Image from 'next/image';
+
+import { base64Blur } from './utils/base64Blur';
+
 import { ICoverProps } from './@interfaces';
 
 export function Cover({ cover, title, loading }: ICoverProps) {
   return (
-    <div>
-      {loading ? (
-        <div className="flex flex-col justify-center items-center">
-          <div className="text-center">
-            <div className="spinner-border text-blue-500" role="status">
-              <span className="sr-only">Loading...</span>
-            </div>
-          </div>
-          <p className="text-center text-blue-500">Carregando...</p>
-        </div>
-      ) : (
-        <img
-          src={cover}
-          alt={title}
-          height={360}
-          width={360}
-          className="rounded-2xl md:mr-86"
-        />
-      )}
+    <div className="flex justify-center  w-[360px] h-[240px]">
+      <Image
+        className="rounded-2xl"
+        src={cover}
+        alt={title}
+        height={240}
+        width={360}
+        layout="fixed"
+        quality={60}
+        priority
+        placeholder="blur"
+        blurDataURL={base64Blur}
+      />
     </div>
   );
 }

src/components/Cover/utils/base64Blur.ts

@@ -0,0 +1,22 @@
+const shimmer = (w: number, h: number) => `
+<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="g">
+      <stop stop-color="#333" offset="20%" />
+      <stop stop-color="#222" offset="50%" />
+      <stop stop-color="#333" offset="70%" />
+    </linearGradient>
+  </defs>
+  <rect width="${w}" height="${h}" fill="#333" />
+  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+</svg>`;
+
+const toBase64 = (str: string) =>
+  typeof window === 'undefined'
+    ? Buffer.from(str).toString('base64')
+    : window.btoa(str);
+
+export const base64Blur = `data:image/svg+xml;base64,${toBase64(
+  shimmer(700, 475),
+)}`;

src/components/Title/index.tsx

@@ -2,14 +2,14 @@ import { ITitleProps } from './@interfaces';
 
 export function Title({ title, originalTitle, description }: ITitleProps) {
   return (
-    <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">
+    <section className="flex flex-col items-center justify-center mx-10 mt-4 md:mx-96">
+      <h1 className="text-center text-white md:text-4xl sm:text-2xl">
         {title}
       </h1>
 
-      <h2 className="text-gray-400 font-bold text-center mt-2">{originalTitle}</h2>
+      <h2 className="mt-2 text-lg font-bold text-center text-gray-400">{originalTitle}</h2>
 
-      <p className="text-gray-50 text-center mt-2 leading-6">{description}</p>
+      <p className="mt-2 leading-6 text-center text-gray-50">{description}</p>
     </section>
   );
 }

src/pages/index.tsx

@@ -1,79 +1,127 @@
 import { useEffect, useRef, useState } from 'react';
 import { GetServerSideProps } from 'next';
 
+import Lottie from 'lottie-react';
+
 import notion from '../services/notion';
 
 import { Cover, Duration, Genres, Platform, Title } from '../components';
 
+import movieLoadingLottier from '../assets/lottie/movie-loading.json';
+
 import { MovieType } from '../@types/pages/Home/Movies';
 import { IHomeProps, IMovie } from '../@interfaces/pages/Home/IHomeProps';
+import {
+  PageObjectResponse,
+  PartialPageObjectResponse,
+} from '@notionhq/client/build/src/api-endpoints';
 
 export default function Home({ movie, movies }: IHomeProps) {
   const timeLoadingRef = useRef(0);
 
   const [movieShown, setMovieShown] = useState<MovieType>(movie);
   const [loadingMovie, setLoadingMovie] = useState(false);
 
+  const totalMovies = movies.length;
+
   async function getNewMovie() {
     setLoadingMovie(true);
 
-    const randomNumber = Math.floor(Math.random() * 100) + 1;
+    const randomNumber = Math.floor(Math.random() * totalMovies) + 1;
 
     setMovieShown(movies[randomNumber]);
 
     timeLoadingRef.current = window.setTimeout(() => {
       setLoadingMovie(false);
-    }, 500);
+    }, 1500);
   }
 
   useEffect(() => {
     return () => {
       window.clearTimeout(timeLoadingRef.current);
-    }
+    };
   }, []);
 
   return (
-    <main className="flex flex-col justify-center items-center">
+    <main className="flex flex-col items-center justify-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 h-12 md:ml-8 mt-16"
+        disabled={loadingMovie}
+        className="h-12 px-4 py-2 mt-16 mb-4 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
       >
         Buscar Novo Filme
       </button>
 
-      <Cover cover={movieShown.cover} title={movieShown.title} loading={loadingMovie} />
-
-      <Title
-        title={movieShown.title}
-        originalTitle={movieShown.originalTitle}
-        description={movieShown.sinopse}
-      />
-
-      <Genres genres={movieShown.genres} />
-
-      <Duration duration={movieShown.duration} />
-
-      <Platform platforms={movieShown.platforms} />
+      {loadingMovie ? (
+        <main className="mt-9">
+          <Lottie
+            animationData={movieLoadingLottier}
+            loop={true}
+            style={{
+              width: 300,
+              height: 300,
+            }}
+          />
+
+          <h1 className="text-2xl font-bold text-center text-white">
+            Carregando...
+          </h1>
+        </main>
+      ) : (
+        <>
+          <Cover
+            cover={movieShown.cover}
+            title={movieShown.title}
+            loading={loadingMovie}
+          />
+
+          <Title
+            title={movieShown.title}
+            originalTitle={movieShown.originalTitle}
+            description={movieShown.sinopse}
+          />
+
+          <Genres genres={movieShown.genres} />
+
+          <Duration duration={movieShown.duration} />
+
+          <Platform platforms={movieShown.platforms} />
+        </>
+      )}
     </main>
   );
 }
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const randomNumber = Math.floor(Math.random() * 100) + 1;
-
-  const response = await notion.databases.query({
+  let response = await notion.databases.query({
     database_id: process.env.NOTION_DATABASE_ID,
+    page_size: 100,
   });
 
-  const randomMovie = response.results[randomNumber] as unknown as IMovie;
+  const result: (PageObjectResponse | PartialPageObjectResponse)[] =
+    response.results;
+
+  while (response.has_more) {
+    response = await notion.databases.query({
+      database_id: process.env.NOTION_DATABASE_ID,
+      page_size: 100,
+      start_cursor: response.next_cursor,
+    });
+
+    result.push(...response.results);
+  }
+
+  const totalMovies = result.length;
+  const randomNumber = Math.floor(Math.random() * totalMovies) + 1;
 
-  const allMovies = response.results as unknown as IMovie[];
+  const randomMovie = result[randomNumber] as unknown as IMovie;
+  const allMovies = result as unknown as IMovie[];
 
   const movie = {
     title: randomMovie.properties.Name.title[0].plain_text,
     originalTitle: randomMovie.properties.i18n.rich_text[0].plain_text,
-    cover: randomMovie.cover.external.url || randomMovie.cover.file.url,
+    cover: 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,
@@ -83,7 +131,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
   const movies = allMovies.map((movieData) => ({
     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,
+    cover: 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,