feat: enhance song fetching and state management in HomePage component

- Updated the HomePage component to utilize fetched recent songs instead of an empty array.
- Refactored the RecentSongs context to use Zustand for improved state management, including actions for fetching and managing recent songs.
- Introduced hooks for loading recent songs and categories on component mount.
- Improved error handling and loading states for better user experience.

Author: tomast1337

apps/frontend/src/app/(content)/page.tsx

@@ -1,13 +1,13 @@
 import { Metadata } from 'next';
 
-import type { FeaturedSongsDto, SongPreviewDto } from '@nbw/database';
+import type { FeaturedSongsDto, PageDto, SongPreviewDto } from '@nbw/database';
 import axiosInstance from '@web/lib/axios';
 import { HomePageProvider } from '@web/modules/browse/components/client/context/HomePage.context';
 import { HomePageComponent } from '@web/modules/browse/components/HomePageComponent';
 
 async function fetchRecentSongs() {
   try {
-    const response = await axiosInstance.get<SongPreviewDto[]>('/song', {
+    const response = await axiosInstance.get<PageDto<SongPreviewDto>>('/song', {
       params: {
         page: 1, // TODO: fix constants
         limit: 16, // TODO: change 'limit' parameter to 'skip' and load 12 songs initially, then load 8 more songs on each pagination
@@ -16,7 +16,7 @@ async function fetchRecentSongs() {
       },
     });
 
-    return response.data;
+    return response.data.content;
   } catch (error) {
     return [];
   }
@@ -45,12 +45,12 @@ export const metadata: Metadata = {
 };
 
 async function Home() {
-  //const recentSongs = await fetchRecentSongs();
+  const recentSongs = await fetchRecentSongs();
   const featuredSongs = await fetchFeaturedSongs();
 
   return (
     <HomePageProvider
-      initialRecentSongs={[]}
+      initialRecentSongs={recentSongs}
       initialFeaturedSongs={featuredSongs}
     >
       <HomePageComponent />

apps/frontend/src/modules/browse/components/HomePageComponent.tsx

@@ -19,17 +19,23 @@ import { WelcomeBanner } from '../WelcomeBanner';
 
 import { CategoryButtonGroup } from './client/CategoryButton';
 import { useFeaturedSongsProvider } from './client/context/FeaturedSongs.context';
-import { useRecentSongsProvider } from './client/context/RecentSongs.context';
+import {
+  useRecentSongsProvider,
+  useRecentSongsPageLoader,
+  useRecentSongsCategoriesLoader,
+} from './client/context/RecentSongs.context';
 import LoadMoreButton from './client/LoadMoreButton';
 import { TimespanButtonGroup } from './client/TimespanButton';
 import SongCard from './SongCard';
 import SongCardGroup from './SongCardGroup';
 
 export const HomePageComponent = () => {
-  const { featuredSongsPage } = useFeaturedSongsProvider();
+  // Initialize sync hooks for proper effect handling
+  useRecentSongsPageLoader();
+  useRecentSongsCategoriesLoader();
 
+  const { featuredSongsPage, timespan } = useFeaturedSongsProvider();
   const { recentSongs, increasePageRecent, hasMore } = useRecentSongsProvider();
-  const { timespan } = useFeaturedSongsProvider();
   return (
     <>
       {/* Welcome banner/Hero */}
@@ -81,8 +87,8 @@ export const HomePageComponent = () => {
       </div>
       <div className='h-6' />
       <SongCardGroup data-test='recent-songs'>
-        {recentSongs.map((song, i) =>
-          song === undefined ? (
+        {(recentSongs || []).map((song, i) =>
+          song === undefined || song === null ? (
             <SongCardAdSlot key={i} />
           ) : (
             <SongCard key={i} song={song} />

apps/frontend/src/modules/browse/components/client/context/FeaturedSongs.context.tsx

@@ -1,97 +1,111 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { create } from 'zustand';
 
 import { TIMESPANS } from '@nbw/config';
 import { type FeaturedSongsDto, type SongPreviewDto } from '@nbw/database';
 
 type TimespanType = (typeof TIMESPANS)[number];
 
-type FeaturedSongsContextType = {
+interface FeaturedSongsState {
+  featuredSongs: FeaturedSongsDto;
   featuredSongsPage: SongPreviewDto[];
   timespan: TimespanType;
-  setTimespan: (timespan: TimespanType) => void;
   timespanEmpty: Record<string, boolean>;
-};
-
-const FeaturedSongsContext = createContext<FeaturedSongsContextType>(
-  {} as FeaturedSongsContextType,
-);
+}
 
-export function FeaturedSongsProvider({
-  children,
-  initialFeaturedSongs,
-}: {
-  children: React.ReactNode;
-  initialFeaturedSongs: FeaturedSongsDto;
-}) {
-  // Helper function to find the first non-empty timespan or default to 'week'
-  const getInitialTimespan = (): TimespanType => {
-    // Check if all timespans have songs
-    const allHaveSongs = TIMESPANS.every(
-      (ts) => initialFeaturedSongs[ts]?.length > 0,
-    );
+interface FeaturedSongsActions {
+  initialize: (initialFeaturedSongs: FeaturedSongsDto) => void;
+  setTimespan: (timespan: TimespanType) => void;
+}
 
-    // If all have songs, default to 'week'
-    if (allHaveSongs) {
-      return 'week';
-    }
+type FeaturedSongsStore = FeaturedSongsState & FeaturedSongsActions;
 
-    // Otherwise, find the first timespan that has songs
-    for (const ts of TIMESPANS) {
-      if (initialFeaturedSongs[ts]?.length > 0) {
-        return ts;
-      }
-    }
+// Helper function to find the first non-empty timespan or default to 'week'
+const getInitialTimespan = (featuredSongs: FeaturedSongsDto): TimespanType => {
+  // Check if all timespans have songs
+  const allHaveSongs = TIMESPANS.every((ts) => featuredSongs[ts]?.length > 0);
 
-    // If none have songs, default to 'week'
+  // If all have songs, default to 'week'
+  if (allHaveSongs) {
     return 'week';
-  };
+  }
 
-  const initialTimespan = getInitialTimespan();
+  // Otherwise, find the first timespan that has songs
+  for (const ts of TIMESPANS) {
+    if (featuredSongs[ts]?.length > 0) {
+      return ts;
+    }
+  }
 
-  // Featured songs
-  const [featuredSongs] = useState<FeaturedSongsDto>(initialFeaturedSongs);
-  const [featuredSongsPage, setFeaturedSongsPage] = useState<SongPreviewDto[]>(
-    initialFeaturedSongs[initialTimespan],
-  );
+  // If none have songs, default to 'week'
+  return 'week';
+};
 
-  const [timespan, setTimespan] = useState<TimespanType>(initialTimespan);
+export const useFeaturedSongsStore = create<FeaturedSongsStore>((set, get) => ({
+  // Initial state
+  featuredSongs: {
+    hour: [],
+    day: [],
+    week: [],
+    month: [],
+    year: [],
+    all: [],
+  },
+  featuredSongsPage: [],
+  timespan: 'week',
+  timespanEmpty: {},
+
+  // Actions
+  initialize: (initialFeaturedSongs) => {
+    const initialTimespan = getInitialTimespan(initialFeaturedSongs);
+    const timespanEmpty = Object.keys(initialFeaturedSongs).reduce(
+      (result, timespan) => {
+        result[timespan] =
+          initialFeaturedSongs[timespan as TimespanType].length === 0;
+        return result;
+      },
+      {} as Record<string, boolean>,
+    );
 
-  const timespanEmpty = Object.keys(featuredSongs).reduce(
-    (result, timespan) => {
-      result[timespan] = featuredSongs[timespan as TimespanType].length === 0;
-      return result;
-    },
-    {} as Record<string, boolean>,
-  );
+    set({
+      featuredSongs: initialFeaturedSongs,
+      featuredSongsPage: initialFeaturedSongs[initialTimespan],
+      timespan: initialTimespan,
+      timespanEmpty,
+    });
+  },
+
+  setTimespan: (timespan) => {
+    const { featuredSongs } = get();
+    set({
+      timespan,
+      featuredSongsPage: featuredSongs[timespan],
+    });
+  },
+}));
+
+// Legacy hook name for backward compatibility
+export const useFeaturedSongsProvider = () => {
+  return useFeaturedSongsStore();
+};
 
-  useEffect(() => {
-    setFeaturedSongsPage(featuredSongs[timespan]);
-  }, [featuredSongs, timespan]);
-
-  return (
-    <FeaturedSongsContext.Provider
-      value={{
-        featuredSongsPage,
-        timespan,
-        setTimespan,
-        timespanEmpty,
-      }}
-    >
-      {children}
-    </FeaturedSongsContext.Provider>
-  );
-}
+// Provider component for initialization (now just a wrapper)
+type FeaturedSongsProviderProps = {
+  children: React.ReactNode;
+  initialFeaturedSongs: FeaturedSongsDto;
+};
 
-export function useFeaturedSongsProvider() {
-  const context = useContext(FeaturedSongsContext);
+export function FeaturedSongsProvider({
+  children,
+  initialFeaturedSongs,
+}: FeaturedSongsProviderProps) {
+  const initialize = useFeaturedSongsStore((state) => state.initialize);
 
-  if (context === undefined || context === null) {
-    throw new Error(
-      'useFeaturedSongsProvider must be used within a FeaturedSongsProvider',
-    );
-  }
+  useEffect(() => {
+    initialize(initialFeaturedSongs);
+  }, [initialFeaturedSongs, initialize]);
 
-  return context;
+  return <>{children}</>;
 }

apps/frontend/src/modules/browse/components/client/context/HomePage.context.tsx

@@ -1,17 +1,24 @@
 'use client';
 
-import { createContext, useContext } from 'react';
-
 import { FeaturedSongsDtoType, SongPreviewDtoType } from '@nbw/database';
 
 import { FeaturedSongsProvider } from './FeaturedSongs.context';
 import { RecentSongsProvider } from './RecentSongs.context';
-
-type HomePageContextType = null;
-
-const HomePageContext = createContext<HomePageContextType>(
-  null as HomePageContextType,
-);
+import { useFeaturedSongsStore } from './FeaturedSongs.context';
+import { useRecentSongsStore } from './RecentSongs.context';
+
+/**
+ * Composed hook that provides access to both FeaturedSongs and RecentSongs stores
+ */
+export function useHomePageStore() {
+  const featuredSongs = useFeaturedSongsStore();
+  const recentSongs = useRecentSongsStore();
+
+  return {
+    featuredSongs,
+    recentSongs,
+  };
+}
 
 export function HomePageProvider({
   children,
@@ -23,24 +30,15 @@ export function HomePageProvider({
   initialFeaturedSongs: FeaturedSongsDtoType;
 }) {
   return (
-    <HomePageContext.Provider value={null}>
-      <RecentSongsProvider initialRecentSongs={initialRecentSongs}>
-        <FeaturedSongsProvider initialFeaturedSongs={initialFeaturedSongs}>
-          {children}
-        </FeaturedSongsProvider>
-      </RecentSongsProvider>
-    </HomePageContext.Provider>
+    <RecentSongsProvider initialRecentSongs={initialRecentSongs}>
+      <FeaturedSongsProvider initialFeaturedSongs={initialFeaturedSongs}>
+        {children}
+      </FeaturedSongsProvider>
+    </RecentSongsProvider>
   );
 }
 
+// Legacy hook name for backward compatibility
 export function useHomePageProvider() {
-  const context = useContext(HomePageContext);
-
-  if (context === undefined || context === null) {
-    throw new Error(
-      'useHomePageProvider must be used within a HomepageProvider',
-    );
-  }
-
-  return context;
+  return useHomePageStore();
 }