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,52 +1,25 @@
 "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('')
+        setDetails('') 
         setIsOpen(false)
     }
     const handleExit = (event: React.MouseEvent) => {        

src/lib/api.tsx

@@ -25,7 +25,7 @@ export async function createFromAPI<T>(
 
 
   const response = await fetch(`${API_URL}${endpoint}`, config)
-  if(!response.ok) {
+  if (!response.ok) {
     throw new Error(`API request failed with status ${response.status}`)
   }
   return response.json()
@@ -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
-): Promise<Report> {
+  error_type: string,
+  details: string,
+  book_id: string,
+  chapter_id: string,
+) {
   const payload = {
     data: {
-      error_type,
-      details,
+      error_type: error_type,
+      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
 }