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

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
 }