clean up

src/app/[locale]/(home)/page.tsx

@@ -27,7 +27,8 @@ import { useState } from "react";
 
 export default function CryptoTable() {
   const [sortOrder, setSortOrder] = useState("market_cap_desc");
-  const { coinQuery } = CoinHook(sortOrder);
+  const [currentPage, setCurrentPage] = useState(1);
+  const { coinQuery } = CoinHook(sortOrder, currentPage);
   const { searchTerm, setSearchTerm } = searchStore();
   const router = useRouter();
   const t = useTranslations("HomePage");
@@ -38,6 +39,15 @@ export default function CryptoTable() {
       coin.symbol?.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleSortChange = (newSortOrder: string) => {
+    setSortOrder(newSortOrder);
+    setCurrentPage(1); // Reset to first page when changing sort order
+  };
+
   return (
     <div className="container mx-auto p-4 space-y-4">
       <h1 className="text-3xl font-bold text-center mb-6">{t("title")}</h1>
@@ -49,7 +59,7 @@ export default function CryptoTable() {
           onChange={(e) => setSearchTerm(e.target.value)}
           className="flex-grow"
         />
-        <Select value={sortOrder} onValueChange={(s) => setSortOrder(s)}>
+        <Select value={sortOrder} onValueChange={handleSortChange}>
           <SelectTrigger className="w-[180px]">
             <SelectValue placeholder="Sort by" />
           </SelectTrigger>
@@ -118,14 +128,14 @@ export default function CryptoTable() {
       </Table>
       <div className="mx-auto">
         <MyPagination
-          currentPage={0}
-          totalPages={0}
-          onPageChange={function (): void {
-            throw new Error("Function not implemented.");
-          }}
+          currentPage={currentPage}
+          totalPages={20}
+          onPageChange={handlePageChange}
         />
       </div>
-      {!coinQuery.data && (
+      {coinQuery.isLoading && <div>Loading...</div>}
+      {coinQuery.isError && <div>Error loading data</div>}
+      {!coinQuery.data && !coinQuery.isLoading && (
         <div className="flex justify-center items-center">No Coins</div>
       )}
     </div>

src/components/hooks/coin-hook.ts

@@ -13,7 +13,6 @@ export const CoinHook = (
       const response = await fetch(
         `https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=${sortOrder}&per_page=50&page=${page}&sparkline=false`
       );
-      console.log(page);
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }

src/components/pages/home/pagination.tsx

@@ -1,51 +1,79 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import React from "react";
 
-interface MyPaginationProps {
+interface PaginationProps {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
 }
 
-export const MyPagination: React.FC<MyPaginationProps> = ({
+export const MyPagination: React.FC<PaginationProps> = ({
   currentPage,
   totalPages,
   onPageChange,
 }) => {
+  const pageNumbers = [];
+  for (let i = 1; i <= totalPages; i++) {
+    pageNumbers.push(i);
+  }
+
+  const visiblePageNumbers = pageNumbers.filter(
+    (num) =>
+      num === 1 ||
+      num === totalPages ||
+      (num >= currentPage - 1 && num <= currentPage + 1)
+  );
+
   return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious
-            href="#"
-            onClick={() => onPageChange(Math.max(1, currentPage - 1))}
-          />
-        </PaginationItem>
-        {[...Array(totalPages)].map((_, index) => (
-          <PaginationItem key={index}>
-            <PaginationLink
-              href="#"
-              isActive={currentPage === index + 1}
-              onClick={() => onPageChange(index + 1)}
-            >
-              {index + 1}
-            </PaginationLink>
-          </PaginationItem>
-        ))}
-        <PaginationItem>
-          <PaginationNext
-            href="#"
-            onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
-          />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
+    <nav className="flex items-center justify-center space-x-2">
+      <button
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+        disabled={currentPage === 1}
+        className="p-2 rounded-full hover:bg-gray-200 disabled:opacity-50"
+      >
+        <ChevronLeft size={20} />
+      </button>
+
+      {visiblePageNumbers.map((number, index) => {
+        if (index > 0 && visiblePageNumbers[index - 1] !== number - 1) {
+          return (
+            <React.Fragment key={`ellipsis-${number}`}>
+              <span className="px-2">...</span>
+              <button
+                onClick={() => onPageChange(number)}
+                className={`w-8 h-8 rounded-full ${
+                  currentPage === number
+                    ? "bg-blue-600 text-white"
+                    : "hover:bg-gray-200"
+                }`}
+              >
+                {number}
+              </button>
+            </React.Fragment>
+          );
+        }
+        return (
+          <button
+            key={number}
+            onClick={() => onPageChange(number)}
+            className={`w-8 h-8 rounded-full ${
+              currentPage === number
+                ? "bg-blue-600 text-white"
+                : "hover:bg-gray-200"
+            }`}
+          >
+            {number}
+          </button>
+        );
+      })}
+
+      <button
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+        disabled={currentPage === totalPages}
+        className="p-2 rounded-full hover:bg-gray-200 disabled:opacity-50"
+      >
+        <ChevronRight size={10} />
+      </button>
+    </nav>
   );
 };