From 22e1e01cb0477afbd2d957d07f47f5c1d41269e3 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Sun, 7 Jul 2024 14:01:59 +0100
Subject: [PATCH] fix: Hide pagination if not needed

---
 apps/web/app/dashboard/caps/Caps.tsx | 105 ++++++++++++++-------------
 1 file changed, 53 insertions(+), 52 deletions(-)

diff --git a/apps/web/app/dashboard/caps/Caps.tsx b/apps/web/app/dashboard/caps/Caps.tsx
index 08e38c40..9c4a68c7 100644
--- a/apps/web/app/dashboard/caps/Caps.tsx
+++ b/apps/web/app/dashboard/caps/Caps.tsx
@@ -40,7 +40,6 @@ export const Caps = ({ data, count }: { data: videoData; count: number }) => {
   const { refresh } = useRouter();
   const params = useSearchParams();
   const page = Number(params.get("page")) || 1;
-  console.log("page: ", page);
   const [analytics, setAnalytics] = useState<Record<string, number>>({});
   const { user } = useSharedContext();
   const limit = 15;
@@ -364,69 +363,71 @@ export const Caps = ({ data, count }: { data: videoData; count: number }) => {
               );
             })}
           </div>
-          <div>
-            <Pagination>
-              <PaginationContent>
-                {page > 1 && (
-                  <PaginationItem>
-                    <PaginationPrevious
-                      href={
-                        process.env.NEXT_PUBLIC_URL +
-                        `/dashboard/caps?page=${page === 1 ? page : page - 1}`
-                      }
-                    />
-                  </PaginationItem>
-                )}
-                <PaginationItem>
-                  <PaginationLink
-                    href={
-                      process.env.NEXT_PUBLIC_URL + `/dashboard/caps?page=1`
-                    }
-                    isActive={page === 1}
-                  >
-                    1
-                  </PaginationLink>
-                </PaginationItem>
-                {page !== 1 && (
+          {(data.length > limit || data.length === limit || page !== 1) && (
+            <div>
+              <Pagination>
+                <PaginationContent>
+                  {page > 1 && (
+                    <PaginationItem>
+                      <PaginationPrevious
+                        href={
+                          process.env.NEXT_PUBLIC_URL +
+                          `/dashboard/caps?page=${page === 1 ? page : page - 1}`
+                        }
+                      />
+                    </PaginationItem>
+                  )}
                   <PaginationItem>
                     <PaginationLink
                       href={
-                        process.env.NEXT_PUBLIC_URL +
-                        `/dashboard/caps?page=${page}`
+                        process.env.NEXT_PUBLIC_URL + `/dashboard/caps?page=1`
                       }
-                      isActive={true}
+                      isActive={page === 1}
                     >
-                      {page}
+                      1
                     </PaginationLink>
                   </PaginationItem>
-                )}
-                {totalPages > page + 1 && (
+                  {page !== 1 && (
+                    <PaginationItem>
+                      <PaginationLink
+                        href={
+                          process.env.NEXT_PUBLIC_URL +
+                          `/dashboard/caps?page=${page}`
+                        }
+                        isActive={true}
+                      >
+                        {page}
+                      </PaginationLink>
+                    </PaginationItem>
+                  )}
+                  {totalPages > page + 1 && (
+                    <PaginationItem>
+                      <PaginationLink
+                        href={
+                          process.env.NEXT_PUBLIC_URL +
+                          `/dashboard/caps?page=${page + 1}`
+                        }
+                        isActive={page === page + 1}
+                      >
+                        {page + 1}
+                      </PaginationLink>
+                    </PaginationItem>
+                  )}
+                  {page > 2 && <PaginationEllipsis />}
                   <PaginationItem>
-                    <PaginationLink
+                    <PaginationNext
                       href={
                         process.env.NEXT_PUBLIC_URL +
-                        `/dashboard/caps?page=${page + 1}`
+                        `/dashboard/caps?page=${
+                          page === totalPages ? page : page + 1
+                        }`
                       }
-                      isActive={page === page + 1}
-                    >
-                      {page + 1}
-                    </PaginationLink>
+                    />
                   </PaginationItem>
-                )}
-                {page > 2 && <PaginationEllipsis />}
-                <PaginationItem>
-                  <PaginationNext
-                    href={
-                      process.env.NEXT_PUBLIC_URL +
-                      `/dashboard/caps?page=${
-                        page === totalPages ? page : page + 1
-                      }`
-                    }
-                  />
-                </PaginationItem>
-              </PaginationContent>
-            </Pagination>
-          </div>
+                </PaginationContent>
+              </Pagination>
+            </div>
+          )}
         </div>
       )}
     </div>