UI fixes (#480)

* fix: improve timeline input , ui improvement and fixes for participation tab

* fix: implement 2fa for email and password login

* fix: fix conflict

* fix: fix submission form

* fix: fix hackathon submission and participant page

* fix: fix hackathon submission and participant page

* fix: fix auto refresh ib submission page

* fix: hackathon submission fixes

* fix: fix coderabbit corrections

* fix: fix coderabbit corrections

* chore: write boundless on x challenge blog

* fix: remove blog

* fix: my project dashbaord count and extend hackathon deadline

* fix: my project dashbaord count and extend hackathon deadline

* fix: fix auto validate wallet address and user nav

* fix: fix notification badge

* fix: fix coderabbit corrections

* fix: fix pagination in organization  participants page

Author: Benjtalkshow

app/(landing)/organizations/[id]/hackathons/[hackathonId]/participants/page.tsx

@@ -53,6 +53,7 @@ const ParticipantsPage: React.FC = () => {
   const hackathonId = params.hackathonId as string;
 
   const [view, setView] = useState<'table' | 'grid'>('table');
+  const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const [filters, setFilters] = useState<FilterState>({
     search: '',
     status: 'all',
@@ -63,9 +64,9 @@ const ParticipantsPage: React.FC = () => {
     () => ({
       organizationId,
       autoFetch: false,
-      pageSize: PAGE_SIZE, // Grid looks better with multiples of 3/4
+      pageSize, // Use dynamic page size
     }),
-    [organizationId]
+    [organizationId, pageSize]
   );
 
   const {
@@ -110,7 +111,7 @@ const ParticipantsPage: React.FC = () => {
       fetchParticipants(
         actualHackathonId,
         1,
-        PAGE_SIZE,
+        pageSize,
         mapFiltersToParams(filters, debouncedSearch)
       );
     }
@@ -120,6 +121,7 @@ const ParticipantsPage: React.FC = () => {
     debouncedSearch,
     filters.status,
     filters.type,
+    pageSize,
   ]);
 
   // Statistics
@@ -161,12 +163,12 @@ const ParticipantsPage: React.FC = () => {
   }, [organizationId, actualHackathonId]);
 
   // Handlers
-  const handlePageChange = (page: number) => {
+  const handlePageChange = (page: number, limit?: number) => {
     if (actualHackathonId) {
       fetchParticipants(
         actualHackathonId,
         page,
-        PAGE_SIZE,
+        limit ?? pageSize,
         mapFiltersToParams(filters, debouncedSearch)
       );
     }
@@ -220,7 +222,7 @@ const ParticipantsPage: React.FC = () => {
       fetchParticipants(
         actualHackathonId,
         participantsPagination.currentPage,
-        PAGE_SIZE,
+        pageSize,
         mapFiltersToParams(filters, debouncedSearch)
       );
     }
@@ -241,16 +243,17 @@ const ParticipantsPage: React.FC = () => {
     },
     onPaginationChange: updater => {
       if (typeof updater === 'function') {
-        const newState = (
-          updater as (old: { pageIndex: number; pageSize: number }) => {
-            pageIndex: number;
-            pageSize: number;
-          }
-        )({
+        const newState = updater({
           pageIndex: participantsPagination.currentPage - 1,
           pageSize: participantsPagination.itemsPerPage,
         });
-        handlePageChange(newState.pageIndex + 1);
+
+        if (newState.pageSize !== participantsPagination.itemsPerPage) {
+          setPageSize(newState.pageSize);
+          handlePageChange(1, newState.pageSize);
+        } else {
+          handlePageChange(newState.pageIndex + 1);
+        }
       }
     },
   });

hooks/use-hackathons.ts

@@ -228,17 +228,19 @@ export function useHackathons(
           organizationId, // Add organization filter
         });
 
+        const pagination = (response.data?.pagination ||
+          response.meta?.pagination) as any;
         setHackathons(response.data?.hackathons || []);
         setHackathonsPagination({
-          currentPage: response.data?.pagination.page || 1,
-          totalPages: response.data?.pagination.totalPages || 1,
-          totalItems: response.data?.pagination.total || 0,
-          itemsPerPage: response.data?.pagination.limit || pageSize,
-          hasNext: response.data?.pagination.hasNext || false,
-          hasPrev: response.data?.pagination.hasPrev || false,
+          currentPage: pagination?.page || 1,
+          totalPages: pagination?.totalPages || 1,
+          totalItems: pagination?.total || 0,
+          itemsPerPage: pagination?.limit || pageSize,
+          hasNext: !!pagination?.hasNext,
+          hasPrev: !!pagination?.hasPrev,
         });
         // Update ref immediately
-        hackathonsPageRef.current = response.data?.pagination.page || 1;
+        hackathonsPageRef.current = pagination?.page || 1;
       } catch (error) {
         const errorMessage =
           error instanceof Error ? error.message : 'Failed to fetch hackathons';
@@ -575,16 +577,18 @@ export function useHackathons(
           filters ?? initialParticipantFilters
         );
 
+        const pagination = (response.data?.pagination ||
+          response.meta?.pagination) as any;
         setParticipants(response.data?.participants || []);
         setParticipantsPagination({
-          currentPage: response.data?.pagination.page || 1,
-          totalPages: response.data?.pagination.totalPages || 1,
-          totalItems: response.data?.pagination.total || 0,
-          itemsPerPage: response.data?.pagination.limit || pageSize,
-          hasNext: response.data?.pagination.hasNext || false,
-          hasPrev: response.data?.pagination.hasPrev || false,
+          currentPage: pagination?.page || 1,
+          totalPages: pagination?.totalPages || 1,
+          totalItems: pagination?.total || 0,
+          itemsPerPage: pagination?.limit || pageSize,
+          hasNext: !!pagination?.hasNext,
+          hasPrev: !!pagination?.hasPrev,
         });
-        participantsPageRef.current = response.data?.pagination.page || 1;
+        participantsPageRef.current = pagination?.page || 1;
       } catch (error) {
         const errorMessage =
           error instanceof Error