feat: enhance MySongs context and component for improved song management

- Introduced Zustand for state management in MySongs context, replacing the previous useState approach.
- Added new actions for song pagination and deletion, including loadPage, nextpage, prevpage, and deleteSong.
- Implemented useMySongsPageLoader hook to synchronize page loading with currentPage changes.
- Updated MySongsTable component to utilize the new useMySongsPageLoader for better page management.

Author: tomast1337

apps/frontend/src/modules/my-songs/components/client/MySongsTable.tsx

@@ -12,7 +12,10 @@ import { MY_SONGS } from '@nbw/config';
 import type { SongPageDtoType, SongPreviewDtoType } from '@nbw/database';
 import { ErrorBox } from '@web/modules/shared/components/client/ErrorBox';
 
-import { useMySongsProvider } from './context/MySongs.context';
+import {
+  useMySongsProvider,
+  useMySongsPageLoader,
+} from './context/MySongs.context';
 import DeleteConfirmDialog from './DeleteConfirmDialog';
 import { SongRow } from './SongRow';
 
@@ -134,6 +137,9 @@ export const MySongsTable = () => {
 };
 
 export const MySongsPageComponent = () => {
+  // Load page when currentPage changes
+  useMySongsPageLoader();
+
   const {
     error,
     isDeleteDialogOpen,

apps/frontend/src/modules/my-songs/components/client/context/MySongs.context.tsx

@@ -1,12 +1,7 @@
 'use client';
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import { useEffect } from 'react';
+import { create } from 'zustand';
 import { toast } from 'react-hot-toast';
 
 import { MY_SONGS } from '@nbw/config';
@@ -18,69 +13,73 @@ import type {
 import axiosInstance from '@web/lib/axios';
 import { getTokenLocal } from '@web/lib/axios/token.utils';
 
-type MySongsContextType = {
+interface MySongsState {
+  loadedSongs: SongsFolder;
   page: SongPageDtoType | null;
-  nextpage: () => void;
-  prevpage: () => void;
-  gotoPage: (page: number) => void;
   totalSongs: number;
   totalPages: number;
   currentPage: number;
   pageSize: number;
   isLoading: boolean;
   error: string | null;
   isDeleteDialogOpen: boolean;
-  setIsDeleteDialogOpen: (isOpen: boolean) => void;
   songToDelete: SongPreviewDtoType | null;
+}
+
+interface MySongsActions {
+  initialize: (
+    initialSongsFolder: SongsFolder,
+    totalPagesInit: number,
+    currentPageInit: number,
+    pageSizeInit: number,
+  ) => void;
+  fetchSongsPage: () => Promise<void>;
+  loadPage: () => Promise<void>;
+  gotoPage: (page: number) => void;
+  nextpage: () => void;
+  prevpage: () => void;
+  setIsDeleteDialogOpen: (isOpen: boolean) => void;
   setSongToDelete: (song: SongPreviewDtoType) => void;
-  deleteSong: () => void;
-};
-
-const MySongsContext = createContext<MySongsContextType>(
-  {} as MySongsContextType,
-);
-
-type MySongProviderProps = {
-  InitialsongsFolder?: SongsFolder;
-  children?: React.ReactNode;
-  totalPagesInit?: number;
-  currentPageInit?: number;
-  pageSizeInit?: number;
-};
-
-export const MySongProvider = ({
-  InitialsongsFolder = {},
-  children,
-  totalPagesInit = 0,
-  currentPageInit = 0,
-  pageSizeInit = MY_SONGS.PAGE_SIZE,
-}: MySongProviderProps) => {
-  const [loadedSongs, setLoadedSongs] =
-    useState<SongsFolder>(InitialsongsFolder);
-
-  const [totalSongs, setTotalSongs] = useState<number>(0);
-  const [totalPages, setTotalPages] = useState<number>(totalPagesInit);
-  const [currentPage, setCurrentPage] = useState<number>(currentPageInit);
-
-  const [pageSize, _setPageSize] = useState<number>(pageSizeInit);
-  const [page, setPage] = useState<SongPageDtoType | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false);
-
-  const [songToDelete, setSongToDelete] = useState<SongPreviewDtoType | null>(
-    null,
-  );
-
-  const putPage = useCallback(
-    async ({ key, page }: { key: number; page: SongPageDtoType }) => {
-      setLoadedSongs({ ...loadedSongs, [key]: page });
-    },
-    [loadedSongs],
-  );
-
-  const fetchSongsPage = useCallback(async (): Promise<void> => {
-    setIsLoading(true);
+  deleteSong: () => Promise<void>;
+}
+
+type MySongsStore = MySongsState & MySongsActions;
+
+export const useMySongsStore = create<MySongsStore>((set, get) => ({
+  // Initial state
+  loadedSongs: {},
+  page: null,
+  totalSongs: 0,
+  totalPages: 0,
+  currentPage: 0,
+  pageSize: MY_SONGS.PAGE_SIZE,
+  isLoading: true,
+  error: null,
+  isDeleteDialogOpen: false,
+  songToDelete: null,
+
+  // Actions
+  initialize: (
+    initialSongsFolder,
+    totalPagesInit,
+    currentPageInit,
+    pageSizeInit,
+  ) => {
+    const initialPage = initialSongsFolder[currentPageInit] || null;
+    set({
+      loadedSongs: initialSongsFolder,
+      totalPages: totalPagesInit,
+      currentPage: currentPageInit,
+      pageSize: pageSizeInit,
+      page: initialPage,
+      totalSongs: initialPage?.total || 0,
+      isLoading: false,
+    });
+  },
+
+  fetchSongsPage: async () => {
+    const { currentPage, pageSize } = get();
+    set({ isLoading: true });
     const token = getTokenLocal();
 
     try {
@@ -99,67 +98,73 @@ export const MySongProvider = ({
       const data = response.data as SongPageDtoType;
 
       // TODO: total, page and pageSize are stored in every page, when it should be stored in the folder (what matters is 'content')
-      putPage({
-        key: currentPage,
+      set((state) => ({
+        loadedSongs: { ...state.loadedSongs, [currentPage]: data },
+        totalSongs: data.total,
+        totalPages: Math.ceil(data.total / pageSize),
         page: data,
-      });
-
-      setTotalSongs(data.total);
-      setTotalPages(Math.ceil(data.total / pageSize));
-      setPage(data);
+        error: null,
+      }));
     } catch (error: unknown) {
+      let errorMessage: string | null = null;
       if (error instanceof Error) {
-        setError(error.message);
-      }
-
-      if (error instanceof Response) {
-        setError(error.statusText);
+        errorMessage = error.message;
+      } else if (error instanceof Response) {
+        errorMessage = error.statusText;
       }
+      set({ error: errorMessage });
     } finally {
-      setIsLoading(false);
+      set({ isLoading: false });
     }
-  }, [currentPage, pageSize, putPage]);
+  },
 
-  const loadPage = useCallback(async () => {
-    if (currentPage in loadedSongs) {
-      setPage(loadedSongs[currentPage]);
-      setIsLoading(false);
+  loadPage: async () => {
+    const { currentPage, loadedSongs, fetchSongsPage } = get();
 
+    set({ isLoading: true });
+
+    if (currentPage in loadedSongs) {
+      set({
+        page: loadedSongs[currentPage],
+        isLoading: false,
+      });
       return;
     }
 
     await fetchSongsPage();
-  }, [currentPage, fetchSongsPage, loadedSongs]);
-
-  useEffect(() => {
-    (async () => {
-      setIsLoading(true);
-      loadPage();
-    })();
-  }, [currentPage, loadPage]);
+  },
 
-  const gotoPage = useCallback(
-    (page: number) => {
-      if (page > 0 && page <= totalPages) {
-        setCurrentPage(page);
-      }
-    },
-    [totalPages],
-  );
+  gotoPage: (page) => {
+    const { totalPages } = get();
+    if (page > 0 && page <= totalPages) {
+      set({ currentPage: page });
+    }
+  },
 
-  const nextpage = useCallback(() => {
+  nextpage: () => {
+    const { currentPage, totalPages, gotoPage } = get();
     if (currentPage < totalPages) {
       gotoPage(currentPage + 1);
     }
-  }, [currentPage, totalPages, gotoPage]);
+  },
 
-  const prevpage = useCallback(() => {
+  prevpage: () => {
+    const { currentPage, gotoPage } = get();
     if (currentPage > 1) {
       gotoPage(currentPage - 1);
     }
-  }, [currentPage, gotoPage]);
+  },
 
-  const deleteSong = useCallback(async () => {
+  setIsDeleteDialogOpen: (isOpen) => {
+    set({ isDeleteDialogOpen: isOpen });
+  },
+
+  setSongToDelete: (song) => {
+    set({ songToDelete: song });
+  },
+
+  deleteSong: async () => {
+    const { songToDelete, fetchSongsPage } = get();
     if (!songToDelete) {
       return;
     }
@@ -173,8 +178,10 @@ export const MySongProvider = ({
         },
       });
 
-      setIsDeleteDialogOpen(false);
-      setSongToDelete(null);
+      set({
+        isDeleteDialogOpen: false,
+        songToDelete: null,
+      });
     } catch (error: unknown) {
       toast.error('An error occurred while deleting the song!');
 
@@ -189,39 +196,56 @@ export const MySongProvider = ({
 
     await fetchSongsPage();
     toast.success('Song deleted successfully!');
-  }, [songToDelete, fetchSongsPage]);
-
-  return (
-    <MySongsContext.Provider
-      value={{
-        page,
-        nextpage,
-        prevpage,
-        gotoPage,
-        totalSongs,
-        totalPages,
-        currentPage,
-        pageSize,
-        isLoading,
-        error,
-        isDeleteDialogOpen,
-        setIsDeleteDialogOpen,
-        songToDelete,
-        setSongToDelete,
-        deleteSong,
-      }}
-    >
-      {children}
-    </MySongsContext.Provider>
-  );
+  },
+}));
+
+// Hook to sync currentPage changes with loadPage
+export const useMySongsPageLoader = () => {
+  const currentPage = useMySongsStore((state) => state.currentPage);
+  const loadPage = useMySongsStore((state) => state.loadPage);
+
+  useEffect(() => {
+    loadPage();
+  }, [currentPage, loadPage]);
 };
 
+// Legacy hook name for backward compatibility
 export const useMySongsProvider = () => {
-  const context = useContext(MySongsContext);
+  return useMySongsStore();
+};
 
-  if (context === undefined || context === null) {
-    throw new Error('useMySongsProvider must be used within a MySongsProvider');
-  }
+// Provider component for initialization (now just a wrapper)
+type MySongProviderProps = {
+  InitialsongsFolder?: SongsFolder;
+  children?: React.ReactNode;
+  totalPagesInit?: number;
+  currentPageInit?: number;
+  pageSizeInit?: number;
+};
+
+export const MySongProvider = ({
+  InitialsongsFolder = {},
+  children,
+  totalPagesInit = 0,
+  currentPageInit = 0,
+  pageSizeInit = MY_SONGS.PAGE_SIZE,
+}: MySongProviderProps) => {
+  const initialize = useMySongsStore((state) => state.initialize);
 
-  return context;
+  useEffect(() => {
+    initialize(
+      InitialsongsFolder,
+      totalPagesInit,
+      currentPageInit,
+      pageSizeInit,
+    );
+  }, [
+    InitialsongsFolder,
+    totalPagesInit,
+    currentPageInit,
+    pageSizeInit,
+    initialize,
+  ]);
+
+  return <>{children}</>;
 };