refactor: create pagination component

iqbalpa · Jul 10, 2024 · 76ba3f4 · 76ba3f4
1 parent 1713e90
commit 76ba3f4
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 53 deletions.
diff --git a/src/components/myPagination/myPagination.tsx b/src/components/myPagination/myPagination.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationNextDouble,
+  PaginationPreviousDouble,
+} from '@/components/ui/pagination';
+
+interface IMyPagination {
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  handleClickPrev: () => void;
+  handleClickNext: () => void;
+}
+
+const MyPagination: React.FC<IMyPagination> = ({
+  currentPage,
+  setCurrentPage,
+  handleClickNext,
+  handleClickPrev,
+}) => {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPreviousDouble
+            onClick={() => setCurrentPage(1)}
+            className="hover:cursor-pointer"
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={handleClickPrev}
+            className="hover:cursor-pointer"
+          />
+        </PaginationItem>
+        {currentPage > 1 && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+        <PaginationItem>
+          <PaginationLink>{currentPage}</PaginationLink>
+        </PaginationItem>
+        {currentPage < 500 && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+        <PaginationItem>
+          <PaginationNext
+            onClick={handleClickNext}
+            className="hover:cursor-pointer"
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNextDouble
+            onClick={() => setCurrentPage(500)}
+            className="hover:cursor-pointer"
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+};
+
+export default MyPagination;
diff --git a/src/modules/home/home.tsx b/src/modules/home/home.tsx
@@ -6,17 +6,7 @@ import { Movie } from '@/constant/movie';
 import Header from '@/components/header/header';
 import Backdrop from '@/components/backdrop/backdrop';
 import ListMovies from '@/components/listMovies/listMovies';
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-  PaginationNextDouble,
-  PaginationPreviousDouble,
-} from '@/components/ui/pagination';
+import MyPagination from '@/components/myPagination/myPagination';
 
 const HomeModule: React.FC = () => {
   const [movies, setMovies] = useState<Movie[]>([]);
@@ -63,48 +53,12 @@ const HomeModule: React.FC = () => {
       <Header />
       <Backdrop movie={movies[2]} backdrop={backdrop} />
       <ListMovies movies={movies} />
-
-      <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPreviousDouble
-              onClick={() => setCurrentPage(1)}
-              className="hover:cursor-pointer"
-            />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationPrevious
-              onClick={handleClickPrev}
-              className="hover:cursor-pointer"
-            />
-          </PaginationItem>
-          {currentPage > 1 && (
-            <PaginationItem>
-              <PaginationEllipsis />
-            </PaginationItem>
-          )}
-          <PaginationItem>
-            <PaginationLink>{currentPage}</PaginationLink>
-          </PaginationItem>
-          {currentPage < maxPage && (
-            <PaginationItem>
-              <PaginationEllipsis />
-            </PaginationItem>
-          )}
-          <PaginationItem>
-            <PaginationNext
-              onClick={handleClickNext}
-              className="hover:cursor-pointer"
-            />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNextDouble
-              onClick={() => setCurrentPage(maxPage)}
-              className="hover:cursor-pointer"
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
+      <MyPagination
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        handleClickNext={handleClickNext}
+        handleClickPrev={handleClickPrev}
+      />
     </div>
   );
 };