feat: Implement infinite scroll for hackathons page and enhance loading state management

- Added  hook to manage loading more hackathons as the user scrolls.
- Updated  to utilize the new hook and log sentinel element references.
- Refactored loading state display to improve user experience.
- Adjusted  to support pagination and logging for better debugging.
- Modified API response handling to include pagination details for hackathons.

Author: 0xdevcollins

components/hackathons/HackathonsPage.tsx

@@ -17,9 +17,7 @@ interface HackathonsPageProps {
   className?: string;
 }
 
-export default function HackathonsPage({
-  className,
-}: HackathonsPageProps = {}) {
+const HackathonsPage: React.FC<HackathonsPageProps> = ({ className } = {}) => {
   const {
     filters,
     handleSearch,
@@ -56,13 +54,6 @@ export default function HackathonsPage({
 
   const [loadMoreSentinelEl, setLoadMoreSentinelRef] =
     useState<HTMLDivElement | null>(null);
-  const setLoadMoreSentinelRefWithLog = React.useCallback(
-    (el: HTMLDivElement | null) => {
-      console.log('[HackathonsPage] Sentinel ref set', el ? 'element' : 'null');
-      setLoadMoreSentinelRef(el);
-    },
-    []
-  );
   useInfiniteScroll(loadMoreSentinelEl, {
     onLoadMore: loadMore,
     hasMore,
@@ -179,7 +170,7 @@ export default function HackathonsPage({
             </div>
 
             <div
-              ref={setLoadMoreSentinelRefWithLog}
+              ref={setLoadMoreSentinelRef}
               className='h-px w-full'
               aria-hidden
             />
@@ -195,4 +186,6 @@ export default function HackathonsPage({
       </main>
     </div>
   );
-}
+};
+
+export default HackathonsPage;

components/hackathons/hackathonStickyCard.tsx

@@ -97,25 +97,14 @@ export function HackathonStickyCard(props: HackathonStickyCardProps) {
       case 'BEFORE_SUBMISSION_DEADLINE':
         return beforeStart ? 'Register' : 'Join';
       case 'CUSTOM':
-        if (registrationDeadline) {
-          const custom = new Date(registrationDeadline);
-          const beforeCustom = now < custom;
-          if (beforeStart && beforeCustom) return 'Register';
-          if (!beforeStart && beforeCustom) return 'Register';
-        }
         return 'Register';
       default:
         return 'Join';
     }
-  }, [
-    registrationDeadlinePolicy,
-    canRegister,
-    startDate,
-    registrationDeadline,
-  ]);
+  }, [registrationDeadlinePolicy, canRegister, startDate]);
 
   // Redirect to auth if user not authenticated
-  const redirectToAuth = () => {
+  const handleRedirectToAuth = () => {
     const callbackUrl = encodeURIComponent(pathname);
     router.push(`/auth?mode=signin&callbackUrl=${callbackUrl}`);
   };
@@ -136,8 +125,7 @@ export function HackathonStickyCard(props: HackathonStickyCardProps) {
 
   return (
     <div className='sticky top-18 hidden lg:block'>
-      <Card className='overflow-hidden border border-[#a7f950]/30 bg-gradient-to-br from-[#a7f950]/10 to-transparent p-0'>
-        {/* Image Section - UNCHANGED */}
+      <Card className='overflow-hidden border border-[#a7f950]/30 bg-linear-to-br from-[#a7f950]/10 to-transparent p-0'>
         {imageUrl && (
           <div className='relative h-60 w-full'>
             <Image
@@ -192,17 +180,7 @@ export function HackathonStickyCard(props: HackathonStickyCardProps) {
             </div>
           )}
 
-          {/* Countdown Timer */}
-          {/* {timeRemaining.total > 0 && (
-                        <div className="text-center py-2 rounded-lg bg-gray-900/50 border border-gray-800">
-                            <div className="text-xs text-gray-400 mb-0.5 uppercase tracking-wide">
-                                {status === "ongoing" ? "Ends In" : "Starts In"}
-                            </div>
-                            <div className="text-base font-bold text-white">
-                                {formatCountdown(timeRemaining)}
-                            </div>
-                        </div>
-                    )} */}
+          {/* TODO: Add countdown UI — implement timeRemaining calculation and formatCountdown helper, then render "Ends In" / "Starts In" with formatted time */}
 
           {/* Date Info Section */}
           <div className='space-y-1.5 text-sm'>
@@ -248,7 +226,9 @@ export function HackathonStickyCard(props: HackathonStickyCardProps) {
             ) : !isRegistered ? (
               canRegister ? (
                 <Button
-                  onClick={!isAuthenticated ? redirectToAuth : onJoinClick}
+                  onClick={
+                    !isAuthenticated ? handleRedirectToAuth : onJoinClick
+                  }
                   className='w-full bg-[#a7f950] py-4 text-sm font-bold text-black hover:bg-[#8fd93f]'
                 >
                   <Calendar className='mr-1.5 h-3.5 w-3.5' />

content/blog/mdx-playground.mdx

@@ -1,11 +1,11 @@
 ---
 title: 'MDX Playground — Test All Blog Features'
 excerpt: 'A single post to verify frontmatter, prose styling, code blocks, tables, lists, blockquotes, and links. Use this to confirm the full MDX blog pipeline works end-to-end.'
-coverImage: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&auto=format&fit=crop'
+coverImage: '/blog/mdx-playground-cover.jpg'
 publishedAt: '2025-02-26'
 author:
   name: 'Boundless Dev'
-  image: 'https://i.pravatar.cc/150?img=33'
+  image: '/blog/mdx-playground-author.jpg'
 categories: ['Platform', 'Technology', 'Education']
 tags: ['mdx', 'testing', 'playground', 'prose', 'markdown']
 readingTime: 8

hooks/hackathon/use-hackathons-list.ts

@@ -36,9 +36,9 @@ interface UseHackathonsListReturn {
   refetch: () => void;
 }
 
-export function useHackathonsList(
-  options: UseHackathonsListOptions = {}
-): UseHackathonsListReturn {
+export const useHackathonsList: (
+  options: UseHackathonsListOptions
+) => UseHackathonsListReturn = (options: UseHackathonsListOptions = {}) => {
   const { initialPage = 1, pageSize = 10, initialFilters = {} } = options;
 
   const [hackathons, setHackathons] = React.useState<Hackathon[]>([]);
@@ -156,10 +156,6 @@ export function useHackathonsList(
   const fetchHackathons = React.useCallback(
     async (page: number, currentFilters: HackathonFilters, append = false) => {
       try {
-        console.log('[useHackathonsList] fetchHackathons called', {
-          page,
-          append,
-        });
         if (append) {
           setLoadingMore(true);
         } else {
@@ -186,13 +182,6 @@ export function useHackathonsList(
           await getPublicHackathonsList(apiFilters);
         let hackathonsList = response.hackathons || [];
 
-        console.log('[useHackathonsList] API response', {
-          page,
-          count: hackathonsList.length,
-          total: response.total,
-          hasMore: response.hasMore ?? false,
-        });
-
         // Apply client-side location filtering (API doesn't support it)
         hackathonsList = filterByLocation(
           hackathonsList,
@@ -243,20 +232,10 @@ export function useHackathonsList(
   }, [filters, fetchHackathons]);
 
   const loadMore = React.useCallback(() => {
-    console.log('[useHackathonsList] loadMore called', {
-      loadingMore,
-      hasMore,
-      currentPage,
-    });
     if (!loadingMore && hasMore) {
       const nextPage = currentPage + 1;
-      console.log('[useHackathonsList] Fetching next page', nextPage);
       setCurrentPage(nextPage);
       fetchHackathons(nextPage, filters, true);
-    } else {
-      console.log(
-        '[useHackathonsList] loadMore skipped (loadingMore or !hasMore)'
-      );
     }
   }, [loadingMore, hasMore, currentPage, filters, fetchHackathons]);
 
@@ -277,4 +256,4 @@ export function useHackathonsList(
     loadMore,
     refetch,
   };
-}
+};

hooks/use-infinite-scroll.ts

@@ -1,64 +1,85 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-interface UseInfiniteScrollOptions {
+export interface UseInfiniteScrollOptions {
   onLoadMore: () => void;
   hasMore: boolean;
   loading: boolean;
   rootMargin?: string;
+  /** When true, logs observer lifecycle and skip reasons to console. Default: false. */
+  debug?: boolean;
 }
 
 /**
  * Triggers onLoadMore when the sentinel element enters the viewport (or within rootMargin of it).
  * Pass the sentinel DOM element (e.g. from a callback ref + state) so the observer attaches after mount.
+ * onLoadMore does not need to be memoized (useCallback); a ref is used internally.
  */
-export function useInfiniteScroll(
+export const useInfiniteScroll: (
   sentinel: HTMLElement | null,
   options: UseInfiniteScrollOptions
-): void {
+) => void = (sentinel, options) => {
   const {
     onLoadMore,
     hasMore,
     loading,
     rootMargin = '0px 0px 400px 0px',
+    debug = false,
   } = options;
 
+  const onLoadMoreRef = useRef(onLoadMore);
+  useEffect(() => {
+    onLoadMoreRef.current = onLoadMore;
+  }, [onLoadMore]);
+
   useEffect(() => {
     if (!sentinel) {
-      console.log(
-        '[useInfiniteScroll] No sentinel element yet, skipping observer'
-      );
+      if (debug) {
+        console.log(
+          '[useInfiniteScroll] No sentinel element yet, skipping observer'
+        );
+      }
       return;
     }
 
-    console.log('[useInfiniteScroll] Observer attached to sentinel', {
-      hasMore,
-      loading,
-      rootMargin,
-    });
+    if (debug) {
+      console.log('[useInfiniteScroll] Observer attached to sentinel', {
+        hasMore,
+        loading,
+        rootMargin,
+      });
+    }
 
     const observer = new IntersectionObserver(
       entries => {
         const [entry] = entries;
         const isIntersecting = !!entry?.isIntersecting;
-        console.log('[useInfiniteScroll] Observer callback', {
-          isIntersecting,
-          hasMore,
-          loading,
-        });
+        if (debug) {
+          console.log('[useInfiniteScroll] Observer callback', {
+            isIntersecting,
+            hasMore,
+            loading,
+          });
+        }
 
         if (!entry?.isIntersecting) return;
         if (!hasMore) {
-          console.log('[useInfiniteScroll] Skipped: hasMore is false');
+          if (debug) {
+            console.log('[useInfiniteScroll] Skipped: hasMore is false');
+          }
           return;
         }
         if (loading) {
-          console.log('[useInfiniteScroll] Skipped: already loading');
+          if (debug) {
+            console.log('[useInfiniteScroll] Skipped: already loading');
+          }
           return;
         }
-        console.log('[useInfiniteScroll] Calling onLoadMore()');
-        onLoadMore();
+        if (debug) {
+          console.log('[useInfiniteScroll] Calling onLoadMore()');
+        }
+        onLoadMoreRef.current?.();
       },
       {
         root: null,
@@ -69,8 +90,10 @@ export function useInfiniteScroll(
 
     observer.observe(sentinel);
     return () => {
-      console.log('[useInfiniteScroll] Observer disconnected');
+      if (debug) {
+        console.log('[useInfiniteScroll] Observer disconnected');
+      }
       observer.disconnect();
     };
-  }, [sentinel, onLoadMore, hasMore, loading, rootMargin]);
-}
+  }, [sentinel, hasMore, loading, rootMargin, debug]);
+};

lib/api/hackathons/core.ts

@@ -298,7 +298,7 @@ export const getPublicHackathonsList = async (
 
   const pagination = raw.pagination;
   return {
-    hackathons: raw.hackathons || [],
+    hackathons: raw.hackathons ?? [],
     hasMore: pagination?.hasNext ?? false,
     total: pagination?.total ?? 0,
     currentPage: pagination?.page ?? 1,