Exam generation rework, batch user tables, fastapi endpoint switch
This commit is contained in:
Carlos-Mesquita
18
src/pages/(admin)/BatchCreateUser/IUserImport.ts
Normal file
18
src/pages/(admin)/BatchCreateUser/IUserImport.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { Type as UserType} from "@/interfaces/user";
|
||||
|
||||
export type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">;
|
||||
|
||||
export interface UserImport {
|
||||
email: string;
|
||||
name: string;
|
||||
passport_id: string;
|
||||
type: Type;
|
||||
groupName: string;
|
||||
corporate: string;
|
||||
studentID: string;
|
||||
demographicInformation: {
|
||||
country: string;
|
||||
passport_id: string;
|
||||
phone: string;
|
||||
};
|
||||
}
|
||||
200
src/pages/(admin)/BatchCreateUser/UserTable.tsx
Normal file
200
src/pages/(admin)/BatchCreateUser/UserTable.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
createColumnHelper,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
getFilteredRowModel,
|
||||
FilterFn,
|
||||
} from '@tanstack/react-table';
|
||||
import { UserImport } from "./IUserImport";
|
||||
|
||||
const globalFilterFn: FilterFn<any> = (row, columnId, filterValue: string) => {
|
||||
const value = row.getValue(columnId);
|
||||
return String(value).toLowerCase().includes(filterValue.toLowerCase());
|
||||
};
|
||||
|
||||
const columnHelper = createColumnHelper<UserImport>();
|
||||
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor('name', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Name',
|
||||
}),
|
||||
columnHelper.accessor('studentID', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Student ID',
|
||||
}),
|
||||
columnHelper.accessor('demographicInformation.passport_id', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Passport/National ID',
|
||||
}),
|
||||
columnHelper.accessor('email', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Email',
|
||||
}),
|
||||
columnHelper.accessor('demographicInformation.phone', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Phone Number',
|
||||
}),
|
||||
columnHelper.accessor('corporate', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Corporate (e-mail)',
|
||||
}),
|
||||
columnHelper.accessor('groupName', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Group Name',
|
||||
}),
|
||||
columnHelper.accessor('demographicInformation.country', {
|
||||
cell: info => info.getValue(),
|
||||
header: () => 'Country',
|
||||
}),
|
||||
];
|
||||
|
||||
|
||||
const UserTable: React.FC<{ users: UserImport[] }> = ({ users }) => {
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
|
||||
const table = useReactTable({
|
||||
data: users,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
globalFilterFn: globalFilterFn,
|
||||
state: {
|
||||
globalFilter,
|
||||
},
|
||||
onGlobalFilterChange: setGlobalFilter,
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 5,
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className='flex flex-col'>
|
||||
<div className="flex flew-row w-full mb-4 justify-between gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={globalFilter ?? ''}
|
||||
onChange={e => setGlobalFilter(e.target.value)}
|
||||
placeholder="Search ..."
|
||||
className="p-2 border rounded flex-grow"
|
||||
/>
|
||||
<select
|
||||
value={table.getState().pagination.pageSize}
|
||||
onChange={e => {
|
||||
table.setPageSize(Number(e.target.value));
|
||||
}}
|
||||
className="p-2 border rounded"
|
||||
>
|
||||
{[5, 10, 15, 20].map(pageSize => (
|
||||
<option key={pageSize} value={pageSize}>
|
||||
Show {pageSize}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map(header => (
|
||||
<th
|
||||
key={header.id}
|
||||
className='bg-mti-purple-ultralight/80 first:rounded-tl-3xl last:rounded-tr-3xl py-4 first:pl-6 text-mti-purple-light cursor-pointer'
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
{header.isPlaceholder ? null : (
|
||||
<div className='flex flex-row justify-between'>
|
||||
<span>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</span>
|
||||
<span className='pr-6'>
|
||||
{{
|
||||
asc: ' 🔼',
|
||||
desc: ' 🔽',
|
||||
}[header.column.getIsSorted() as string] ?? null}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map((row, index, array) => {
|
||||
const isLastRow = index === array.length - 1;
|
||||
return (
|
||||
<tr key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => {
|
||||
return (
|
||||
<td
|
||||
key={cell.id}
|
||||
className={
|
||||
isLastRow
|
||||
? `first:rounded-bl-3xl last:rounded-br-3xl py-4 first:pl-6 bg-mti-purple-ultralight/40`
|
||||
: `first:pl-6 py-4 border-b bg-mti-purple-ultralight/40`
|
||||
}
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="mt-4 flex items-center gap-4 mx-auto">
|
||||
<button
|
||||
onClick={() => table.setPageIndex(0)}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className="px-4 py-2 bg-mti-purple-light text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{'<<'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className="px-4 py-2 bg-mti-purple-light text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{'<'}
|
||||
</button>
|
||||
<span>
|
||||
Page{' '}
|
||||
<strong>
|
||||
{table.getState().pagination.pageIndex + 1} of{' '}
|
||||
{table.getPageCount()}
|
||||
</strong>
|
||||
</span>
|
||||
<button
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className="px-4 py-2 bg-mti-purple-light text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{'>'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className="px-4 py-2 bg-mti-purple-light text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{'>>'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserTable;
|
||||
@@ -1,35 +1,33 @@
|
||||
import Button from "@/components/Low/Button";
|
||||
import useUsers from "@/hooks/useUsers";
|
||||
import {Type as UserType, User} from "@/interfaces/user";
|
||||
import axios from "axios";
|
||||
import {uniqBy} from "lodash";
|
||||
import {useEffect, useState} from "react";
|
||||
import {toast} from "react-toastify";
|
||||
import {useFilePicker} from "use-file-picker";
|
||||
import { uniqBy } from "lodash";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { useFilePicker } from "use-file-picker";
|
||||
import readXlsxFile from "read-excel-file";
|
||||
import Modal from "@/components/Modal";
|
||||
import {BsQuestionCircleFill} from "react-icons/bs";
|
||||
import {PermissionType} from "@/interfaces/permissions";
|
||||
import { BsQuestionCircleFill } from "react-icons/bs";
|
||||
import { PermissionType } from "@/interfaces/permissions";
|
||||
import moment from "moment";
|
||||
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
|
||||
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
import ReactDatePicker from "react-datepicker";
|
||||
import clsx from "clsx";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import countryCodes from "country-codes-list";
|
||||
import { User, Type as UserType } from "@/interfaces/user";
|
||||
import { Type, UserImport } from "./IUserImport";
|
||||
import UserTable from "./UserTable";
|
||||
|
||||
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
|
||||
|
||||
type Type = Exclude<UserType, "admin" | "developer" | "agent" | "mastercorporate">;
|
||||
|
||||
const USER_TYPE_LABELS: {[key in Type]: string} = {
|
||||
const USER_TYPE_LABELS: { [key in Type]: string } = {
|
||||
student: "Student",
|
||||
teacher: "Teacher",
|
||||
corporate: "Corporate",
|
||||
};
|
||||
|
||||
const USER_TYPE_PERMISSIONS: {
|
||||
[key in UserType]: {perm: PermissionType | undefined; list: UserType[]};
|
||||
[key in UserType]: { perm: PermissionType | undefined; list: UserType[] };
|
||||
} = {
|
||||
student: {
|
||||
perm: "createCodeStudent",
|
||||
@@ -63,25 +61,16 @@ const USER_TYPE_PERMISSIONS: {
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
users: User[];
|
||||
permissions: PermissionType[];
|
||||
onFinish: () => void;
|
||||
}
|
||||
|
||||
export default function BatchCreateUser({user, users, permissions, onFinish}: Props) {
|
||||
const [infos, setInfos] = useState<
|
||||
{
|
||||
email: string;
|
||||
name: string;
|
||||
passport_id: string;
|
||||
type: Type;
|
||||
demographicInformation: {
|
||||
country: string;
|
||||
passport_id: string;
|
||||
phone: string;
|
||||
};
|
||||
}[]
|
||||
>([]);
|
||||
export default function BatchCreateUser({ user, permissions, onFinish }: Props) {
|
||||
const [infos, setInfos] = useState<UserImport[]>([]);
|
||||
|
||||
const [duplicatedUsers, setDuplicatedUsers] = useState<UserImport[]>([]);
|
||||
const [newUsers, setNewUsers] = useState<UserImport[]>([]);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [expiryDate, setExpiryDate] = useState<Date | null>(
|
||||
user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
|
||||
@@ -90,7 +79,7 @@ export default function BatchCreateUser({user, users, permissions, onFinish}: Pr
|
||||
const [type, setType] = useState<Type>("student");
|
||||
const [showHelp, setShowHelp] = useState(false);
|
||||
|
||||
const {openFilePicker, filesContent, clear} = useFilePicker({
|
||||
const { openFilePicker, filesContent, clear } = useFilePicker({
|
||||
accept: ".xlsx",
|
||||
multiple: false,
|
||||
readAs: "ArrayBuffer",
|
||||
@@ -115,19 +104,19 @@ export default function BatchCreateUser({user, users, permissions, onFinish}: Pr
|
||||
|
||||
return EMAIL_REGEX.test(email.toString().trim())
|
||||
? {
|
||||
email: email.toString().trim().toLowerCase(),
|
||||
name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
|
||||
type: type,
|
||||
email: email.toString().trim().toLowerCase(),
|
||||
name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
|
||||
type: type,
|
||||
passport_id: passport_id?.toString().trim() || undefined,
|
||||
groupName: group,
|
||||
corporate,
|
||||
studentID,
|
||||
demographicInformation: {
|
||||
country: countryItem?.countryCode,
|
||||
passport_id: passport_id?.toString().trim() || undefined,
|
||||
groupName: group,
|
||||
corporate,
|
||||
studentID,
|
||||
demographicInformation: {
|
||||
country: countryItem?.countryCode,
|
||||
passport_id: passport_id?.toString().trim() || undefined,
|
||||
phone: phone.toString(),
|
||||
},
|
||||
}
|
||||
phone: phone.toString(),
|
||||
},
|
||||
}
|
||||
: undefined;
|
||||
})
|
||||
.filter((x) => !!x) as typeof infos,
|
||||
@@ -153,15 +142,41 @@ export default function BatchCreateUser({user, users, permissions, onFinish}: Pr
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [filesContent]);
|
||||
|
||||
useEffect(() => {
|
||||
const crossReferenceEmails = async () => {
|
||||
try {
|
||||
const response = await axios.post("/api/users/controller?op=crossRefEmails", {
|
||||
emails: infos.map((x) => x.email)
|
||||
});
|
||||
|
||||
const crossRefEmails = response.data;
|
||||
if (!!crossRefEmails) {
|
||||
const existingEmails = new Set(crossRefEmails.map((x: any)=> x.email));
|
||||
const dupes = infos.filter(info => existingEmails.has(info.email));
|
||||
const newUsersList = infos.filter(info => !existingEmails.has(info.email));
|
||||
setNewUsers(newUsersList);
|
||||
setDuplicatedUsers(dupes);
|
||||
} else {
|
||||
setNewUsers(infos);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
}
|
||||
};
|
||||
|
||||
if (infos.length > 0) {
|
||||
crossReferenceEmails();
|
||||
}
|
||||
}, [infos]);
|
||||
|
||||
const makeUsers = async () => {
|
||||
const newUsers = infos.filter((x) => !users.map((u) => u.email).includes(x.email));
|
||||
if (!confirm(`You are about to add ${newUsers.length}, are you sure you want to continue?`)) return;
|
||||
if (!confirm(`You are about to add ${newUsers.length} user${newUsers.length !== 1 ? 's' : ''}, are you sure you want to continue?`)) return;
|
||||
|
||||
if (newUsers.length > 0) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await axios.post("/api/batch_users", {users: newUsers.map((user) => ({...user, type, expiryDate}))});
|
||||
//await axios.post("/api/batch_users", {users: newUsers.map((user) => ({...user, type, expiryDate}))});
|
||||
toast.success(`Successfully added ${newUsers.length} user(s)!`);
|
||||
onFinish();
|
||||
} catch {
|
||||
@@ -249,7 +264,7 @@ export default function BatchCreateUser({user, users, permissions, onFinish}: Pr
|
||||
className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none">
|
||||
{Object.keys(USER_TYPE_LABELS)
|
||||
.filter((x) => {
|
||||
const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
|
||||
const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
|
||||
// if (x === "corporate") console.log(list, perm, checkAccess(user, list, permissions, perm));
|
||||
return checkAccess(user, getTypesOfUser(list), permissions, perm);
|
||||
})
|
||||
@@ -260,8 +275,20 @@ export default function BatchCreateUser({user, users, permissions, onFinish}: Pr
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<Button className="my-auto" onClick={makeUsers} disabled={infos.length === 0}>
|
||||
Create
|
||||
{newUsers.length !== 0 && (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<span className="text-mti-gray-dim text-base font-normal">New Users:</span>
|
||||
<UserTable users={newUsers} />
|
||||
</div>
|
||||
)}
|
||||
{duplicatedUsers.length !== 0 && (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<span className="text-mti-gray-dim text-base font-normal">Duplicated Users:</span>
|
||||
<UserTable users={duplicatedUsers} />
|
||||
</div>
|
||||
)}
|
||||
<Button className="my-auto mt-4" onClick={makeUsers} disabled={newUsers.length === 0}>
|
||||
Create {newUsers.length !== 0 ? `${newUsers.length} New Users` : ''}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
@@ -1,760 +0,0 @@
|
||||
import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
|
||||
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
|
||||
import WriteBlankEdits from "@/components/Generation/write.blanks.edit";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
import Input from "@/components/Low/Input";
|
||||
import Select from "@/components/Low/Select";
|
||||
import {
|
||||
Difficulty,
|
||||
LevelExam,
|
||||
MultipleChoiceExercise,
|
||||
MultipleChoiceQuestion,
|
||||
LevelPart,
|
||||
FillBlanksExercise,
|
||||
WriteBlanksExercise,
|
||||
Exercise,
|
||||
} from "@/interfaces/exam";
|
||||
import useExamStore from "@/stores/examStore";
|
||||
import { getExamById } from "@/utils/exams";
|
||||
import { playSound } from "@/utils/sound";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import { capitalize, sample } from "lodash";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BsArrowRepeat, BsCheck, BsPencilSquare, BsX } from "react-icons/bs";
|
||||
import reactStringReplace from "react-string-replace";
|
||||
import { toast } from "react-toastify";
|
||||
import { v4 } from "uuid";
|
||||
|
||||
interface Option {
|
||||
[key: string]: any;
|
||||
value: string | null;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
|
||||
const TYPES: { [key: string]: string } = {
|
||||
multiple_choice_4: "Multiple Choice",
|
||||
multiple_choice_blank_space: "Multiple Choice - Blank Space",
|
||||
multiple_choice_underlined: "Multiple Choice - Underlined",
|
||||
blank_space_text: "Blank Space",
|
||||
reading_passage_utas: "Reading Passage",
|
||||
fill_blanks_mc: "Multiple Choice - Fill Blanks",
|
||||
};
|
||||
|
||||
type LevelSection = { type: string; quantity: number; topic?: string; part?: LevelPart };
|
||||
|
||||
const QuestionDisplay = ({ question, onUpdate }: { question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void }) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [options, setOptions] = useState(question.options);
|
||||
const [answer, setAnswer] = useState(question.solution);
|
||||
|
||||
const renderPrompt = (prompt: string) => {
|
||||
return reactStringReplace(prompt, /((<u>)[\w\s']+(<\/u>))/g, (match) => {
|
||||
const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
|
||||
return word.length > 0 ? <u>{word}</u> : null;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={question.id} className="flex flex-col gap-1">
|
||||
<span className="font-semibold">
|
||||
<>
|
||||
{question.id}. <span>{renderPrompt(question.prompt).filter((x) => x?.toString() !== "<u>")} </span>
|
||||
</>
|
||||
</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
{question.options.map((option, index) => (
|
||||
<span key={option.id} className={clsx(answer === option.id && "font-bold")}>
|
||||
<span
|
||||
className={clsx("font-semibold", answer === option.id ? "text-mti-green-light" : "text-ielts-level")}
|
||||
onClick={() => setAnswer(option.id)}>
|
||||
({option.id})
|
||||
</span>{" "}
|
||||
{isEditing ? (
|
||||
<input
|
||||
defaultValue={option.text}
|
||||
className="w-60"
|
||||
onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? { ...x, text: e.target.value } : x)))}
|
||||
/>
|
||||
) : (
|
||||
<span>{option.text}</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2 w-full">
|
||||
{!isEditing && (
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
|
||||
<BsPencilSquare />
|
||||
</button>
|
||||
)}
|
||||
{isEditing && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
onUpdate({ ...question, options, solution: answer });
|
||||
setIsEditing(false);
|
||||
}}
|
||||
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
|
||||
<BsCheck />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
|
||||
<BsX />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TaskTab = ({ section, label, index, setSection }: { section: LevelSection; label: string, index: number, setSection: (section: LevelSection) => void }) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [category, setCategory] = useState<string>("");
|
||||
const [description, setDescription] = useState<string>("");
|
||||
const [customDescription, setCustomDescription] = useState<string>("");
|
||||
const [previousOption, setPreviousOption] = useState<Option>({ value: "None", label: "None" });
|
||||
const [descriptionOption, setDescriptionOption] = useState<Option>({ value: "None", label: "None" });
|
||||
const [updateIntro, setUpdateIntro] = useState<boolean>(false);
|
||||
|
||||
const onUpdate = (question: MultipleChoiceQuestion) => {
|
||||
if (!section) return;
|
||||
|
||||
const updatedExam = {
|
||||
...section,
|
||||
exercises: section.part?.exercises.map((x) => ({
|
||||
...x,
|
||||
questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
|
||||
})),
|
||||
};
|
||||
setSection(updatedExam as any);
|
||||
};
|
||||
|
||||
const defaultPresets: any = {
|
||||
multiple_choice_4: "Welcome to {part} of the {label}. In this section, you'll be asked to select the correct word or group of words that best completes each sentence.\n\nFor each question, carefully read the sentence and click on the option (A, B, C, or D) that you believe is correct. After making your selection, you can proceed to the next question by clicking \"Next\". If you need to review or change your previous answers, you can go back at any time by clicking \"Back\".",
|
||||
multiple_choice_blank_space: undefined,
|
||||
multiple_choice_underlined: "Welcome to {part} of the {label}. In this section, you'll be asked to identify the underlined word or group of words that is not correct in each sentence.\n\nFor each question, carefully review the sentence and click on the option (A, B, C, or D) that you believe contains the incorrect word or group of words. After making your selection, you can proceed to the next question by clicking \"Next\". If needed, you can go back to previous questions by clicking \"Back\".",
|
||||
blank_space_text: undefined,
|
||||
reading_passage_utas: "Welcome to {part} of the {label}. In this section, you will read a text and answer the questions that follow.\n\nCarefully read the provided text, then select the correct answer (A, B, C, or D) for each question. After making your selection, you can proceed to the next question by clicking \"Next\". If you need to review or change your answers, you can go back at any time by clicking \"Back\".",
|
||||
fill_blanks_mc: "Welcome to {part} of the {label}. In this section, you will read a text and choose the correct word to fill in each blank space.\n\nFor each question, carefully read the text and click on the option that you believe best fits the context."
|
||||
};
|
||||
|
||||
const getDefaultPreset = () => {
|
||||
return defaultPresets[section.type] ? defaultPresets[section.type].replace('{part}', `Part ${index + 1}`).replace('{label}', label) :
|
||||
"No default preset is yet available for this type of exercise."
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (descriptionOption.value === "Default" && section?.type) {
|
||||
setDescription(getDefaultPreset())
|
||||
}
|
||||
if (descriptionOption.value === "Custom" && customDescription !== "") {
|
||||
setDescription(customDescription);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [descriptionOption, section?.type, label])
|
||||
|
||||
useEffect(() => {
|
||||
if (section?.type) {
|
||||
const defaultPreset = getDefaultPreset();
|
||||
if (descriptionOption.value === "Default" && previousOption.value === "Default" && description !== defaultPreset) {
|
||||
setDescriptionOption({ value: "Custom", label: "Custom" });
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [descriptionOption, description, label])
|
||||
|
||||
useEffect(() => {
|
||||
setPreviousOption(descriptionOption);
|
||||
}, [descriptionOption])
|
||||
|
||||
useEffect(() => {
|
||||
if (section?.part && ((descriptionOption.value === "Custom" || descriptionOption.value === "Default") && !section.part.intro)) {
|
||||
setUpdateIntro(true);
|
||||
}
|
||||
}, [section?.part, descriptionOption, category])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (updateIntro && section.part) {
|
||||
setSection({
|
||||
...section,
|
||||
part: {
|
||||
...section.part!,
|
||||
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
||||
category: category === "" ? undefined : category
|
||||
}
|
||||
})
|
||||
setUpdateIntro(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [updateIntro, section?.part])
|
||||
|
||||
const renderExercise = (exercise: Exercise) => {
|
||||
if (exercise.type === "multipleChoice")
|
||||
return (
|
||||
<div key={exercise.id} className="w-full h-full flex flex-col gap-2">
|
||||
<div className="flex gap-2">
|
||||
<span className="text-xl font-semibold">Multiple Choice</span>
|
||||
<span className="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">{exercise.questions.length} questions</span>
|
||||
</div>
|
||||
<MultipleChoiceEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) =>
|
||||
setSection({
|
||||
...section,
|
||||
part: {
|
||||
...section.part!,
|
||||
exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? { ...x, ...data } : x)),
|
||||
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
||||
category: category === "" ? undefined : category
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (exercise.type === "fillBlanks")
|
||||
return (
|
||||
<div key={exercise.id} className="w-full h-full flex flex-col gap-2">
|
||||
<div className="flex gap-2">
|
||||
<span className="text-xl font-semibold">Fill Blanks</span>
|
||||
</div>
|
||||
<span>{exercise.prompt}</span>
|
||||
<FillBlanksEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) =>
|
||||
setSection({
|
||||
...section,
|
||||
part: {
|
||||
...section.part!,
|
||||
exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? { ...x, ...data } : x)),
|
||||
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
||||
category: category === "" ? undefined : category
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (exercise.type === "writeBlanks")
|
||||
return (
|
||||
<div key={exercise.id} className="w-full h-full flex flex-col gap-2">
|
||||
<div className="flex gap-2">
|
||||
<span className="text-xl font-semibold">Write Blanks</span>
|
||||
</div>
|
||||
<span>{exercise.prompt}</span>
|
||||
<WriteBlankEdits
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) =>
|
||||
setSection({
|
||||
...section,
|
||||
part: {
|
||||
...section.part!,
|
||||
exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? { ...x, ...data } : x)),
|
||||
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
||||
category: category === "" ? undefined : category
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="flex flex-row w-full gap-4">
|
||||
<div className="flex flex-col gap-3 w-1/2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Description</label>
|
||||
<Select
|
||||
options={["None", "Default", "Custom"].map((descriptionOption) => ({ value: descriptionOption, label: descriptionOption }))}
|
||||
onChange={(o) => setDescriptionOption({ value: o!.value, label: o!.label })}
|
||||
value={descriptionOption}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-1/2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Category</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Category"
|
||||
name="category"
|
||||
onChange={(e) => setCategory(e)}
|
||||
roundness="full"
|
||||
defaultValue={category}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{descriptionOption.value !== "None" && (
|
||||
<Input
|
||||
type="textarea"
|
||||
placeholder="Part Description"
|
||||
name="category"
|
||||
onChange={(e) => { setDescription(e); setCustomDescription(e); }}
|
||||
roundness="full"
|
||||
value={descriptionOption.value === "Default" ? description : customDescription}
|
||||
/>
|
||||
)}
|
||||
<div className="flex gap-4 w-full">
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Exercise Type</label>
|
||||
<Select
|
||||
options={Object.keys(TYPES).map((key) => ({ value: key, label: TYPES[key] }))}
|
||||
onChange={(e) => setSection({ ...section, type: e!.value! })}
|
||||
value={{ value: section?.type || "multiple_choice_4", label: TYPES[section?.type || "multiple_choice_4"] }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">{section?.type && section.type === "fill_blanks_mc" ? "Number of Words" : "Number of Questions"}</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="Number of Questions"
|
||||
onChange={(v) => setSection({ ...section, quantity: parseInt(v) })}
|
||||
value={section?.quantity || 10}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{section?.type === "reading_passage_utas" || section?.type === "fill_blanks_mc" && (
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Topic</label>
|
||||
<Input type="text" name="Topic" onChange={(v) => setSection({ ...section, topic: v })} value={section?.topic} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
|
||||
<span className={clsx("loading loading-infinity w-32 text-ielts-level")} />
|
||||
<span className={clsx("font-bold text-2xl text-ielts-level")}>Generating...</span>
|
||||
</div>
|
||||
)}
|
||||
{section?.part && (
|
||||
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
|
||||
{section.part.context && <div>{section.part.context}</div>}
|
||||
{section.part.exercises.map(renderExercise)}
|
||||
</div>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const LevelGeneration = ({ id }: Props) => {
|
||||
const [generatedExam, setGeneratedExam] = useState<LevelExam>();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [resultingExam, setResultingExam] = useState<LevelExam>();
|
||||
const [timer, setTimer] = useState(10);
|
||||
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
|
||||
const [numberOfParts, setNumberOfParts] = useState(1);
|
||||
const [parts, setParts] = useState<LevelSection[]>([{ quantity: 10, type: "multiple_choice_4" }]);
|
||||
const [isPrivate, setPrivate] = useState<boolean>(false);
|
||||
const [label, setLabel] = useState<string>("Placement Test");
|
||||
|
||||
useEffect(() => {
|
||||
setParts((prev) => Array.from(Array(numberOfParts)).map((_, i) => (!!prev.at(i) ? prev.at(i)! : { quantity: 10, type: "multiple_choice_4" })));
|
||||
}, [numberOfParts]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const setExams = useExamStore((state) => state.setExams);
|
||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||
|
||||
const loadExam = async (examId: string) => {
|
||||
const exam = await getExamById("level", examId.trim());
|
||||
if (!exam) {
|
||||
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
||||
toastId: "invalid-exam-id",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setExams([exam]);
|
||||
setSelectedModules(["level"]);
|
||||
|
||||
router.push("/exercises");
|
||||
};
|
||||
|
||||
const generateExam = () => {
|
||||
if (parts.length === 0) return;
|
||||
setIsLoading(true);
|
||||
|
||||
let body: any = {};
|
||||
parts.forEach((part, index) => {
|
||||
body[`exercise_${index + 1}_type`] = part.type;
|
||||
body[`exercise_${index + 1}_qty`] = part.quantity;
|
||||
|
||||
if (part.topic) body[`exercise_${index + 1}_topic`] = part.topic;
|
||||
if (part.type === "reading_passage_utas") {
|
||||
body[`exercise_${index + 1}_sa_qty`] = Math.floor(part.quantity / 2);
|
||||
body[`exercise_${index + 1}_mc_qty`] = Math.ceil(part.quantity / 2);
|
||||
}
|
||||
});
|
||||
|
||||
let newParts = [...parts];
|
||||
|
||||
axios
|
||||
.post<{ exercises: { [key: string]: any } }>("/api/exam/level/generate/level", { nr_exercises: numberOfParts, ...body })
|
||||
.then((result) => {
|
||||
console.log(result.data);
|
||||
|
||||
playSound(typeof result.data === "string" ? "error" : "check");
|
||||
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
|
||||
|
||||
const exam: LevelExam = {
|
||||
id: v4(),
|
||||
minTimer: timer,
|
||||
module: "level",
|
||||
difficulty,
|
||||
variant: "full",
|
||||
isDiagnostic: false,
|
||||
private: isPrivate,
|
||||
label: label,
|
||||
parts: parts
|
||||
.map((part, index) => {
|
||||
const currentExercise = result.data.exercises[`exercise_${index + 1}`] as any;
|
||||
|
||||
if (
|
||||
part.type === "multiple_choice_4" ||
|
||||
part.type === "multiple_choice_blank_space" ||
|
||||
part.type === "multiple_choice_underlined"
|
||||
) {
|
||||
const exercise: MultipleChoiceExercise = {
|
||||
id: v4(),
|
||||
prompt:
|
||||
part.type === "multiple_choice_underlined"
|
||||
? "Choose the underlined word or group of words that is not correct.\nFor each question, select your choice (A, B, C or D)."
|
||||
: "Choose the correct word or group of words that completes the sentences below.\nFor each question, select the correct letter (A, B, C or D).",
|
||||
questions: currentExercise.questions.map((x: any) => ({ ...x, variant: "text" })),
|
||||
type: "multipleChoice",
|
||||
userSolutions: [],
|
||||
};
|
||||
|
||||
const item = {
|
||||
exercises: [exercise],
|
||||
intro: parts[index].part?.intro,
|
||||
category: parts[index].part?.category
|
||||
};
|
||||
|
||||
newParts = newParts.map((p, i) =>
|
||||
i === index
|
||||
? {
|
||||
...p,
|
||||
part: item,
|
||||
}
|
||||
: p,
|
||||
);
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
if (part.type === "fill_blanks_mc") {
|
||||
const exercise: FillBlanksExercise = {
|
||||
id: v4(),
|
||||
prompt: "Read the text below and choose the correct word for each space.\nFor each question, select your choice (A, B, C or D). ",
|
||||
text: currentExercise.text,
|
||||
words: currentExercise.words,
|
||||
solutions: currentExercise.solutions,
|
||||
type: "fillBlanks",
|
||||
variant: "mc",
|
||||
userSolutions: [],
|
||||
};
|
||||
|
||||
const item = {
|
||||
exercises: [exercise],
|
||||
intro: parts[index].part?.intro,
|
||||
category: parts[index].part?.category
|
||||
};
|
||||
|
||||
newParts = newParts.map((p, i) =>
|
||||
i === index
|
||||
? {
|
||||
...p,
|
||||
part: item,
|
||||
}
|
||||
: p,
|
||||
);
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
if (part.type === "blank_space_text") {
|
||||
const exercise: WriteBlanksExercise = {
|
||||
id: v4(),
|
||||
prompt: "Complete the text below.",
|
||||
text: currentExercise.text,
|
||||
maxWords: 3,
|
||||
solutions: currentExercise.words.map((x: any) => ({ id: x.id, solution: [x.text] })),
|
||||
type: "writeBlanks",
|
||||
userSolutions: [],
|
||||
};
|
||||
|
||||
const item = {
|
||||
exercises: [exercise],
|
||||
intro: parts[index].part?.intro,
|
||||
category: parts[index].part?.category
|
||||
};
|
||||
|
||||
newParts = newParts.map((p, i) =>
|
||||
i === index
|
||||
? {
|
||||
...p,
|
||||
part: item,
|
||||
}
|
||||
: p,
|
||||
);
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
const mcExercise: MultipleChoiceExercise = {
|
||||
id: v4(),
|
||||
prompt: "Select the appropriate option.",
|
||||
questions: currentExercise.exercises.multipleChoice.questions.map((x: any) => ({ ...x, variant: "text" })),
|
||||
type: "multipleChoice",
|
||||
userSolutions: [],
|
||||
};
|
||||
|
||||
const wbExercise: WriteBlanksExercise = {
|
||||
id: v4(),
|
||||
prompt: "Complete the notes below.",
|
||||
maxWords: 3,
|
||||
text: currentExercise.exercises.shortAnswer.map((x: any) => `${x.question} {{${x.id}}}`).join("\n"),
|
||||
solutions: currentExercise.exercises.shortAnswer.map((x: any) => ({
|
||||
id: x.id,
|
||||
solution: x.possible_answers,
|
||||
})),
|
||||
type: "writeBlanks",
|
||||
userSolutions: [],
|
||||
};
|
||||
|
||||
const item = {
|
||||
context: currentExercise.text.content,
|
||||
exercises: [mcExercise, wbExercise],
|
||||
intro: parts[index].part?.intro,
|
||||
category: parts[index].part?.category
|
||||
};
|
||||
|
||||
newParts = newParts.map((p, i) =>
|
||||
i === index
|
||||
? {
|
||||
...p,
|
||||
part: item,
|
||||
}
|
||||
: p,
|
||||
);
|
||||
|
||||
return item;
|
||||
})
|
||||
.filter((x) => !!x) as LevelPart[],
|
||||
};
|
||||
|
||||
setParts(newParts);
|
||||
setGeneratedExam(exam);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
playSound("error");
|
||||
|
||||
toast.error("Something went wrong, please try again later!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const submitExam = () => {
|
||||
if (!generatedExam) {
|
||||
toast.error("Please generate all tasks before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!id) {
|
||||
toast.error("Please insert a title before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
parts.forEach((part) => {
|
||||
part.part!.exercises.forEach((exercise, i) => {
|
||||
switch(exercise.type) {
|
||||
case 'fillBlanks':
|
||||
exercise.prompt.replaceAll('\n', '\\n')
|
||||
break;
|
||||
case 'multipleChoice':
|
||||
exercise.prompt.replaceAll('\n', '\\n')
|
||||
break;
|
||||
case 'writeBlanks':
|
||||
exercise.prompt.replaceAll('\n', '\\n')
|
||||
break;
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const exam = {
|
||||
...generatedExam,
|
||||
id,
|
||||
label: label,
|
||||
parts: generatedExam.parts.map((p, i) => ({ ...p, exercises: parts[i].part!.exercises, category: parts[i].part?.category, intro: parts[i].part?.intro?.replaceAll('\n', '\\n') })),
|
||||
};
|
||||
|
||||
axios
|
||||
.post(`/api/exam/level`, exam)
|
||||
.then((result) => {
|
||||
playSound("sent");
|
||||
console.log(`Generated Exam ID: ${result.data.id}`);
|
||||
toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
|
||||
setResultingExam(result.data);
|
||||
|
||||
setGeneratedExam(undefined);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong while generating, please try again later.");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-4 w-full items-center">
|
||||
<div className="flex flex-col gap-3 w-1/2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
|
||||
<Select
|
||||
options={DIFFICULTIES.map((x) => ({
|
||||
value: x,
|
||||
label: capitalize(x),
|
||||
}))}
|
||||
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
|
||||
value={{ value: difficulty, label: capitalize(difficulty) }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-1/3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Number of Parts</label>
|
||||
<Input type="number" name="Number of Parts" onChange={(v) => setNumberOfParts(parseInt(v))} value={numberOfParts} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-1/3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Timer (in minutes)</label>
|
||||
<Input type="number" name="Timer (in minutes)" onChange={(v) => setTimer(parseInt(v))} value={timer} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-fit h-fit">
|
||||
<div className="h-6" />
|
||||
<Checkbox isChecked={isPrivate} onChange={setPrivate}>
|
||||
Privacy (Only available for Assignments)
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Exam Label *</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Label"
|
||||
name="label"
|
||||
onChange={(e) => setLabel(e)}
|
||||
roundness="xl"
|
||||
defaultValue={label}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1">
|
||||
{Array.from(Array(numberOfParts), (_, index) => index).map((index) => (
|
||||
<Tab
|
||||
key={index}
|
||||
className={({ selected }) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-level/70",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-level focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level",
|
||||
)
|
||||
}>
|
||||
Part {index + 1}
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
{Array.from(Array(numberOfParts), (_, index) => index).map((index) => (
|
||||
<TaskTab
|
||||
key={index}
|
||||
label={label}
|
||||
index={index}
|
||||
section={parts[index]}
|
||||
setSection={(part) => {
|
||||
console.log(part);
|
||||
setParts((prev) => prev.map((x, i) => (i === index ? part : x)));
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
<div className="w-full flex justify-end gap-4">
|
||||
{resultingExam && (
|
||||
<button
|
||||
disabled={isLoading}
|
||||
onClick={() => loadExam(resultingExam.id)}
|
||||
className={clsx(
|
||||
"bg-white border border-ielts-level text-ielts-level w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-level hover:text-white disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
)}>
|
||||
Perform Exam
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
disabled={parts.length === 0 || isLoading}
|
||||
data-tip="Please generate all three passages"
|
||||
onClick={generateExam}
|
||||
className={clsx(
|
||||
"bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
parts.length === 0 && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Generate"
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
disabled={!generatedExam || isLoading}
|
||||
data-tip="Please generate all three passages"
|
||||
onClick={submitExam}
|
||||
className={clsx(
|
||||
"bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
!generatedExam && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LevelGeneration;
|
||||
@@ -1,467 +0,0 @@
|
||||
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
|
||||
import Input from "@/components/Low/Input";
|
||||
import Select from "@/components/Low/Select";
|
||||
import {Difficulty, Exercise, ListeningExam} from "@/interfaces/exam";
|
||||
import useExamStore from "@/stores/examStore";
|
||||
import {getExamById} from "@/utils/exams";
|
||||
import {playSound} from "@/utils/sound";
|
||||
import {convertCamelCaseToReadable} from "@/utils/string";
|
||||
import {Tab} from "@headlessui/react";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import {capitalize, sample} from "lodash";
|
||||
import {useRouter} from "next/router";
|
||||
import {useEffect, useState, Dispatch, SetStateAction} from "react";
|
||||
import {BsArrowRepeat, BsCheck} from "react-icons/bs";
|
||||
import {toast} from "react-toastify";
|
||||
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
|
||||
import {generate} from "random-words";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
|
||||
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
|
||||
|
||||
const MULTIPLE_CHOICE = {type: "multipleChoice", label: "Multiple Choice"};
|
||||
const WRITE_BLANKS_QUESTIONS = {
|
||||
type: "writeBlanksQuestions",
|
||||
label: "Write the Blanks: Questions",
|
||||
};
|
||||
const WRITE_BLANKS_FILL = {
|
||||
type: "writeBlanksFill",
|
||||
label: "Write the Blanks: Fill",
|
||||
};
|
||||
const WRITE_BLANKS_FORM = {
|
||||
type: "writeBlanksForm",
|
||||
label: "Write the Blanks: Form",
|
||||
};
|
||||
const MULTIPLE_CHOICE_3 = {
|
||||
type: "multipleChoice3Options",
|
||||
label: "Multiple Choice",
|
||||
};
|
||||
|
||||
const PartTab = ({
|
||||
part,
|
||||
difficulty,
|
||||
availableTypes,
|
||||
index,
|
||||
setPart,
|
||||
updatePart,
|
||||
}: {
|
||||
part?: ListeningPart;
|
||||
difficulty: Difficulty;
|
||||
availableTypes: {type: string; label: string}[];
|
||||
index: number;
|
||||
setPart: (part?: ListeningPart) => void;
|
||||
updatePart: Dispatch<SetStateAction<ListeningPart | undefined>>;
|
||||
}) => {
|
||||
const [topic, setTopic] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [types, setTypes] = useState<string[]>([]);
|
||||
|
||||
const generate = () => {
|
||||
const url = new URLSearchParams();
|
||||
url.append("difficulty", difficulty);
|
||||
|
||||
if (topic) url.append("topic", topic);
|
||||
if (types) types.forEach((t) => url.append("exercises", t));
|
||||
|
||||
setPart(undefined);
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.get(`/api/exam/listening/generate/listening_section_${index}${topic || types ? `?${url.toString()}` : ""}`)
|
||||
.then((result) => {
|
||||
playSound(typeof result.data === "string" ? "error" : "check");
|
||||
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
|
||||
setPart(result.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const renderExercises = () => {
|
||||
return part?.exercises.map((exercise) => {
|
||||
switch (exercise.type) {
|
||||
case "multipleChoice":
|
||||
return (
|
||||
<>
|
||||
<h1>Exercise: Multiple Choice</h1>
|
||||
<MultipleChoiceEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) =>
|
||||
updatePart((part?: ListeningPart) => {
|
||||
if (part) {
|
||||
const exercises = part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)) as Exercise[];
|
||||
const updatedPart = {
|
||||
...part,
|
||||
exercises,
|
||||
} as ListeningPart;
|
||||
return updatedPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
// TODO: This might be broken as they all returns the same
|
||||
case "writeBlanks":
|
||||
return (
|
||||
<>
|
||||
<h1>Exercise: Write Blanks</h1>
|
||||
<WriteBlanksEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) => {
|
||||
updatePart((part?: ListeningPart) => {
|
||||
if (part) {
|
||||
return {
|
||||
...part,
|
||||
exercises: part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)),
|
||||
} as ListeningPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
|
||||
|
||||
return (
|
||||
<Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Exercises</label>
|
||||
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
|
||||
{availableTypes.map((x) => (
|
||||
<span
|
||||
onClick={() => toggleType(x.type)}
|
||||
key={x.type}
|
||||
className={clsx(
|
||||
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"transition duration-300 ease-in-out",
|
||||
!types.includes(x.type)
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-listening/70 border-ielts-listening text-white",
|
||||
)}>
|
||||
{x.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-end">
|
||||
<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
|
||||
<button
|
||||
onClick={generate}
|
||||
disabled={isLoading || types.length === 0}
|
||||
data-tip="The passage is currently being generated"
|
||||
className={clsx(
|
||||
"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px]",
|
||||
"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
isLoading && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Generate"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
|
||||
<span className={clsx("loading loading-infinity w-32 text-ielts-listening")} />
|
||||
<span className={clsx("font-bold text-2xl text-ielts-listening")}>Generating...</span>
|
||||
</div>
|
||||
)}
|
||||
{part && (
|
||||
<>
|
||||
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
|
||||
<div className="flex gap-4">
|
||||
{part.exercises.map((x) => (
|
||||
<span className="rounded-xl bg-white border border-ielts-listening p-1 px-4" key={x.id}>
|
||||
{x.type && convertCamelCaseToReadable(x.type)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{typeof part.text === "string" && <span className="w-full h-96">{part.text.replaceAll("\n\n", " ")}</span>}
|
||||
{typeof part.text !== "string" && (
|
||||
<div className="w-full h-96 flex flex-col gap-2">
|
||||
{part.text.conversation.map((x, index) => (
|
||||
<span key={index} className="flex gap-1">
|
||||
<span className="font-semibold">{x.name}:</span>
|
||||
{x.text.replaceAll("\n\n", " ")}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{renderExercises()}
|
||||
</>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
interface ListeningPart {
|
||||
exercises: Exercise[];
|
||||
text:
|
||||
| {
|
||||
conversation: {
|
||||
gender: string;
|
||||
name: string;
|
||||
text: string;
|
||||
voice: string;
|
||||
}[];
|
||||
}
|
||||
| string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const ListeningGeneration = ({id}: Props) => {
|
||||
const [part1, setPart1] = useState<ListeningPart>();
|
||||
const [part2, setPart2] = useState<ListeningPart>();
|
||||
const [part3, setPart3] = useState<ListeningPart>();
|
||||
const [part4, setPart4] = useState<ListeningPart>();
|
||||
const [minTimer, setMinTimer] = useState(30);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [resultingExam, setResultingExam] = useState<ListeningExam>();
|
||||
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
|
||||
const [isPrivate, setPrivate] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const part1Timer = part1 ? 5 : 0;
|
||||
const part2Timer = part2 ? 8 : 0;
|
||||
const part3Timer = part3 ? 8 : 0;
|
||||
const part4Timer = part4 ? 9 : 0;
|
||||
|
||||
const sum = part1Timer + part2Timer + part3Timer + part4Timer;
|
||||
setMinTimer(sum > 0 ? sum : 5);
|
||||
}, [part1, part2, part3, part4]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const setExams = useExamStore((state) => state.setExams);
|
||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||
|
||||
const submitExam = () => {
|
||||
const parts = [part1, part2, part3, part4].filter((x) => !!x);
|
||||
console.log({parts});
|
||||
if (parts.length === 0) return toast.error("Please generate at least one section!");
|
||||
|
||||
if (!id) {
|
||||
toast.error("Please insert a title before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.post(`/api/exam/listening/generate/listening`, {
|
||||
id,
|
||||
parts,
|
||||
minTimer,
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
})
|
||||
.then((result) => {
|
||||
playSound("sent");
|
||||
console.log(`Generated Exam ID: ${result.data.id}`);
|
||||
toast.success(`Generated Exam ID: ${result.data.id}`);
|
||||
setResultingExam(result.data);
|
||||
|
||||
setPart1(undefined);
|
||||
setPart2(undefined);
|
||||
setPart3(undefined);
|
||||
setPart4(undefined);
|
||||
setDifficulty(sample(DIFFICULTIES)!);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const loadExam = async (examId: string) => {
|
||||
const exam = await getExamById("listening", examId.trim());
|
||||
if (!exam) {
|
||||
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
||||
toastId: "invalid-exam-id",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setExams([exam]);
|
||||
setSelectedModules(["listening"]);
|
||||
|
||||
router.push("/exercises");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-4 w-full items-center">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="minTimer"
|
||||
onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
|
||||
value={minTimer}
|
||||
className="max-w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-1/2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
|
||||
<Select
|
||||
options={DIFFICULTIES.map((x) => ({
|
||||
value: x,
|
||||
label: capitalize(x),
|
||||
}))}
|
||||
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
|
||||
value={{value: difficulty, label: capitalize(difficulty)}}
|
||||
disabled={!!part1 || !!part2 || !!part3 || !!part4}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-fit h-fit">
|
||||
<div className="h-6" />
|
||||
<Checkbox isChecked={isPrivate} onChange={setPrivate}>
|
||||
Privacy (Only available for Assignments)
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1">
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
|
||||
)
|
||||
}>
|
||||
Section 1 {part1 && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
|
||||
)
|
||||
}>
|
||||
Section 2 {part2 && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
|
||||
)
|
||||
}>
|
||||
Section 3 {part3 && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
|
||||
)
|
||||
}>
|
||||
Section 4 {part4 && <BsCheck />}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
{[
|
||||
{
|
||||
part: part1,
|
||||
setPart: setPart1,
|
||||
types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS, WRITE_BLANKS_FILL, WRITE_BLANKS_FORM],
|
||||
},
|
||||
{
|
||||
part: part2,
|
||||
setPart: setPart2,
|
||||
types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS],
|
||||
},
|
||||
{
|
||||
part: part3,
|
||||
setPart: setPart3,
|
||||
types: [MULTIPLE_CHOICE_3, WRITE_BLANKS_QUESTIONS],
|
||||
},
|
||||
{
|
||||
part: part4,
|
||||
setPart: setPart4,
|
||||
types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS, WRITE_BLANKS_FILL, WRITE_BLANKS_FORM],
|
||||
},
|
||||
].map(({part, setPart, types}, index) => (
|
||||
<PartTab
|
||||
part={part}
|
||||
difficulty={difficulty}
|
||||
availableTypes={types}
|
||||
index={index + 1}
|
||||
key={index}
|
||||
setPart={setPart}
|
||||
updatePart={setPart}
|
||||
/>
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
<div className="w-full flex justify-end gap-4">
|
||||
{resultingExam && (
|
||||
<button
|
||||
disabled={isLoading}
|
||||
onClick={() => loadExam(resultingExam.id)}
|
||||
className={clsx(
|
||||
"bg-white border border-ielts-listening text-ielts-listening w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-listening hover:text-white disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
)}>
|
||||
Perform Exam
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
disabled={(!part1 && !part2 && !part3 && !part4) || isLoading}
|
||||
data-tip="Please generate all three passages"
|
||||
onClick={submitExam}
|
||||
className={clsx(
|
||||
"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
!part1 && !part2 && !part3 && !part4 && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListeningGeneration;
|
||||
@@ -1,462 +0,0 @@
|
||||
import Input from "@/components/Low/Input";
|
||||
import Select from "@/components/Low/Select";
|
||||
import {Difficulty, Exercise, ReadingExam, ReadingPart} from "@/interfaces/exam";
|
||||
import useExamStore from "@/stores/examStore";
|
||||
import {getExamById} from "@/utils/exams";
|
||||
import {playSound} from "@/utils/sound";
|
||||
import {convertCamelCaseToReadable} from "@/utils/string";
|
||||
import {generate} from "random-words";
|
||||
import {Tab} from "@headlessui/react";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import {capitalize, sample} from "lodash";
|
||||
import {useRouter} from "next/router";
|
||||
import {useEffect, useState, Dispatch, SetStateAction} from "react";
|
||||
import {BsArrowRepeat, BsCheck} from "react-icons/bs";
|
||||
import {toast} from "react-toastify";
|
||||
import {v4} from "uuid";
|
||||
import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
|
||||
import TrueFalseEdit from "@/components/Generation/true.false.edit";
|
||||
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
|
||||
import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
|
||||
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
|
||||
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
|
||||
|
||||
const availableTypes = [
|
||||
{type: "fillBlanks", label: "Fill the Blanks"},
|
||||
{type: "trueFalse", label: "True or False"},
|
||||
{type: "writeBlanks", label: "Write the Blanks"},
|
||||
{type: "paragraphMatch", label: "Match Sentences"},
|
||||
];
|
||||
|
||||
const PartTab = ({
|
||||
part,
|
||||
difficulty,
|
||||
index,
|
||||
setPart,
|
||||
updatePart,
|
||||
}: {
|
||||
part?: ReadingPart;
|
||||
index: number;
|
||||
difficulty: Difficulty;
|
||||
setPart: (part?: ReadingPart) => void;
|
||||
updatePart: Dispatch<SetStateAction<ReadingPart | undefined>>;
|
||||
}) => {
|
||||
const [topic, setTopic] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [types, setTypes] = useState<string[]>([]);
|
||||
|
||||
const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
|
||||
|
||||
const generate = () => {
|
||||
const url = new URLSearchParams();
|
||||
url.append("difficulty", difficulty);
|
||||
|
||||
if (topic) url.append("topic", topic);
|
||||
if (types) types.forEach((t) => url.append("exercises", t));
|
||||
|
||||
setPart(undefined);
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.get(`/api/exam/reading/generate/reading_passage_${index}${topic || types ? `?${url.toString()}` : ""}`)
|
||||
.then((result) => {
|
||||
console.log(result.data);
|
||||
|
||||
playSound(typeof result.data === "string" ? "error" : "check");
|
||||
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
|
||||
setPart(result.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const renderExercises = () => {
|
||||
return part?.exercises.map((exercise) => {
|
||||
switch (exercise.type) {
|
||||
case "fillBlanks":
|
||||
return (
|
||||
<>
|
||||
<h1>Exercise: Fill Blanks</h1>
|
||||
<FillBlanksEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) =>
|
||||
updatePart((part?: ReadingPart) => {
|
||||
if (part) {
|
||||
const exercises = part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)) as Exercise[];
|
||||
const updatedPart = {...part, exercises} as ReadingPart;
|
||||
return updatedPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case "trueFalse":
|
||||
return (
|
||||
<>
|
||||
<h1>Exercise: True or False</h1>
|
||||
<TrueFalseEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) => {
|
||||
updatePart((part?: ReadingPart) => {
|
||||
if (part) {
|
||||
return {
|
||||
...part,
|
||||
exercises: part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)),
|
||||
} as ReadingPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case "multipleChoice":
|
||||
return (
|
||||
<>
|
||||
<h1>Exercise: True or False</h1>
|
||||
<MultipleChoiceEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) => {
|
||||
updatePart((part?: ReadingPart) => {
|
||||
if (part) {
|
||||
return {
|
||||
...part,
|
||||
exercises: part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)),
|
||||
} as ReadingPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case "writeBlanks":
|
||||
return (
|
||||
<>
|
||||
<h1>Exercise: Write Blanks</h1>
|
||||
<WriteBlanksEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) => {
|
||||
updatePart((part?: ReadingPart) => {
|
||||
if (part) {
|
||||
return {
|
||||
...part,
|
||||
exercises: part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)),
|
||||
} as ReadingPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case "matchSentences":
|
||||
return (
|
||||
<>
|
||||
<h1>Exercise: Match Sentences</h1>
|
||||
<MatchSentencesEdit
|
||||
exercise={exercise}
|
||||
key={exercise.id}
|
||||
updateExercise={(data: any) => {
|
||||
updatePart((part?: ReadingPart) => {
|
||||
if (part) {
|
||||
return {
|
||||
...part,
|
||||
exercises: part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)),
|
||||
} as ReadingPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Tab.Panel className="w-full bg-ielts-reading/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Exercises</label>
|
||||
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
|
||||
{[...availableTypes, ...(index === 3 ? [{type: "ideaMatch", label: "Idea Match"}] : [])].map((x) => (
|
||||
<span
|
||||
onClick={() => toggleType(x.type)}
|
||||
key={x.type}
|
||||
className={clsx(
|
||||
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"transition duration-300 ease-in-out",
|
||||
!types.includes(x.type) ? "bg-white border-mti-gray-platinum" : "bg-ielts-reading/70 border-ielts-reading text-white",
|
||||
)}>
|
||||
{x.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-end">
|
||||
<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
|
||||
<button
|
||||
onClick={generate}
|
||||
disabled={isLoading || types.length === 0}
|
||||
data-tip="The passage is currently being generated"
|
||||
className={clsx(
|
||||
"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px]",
|
||||
"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
isLoading && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Generate"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
|
||||
<span className={clsx("loading loading-infinity w-32 text-ielts-reading")} />
|
||||
<span className={clsx("font-bold text-2xl text-ielts-reading")}>Generating...</span>
|
||||
</div>
|
||||
)}
|
||||
{part && (
|
||||
<>
|
||||
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
|
||||
<div className="flex gap-4">
|
||||
{part.exercises.map((x) => (
|
||||
<span className="rounded-xl bg-white border border-ielts-reading p-1 px-4" key={x.id}>
|
||||
{x.type && convertCamelCaseToReadable(x.type)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">{part.text.title}</h3>
|
||||
<span className="w-full h-96">{part.text.content}</span>
|
||||
</div>
|
||||
{renderExercises()}
|
||||
</>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const ReadingGeneration = ({id}: Props) => {
|
||||
const [part1, setPart1] = useState<ReadingPart>();
|
||||
const [part2, setPart2] = useState<ReadingPart>();
|
||||
const [part3, setPart3] = useState<ReadingPart>();
|
||||
const [minTimer, setMinTimer] = useState(60);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [resultingExam, setResultingExam] = useState<ReadingExam>();
|
||||
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
|
||||
const [isPrivate, setPrivate] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const parts = [part1, part2, part3].filter((x) => !!x);
|
||||
setMinTimer(parts.length === 0 ? 60 : parts.length * 20);
|
||||
}, [part1, part2, part3]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const setExams = useExamStore((state) => state.setExams);
|
||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||
|
||||
const loadExam = async (examId: string) => {
|
||||
const exam = await getExamById("reading", examId.trim());
|
||||
if (!exam) {
|
||||
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
||||
toastId: "invalid-exam-id",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setExams([exam]);
|
||||
setSelectedModules(["reading"]);
|
||||
|
||||
router.push("/exercises");
|
||||
};
|
||||
|
||||
const submitExam = () => {
|
||||
const parts = [part1, part2, part3].filter((x) => !!x) as ReadingPart[];
|
||||
if (parts.length === 0) {
|
||||
toast.error("Please generate at least one passage before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!id) {
|
||||
toast.error("Please insert a title before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
const exam: ReadingExam = {
|
||||
parts,
|
||||
isDiagnostic: false,
|
||||
minTimer,
|
||||
module: "reading",
|
||||
id,
|
||||
type: "academic",
|
||||
variant: parts.length === 3 ? "full" : "partial",
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
};
|
||||
|
||||
axios
|
||||
.post(`/api/exam/reading`, exam)
|
||||
.then((result) => {
|
||||
playSound("sent");
|
||||
console.log(`Generated Exam ID: ${result.data.id}`);
|
||||
toast.success(`Generated Exam ID: ${result.data.id}`);
|
||||
setResultingExam(result.data);
|
||||
|
||||
setPart1(undefined);
|
||||
setPart2(undefined);
|
||||
setPart3(undefined);
|
||||
setDifficulty(sample(DIFFICULTIES)!);
|
||||
setMinTimer(60);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error(error.response.data.error || "Something went wrong while generating, please try again later.");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-4 w-full items-center">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="minTimer"
|
||||
onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
|
||||
value={minTimer}
|
||||
className="max-w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-1/2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
|
||||
<Select
|
||||
options={DIFFICULTIES.map((x) => ({
|
||||
value: x,
|
||||
label: capitalize(x),
|
||||
}))}
|
||||
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
|
||||
value={{value: difficulty, label: capitalize(difficulty)}}
|
||||
disabled={!!part1 || !!part2 || !!part3}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-fit h-fit">
|
||||
<div className="h-6" />
|
||||
<Checkbox isChecked={isPrivate} onChange={setPrivate}>
|
||||
Privacy (Only available for Assignments)
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
|
||||
)
|
||||
}>
|
||||
Passage 1 {part1 && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
|
||||
)
|
||||
}>
|
||||
Passage 2 {part2 && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
|
||||
)
|
||||
}>
|
||||
Passage 3 {part3 && <BsCheck />}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
{[
|
||||
{part: part1, setPart: setPart1},
|
||||
{part: part2, setPart: setPart2},
|
||||
{part: part3, setPart: setPart3},
|
||||
].map(({part, setPart}, index) => (
|
||||
<PartTab part={part} difficulty={difficulty} index={index + 1} key={index} setPart={setPart} updatePart={setPart} />
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
<div className="w-full flex justify-end gap-4">
|
||||
{resultingExam && (
|
||||
<button
|
||||
disabled={isLoading}
|
||||
onClick={() => loadExam(resultingExam.id)}
|
||||
className={clsx(
|
||||
"bg-white border border-ielts-reading text-ielts-reading w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-reading hover:text-white disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
)}>
|
||||
Perform Exam
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
disabled={(!part1 && !part2 && !part3) || isLoading}
|
||||
data-tip="Please generate all three passages"
|
||||
onClick={submitExam}
|
||||
className={clsx(
|
||||
"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
!part1 && !part2 && !part3 && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReadingGeneration;
|
||||
@@ -1,433 +0,0 @@
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
import Input from "@/components/Low/Input";
|
||||
import Select from "@/components/Low/Select";
|
||||
import {Difficulty, Exercise, InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise} from "@/interfaces/exam";
|
||||
import {AVATARS} from "@/resources/speakingAvatars";
|
||||
import useExamStore from "@/stores/examStore";
|
||||
import {getExamById} from "@/utils/exams";
|
||||
import {playSound} from "@/utils/sound";
|
||||
import {convertCamelCaseToReadable} from "@/utils/string";
|
||||
import {Tab} from "@headlessui/react";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import {capitalize, sample, uniq} from "lodash";
|
||||
import moment from "moment";
|
||||
import {useRouter} from "next/router";
|
||||
import {generate} from "random-words";
|
||||
import {useEffect, useState, Dispatch, SetStateAction} from "react";
|
||||
import {BsArrowRepeat, BsCheck} from "react-icons/bs";
|
||||
import {toast} from "react-toastify";
|
||||
import {v4} from "uuid";
|
||||
|
||||
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
|
||||
|
||||
const PartTab = ({
|
||||
part,
|
||||
index,
|
||||
difficulty,
|
||||
setPart,
|
||||
updatePart,
|
||||
}: {
|
||||
part?: SpeakingPart;
|
||||
difficulty: Difficulty;
|
||||
index: number;
|
||||
setPart: (part?: SpeakingPart) => void;
|
||||
updatePart: Dispatch<SetStateAction<SpeakingPart | undefined>>;
|
||||
}) => {
|
||||
const [gender, setGender] = useState<"male" | "female">("male");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const generate = () => {
|
||||
setPart(undefined);
|
||||
setIsLoading(true);
|
||||
|
||||
const url = new URLSearchParams();
|
||||
url.append("difficulty", difficulty);
|
||||
|
||||
axios
|
||||
.get(`/api/exam/speaking/generate/speaking_task_${index}?${url.toString()}`)
|
||||
.then((result) => {
|
||||
playSound(typeof result.data === "string" ? "error" : "check");
|
||||
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
|
||||
console.log(result.data);
|
||||
setPart(result.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const generateVideo = async () => {
|
||||
if (!part) return toast.error("Please generate the first part before generating the video!");
|
||||
toast.info("This will take quite a while, please do not leave this page or close the tab/window.");
|
||||
|
||||
const avatar = sample(AVATARS.filter((x) => x.gender === gender));
|
||||
|
||||
setIsLoading(true);
|
||||
const initialTime = moment();
|
||||
|
||||
axios
|
||||
.post(`/api/exam/speaking/generate/speaking/generate_video_${index}`, {
|
||||
...part,
|
||||
avatar: avatar?.id,
|
||||
})
|
||||
.then((result) => {
|
||||
const isError = typeof result.data === "string" || moment().diff(initialTime, "seconds") < 60;
|
||||
|
||||
playSound(isError ? "error" : "check");
|
||||
console.log(result.data);
|
||||
if (isError) return toast.error("Something went wrong, please try to generate the video again.");
|
||||
setPart({
|
||||
...part,
|
||||
result: {...result.data, topic: part?.topic},
|
||||
gender,
|
||||
avatar,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
toast.error("Something went wrong!");
|
||||
console.log(e);
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Tab.Panel className="w-full bg-ielts-speaking/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Gender</label>
|
||||
<Select
|
||||
options={[
|
||||
{value: "male", label: "Male"},
|
||||
{value: "female", label: "Female"},
|
||||
]}
|
||||
value={{value: gender, label: capitalize(gender)}}
|
||||
onChange={(value) => (value ? setGender(value.value as typeof gender) : null)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4 items-end">
|
||||
<button
|
||||
onClick={generate}
|
||||
disabled={isLoading}
|
||||
data-tip="The passage is currently being generated"
|
||||
className={clsx(
|
||||
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
|
||||
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
isLoading && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Generate"
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={generateVideo}
|
||||
disabled={isLoading || !part}
|
||||
data-tip="The passage is currently being generated"
|
||||
className={clsx(
|
||||
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
|
||||
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
isLoading && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Generate Video"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
|
||||
<span className={clsx("loading loading-infinity w-32 text-ielts-speaking")} />
|
||||
<span className={clsx("font-bold text-2xl text-ielts-speaking")}>Generating...</span>
|
||||
</div>
|
||||
)}
|
||||
{part && !isLoading && (
|
||||
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-96">
|
||||
<h3 className="text-xl font-semibold">
|
||||
{!!part.first_topic && !!part.second_topic ? `${part.first_topic} & ${part.second_topic}` : part.topic}
|
||||
</h3>
|
||||
{part.question && <span className="w-full">{part.question}</span>}
|
||||
{part.questions && (
|
||||
<div className="flex flex-col gap-1">
|
||||
{part.questions.map((question, index) => (
|
||||
<span className="w-full" key={index}>
|
||||
- {question}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{part.prompts && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium">You should talk about the following things:</span>
|
||||
{part.prompts.map((prompt, index) => (
|
||||
<span className="w-full" key={index}>
|
||||
- {prompt}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{part.result && <span className="font-bold mt-4">Video Generated: ✅</span>}
|
||||
{part.avatar && part.gender && (
|
||||
<span>
|
||||
<b>Instructor:</b> {part.avatar.name} - {capitalize(part.avatar.gender)}
|
||||
</span>
|
||||
)}
|
||||
{part.questions?.map((question, index) => (
|
||||
<Input
|
||||
key={index}
|
||||
type="text"
|
||||
label="Question"
|
||||
name="question"
|
||||
required
|
||||
value={question}
|
||||
onChange={(value) =>
|
||||
updatePart((part?: SpeakingPart) => {
|
||||
if (part) {
|
||||
return {
|
||||
...part,
|
||||
questions: part.questions?.map((x, xIndex) => (xIndex === index ? value : x)),
|
||||
} as SpeakingPart;
|
||||
}
|
||||
|
||||
return part;
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
interface SpeakingPart {
|
||||
prompts?: string[];
|
||||
question?: string;
|
||||
questions?: string[];
|
||||
topic: string;
|
||||
first_topic?: string;
|
||||
second_topic?: string;
|
||||
result?: SpeakingExercise | InteractiveSpeakingExercise;
|
||||
gender?: "male" | "female";
|
||||
avatar?: (typeof AVATARS)[number];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const SpeakingGeneration = ({id}: Props) => {
|
||||
const [part1, setPart1] = useState<SpeakingPart>();
|
||||
const [part2, setPart2] = useState<SpeakingPart>();
|
||||
const [part3, setPart3] = useState<SpeakingPart>();
|
||||
const [minTimer, setMinTimer] = useState(14);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [resultingExam, setResultingExam] = useState<SpeakingExam>();
|
||||
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
|
||||
const [isPrivate, setPrivate] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const parts = [part1, part2, part3].filter((x) => !!x);
|
||||
setMinTimer(parts.length === 0 ? 5 : parts.length * 5);
|
||||
}, [part1, part2, part3]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const setExams = useExamStore((state) => state.setExams);
|
||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||
|
||||
const submitExam = () => {
|
||||
if (!part1?.result && !part2?.result && !part3?.result) return toast.error("Please generate at least one task!");
|
||||
|
||||
if (!id) {
|
||||
toast.error("Please insert a title before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const genders = [part1?.gender, part2?.gender, part3?.gender].filter((x) => !!x);
|
||||
|
||||
const exercises = [part1?.result, part2?.result, part3?.result]
|
||||
.filter((x) => !!x)
|
||||
.map((x) => ({
|
||||
...x,
|
||||
first_title: x?.type === "interactiveSpeaking" ? x.first_topic : undefined,
|
||||
second_title: x?.type === "interactiveSpeaking" ? x.second_topic : undefined,
|
||||
}));
|
||||
|
||||
const exam: SpeakingExam = {
|
||||
id,
|
||||
isDiagnostic: false,
|
||||
exercises: exercises as (SpeakingExercise | InteractiveSpeakingExercise)[],
|
||||
minTimer,
|
||||
variant: minTimer >= 14 ? "full" : "partial",
|
||||
module: "speaking",
|
||||
instructorGender: genders.every((x) => x === "male") ? "male" : genders.every((x) => x === "female") ? "female" : "varied",
|
||||
private: isPrivate,
|
||||
};
|
||||
|
||||
axios
|
||||
.post(`/api/exam/speaking`, exam)
|
||||
.then((result) => {
|
||||
playSound("sent");
|
||||
console.log(`Generated Exam ID: ${result.data.id}`);
|
||||
toast.success(`Generated Exam ID: ${result.data.id}`);
|
||||
setResultingExam(result.data);
|
||||
|
||||
setPart1(undefined);
|
||||
setPart2(undefined);
|
||||
setPart3(undefined);
|
||||
setDifficulty(sample(DIFFICULTIES)!);
|
||||
setMinTimer(14);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong while generating, please try again later.");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
const loadExam = async (examId: string) => {
|
||||
const exam = await getExamById("speaking", examId.trim());
|
||||
if (!exam) {
|
||||
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
||||
toastId: "invalid-exam-id",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setExams([exam]);
|
||||
setSelectedModules(["speaking"]);
|
||||
|
||||
router.push("/exercises");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-4 w-full items-center">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="minTimer"
|
||||
onChange={(e) => setMinTimer(parseInt(e) < 5 ? 5 : parseInt(e))}
|
||||
value={minTimer}
|
||||
className="max-w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-1/2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
|
||||
<Select
|
||||
options={DIFFICULTIES.map((x) => ({
|
||||
value: x,
|
||||
label: capitalize(x),
|
||||
}))}
|
||||
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
|
||||
value={{value: difficulty, label: capitalize(difficulty)}}
|
||||
disabled={!!part1 || !!part2 || !!part3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 w-fit h-fit">
|
||||
<div className="h-6" />
|
||||
<Checkbox isChecked={isPrivate} onChange={setPrivate}>
|
||||
Privacy (Only available for Assignments)
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
|
||||
)
|
||||
}>
|
||||
Exercise 1 {part1 && part1.result && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
|
||||
)
|
||||
}>
|
||||
Exercise 2 {part2 && part2.result && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
|
||||
)
|
||||
}>
|
||||
Interactive {part3 && part3.result && <BsCheck />}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
{[
|
||||
{part: part1, setPart: setPart1},
|
||||
{part: part2, setPart: setPart2},
|
||||
{part: part3, setPart: setPart3},
|
||||
].map(({part, setPart}, index) => (
|
||||
<PartTab difficulty={difficulty} part={part} index={index + 1} key={index} setPart={setPart} updatePart={setPart} />
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
<div className="w-full flex justify-end gap-4">
|
||||
{resultingExam && (
|
||||
<button
|
||||
disabled={isLoading}
|
||||
onClick={() => loadExam(resultingExam.id)}
|
||||
className={clsx(
|
||||
"bg-white border border-ielts-speaking text-ielts-speaking w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-speaking hover:text-white disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
)}>
|
||||
Perform Exam
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
disabled={(!part1?.result && !part2?.result && !part3?.result) || isLoading}
|
||||
data-tip="Please generate all three passages"
|
||||
onClick={submitExam}
|
||||
className={clsx(
|
||||
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
!part1 && !part2 && !part3 && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpeakingGeneration;
|
||||
@@ -1,293 +0,0 @@
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
import Input from "@/components/Low/Input";
|
||||
import Select from "@/components/Low/Select";
|
||||
import {Difficulty, WritingExam, WritingExercise} from "@/interfaces/exam";
|
||||
import useExamStore from "@/stores/examStore";
|
||||
import {getExamById} from "@/utils/exams";
|
||||
import {playSound} from "@/utils/sound";
|
||||
import {Tab} from "@headlessui/react";
|
||||
import axios from "axios";
|
||||
import clsx from "clsx";
|
||||
import {capitalize, sample} from "lodash";
|
||||
import {useRouter} from "next/router";
|
||||
import {generate} from "random-words";
|
||||
import {useEffect, useState} from "react";
|
||||
import {BsArrowRepeat, BsCheck} from "react-icons/bs";
|
||||
import {toast} from "react-toastify";
|
||||
import {v4} from "uuid";
|
||||
|
||||
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
|
||||
|
||||
const TaskTab = ({task, index, difficulty, setTask}: {task?: string; difficulty: Difficulty; index: number; setTask: (task: string) => void}) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const generate = () => {
|
||||
setIsLoading(true);
|
||||
|
||||
const url = new URLSearchParams();
|
||||
url.append("difficulty", difficulty);
|
||||
|
||||
axios
|
||||
.get(`/api/exam/writing/generate/writing_task${index}_general?${url.toString()}`)
|
||||
.then((result) => {
|
||||
playSound(typeof result.data === "string" ? "error" : "check");
|
||||
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
|
||||
setTask(result.data.question);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong!");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Tab.Panel className="w-full bg-ielts-writing/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
|
||||
<div className="flex gap-4 items-end">
|
||||
<button
|
||||
onClick={generate}
|
||||
disabled={isLoading}
|
||||
className={clsx(
|
||||
"bg-ielts-writing/70 border border-ielts-writing text-white w-full px-6 py-6 rounded-xl h-[70px]",
|
||||
"hover:bg-ielts-writing disabled:bg-ielts-writing/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Generate"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
|
||||
<span className={clsx("loading loading-infinity w-32 text-ielts-writing")} />
|
||||
<span className={clsx("font-bold text-2xl text-ielts-writing")}>Generating...</span>
|
||||
</div>
|
||||
)}
|
||||
{task && (
|
||||
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
|
||||
<span className="w-full h-96">{task}</span>
|
||||
</div>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const WritingGeneration = ({id}: Props) => {
|
||||
const [task1, setTask1] = useState<string>();
|
||||
const [task2, setTask2] = useState<string>();
|
||||
const [minTimer, setMinTimer] = useState(60);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [resultingExam, setResultingExam] = useState<WritingExam>();
|
||||
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
|
||||
const [isPrivate, setPrivate] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const task1Timer = task1 ? 20 : 0;
|
||||
const task2Timer = task2 ? 40 : 0;
|
||||
setMinTimer(task1Timer > 0 || task2Timer > 0 ? task1Timer + task2Timer : 20);
|
||||
}, [task1, task2]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const setExams = useExamStore((state) => state.setExams);
|
||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||
|
||||
const loadExam = async (examId: string) => {
|
||||
const exam = await getExamById("writing", examId.trim());
|
||||
if (!exam) {
|
||||
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
||||
toastId: "invalid-exam-id",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setExams([exam]);
|
||||
setSelectedModules(["writing"]);
|
||||
|
||||
router.push("/exercises");
|
||||
};
|
||||
|
||||
const submitExam = () => {
|
||||
if (!task1 && !task2) {
|
||||
toast.error("Please generate a task before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!id) {
|
||||
toast.error("Please insert a title before submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
const exercise1 = task1
|
||||
? ({
|
||||
id: v4(),
|
||||
type: "writing",
|
||||
prefix: `You should spend about 20 minutes on this task.`,
|
||||
prompt: task1,
|
||||
userSolutions: [],
|
||||
suffix: "You should write at least 150 words.",
|
||||
wordCounter: {
|
||||
limit: 150,
|
||||
type: "min",
|
||||
},
|
||||
} as WritingExercise)
|
||||
: undefined;
|
||||
|
||||
const exercise2 = task2
|
||||
? ({
|
||||
id: v4(),
|
||||
type: "writing",
|
||||
prefix: `You should spend about 40 minutes on this task.`,
|
||||
prompt: task2,
|
||||
userSolutions: [],
|
||||
suffix: "You should write at least 250 words.",
|
||||
wordCounter: {
|
||||
limit: 250,
|
||||
type: "min",
|
||||
},
|
||||
} as WritingExercise)
|
||||
: undefined;
|
||||
|
||||
setIsLoading(true);
|
||||
const exam: WritingExam = {
|
||||
isDiagnostic: false,
|
||||
minTimer,
|
||||
module: "writing",
|
||||
exercises: [...(exercise1 ? [exercise1] : []), ...(exercise2 ? [exercise2] : [])],
|
||||
id,
|
||||
variant: exercise1 && exercise2 ? "full" : "partial",
|
||||
difficulty,
|
||||
private: isPrivate,
|
||||
};
|
||||
|
||||
axios
|
||||
.post(`/api/exam/writing`, exam)
|
||||
.then((result) => {
|
||||
console.log(`Generated Exam ID: ${result.data.id}`);
|
||||
toast.success(`Generated Exam ID: ${result.data.id}`);
|
||||
playSound("sent");
|
||||
toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
|
||||
setResultingExam(result.data);
|
||||
|
||||
setTask1(undefined);
|
||||
setTask2(undefined);
|
||||
setDifficulty(sample(DIFFICULTIES)!);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error("Something went wrong while generating, please try again later.");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-4 w-full items-center">
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
|
||||
<Input
|
||||
type="number"
|
||||
name="minTimer"
|
||||
onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
|
||||
value={minTimer}
|
||||
className="max-w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 w-1/2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
|
||||
<Select
|
||||
options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
|
||||
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
|
||||
value={{value: difficulty, label: capitalize(difficulty)}}
|
||||
disabled={!!task1 || !!task2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 w-fit h-fit">
|
||||
<div className="h-6" />
|
||||
<Checkbox isChecked={isPrivate} onChange={setPrivate}>
|
||||
Privacy (Only available for Assignments)
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
|
||||
)
|
||||
}>
|
||||
Task 1 {task1 && <BsCheck />}
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({selected}) =>
|
||||
clsx(
|
||||
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/70 flex gap-2 items-center justify-center",
|
||||
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
|
||||
"transition duration-300 ease-in-out",
|
||||
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
|
||||
)
|
||||
}>
|
||||
Task 2 {task2 && <BsCheck />}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
{[
|
||||
{task: task1, setTask: setTask1},
|
||||
{task: task2, setTask: setTask2},
|
||||
].map(({task, setTask}, index) => (
|
||||
<TaskTab difficulty={difficulty} task={task} index={index + 1} key={index} setTask={setTask} />
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
<div className="w-full flex justify-end gap-4">
|
||||
{resultingExam && (
|
||||
<button
|
||||
disabled={isLoading}
|
||||
onClick={() => loadExam(resultingExam.id)}
|
||||
className={clsx(
|
||||
"bg-white border border-ielts-writing text-ielts-writing w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-writing hover:text-white disabled:bg-ielts-writing/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
)}>
|
||||
Perform Exam
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
disabled={(!task1 && !task2) || isLoading}
|
||||
data-tip="Please generate all three passages"
|
||||
onClick={submitExam}
|
||||
className={clsx(
|
||||
"bg-ielts-writing/70 border border-ielts-writing text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
|
||||
"hover:bg-ielts-writing disabled:bg-ielts-writing/40 disabled:cursor-not-allowed",
|
||||
"transition ease-in-out duration-300",
|
||||
!task1 && !task2 && "tooltip",
|
||||
)}>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
||||
</div>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WritingGeneration;
|
||||
@@ -51,7 +51,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
|
||||
return currentUser;
|
||||
}));
|
||||
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/batch_users`, { makerID: maker.id, users: usersWithPasswordHashes }, {
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/user/import`, { makerID: maker.id, users: usersWithPasswordHashes }, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
|
||||
},
|
||||
|
||||
@@ -84,7 +84,7 @@ async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
|
||||
}
|
||||
|
||||
async function evaluate(body: {answers: object[]}, variant?: "initial" | "final"): Promise<AxiosResponse> {
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_${variant === "initial" ? "1" : "3"}`, body, {
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/grade/speaking/${variant === "initial" ? "1" : "3"}`, body, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
|
||||
},
|
||||
|
||||
@@ -79,7 +79,7 @@ async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
|
||||
}
|
||||
|
||||
async function evaluate(body: {answer: string; question: string}, task: number): Promise<AxiosResponse> {
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_2`, body, {
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/grade/speaking/2`, body, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
|
||||
},
|
||||
|
||||
@@ -69,7 +69,7 @@ async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
|
||||
async function evaluate(body: Body): Promise<AxiosResponse> {
|
||||
const taskNumber = body.task.toString() !== "1" && body.task.toString() !== "2" ? "1" : body.task.toString();
|
||||
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/writing_task${taskNumber}`, body as Body, {
|
||||
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/grade/writing/${taskNumber}`, body as Body, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
|
||||
},
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type {NextApiRequest, NextApiResponse} from "next";
|
||||
import {withIronSessionApiRoute} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {Difficulty, Exam} from "@/interfaces/exam";
|
||||
import {Module} from "@/interfaces";
|
||||
import axios from "axios";
|
||||
|
||||
export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
|
||||
async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (req.method === "GET") return get(req, res);
|
||||
if (req.method === "POST") return post(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 {endpoint, topic, exercises, difficulty} = req.query as {
|
||||
module: Module;
|
||||
endpoint: string;
|
||||
topic?: string;
|
||||
exercises?: string[] | string;
|
||||
difficulty?: Difficulty;
|
||||
};
|
||||
const url = `${process.env.BACKEND_URL}/${endpoint}`;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (topic) params.append("topic", topic);
|
||||
if (exercises) (typeof exercises === "string" ? [exercises] : exercises).forEach((exercise) => params.append("exercises", exercise));
|
||||
if (difficulty) params.append("difficulty", difficulty);
|
||||
|
||||
const result = await axios.get(`${url}${params.toString().length > 0 ? `?${params.toString()}` : ""}`, {
|
||||
headers: {Authorization: `Bearer ${process.env.BACKEND_JWT}`},
|
||||
});
|
||||
|
||||
res.status(200).json(result.data);
|
||||
}
|
||||
|
||||
async function post(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (!req.session.user) return res.status(401).json({ok: false});
|
||||
|
||||
const {endpoint, topic, exercises} = req.query as {module: Module; endpoint: string[]; topic?: string; exercises?: string[]};
|
||||
const url = `${process.env.BACKEND_URL}/${endpoint.join("/")}`;
|
||||
|
||||
const result = await axios.post(
|
||||
`${url}${topic && exercises ? `?topic=${topic.toLowerCase()}&exercises=${exercises.join("&exercises=")}` : ""}`,
|
||||
req.body,
|
||||
{
|
||||
headers: {Authorization: `Bearer ${process.env.BACKEND_JWT}`},
|
||||
},
|
||||
);
|
||||
|
||||
res.status(200).json(result.data);
|
||||
}
|
||||
79
src/pages/api/exam/[module]/import.ts
Normal file
79
src/pages/api/exam/[module]/import.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
export const config = {
|
||||
api: {
|
||||
bodyParser: false
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
import { withIronSessionApiRoute } from "iron-session/next";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import axios from "axios";
|
||||
import formidable from 'formidable';
|
||||
import FormData from 'form-data';
|
||||
import { readFileSync } from 'fs';
|
||||
|
||||
export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
|
||||
async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (req.method === "POST") return post(req, res);
|
||||
|
||||
return res.status(404).json({ ok: false });
|
||||
}
|
||||
|
||||
|
||||
async function post(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (!req.session.user) return res.status(401).json({ ok: false });
|
||||
|
||||
try {
|
||||
const form = formidable({
|
||||
multiples: true,
|
||||
});
|
||||
|
||||
const [_, files] = await form.parse(req);
|
||||
const formData = new FormData();
|
||||
|
||||
if (files.exercises?.[0]) {
|
||||
const file = files.exercises[0];
|
||||
const buffer = readFileSync(file.filepath);
|
||||
|
||||
formData.append('exercises', buffer, {
|
||||
filename: file.originalFilename!,
|
||||
contentType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
knownLength: buffer.length
|
||||
});
|
||||
}
|
||||
|
||||
if (files.solutions?.[0]) {
|
||||
const file = files.solutions[0];
|
||||
const buffer = readFileSync(file.filepath);
|
||||
|
||||
formData.append('solutions', buffer, {
|
||||
filename: file.originalFilename!,
|
||||
contentType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
knownLength: buffer.length
|
||||
});
|
||||
}
|
||||
|
||||
const result = await axios.post(
|
||||
`${process.env.BACKEND_URL}/${req.query.module}/import`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
|
||||
...formData.getHeaders()
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return res.status(200).json(result.data);
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return res.status(500).json({
|
||||
error: 'Upload failed',
|
||||
details: error instanceof Error ? error.message : 'Unknown error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
47
src/pages/api/exam/generate/[...module].ts
Normal file
47
src/pages/api/exam/generate/[...module].ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
import { withIronSessionApiRoute } from "iron-session/next";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import axios from "axios";
|
||||
import queryToURLSearchParams from "@/utils/query.to.url.params";
|
||||
|
||||
export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
|
||||
async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (req.method === "GET") return get(req, res);
|
||||
if (req.method === "POST") return post(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 queryParams = queryToURLSearchParams(req);
|
||||
const endpoint = queryParams.getAll('module').join("/");
|
||||
|
||||
queryParams.delete('module');
|
||||
|
||||
const result = await axios.get(`${process.env.BACKEND_URL}/${endpoint}${queryParams.size > 0 ? `?${queryParams.toString()}` : ""}`, {
|
||||
headers: { Authorization: `Bearer ${process.env.BACKEND_JWT}` },
|
||||
});
|
||||
res.status(200).json(result.data);
|
||||
}
|
||||
|
||||
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")) {
|
||||
endpoint = "level"
|
||||
}
|
||||
|
||||
const result = await axios.post(`${process.env.BACKEND_URL}/${endpoint}`,
|
||||
req.body,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${process.env.BACKEND_JWT}` },
|
||||
},
|
||||
);
|
||||
|
||||
res.status(200).json(result.data);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type {NextApiRequest, NextApiResponse} from "next";
|
||||
import {withIronSessionApiRoute} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import axios from "axios";
|
||||
import queryToURLSearchParams from "@/utils/query.to.url.params";
|
||||
|
||||
export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
|
||||
@@ -12,16 +12,19 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
return res.status(404).json({ok: false});
|
||||
}
|
||||
|
||||
|
||||
async function post(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (!req.session.user) return res.status(401).json({ok: false});
|
||||
|
||||
const body = req.body;
|
||||
const params = new URLSearchParams();
|
||||
const queryParams = queryToURLSearchParams(req);
|
||||
const endpoint = queryParams.getAll('module').join("/");
|
||||
|
||||
Object.keys(body).forEach((key) => params.append(key, body[key]));
|
||||
const result = await axios.get(`${process.env.BACKEND_URL}/custom_level?${params.toString()}`, {
|
||||
headers: {Authorization: `Bearer ${process.env.BACKEND_JWT}`},
|
||||
});
|
||||
const result = await axios.post(`${process.env.BACKEND_URL}/${endpoint}`,
|
||||
req.body,
|
||||
{
|
||||
headers: {Authorization: `Bearer ${process.env.BACKEND_JWT}`},
|
||||
},
|
||||
);
|
||||
|
||||
res.status(200).json(result.data);
|
||||
}
|
||||
}
|
||||
@@ -94,7 +94,7 @@ interface SkillsFeedbackResponse extends SkillsFeedbackRequest {
|
||||
|
||||
const getSkillsFeedback = async (sections: SkillsFeedbackRequest[]) => {
|
||||
const backendRequest = await axios.post(
|
||||
`${process.env.BACKEND_URL}/grading_summary`,
|
||||
`${process.env.BACKEND_URL}/grade/summary`,
|
||||
{ sections },
|
||||
{
|
||||
headers: {
|
||||
|
||||
@@ -20,7 +20,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
|
||||
async function post(req: NextApiRequest, res: NextApiResponse) {
|
||||
try {
|
||||
const response = await axios.post(`${process.env.BACKEND_URL}/training_content`, req.body, {
|
||||
const response = await axios.post(`${process.env.BACKEND_URL}/training/`, req.body, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
|
||||
},
|
||||
|
||||
47
src/pages/api/users/controller.ts
Normal file
47
src/pages/api/users/controller.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
|
||||
import { sessionOptions } from '@/lib/session';
|
||||
import { withIronSessionApiRoute } from 'iron-session/next';
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import client from "@/lib/mongodb";
|
||||
|
||||
const db = client.db(process.env.MONGODB_DB);
|
||||
|
||||
export default withIronSessionApiRoute(handler, sessionOptions);
|
||||
|
||||
async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
const { op } = req.query
|
||||
|
||||
if (req.method === 'GET') {
|
||||
switch (op) {
|
||||
default:
|
||||
res.status(400).json({ error: 'Invalid operation!' })
|
||||
}
|
||||
}
|
||||
else if (req.method === 'POST') {
|
||||
switch (op) {
|
||||
case 'crossRefEmails':
|
||||
res.status(200).json(await crossRefEmails(req.body.emails))
|
||||
break;
|
||||
default:
|
||||
res.status(400).json({ error: 'Invalid operation!' })
|
||||
}
|
||||
} else {
|
||||
res.status(400).end(`Method ${req.method} Not Allowed`)
|
||||
}
|
||||
}
|
||||
|
||||
async function crossRefEmails(emails: string[]) {
|
||||
return await db.collection("users").aggregate([
|
||||
{
|
||||
$match: {
|
||||
email: { $in: emails }
|
||||
}
|
||||
},
|
||||
{
|
||||
$project: {
|
||||
_id: 0,
|
||||
email: 1
|
||||
}
|
||||
}
|
||||
]).toArray();
|
||||
}
|
||||
@@ -1,30 +1,23 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import Head from "next/head";
|
||||
import {withIronSessionSsr} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
import Layout from "@/components/High/Layout";
|
||||
import {shouldRedirectHome} from "@/utils/navigation.disabled";
|
||||
import {useState} from "react";
|
||||
import {Module} from "@/interfaces";
|
||||
import {RadioGroup, Tab} from "@headlessui/react";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import { Radio, RadioGroup } from "@headlessui/react";
|
||||
import clsx from "clsx";
|
||||
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
||||
import {capitalize} from "lodash";
|
||||
import Button from "@/components/Low/Button";
|
||||
import {Exercise, ReadingPart} from "@/interfaces/exam";
|
||||
import { MODULE_ARRAY } from "@/utils/moduleUtils";
|
||||
import { capitalize } from "lodash";
|
||||
import Input from "@/components/Low/Input";
|
||||
import axios from "axios";
|
||||
import ReadingGeneration from "./(generation)/ReadingGeneration";
|
||||
import ListeningGeneration from "./(generation)/ListeningGeneration";
|
||||
import WritingGeneration from "./(generation)/WritingGeneration";
|
||||
import LevelGeneration from "./(generation)/LevelGeneration";
|
||||
import SpeakingGeneration from "./(generation)/SpeakingGeneration";
|
||||
import {checkAccess} from "@/utils/permissions";
|
||||
import {User} from "@/interfaces/user";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
import { User } from "@/interfaces/user";
|
||||
import useExamEditorStore from "@/stores/examEditor";
|
||||
import ExamEditorStore from "@/stores/examEditor/types";
|
||||
import ExamEditor from "@/components/ExamEditor";
|
||||
import MultipleAudioUploader from "@/components/ExamEditor/Shared/AudioEdit";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
|
||||
const user = req.session.user;
|
||||
|
||||
if (!user) {
|
||||
@@ -46,18 +39,18 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
}
|
||||
|
||||
return {
|
||||
props: {user: req.session.user},
|
||||
props: { user: req.session.user },
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
}
|
||||
export default function Generation({ user }: { user: User; }) {
|
||||
const { title, currentModule, dispatch } = useExamEditorStore();
|
||||
|
||||
const updateRoot = (updates: Partial<ExamEditorStore>) => {
|
||||
dispatch({ type: 'UPDATE_ROOT', payload: { updates } });
|
||||
};
|
||||
|
||||
export default function Generation({user}: Props) {
|
||||
const [module, setModule] = useState<Module>("reading");
|
||||
|
||||
const [title, setTitle] = useState<string>("");
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -79,57 +72,53 @@ export default function Generation({user}: Props) {
|
||||
placeholder="Insert a title here"
|
||||
name="title"
|
||||
label="Title"
|
||||
onChange={setTitle}
|
||||
onChange={(title) => updateRoot({title})}
|
||||
roundness="xl"
|
||||
defaultValue={title}
|
||||
required
|
||||
/>
|
||||
|
||||
{/*<MultipleAudioUploader />*/}
|
||||
<label className="font-normal text-base text-mti-gray-dim">Module</label>
|
||||
<RadioGroup
|
||||
value={module}
|
||||
onChange={setModule}
|
||||
value={currentModule}
|
||||
onChange={(currentModule) => updateRoot({currentModule})}
|
||||
className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
|
||||
{[...MODULE_ARRAY].map((x) => (
|
||||
<RadioGroup.Option value={x} key={x}>
|
||||
{({checked}) => (
|
||||
<Radio value={x} key={x}>
|
||||
{({ checked }) => (
|
||||
<span
|
||||
className={clsx(
|
||||
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"px-6 py-4 w-64 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||
"transition duration-300 ease-in-out",
|
||||
x === "reading" &&
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-reading/70 border-ielts-reading text-white"),
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-reading/70 border-ielts-reading text-white"),
|
||||
x === "listening" &&
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-listening/70 border-ielts-listening text-white"),
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-listening/70 border-ielts-listening text-white"),
|
||||
x === "writing" &&
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-writing/70 border-ielts-writing text-white"),
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-writing/70 border-ielts-writing text-white"),
|
||||
x === "speaking" &&
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
|
||||
x === "level" &&
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-level/70 border-ielts-level text-white"),
|
||||
(!checked
|
||||
? "bg-white border-mti-gray-platinum"
|
||||
: "bg-ielts-level/70 border-ielts-level text-white"),
|
||||
)}>
|
||||
{capitalize(x)}
|
||||
</span>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
</Radio>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
{module === "reading" && <ReadingGeneration id={title} />}
|
||||
{module === "listening" && <ListeningGeneration id={title} />}
|
||||
{module === "writing" && <WritingGeneration id={title} />}
|
||||
{module === "speaking" && <SpeakingGeneration id={title} />}
|
||||
{module === "level" && <LevelGeneration id={title} />}
|
||||
<ExamEditor />
|
||||
</Layout>
|
||||
)}
|
||||
</>
|
||||
|
||||
73
src/pages/popout.tsx
Normal file
73
src/pages/popout.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { User } from "@/interfaces/user";
|
||||
import { sessionOptions } from "@/lib/session";
|
||||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||||
import { checkAccess } from "@/utils/permissions";
|
||||
import { getUserPermissions } from "@/utils/permissions.be";
|
||||
import { withIronSessionSsr } from "iron-session/next";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
|
||||
const user = req.session.user;
|
||||
if (!user) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/login",
|
||||
permanent: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"])) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/",
|
||||
permanent: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
const permissions = await getUserPermissions(user.id);
|
||||
const {type, module} = query;
|
||||
return {
|
||||
props: { user, permissions, type, module },
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
const Popout: React.FC<{ user: User; type: string, module: string }> = ({ user, type, module }) => {
|
||||
const [DynamicPopout, setDynamicPopout] = useState<React.ComponentType<any> | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadComponent = async () => {
|
||||
try {
|
||||
const sanitizedPopout = type.replace(/[^a-zA-Z0-9]/g, '');
|
||||
const sanitizedModule = module.replace(/[^a-zA-Z0-9]/g, '');
|
||||
const Component = dynamic(() => import(`@/components/Popouts/${sanitizedPopout}`), {
|
||||
loading: () => (
|
||||
<div className="min-h-screen w-full">
|
||||
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
|
||||
<span className={`loading loading-infinity w-32 bg-ielts-${sanitizedModule}`} />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
setDynamicPopout(() => Component);
|
||||
} catch (err) {
|
||||
console.error("Error loading component:", err);
|
||||
setError("Failed to load the requested popout component.");
|
||||
}
|
||||
};
|
||||
|
||||
loadComponent();
|
||||
}, [type, module]);
|
||||
|
||||
if (error) {
|
||||
return <div className="text-red-500">{error}</div>;
|
||||
}
|
||||
return (
|
||||
<div className="min-h-screen w-full p-10">
|
||||
{DynamicPopout ? <DynamicPopout user={user} /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Popout;
|
||||
@@ -80,8 +80,8 @@ export default function Admin({user, permissions}: Props) {
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
<Layout user={user} className="gap-6">
|
||||
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)}>
|
||||
<BatchCreateUser user={user} users={users} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
|
||||
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
|
||||
<BatchCreateUser user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
|
||||
</Modal>
|
||||
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
|
||||
<BatchCodeGenerator user={user} users={users} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
|
||||
|
||||
Reference in New Issue
Block a user