ENCOA-274

src/components/ExamEditor/Exercises/Writing/index.tsx

@@ -20,6 +20,9 @@ interface Props {
 
 const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
     const { currentModule, dispatch } = useExamEditorStore();
+    const { type, academic_url } = useExamEditorStore(
+        (state) => state.modules[currentModule]
+    );
     const { generating, genResult, state } = useExamEditorStore(
         (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
     );
@@ -68,7 +71,7 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
                 ...state,
                 isPractice: !local.isPractice
             };
-            setLocal((prev) => ({...prev, isPractice: !local.isPractice}))
+            setLocal((prev) => ({ ...prev, isPractice: !local.isPractice }))
             dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState, module: currentModule } });
         }
     });
@@ -96,7 +99,7 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
         <>
             <div className={clsx('relative', level ? "px-4 mt-2" : "pb-2")}>
                 <Header
-                    title={`${sectionId === 1 ? "Letter" : "Essay"} Instructions`}
+                    title={`${sectionId === 1 ? (type === "academic" ? "Visual Information" : "Letter") : "Essay"} Instructions`}
                     description='Generate or edit the instructions for the task'
                     editing={editing}
                     handleSave={handleSave}
@@ -112,7 +115,8 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
             <div className={clsx(level ? "mt-2 px-4" : "mt-4")}>
                 {loading ?
                     <GenLoader module={currentModule} /> :
-                    (
+                    <>
+                        {
                             editing ? (
                                 <div className="text-gray-600 p-4">
                                     <AutoExpandingTextArea
@@ -130,7 +134,17 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
                                     {prompt === "" ? "Instructions ..." : prompt}
                                 </p>
                             )
+                        }
+                        {academic_url && sectionId == 1 && (
+                            <div className="flex items-center justify-center mt-8">
+                                <div className="max-w-lg self-center rounded-xl cursor-pointer">
+                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img src={academic_url} alt="Visual Information" />
+                                </div>
+                            </div>
                         )}
+                    </>
+                }
             </div>
         </>
     );

src/components/ExamEditor/SettingsEditor/Shared/Generate.ts

@@ -8,6 +8,7 @@ import { Module } from "@/interfaces";
 interface GeneratorConfig {
     method: 'GET' | 'POST';
     queryParams?: Record<string, string>;
+    files?: Record<string, string>;
     body?: Record<string, any>;
 }
 
@@ -66,8 +67,49 @@ export function generate(
 
     const url = `/api/exam/generate/${module}/${sectionId}${queryString ? `?${queryString}` : ''}`;
 
+    let body = null;
+    console.log(config.files);
+    if (config.files && Object.keys(config.files).length > 0 && config.method === 'POST') {
+        const formData = new FormData();
+
+        const buildForm = async () => {
+            await Promise.all(
+                Object.entries(config.files ?? {}).map(async ([key, blobUrl]) => {
+                    const response = await fetch(blobUrl);
+                    const blob = await response.blob();
+                    const file = new File([blob], key, { type: blob.type });
+                    formData.append(key, file);
+                })
+            );
+
+            if (config.body) {
+                Object.entries(config.body).forEach(([key, value]) => {
+                    formData.append(key, value as string);
+                });
+            }
+            return formData;
+        };
+
+        buildForm().then(form => {
+            body = form;
+
+            const request = axios.post(url, body, { headers: { 'Content-Type': 'multipart/form-data' } });
+            request
+                .then((result) => {
+                    playSound("check");
+                    setGeneratedResult(level ? levelSectionId! : sectionId, type, mapData(result.data), level);
+                })
+                .catch((error) => {
+                    setGenerating(sectionId, undefined, level, true);
+                    playSound("error");
+                    toast.error("Something went wrong! Try to generate again.");
+                });
+        });
+    } else {
+        body = config.body;
+
         const request = config.method === 'POST'
-        ? axios.post(url, config.body)
+            ? axios.post(url, body, { headers: { 'Content-Type': 'application/json' } })
             : axios.get(url);
 
         request
@@ -79,5 +121,6 @@ export function generate(
                 setGenerating(sectionId, undefined, level, true);
                 playSound("error");
                 toast.error("Something went wrong! Try to generate again.");
-        })
+            });
+    }
 }

src/components/ExamEditor/SettingsEditor/writing/components.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import Dropdown from "../Shared/SettingsDropdown";
 import Input from "@/components/Low/Input";
 import { generate } from "../Shared/Generate";
@@ -6,6 +6,8 @@ import GenerateBtn from "../Shared/GenerateBtn";
 import { LevelSectionSettings, WritingSectionSettings } from "@/stores/examEditor/types";
 import useExamEditorStore from "@/stores/examEditor";
 import { WritingExercise } from "@/interfaces/exam";
+import clsx from "clsx";
+import { FaFileUpload } from "react-icons/fa";
 
 
 interface Props {
@@ -15,14 +17,35 @@ interface Props {
     level?: boolean;
 }
 
-const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, level}) => {
+const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndScheduleGlobal, level }) => {
-    const { currentModule } = useExamEditorStore();
+    const { currentModule, dispatch } = useExamEditorStore();
     const {
         difficulty,
         focusedSection,
+        type,
+        academic_url
     } = useExamEditorStore((store) => store.modules["writing"]);
-
     const generatePassage = useCallback((sectionId: number) => {
+        if (type === "academic" && academic_url !== undefined && sectionId == 1) {
+            generate(
+                sectionId,
+                currentModule,
+                "writing",
+                {
+                    method: 'POST',
+                    queryParams: {
+                        difficulty,
+                        type: type!
+                    },
+                    files: {
+                        file: academic_url!,
+                    }
+                },
+                (data: any) => [{
+                    prompt: data.question
+                }]
+            )
+        } else {
             generate(
                 sectionId,
                 currentModule,
@@ -31,6 +54,7 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
                     method: 'GET',
                     queryParams: {
                         difficulty,
+                        type: type!,
                         ...(localSettings.writingTopic && { topic: localSettings.writingTopic })
                     }
                 },
@@ -38,24 +62,80 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
                     prompt: data.question
                 }]
             );
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [localSettings.writingTopic, difficulty]);
+    }, [localSettings.writingTopic, difficulty, academic_url]);
 
     const onTopicChange = useCallback((writingTopic: string) => {
         updateLocalAndScheduleGlobal({ writingTopic });
     }, [updateLocalAndScheduleGlobal]);
 
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const triggerFileInput = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            const blobUrl = URL.createObjectURL(file);
+            if (academic_url !== undefined) {
+                URL.revokeObjectURL(academic_url);
+            }
+            dispatch({ type: "UPDATE_MODULE", payload: { updates: { academic_url: blobUrl } } });
+        }
+    };
+
     return (
         <>
-            <Dropdown
+            {type === "academic" && focusedSection === 1 && <Dropdown
+                title="Upload Image"
+                module={"writing"}
+                open={localSettings.isImageUploadOpen}
+                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isImageUploadOpen: isOpen }, false)}
+                contentWrapperClassName={level ? `border border-ielts-writing` : ''}
+            >
+                <div className="flex flex-row gap-2 items-center px-2 pb-4">
+
+                    <div className="flex flex-row p-2 gap-4">
+                        <span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
+                            Upload a graph, chart or diagram
+                        </span>
+                        <input
+                            type="file"
+                            accept="image/png, image/jpeg"
+                            onChange={handleFileUpload}
+                            style={{ display: 'none' }}
+                            ref={fileInputRef}
+                        />
+                        <button
+                            key={`section-${focusedSection}`}
+                            className={clsx(
+                                "flex items-center w-[140px] px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
+                                `bg-ielts-writing/70 border border-ielts-writing hover:bg-ielts-writing disabled:bg-ielts-writing/40`,
+                            )}
+                            onClick={triggerFileInput}
+                        >
+                            <div className="flex flex-row">
+                                <FaFileUpload className="mr-2" size={24} />
+                                <span>Upload</span>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </Dropdown>}
+            {
+                type !== "academic" || (type === "academic" && academic_url !== undefined) && <Dropdown
                     title="Generate Instructions"
                     module={"writing"}
                     open={localSettings.isWritingTopicOpen}
                     setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
-                contentWrapperClassName={level ? `border border-ielts-writing`: ''}
+                    contentWrapperClassName={level ? `border border-ielts-writing` : ''}
                 >
 
                     <div className="flex flex-row gap-2 items-center px-2 pb-4">
+                        {type !== "academic" ?
                             <div className="flex flex-col flex-grow gap-4 px-2">
                                 <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
                                 <Input
@@ -68,6 +148,13 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
                                     value={localSettings.writingTopic}
                                 />
                             </div>
+                            :
+                            <div className="flex flex-col flex-grow gap-4 px-2">
+                                <span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
+                                    Generate instructions based on the uploaded image.
+                                </span>
+                            </div>
+                        }
                         <div className="flex self-end h-16 mb-1">
                             <GenerateBtn
                                 genType="writing"
@@ -78,6 +165,7 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
                         </div>
                     </div>
                 </Dropdown>
+            }
         </>
     );
 };

src/components/ExamEditor/SettingsEditor/writing/index.tsx

@@ -8,7 +8,6 @@ import { useRouter } from "next/router";
 import { usePersistentExamStore } from "@/stores/exam";
 import openDetachedTab from "@/utils/popout";
 import { WritingExam, WritingExercise } from "@/interfaces/exam";
-import { v4 } from "uuid";
 import axios from "axios";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
@@ -25,7 +24,8 @@ const WritingSettings: React.FC = () => {
         isPrivate,
         sections,
         focusedSection,
-        type
+        type,
+        academic_url
     } = useExamEditorStore((store) => store.modules["writing"]);
 
     const states = sections.flatMap((s) => s.state) as WritingExercise[];
@@ -58,8 +58,16 @@ const WritingSettings: React.FC = () => {
 
     const openTab = () => {
         setExam({
-            exercises: sections.map((s) => {
+            exercises: sections.map((s, index) => {
                 const exercise = s.state as WritingExercise;
+                if (type === "academic" && index == 0 && academic_url) {
+                    console.log("Added the URL");
+                    exercise["attachment"] = {
+                        url: academic_url,
+                        description: "Visual Information"
+                    }
+                }
+
                 return {
                     ...exercise,
                     intro: s.settings.currentIntro,
@@ -79,10 +87,42 @@ const WritingSettings: React.FC = () => {
         openDetachedTab("popout?type=Exam&module=writing", router)
     }
 
-    const submitWriting = () => {
+    const submitWriting = async () => {
+        if (title === "") {
+            toast.error("Enter a title for the exam!");
+            return;
+        }
+        try {
+            let firebase_url = undefined;
+            if (type === "academic" && academic_url) {
+                const formData = new FormData();
+                const sectionMap = new Map<number, string>();
+                const fetchedBlob = await fetch(academic_url);
+                const blob = await fetchedBlob.blob();
+                formData.append('file', blob);
+                sectionMap.set(1, academic_url);
+
+                const response = await axios.post('/api/storage', formData, {
+                    params: {
+                        directory: 'writing_attachments'
+                    },
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                });
+                firebase_url = response.data.urls[1];
+            }
+
             const exam: WritingExam = {
                 exercises: sections.map((s) => {
                     const exercise = s.state as WritingExercise;
+                    if (exercise.sectionId == 1 && firebase_url) {
+                        exercise["attachment"] = {
+                            url: firebase_url,
+                            description: "Visual Information"
+                        }
+                    }
+
                     return {
                         ...exercise,
                         intro: localSettings.currentIntro,
@@ -99,16 +139,16 @@ const WritingSettings: React.FC = () => {
                 type: type!
             };
 
-        axios
+            const result = await axios.post(`/api/exam/writing`, exam)
-            .post(`/api/exam/reading`, exam)
-            .then((result) => {
             playSound("sent");
             toast.success(`Submitted Exam ID: ${result.data.id}`);
-            })
+
-            .catch((error) => {
+        } catch (error: any) {
-                console.log(error);
+            console.error('Error submitting exam:', error);
-                toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
+            toast.error(
-            })
+                "Something went wrong while submitting, please try again later."
+            );
+        }
     }
 
     return (

src/pages/(admin)/Lists/BatchCreateUser.tsx

@@ -185,12 +185,12 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
 		if (!confirm(`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`))
 			return;
 
-		/*Promise.all(duplicatedUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, entity, from: user.id})))
+		Promise.all(newUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, entity, from: user.id})))
-			.then(() => toast.success(`Successfully invited ${duplicatedUsers.length} registered student(s)!`))
+			.then(() => toast.success(`Successfully invited ${newUsers.length} registered student(s)!`))
 			.finally(() => {
 				if (newUsers.length === 0) setIsLoading(false);
 			});
-		*/
+		
 		if (newUsers.length > 0) {
 			setIsLoading(true);
 
@@ -392,6 +392,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
 						<UserTable users={duplicatedUsers} />
 					</div>
 				)}
+				{(duplicatedUsers.length !== 0 && newUsers.length === 0) && <span className="text-red-500 font-bold">The imported .csv only contains duplicated users!</span>}
 				<Button className="my-auto mt-4" onClick={makeUsers} disabled={newUsers.length === 0}>
 					Create {newUsers.length !== 0 ? `${newUsers.length} New Users` : ''}
 				</Button>

src/pages/(exam)/ExamPage.tsx

@@ -11,7 +11,7 @@ import Reading from "@/exams/Reading";
 import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
-import { Exam, LevelExam, UserSolution, Variant } from "@/interfaces/exam";
+import { Exam, LevelExam, UserSolution, Variant, WritingExam } from "@/interfaces/exam";
 import { User } from "@/interfaces/user";
 import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
 import { getExam } from "@/utils/exams";
@@ -126,7 +126,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 					await Promise.all(
 						exam.exercises.map(async (exercise, index) => {
 							if (exercise.type === "writing")
-								await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!);
+								await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!, exercise.attachment?.url);
 
 							if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking"){
 								await evaluateSpeakingAnswer(

src/pages/api/exam/[module]/index.ts

@@ -65,7 +65,8 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 			// Check whether the id of the exam matches another exam with different
 			// owners, throw exception if there is, else allow editing
 			const ownersSet = new Set(docSnap?.owners || []);
-			if (docSnap?.owners?.length === exam.owners.lenght && exam.owners.every((e: string) => ownersSet.has(e))) {
+
+			if (docSnap !== null && docSnap?.owners?.length === exam.owners.lenght && exam.owners.every((e: string) => ownersSet.has(e))) {
 				throw new Error("Name already exists");
 			}
 

src/pages/api/exam/generate/[...module].ts

@@ -31,6 +31,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) return res.status(401).json({ ok: false });
 
 	const queryParams = queryToURLSearchParams(req);
+
 	let endpoint = queryParams.getAll('module').join("/");
 	
 	if (endpoint.startsWith("level")) {
@@ -41,12 +42,27 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 		endpoint = "reading/"
 	}
 
-	const result = await axios.post(`${process.env.BACKEND_URL}/${endpoint}`,
+	queryParams.delete('module');
-		req.body,
+	const queryString = queryParams.toString();
-		{
-			headers: { Authorization: `Bearer ${process.env.BACKEND_JWT}` },
-		},
-	);
 
-	res.status(200).json(result.data);
+	const hasFiles = req.headers['content-type']?.startsWith('multipart/form-data');
+
+    // https://github.com/vercel/next.js/discussions/36153#discussioncomment-3029675
+	// This just proxies the request
+
+	const { data } = await axios.post(
+		`${process.env.BACKEND_URL}/${endpoint}${hasFiles ? '/attachment' : ''}${queryString.length > 0 ? `?${queryString}` : ''}`, req, {
+		responseType: "stream",
+		headers: {
+			"Content-Type": req.headers["content-type"],
+			Authorization: `Bearer ${process.env.BACKEND_JWT}`,
+		},
+	});
+	data.pipe(res);
 }
+
+export const config = {
+	api: {
+		bodyParser: false,
+	},
+};

src/pages/generation.tsx

@@ -93,6 +93,11 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 	useEffect(() => {
 		return () => {
 			const state = modules;
+
+			if (state.writing.academic_url) {
+				URL.revokeObjectURL(state.writing.academic_url);
+			}
+
 			state.listening.sections.forEach(section => {
 				const listeningPart = section.state as ListeningPart;
 				if (listeningPart.audio?.source) {

src/stores/examEditor/defaults.ts

@@ -23,7 +23,8 @@ export const defaultSettings = (module: Module) => {
             return {
                 ...baseSettings,
                 writingTopic: '',
-                isWritingTopicOpen: false
+                isWritingTopicOpen: false,
+                isImageUploadOpen: false,
             }
         case 'reading':
             return {
@@ -57,6 +58,7 @@ export const defaultSettings = (module: Module) => {
                 isListeningDropdownOpen: false,
 
                 isWritingTopicOpen: false,
+                isImageUploadOpen: false,
                 writingTopic: '',
 
                 isPassageOpen: false,

src/stores/examEditor/types.ts

@@ -1,7 +1,6 @@
 import { Difficulty, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
 import { Module } from "@/interfaces";
 import Option from "@/interfaces/option";
-import { ExerciseConfig } from "@/components/ExamEditor/ExercisePicker/ExerciseWizard";
 
 export interface GeneratedExercises {
     exercises: Record<string, string>[];
@@ -42,6 +41,7 @@ export interface ListeningSectionSettings extends SectionSettings {
 export interface WritingSectionSettings extends SectionSettings {
     isWritingTopicOpen: boolean;
     writingTopic: string;
+    isImageUploadOpen: boolean;
 }
 
 export interface LevelSectionSettings extends SectionSettings {
@@ -55,6 +55,7 @@ export interface LevelSectionSettings extends SectionSettings {
 
     // writing
     isWritingTopicOpen: boolean;
+    isImageUploadOpen: boolean;
     writingTopic: string;
 
     // reading
@@ -116,6 +117,7 @@ export interface ModuleState {
     importing: boolean;
     edit: number[];
     type?: "general" | "academic";
+    academic_url?: string | undefined;
 }
 
 export interface Avatar {

src/utils/evaluation.ts

@@ -12,14 +12,16 @@ export const evaluateWritingAnswer = async (
 	exercise: WritingExercise,
 	task: number,
 	solution: UserSolution,
+	attachment?: string,
 ): Promise<void> => {
 	await axios.post("/api/evaluate/writing", {
-		question: `${exercise.prompt} ${exercise.attachment ? exercise.attachment.description : ""}`.replaceAll("\n", ""),
+		question: `${exercise.prompt}`.replaceAll("\n", ""),
 		answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
 		task,
 		userId,
 		sessionId,
-		exerciseId: exercise.id
+		exerciseId: exercise.id,
+		attachment,
 	});
 };