feat: collection management api

Author: agmmtoo

.prettierrc

@@ -6,7 +6,6 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
   "arrowParens": "always",
   "endOfLine": "lf"
 }

app/(protected)/admin/collections/[id]/manage-books/page.tsx

@@ -8,6 +8,7 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
 import { Card } from '@/components/ui/card'
+import { updateCollectionBooksAction } from '@/lib/actions/collection'
 import { getCollection, getListCollectionBooks } from '@/lib/api/collection'
 import { Book } from 'lucide-react'
 
@@ -53,7 +54,10 @@ export default async function CollectionManageBooksPage({
           </BreadcrumbItem>
           <BreadcrumbSeparator />
           <BreadcrumbItem>
-            <BreadcrumbPage>{collectionRes.data.title}</BreadcrumbPage>
+            {/* @ts-expect-error: typegen does not work */}
+            <BreadcrumbLink href={`/admin/collections/${id}`}>
+              {collectionRes.data.title}
+            </BreadcrumbLink>
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
@@ -64,6 +68,7 @@ export default async function CollectionManageBooksPage({
           initialBooks={bookRes.data.map((b) => b.book!)}
           libraryID={collectionRes.data.library_id}
           initialBookIDs={collectionRes.data.book_ids}
+          onSubmitAction={updateCollectionBooksAction.bind(null, id)}
         />
       </div>
 

components/collections/FormCollection.tsx

@@ -158,18 +158,18 @@ export const FormCollection: React.FC<FormCollectionProps> = ({
                   className={`border-2 border-dashed rounded-lg aspect-[2/1] flex flex-col items-center justify-center transition-colors ${
                     dragActive
                       ? 'border-primary bg-primary/5'
-                      : 'border-slate-300'
+                      : 'border-muted-foreground/20'
                   }`}
                   onDragEnter={handleDrag}
                   onDragLeave={handleDrag}
                   onDragOver={handleDrag}
                   onDrop={handleDrop}
                 >
-                  <Upload className="h-12 w-12 text-slate-400 mb-4" />
-                  <p className="text-sm text-slate-600 mb-2">
+                  <Upload className="h-12 w-12 text-muted-foreground mb-4" />
+                  <p className="text-sm text-muted-foreground mb-2">
                     Drag and drop a banner image here, or click to select
                   </p>
-                  <p className="text-xs text-slate-500 mb-4">
+                  <p className="text-xs text-muted-foreground mb-4">
                     Recommended: 800x400px (2:1 aspect ratio)
                   </p>
                   <input
@@ -307,7 +307,7 @@ export const FormCollection: React.FC<FormCollectionProps> = ({
             <Button type="submit" disabled={form.formState.isSubmitting}>
               {form.formState.isSubmitting
                 ? 'Submitting...'
-                : 'Submit Collection'}
+                : 'Save Collection'}
             </Button>
           </div>
         </form>

components/collections/FormManageCollectionBooks.tsx

@@ -20,7 +20,8 @@ export const FormManageCollectionBooks: React.FC<{
   initialBooks: Book[]
   libraryID: string
   initialBookIDs: string[]
-}> = ({ initialBooks, libraryID, initialBookIDs }) => {
+  onSubmitAction: (v: string[]) => Promise<string>
+}> = ({ initialBooks, libraryID, initialBookIDs, onSubmitAction }) => {
   const [books, setBooks] = useState<Book[]>([])
   const [selectedBooks, setSelectedBooks] = useState<Book[]>(initialBooks)
   const selectedBookIDs = selectedBooks.map((b) => b.id)
@@ -67,6 +68,11 @@ export const FormManageCollectionBooks: React.FC<{
   )
   const isNoChange = hasSameNumber && hasEveryBook
 
+  const onSubmit = async () => {
+    const result = await onSubmitAction(selectedBookIDs)
+    toast(result)
+  }
+
   return (
     <div className="mx-auto space-y-4">
       <div className="flex flex-col md:flex-row top-4 sticky z-10 gap-4">
@@ -89,11 +95,7 @@ export const FormManageCollectionBooks: React.FC<{
             <X className="mr-2 h-4 w-4" />
             Deselect All ({selectedBooks.length})
           </Button>
-          <Button
-            onClick={console.log}
-            className="h-full"
-            disabled={isNoChange}
-          >
+          <Button onClick={onSubmit} className="h-full" disabled={isNoChange}>
             <Plus className="mr-2 h-4 w-4" />
             Save Selection ({selectedBooks.length})
           </Button>

lib/actions/collection.ts

@@ -5,6 +5,7 @@ import {
   createCollection,
   deleteCollection,
   updateCollection,
+  updateCollectionBooks,
 } from '../api/collection'
 import { IsLoggedIn, Verify } from '../firebase/firebase'
 
@@ -60,7 +61,7 @@ export async function deleteCollectionAction(
 
 export async function updateCollectionAction(
   id: string,
-  data: Parameters<typeof createCollection>[0]
+  data: Parameters<typeof updateCollection>[1]
 ) {
   const headers = await Verify({
     from: `/admin/collections/${id}/edit`,
@@ -79,3 +80,29 @@ export async function updateCollectionAction(
     return { error: 'An unknown error occurred.' }
   }
 }
+
+export async function updateCollectionBooksAction(
+  id: string,
+  bookIDs: string[]
+): Promise<string> {
+  const headers = await Verify({
+    from: `admin/collections/${id}/manage-books`,
+  })
+  try {
+    const res = await updateCollectionBooks(
+      id,
+      { book_ids: bookIDs },
+      { headers }
+    )
+    if ('error' in res) {
+      return res.error
+    }
+    revalidatePath(`/admin/collections/${id}`, 'page')
+    return 'Collection books updated successfully'
+  } catch (e: unknown) {
+    if (e instanceof Error) {
+      return e.message
+    }
+    return 'An unknown error occurred.'
+  }
+}

lib/api/collection.ts

@@ -136,13 +136,15 @@ type UpdateCollectionBooksResponse = Promise<
 >
 export const updateCollectionBooks = async (
   collection_id: string,
-  query: UpdateCollectionBooksQuery
+  query: UpdateCollectionBooksQuery,
+  init?: RequestInit
 ): UpdateCollectionBooksResponse => {
+  const headers = new Headers(init?.headers)
+  headers.set('Content-Type', 'application/json')
   const res = await fetch(`${COLLECTION_URL}/${collection_id}/books`, {
+    ...init,
     method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-    },
+    headers,
     body: JSON.stringify(query),
   })
   if (!res.ok) {