Refactor the createReport to API like every other api calls, and added alert to tell users if they sucessfully submitted a report

src/components/ReportButton.tsx

@@ -1,50 +1,23 @@
 "use client"
 import React, { useState, useRef } from "react";
+import { createReport
 
+ } from "@/lib/api";
 interface ReportButtonProps {
     bookId: string;
     chapterId: string;
 }
-async function createReport(
-    error_type: string,
-    details: string,
-    book_id: string,
-    chapter_id: string,
-) {
-    const payload = {
-        data:{
-            error_type: error_type,
-            details: details,
-            book: book_id,
-            chapter: chapter_id
-        }
-    }
 
-    const response = await fetch(
-        '/api/reports',
-        {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(payload)
-        }
-    )
-
-    if(!response.ok) {
-        throw new Error(`API request failed with status ${response.status}`)
-    }
-    return response.json()
-}
 const ReportButton: React.FC<ReportButtonProps> = ({ bookId, chapterId }) => {
     const modalRef = useRef<HTMLDivElement>(null)
     const [isOpen, setIsOpen] = useState(false)
     const [errorType, setErrorType] = useState('')
     const [details, setDetails] = useState('')
-    const handleSubmitReport = (event: React.FormEvent<HTMLFormElement>) => {
+    const handleSubmitReport = async (event: React.FormEvent<HTMLFormElement>) => {
         // Implement report submission here
         event.preventDefault()
-        createReport(errorType,details,bookId,chapterId)
+        const response = await createReport(errorType,details,bookId,chapterId)
+        response.status === 201 ? alert('Report submitted successfully') : alert('Failed to submit report')
         setErrorType('')
         setDetails('') 
         setIsOpen(false)

src/lib/api.tsx

@@ -162,20 +162,35 @@ export async function fetchGlossaryByBookId(bookId: string): Promise<Glossary> {
   const data = await fetchFromAPI<Glossary>(`/api/glossaries?filters[book][documentId]=${bookId}`);
   return data[0];
 }
+
 export async function createReport(
   error_type: string,
   details: string,
   book_id: string,
-  chapter_id: string
+  chapter_id: string,
-): Promise<Report> {
+) {
   const payload = {
     data: {
-      error_type,
+      error_type: error_type,
-      details,
+      details: details,
       book: book_id,
       chapter: chapter_id
     }
   }
-  const data = await createFromAPI<Report>(`/api/reports`, JSON.stringify(payload))
+
-  return data
+  const response = await fetch(
+    '/api/reports',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload)
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error(`API request failed with status ${response.status}`)
+  }
+  return response
 }