145 lines
4.2 KiB
TypeScript
145 lines
4.2 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import Dropdown from "../Shared/SettingsDropdown";
|
|
import Input from "@/components/Low/Input";
|
|
import ExercisePicker from "../../ExercisePicker";
|
|
import { generate } from "../Shared/Generate";
|
|
import GenerateBtn from "../Shared/GenerateBtn";
|
|
import { LevelPart, ReadingPart } from "@/interfaces/exam";
|
|
import {
|
|
LevelSectionSettings,
|
|
ReadingSectionSettings,
|
|
} from "@/stores/examEditor/types";
|
|
import useExamEditorStore from "@/stores/examEditor";
|
|
|
|
interface Props {
|
|
localSettings: ReadingSectionSettings | LevelSectionSettings;
|
|
updateLocalAndScheduleGlobal: (
|
|
updates: Partial<ReadingSectionSettings | LevelSectionSettings>,
|
|
schedule?: boolean
|
|
) => void;
|
|
currentSection: ReadingPart | LevelPart;
|
|
generatePassageDisabled?: boolean;
|
|
levelId?: number;
|
|
level?: boolean;
|
|
}
|
|
|
|
const ReadingComponents: React.FC<Props> = ({
|
|
localSettings,
|
|
updateLocalAndScheduleGlobal,
|
|
currentSection,
|
|
levelId,
|
|
level = false,
|
|
generatePassageDisabled = false,
|
|
}) => {
|
|
const { currentModule } = useExamEditorStore();
|
|
const { focusedSection, difficulty } = useExamEditorStore(
|
|
(state) => state.modules[currentModule]
|
|
);
|
|
|
|
const generatePassage = useCallback(() => {
|
|
generate(
|
|
levelId ? levelId : focusedSection,
|
|
"reading",
|
|
"passage",
|
|
{
|
|
method: "GET",
|
|
queryParams: {
|
|
difficulty,
|
|
...(localSettings.readingTopic && {
|
|
topic: localSettings.readingTopic,
|
|
}),
|
|
},
|
|
},
|
|
(data: any) => [
|
|
{
|
|
title: data.title,
|
|
text: data.text,
|
|
},
|
|
],
|
|
level ? focusedSection : undefined,
|
|
level
|
|
);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [localSettings.readingTopic, difficulty, focusedSection, levelId]);
|
|
|
|
const onTopicChange = useCallback(
|
|
(readingTopic: string) => {
|
|
updateLocalAndScheduleGlobal({ readingTopic });
|
|
},
|
|
[updateLocalAndScheduleGlobal]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Dropdown
|
|
title="Generate Passage"
|
|
module="reading"
|
|
open={localSettings.isPassageOpen}
|
|
setIsOpen={(isOpen: boolean) =>
|
|
updateLocalAndScheduleGlobal({ isPassageOpen: isOpen }, false)
|
|
}
|
|
contentWrapperClassName={level ? `border border-ielts-reading` : ""}
|
|
disabled={generatePassageDisabled}
|
|
>
|
|
<div
|
|
className="flex flex-row flex-wrap gap-2 items-center px-2 pb-4 "
|
|
>
|
|
<div className="flex flex-col flex-grow gap-4 px-2">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Topic (Optional)
|
|
</label>
|
|
<Input
|
|
key={`section-${focusedSection}`}
|
|
type="text"
|
|
placeholder="Topic"
|
|
name="category"
|
|
onChange={onTopicChange}
|
|
roundness="full"
|
|
value={localSettings.readingTopic}
|
|
/>
|
|
</div>
|
|
<div className="flex self-end h-16 mb-1">
|
|
<GenerateBtn
|
|
module="reading"
|
|
genType="passage"
|
|
sectionId={focusedSection}
|
|
generateFnc={generatePassage}
|
|
level={level}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Dropdown>
|
|
<Dropdown
|
|
title="Add Exercises"
|
|
module="reading"
|
|
open={localSettings.isReadingTopicOpean}
|
|
setIsOpen={(isOpen: boolean) =>
|
|
updateLocalAndScheduleGlobal({ isReadingTopicOpean: isOpen })
|
|
}
|
|
contentWrapperClassName={level ? `border border-ielts-reading` : ""}
|
|
disabled={
|
|
currentSection === undefined ||
|
|
currentSection.text === undefined ||
|
|
currentSection.text.content === "" ||
|
|
currentSection.text.title === ""
|
|
}
|
|
>
|
|
<ExercisePicker
|
|
module="reading"
|
|
sectionId={levelId !== undefined ? levelId : focusedSection}
|
|
extraArgs={{
|
|
text:
|
|
currentSection === undefined || currentSection.text === undefined
|
|
? ""
|
|
: currentSection.text.content,
|
|
}}
|
|
levelSectionId={focusedSection}
|
|
level={level}
|
|
/>
|
|
</Dropdown>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ReadingComponents;
|