Forgot to stage it

src/pages/api/exam/avatars.ts

@@ -0,0 +1,21 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import axios from "axios";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return get(req, res);
+
+	return res.status(404).json({ ok: false });
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) return res.status(401).json({ ok: false });
+
+	const result = await axios.get(`${process.env.BACKEND_URL}/speaking/avatars`, {
+		headers: { Authorization: `Bearer ${process.env.BACKEND_JWT}` },
+	});
+	res.status(200).json(result.data);
+}

src/pages/generation.tsx

@@ -20,7 +20,7 @@ import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { useEffect } from "react";
 import { Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise } from "@/interfaces/exam";
-import { type } from "os";
+import axios from "axios";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
@@ -41,6 +41,17 @@ export default function Generation({ user }: { user: User; }) {
 		dispatch({ type: 'UPDATE_ROOT', payload: { updates } });
 	};
 
+	useEffect(() => {
+		const fetchAvatars = async () => {
+			const response = await axios.get("/api/exam/avatars");
+			console.log(response.data);
+			updateRoot({ speakingAvatars: response.data });
+		};
+
+		fetchAvatars();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	// media cleanup on unmount
 	useEffect(() => {
 		return () => {
@@ -49,9 +60,11 @@ export default function Generation({ user }: { user: User; }) {
 				const listeningPart = section.state as ListeningPart;
 				if (listeningPart.audio?.source) {
 					URL.revokeObjectURL(listeningPart.audio.source);
-					dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
-						sectionId: section.sectionId, module: "listening", field: "state", value: {...listeningPart, audio: undefined}
-					}})
+					dispatch({
+						type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
+							sectionId: section.sectionId, module: "listening", field: "state", value: { ...listeningPart, audio: undefined }
+						}
+					})
 				}
 			});
 
@@ -60,20 +73,24 @@ export default function Generation({ user }: { user: User; }) {
 				if (sectionState.type === 'speaking') {
 					const speakingExercise = sectionState as SpeakingExercise;
 					URL.revokeObjectURL(speakingExercise.video_url);
-					dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
-						sectionId: section.sectionId, module: "listening", field: "state", value: {...speakingExercise, video_url: undefined}
-					}})
+					dispatch({
+						type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
+							sectionId: section.sectionId, module: "listening", field: "state", value: { ...speakingExercise, video_url: undefined }
+						}
+					})
 				}
 				if (sectionState.type === 'interactiveSpeaking') {
 					const interactiveSpeaking = sectionState as InteractiveSpeakingExercise;
 					interactiveSpeaking.prompts.forEach(prompt => {
 						URL.revokeObjectURL(prompt.video_url);
 					});
-					dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
-						sectionId: section.sectionId, module: "listening", field: "state", value: {
-							...interactiveSpeaking, prompts: interactiveSpeaking.prompts.map((p)=> ({...p, video_url: undefined}))
+					dispatch({
+						type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
+							sectionId: section.sectionId, module: "listening", field: "state", value: {
+								...interactiveSpeaking, prompts: interactiveSpeaking.prompts.map((p) => ({ ...p, video_url: undefined }))
+							}
 						}
-					}})
+					})
 				}
 			});