Frontend

shatter-web/src/components/BingoTable.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react"; 
 import { GenerateQuestions } from "../service/GenerateQuestions";
+import { GenerateIndividualQuestions } from "../service/GenerateIndividualQuestions";
 import useTagInput from "../hooks/useTag";
 import { TagField } from "./TagField"; 
 
@@ -47,46 +48,47 @@ export default function BingoTable({ bingoGrid, onChange, bingosize, setBingoGri
         try {
             setFetching(true);
 
-            // Converting Set into array of {row, col}
             const selected = Array.from(selectedCells).map(key => {
                 const [row, col] = key.split("-").map(Number);
                 return { row, col };
             });
 
-            // Concatenating tags to create prompt
-
-            const result = await GenerateQuestions({
-                event_description: bingoDescription,
-                n_rows: size,
-                n_cols: size,
-                tags: tags,
-            });
-
-            if (result && result.bingoGrid) {
-                //console.log("got response: ", result.bingoGrid);
-
-                // No selection
-                if (selected.length === 0) {
+            if (selected.length === 0) { 
+                const result = await GenerateQuestions({
+                    event_description: bingoDescription,
+                    n_rows: size,
+                    n_cols: size,
+                    tags: tags,
+                });
+                if (result?.bingoGrid) {
                     setBingoGrid(result.bingoGrid);
                 }
-                // Selected cells
-                else {
-                    setBingoGrid(prevGrid => {
-                        const newGrid = prevGrid.map(row => [...row]);
-
-                        selected.forEach(({ row, col }) => {
-                            const newCell = result.bingoGrid?.[row]?.[col];
-
-                            if (newCell && newCell.question && newCell.shortQuestion) {
-                                newGrid[row][col] = newCell;
-                            }
-                        });
-
-                        return newGrid;
+            } else {
+                const bingo_grid = bingoGrid.map(row => row.map(cell => cell.question));
+                const bingo_question_target = selected.map(({ row, col }) => bingoGrid[row][col].question);
+
+                const results = await GenerateIndividualQuestions({
+                    event_description: bingoDescription,
+                    tags,
+                    bingo_grid,
+                    bingo_question_target,
+                });
+
+                setBingoGrid(prevGrid => {
+                    const newGrid = prevGrid.map(row => [...row]);
+                    selected.forEach(({ row, col }, index) => {
+                        const newCell = results[index];
+                        if (newCell?.question && newCell?.shortQuestion) {
+                            newGrid[row][col] = {
+                                question: newCell.question,
+                                shortQuestion: newCell.shortQuestion,
+                            };
+                        }
                     });
+                    return newGrid;
+                });
 
-                    setSelectedCells(new Set());
-                }
+                setSelectedCells(new Set());
             }
 
         } catch (error) {

shatter-web/src/service/GenerateIndividualQuestions.ts

@@ -0,0 +1,37 @@
+export async function GenerateIndividualQuestions(Data: {
+    event_description: string;
+    bingo_grid: string[][];
+    tags: string[];
+    bingo_question_target: string[];
+}) {
+    try {
+        const apiUrl = `${import.meta.env.VITE_API_URL}/bingo/generateBingo/individual`;
+        const token = localStorage.getItem('token');
+
+        const response = await fetch(apiUrl,
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': token ? `Bearer ${token}` : '',
+                },
+                body: JSON.stringify(Data),
+            });
+
+        if (!response.ok) {
+            throw new Error(`Server responded with status ${response.status}`);
+        }
+
+        const responseData = await response.json();
+
+        if (responseData.status === false) {
+            throw new Error(`API responded with an error: ${responseData.msg}`);
+        }
+        // The bingo grid is filled with 2d arrays, where each entry is an array of objects. Each object represents a row
+        return responseData.new_questions;
+
+    } catch (error) {
+        console.error("Generating questions failed with error ", error);
+        throw error;
+    }
+}

shatter-web/src/service/GenerateQuestions.ts

@@ -24,6 +24,9 @@ export async function GenerateQuestions(Data: {
 
         const responseData = await response.json();
 
+        if (responseData.status === false) {
+            throw new Error(`API responded with an error: ${responseData.msg}`);
+        }
         // The bingo grid is filled with 2d arrays, where each entry is an array of objects. Each object represents a row
         return {
             bingoGrid: responseData.bingo_grid