feat: add album and media management features, including album creation, media upload, and routing

libertas-frontend/src/features/albums/use-albums.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { createAlbum, getAlbums } from '@/services/album-service'
+
+/**
+ * Query hook to fetch a list of all albums.
+ */
+export const useGetAlbums = () => {
+  return useQuery({
+    queryKey: ['albums'],
+    queryFn: getAlbums,
+  })
+}
+
+/**
+ * Mutation hook to create a new album.
+ */
+export const useCreateAlbum = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: createAlbum,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['albums'] })
+    },
+    onError: (error) => {
+      console.error('Failed to create album:', error)
+      // TODO: Add user-facing toast
+    },
+  })
+}

libertas-frontend/src/features/media/use-media.ts

@@ -0,0 +1,45 @@
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { getMediaList, uploadMedia } from '@/services/media-service'
+
+const MEDIA_LIST_KEY = ['mediaList']
+
+/**
+ * Query hook to fetch a paginated list of all media.
+ * This uses `useInfiniteQuery` for "load more" functionality.
+ */
+export const useGetMediaList = () => {
+  return useInfiniteQuery({
+    queryKey: MEDIA_LIST_KEY,
+    queryFn: ({ pageParam = 1 }) => getMediaList({ page: pageParam, limit: 20 }),
+    getNextPageParam: (lastPage) => {
+      return lastPage.has_next_page ? lastPage.page + 1 : undefined
+    },
+    initialPageParam: 1,
+  })
+}
+
+/**
+ * Mutation hook to upload a new media file.
+ */
+export const useUploadMedia = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ file }: { file: File }) =>
+      uploadMedia(file, (progress) => {
+        // TODO: Update upload progress state
+        console.log('Upload Progress:', progress)
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: MEDIA_LIST_KEY })
+    },
+    onError: (error) => {
+      console.error('Upload failed:', error)
+      // TODO: Add user-facing toast
+    },
+  })
+}