feat: infiniteScroll => mobile / paginação => Desktop

global.d.ts

@@ -0,0 +1 @@
+type EmptyObject = Record<string, never>;

src/components/InfiniteScroll/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+import { usePage } from "../../hooks";
+import { Loading } from "./styles";
+
+function InfiniteScroll() {
+  const { setPage } = usePage();
+  const loaderRef = useRef(null);
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: "100px",
+      threshold: 1.0,
+    };
+
+    const observer = new IntersectionObserver((entities) => {
+      const target = entities[0];
+
+      if (target.isIntersecting) {
+        setPage((page) => page + 1);
+      }
+    }, options);
+
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
+    }
+  }, []);
+
+  return <Loading ref={loaderRef}>Carregando mais episodios...</Loading>;
+}
+
+export { InfiniteScroll };

src/components/InfiniteScroll/styles.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Loading = styled.p`
+  text-align: center;
+  margin: 2rem 0;
+`;

src/components/Similarly/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, Key, Fragment } from "react";
+import { Key, Fragment } from "react";
 import { useQuery } from "react-query";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
@@ -7,25 +7,14 @@ import { MovieItem, Heading } from "../../components";
 import { Container } from "./styles";
 import { Movie, Image } from "../../types";
 import { getMovieSimilarly } from "../../utils/http";
-import { useWindowsWidth } from "../../hooks";
+import { useWindowsIsDesktop } from "../../hooks";
 
 interface Props {
   id: number;
 }
 
 function Similarly({ id }: Props) {
-  const [isDesktop, setDesktop] = useState(true);
-  const minDesktopSize = 1300;
-
-  const width = useWindowsWidth();
-
-  useEffect(() => {
-    if (minDesktopSize > width) {
-      setDesktop(false);
-    } else {
-      setDesktop(true);
-    }
-  }, [id, width]);
+  const isDesktop = useWindowsIsDesktop();
 
   const { data, isLoading } = useQuery(["similarly", id], () =>
     getMovieSimilarly(id)
@@ -63,3 +52,4 @@ function Similarly({ id }: Props) {
 }
 
 export { Similarly };
+export type { Props as SimilarlyProps };

src/components/index.ts

@@ -3,4 +3,5 @@ export * from "./MovieItem/";
 export * from "./MovieList/";
 export * from "./Pagination/";
 export * from "./Similarly/";
+export * from "./InfiniteScroll";
 export * from "./Heading";

src/hooks/index.ts

@@ -1,2 +1,2 @@
 export * from "./usePage";
-export * from "./useWindowsWidth";
+export * from "./useWindowsIsDesktop";

src/hooks/useWindowsWidth.ts → src/hooks/useWindowsIsDesktop.ts

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useState } from "react";
 
-export function useWindowsWidth() {
+export function useWindowsIsDesktop() {
   const [width, setWidth] = useState(0);
   useLayoutEffect(() => {
     function updateSize() {
@@ -10,5 +10,5 @@ export function useWindowsWidth() {
     updateSize();
     return () => window.removeEventListener("resize", updateSize);
   }, []);
-  return width;
+  return width > 1280 ? true : false;
 }

src/pages/index.page.tsx

@@ -2,8 +2,18 @@ import { Fragment } from "react";
 import { Movies } from "../types";
 import { getMovies } from "../utils/http";
 import { useQuery } from "react-query";
-import { Pagination, MovieList, Heading } from "../components";
+import { MovieList, Heading } from "../components";
 import { usePage } from "../hooks";
+import dynamic from "next/dynamic";
+import { useWindowsIsDesktop } from "../hooks";
+
+const Pagination = dynamic<EmptyObject>(() =>
+  import("../components/Pagination").then((module) => module.Pagination)
+);
+
+const InfiniteScroll = dynamic<EmptyObject>(() =>
+  import("../components/InfiniteScroll").then((module) => module.InfiniteScroll)
+);
 
 interface Props {
   movies: Movies;
@@ -15,6 +25,8 @@ export default function Home({ movies }: Props) {
     initialData: movies,
   });
 
+  const isDesktop = useWindowsIsDesktop();
+
   return (
     <Fragment>
       {data === undefined ? (
@@ -23,7 +35,7 @@ export default function Home({ movies }: Props) {
         <Fragment>
           <Heading>Movies</Heading>
           <MovieList movies={data.results} />
-          <Pagination />
+          {isDesktop ? <Pagination /> : <InfiniteScroll />}
         </Fragment>
       )}
     </Fragment>

tsconfig.json

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "global.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }