330 lines
13 KiB
TypeScript
330 lines
13 KiB
TypeScript
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
import SortableSection from "../../Shared/SortableSection";
|
|
import { Difficulty, Exercise, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
|
|
import ExerciseItem from "./types";
|
|
import Dropdown from "@/components/Dropdown";
|
|
import useExamEditorStore from "@/stores/examEditor";
|
|
import Writing from "../../Exercises/Writing";
|
|
import Speaking from "../../Exercises/Speaking";
|
|
import { ReactNode, useEffect } from "react";
|
|
import {
|
|
DndContext,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
closestCenter,
|
|
} from '@dnd-kit/core';
|
|
import GenLoader from "../../Exercises/Shared/GenLoader";
|
|
import { ExamPart, Generating } from "@/stores/examEditor/types";
|
|
import React from "react";
|
|
import getExerciseItems from "./exercises";
|
|
import { Action } from "@/stores/examEditor/reducers";
|
|
import { writingTask } from "@/stores/examEditor/sections";
|
|
import { createSpeakingExercise } from "./speaking";
|
|
|
|
|
|
interface QuestionItemsResult {
|
|
ids: string[];
|
|
items: ExerciseItem[];
|
|
}
|
|
|
|
const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
|
|
const dispatch = useExamEditorStore(state => state.dispatch);
|
|
const currentModule = useExamEditorStore(state => state.currentModule);
|
|
|
|
const {sections, expandedSections, difficulty} = useExamEditorStore(state => state.modules[currentModule]);
|
|
|
|
const section = useExamEditorStore(
|
|
state => state.modules[currentModule].sections.find(
|
|
section => section.sectionId === sectionId
|
|
)
|
|
);
|
|
|
|
const genResult = section?.genResult;
|
|
const generating = section?.generating;
|
|
const levelGenResults = section?.levelGenResults;
|
|
const levelGenerating = section?.levelGenerating;
|
|
const sectionState = section?.state;
|
|
|
|
useEffect(() => {
|
|
if (genResult && genResult.generating === "exercises" && genResult.module === currentModule) {
|
|
const newExercises = genResult.result[0].exercises;
|
|
|
|
const newDifficulties = newExercises
|
|
.map((ex: Exercise) => ex.difficulty)
|
|
.filter((diff: Difficulty) => !difficulty.includes(diff));
|
|
|
|
if (newDifficulties.length > 0) {
|
|
dispatch({ type: 'UPDATE_MODULE', payload: { updates: { difficulty: [...difficulty, ...newDifficulties]} } });
|
|
}
|
|
|
|
dispatch({
|
|
type: "UPDATE_SECTION_STATE", payload: {
|
|
sectionId,
|
|
module: genResult.module,
|
|
update: {
|
|
exercises: [...(sectionState as ExamPart).exercises, ...newExercises]
|
|
}
|
|
}
|
|
})
|
|
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "generating", value: undefined } })
|
|
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [genResult, dispatch, sectionId, currentModule]);
|
|
|
|
|
|
const handleExerciseGen = (
|
|
results: any[],
|
|
assignExercisesFn: (results: any[]) => any[],
|
|
{
|
|
sectionId,
|
|
currentModule,
|
|
sectionState,
|
|
levelGenerating,
|
|
levelGenResults
|
|
}: {
|
|
sectionId: number;
|
|
currentModule: string;
|
|
sectionState: ExamPart;
|
|
levelGenerating?: Generating[];
|
|
levelGenResults: any[];
|
|
}
|
|
) => {
|
|
const nonWritingOrSpeaking = results[0]?.generating.startsWith("exercises");
|
|
|
|
const newExercises = assignExercisesFn(results);
|
|
|
|
const newDifficulties = newExercises
|
|
.map((ex: Exercise) => ex.difficulty)
|
|
.filter((diff: Difficulty | undefined): diff is Difficulty =>
|
|
diff !== undefined && !difficulty.includes(diff)
|
|
);
|
|
|
|
if (newDifficulties.length > 0) {
|
|
dispatch({ type: 'UPDATE_MODULE', payload: { updates: { difficulty: [...difficulty, ...newDifficulties]} } });
|
|
}
|
|
|
|
const updates = [
|
|
{
|
|
type: "UPDATE_SECTION_STATE",
|
|
payload: {
|
|
sectionId,
|
|
module: "level",
|
|
update: {
|
|
exercises: [
|
|
...sectionState.exercises,
|
|
...newExercises
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: "UPDATE_SECTION_SINGLE_FIELD",
|
|
payload: {
|
|
sectionId,
|
|
module: currentModule,
|
|
field: "levelGenerating",
|
|
value: levelGenerating?.filter(g =>
|
|
nonWritingOrSpeaking
|
|
? !g?.startsWith("exercises")
|
|
: !results.flatMap(res => res.generating as Generating).includes(g)
|
|
)
|
|
}
|
|
},
|
|
{
|
|
type: "UPDATE_SECTION_SINGLE_FIELD",
|
|
payload: {
|
|
sectionId,
|
|
module: currentModule,
|
|
field: "levelGenResults",
|
|
value: levelGenResults.filter(res =>
|
|
nonWritingOrSpeaking
|
|
? !res.generating.startsWith("exercises")
|
|
: !results.flatMap(res => res.generating as Generating).includes(res.generating)
|
|
)
|
|
}
|
|
}
|
|
] as Action[];
|
|
|
|
updates.forEach(update => dispatch(update));
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (levelGenResults && levelGenResults?.some(res => res.generating.startsWith("exercises"))) {
|
|
const results = levelGenResults.filter(res =>
|
|
res.generating.startsWith("exercises")
|
|
);
|
|
|
|
const assignExercises = (results: any[]) =>
|
|
results
|
|
.map(res => res.result[0].exercises)
|
|
.flat();
|
|
|
|
handleExerciseGen(
|
|
results,
|
|
assignExercises,
|
|
{
|
|
sectionId,
|
|
currentModule,
|
|
sectionState: sectionState as ExamPart,
|
|
levelGenerating,
|
|
levelGenResults
|
|
}
|
|
);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [levelGenResults, sectionState, levelGenerating, sectionId, currentModule]);
|
|
|
|
useEffect(() => {
|
|
if (levelGenResults && levelGenResults?.some(res =>
|
|
res.generating === "writing_letter" || res.generating === "writing_2"
|
|
)) {
|
|
const results = levelGenResults.filter(res =>
|
|
res.generating === "writing_letter" || res.generating === "writing_2"
|
|
);
|
|
|
|
const assignExercises = (results: any[]) =>
|
|
results.map(res => ({
|
|
...writingTask(res.generating === "writing_letter" ? 1 : 2),
|
|
prompt: res.result[0].prompt,
|
|
difficulty: res.result[0].difficulty,
|
|
variant: res.generating === "writing_letter" ? "letter" : "essay"
|
|
}) as WritingExercise);
|
|
|
|
handleExerciseGen(
|
|
results,
|
|
assignExercises,
|
|
{
|
|
sectionId,
|
|
currentModule,
|
|
sectionState: sectionState as ExamPart,
|
|
levelGenerating,
|
|
levelGenResults
|
|
}
|
|
);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [levelGenResults, sectionState, levelGenerating, sectionId, currentModule]);
|
|
|
|
useEffect(() => {
|
|
if (levelGenResults && levelGenResults?.some(res => res.generating.startsWith("speaking"))) {
|
|
const results = levelGenResults.filter(res =>
|
|
res.generating.startsWith("speaking")
|
|
);
|
|
|
|
const assignExercises = (results: any[]) =>
|
|
results.map(createSpeakingExercise);
|
|
|
|
handleExerciseGen(
|
|
results,
|
|
assignExercises,
|
|
{
|
|
sectionId,
|
|
currentModule,
|
|
sectionState: sectionState as ExamPart,
|
|
levelGenerating,
|
|
levelGenResults
|
|
}
|
|
);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [levelGenResults, sectionState, levelGenerating, sectionId, currentModule]);
|
|
|
|
const currentSection = sections.find((s) => s.sectionId === sectionId)!;
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor),
|
|
);
|
|
|
|
const questionItems = (): QuestionItemsResult => {
|
|
const part = currentSection.state as ReadingPart | ListeningPart | LevelPart;
|
|
const items = getExerciseItems(part.exercises, sectionId);
|
|
return {
|
|
items,
|
|
ids: items.map(item => item.id)
|
|
}
|
|
};
|
|
|
|
const background = (component: ReactNode) => {
|
|
return (
|
|
<div className="p-8 shadow-inner border border-gray-200 bg-gray-50 rounded-xl">
|
|
{component}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (currentModule == "writing") return background(<Writing sectionId={sectionId} exercise={currentSection.state as WritingExercise} module="writing" />);
|
|
if (currentModule == "speaking") return background(<Speaking sectionId={sectionId} exercise={currentSection.state as SpeakingExercise} module="speaking" />);
|
|
|
|
const questions = questionItems();
|
|
|
|
// #############################################################################
|
|
// Typescript checks so that the compiler and builder don't freak out
|
|
const filteredIds = (questions.ids ?? []).filter(Boolean);
|
|
|
|
function isValidItem(item: ExerciseItem | undefined): item is ExerciseItem {
|
|
return item !== undefined &&
|
|
typeof item.id === 'string' &&
|
|
typeof item.sectionId === 'number' &&
|
|
React.isValidElement(item.label) &&
|
|
React.isValidElement(item.content);
|
|
}
|
|
const filteredItems = (questions.items ?? []).filter(isValidItem);
|
|
// #############################################################################
|
|
|
|
|
|
const onFocus = (questionId: string, id: string | undefined) => {
|
|
if (id) {
|
|
dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { module: currentModule, sectionId, field: "focusedExercise", value: { questionId, id } } })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={(e) => dispatch({ type: "REORDER_EXERCISES", payload: { event: e, sectionId, module: currentModule } })}
|
|
>
|
|
{expandedSections.includes(sectionId) &&
|
|
questions.items &&
|
|
questions.items.length > 0 &&
|
|
questions.ids &&
|
|
questions.ids.length > 0 && (
|
|
<div className="mt-4 p-6 rounded-xl shadow-inner border bg-gray-50">
|
|
<SortableContext
|
|
items={filteredIds}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
{filteredItems.map(item => (
|
|
<SortableSection key={item.id} id={item.id}>
|
|
<Dropdown
|
|
className={`w-full text-left p-4 mb-2 bg-gradient-to-r from-ielts-${currentModule}/60 to-ielts-${currentModule} text-white rounded-lg shadow-lg transition-transform transform hover:scale-102`}
|
|
customTitle={item.label}
|
|
contentWrapperClassName="rounded-xl"
|
|
>
|
|
<div tabIndex={4} className="p-4 shadow-inner border border-gray-200 bg-gray-50 rounded-xl" onFocus={() => onFocus(item.id, item.exerciseId)}>
|
|
{item.content}
|
|
</div>
|
|
</Dropdown>
|
|
</SortableSection>
|
|
))}
|
|
</SortableContext>
|
|
</div>
|
|
)
|
|
}
|
|
{generating === "exercises" && <GenLoader module={currentModule} className="mt-4" />}
|
|
{currentModule === "level" && (
|
|
<>
|
|
{
|
|
questions.ids?.length === 0 && !levelGenerating?.some((g) => g?.startsWith("exercises") || g?.startsWith("writing") || g?.startsWith("speaking")) && generating !== "exercises"
|
|
&& background(<span className="flex justify-center">Generated exercises will appear here!</span>)}
|
|
{levelGenerating?.some((g) => g?.startsWith("exercises") || g?.startsWith("writing") || g?.startsWith("speaking")) && <GenLoader module={currentModule} className="mt-4" />}
|
|
</>)
|
|
}
|
|
</DndContext >
|
|
);
|
|
}
|
|
|
|
export default SectionExercises;
|