305 lines
15 KiB
TypeScript
305 lines
15 KiB
TypeScript
import React, { useCallback, useRef, useState } from "react";
|
|
import Dropdown from "../Shared/SettingsDropdown";
|
|
import Input from "@/components/Low/Input";
|
|
import { generate } from "../Shared/Generate";
|
|
import GenerateBtn from "../Shared/GenerateBtn";
|
|
import { LevelSectionSettings, WritingSectionSettings } from "@/stores/examEditor/types";
|
|
import useExamEditorStore from "@/stores/examEditor";
|
|
import { Difficulty, WritingExercise } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import { FaFileUpload } from "react-icons/fa";
|
|
import ReactSelect, { components } from "react-select";
|
|
import Option from "@/interfaces/option"
|
|
import { MdSignalCellularAlt } from "react-icons/md";
|
|
import { capitalize } from "lodash";
|
|
|
|
|
|
interface Props {
|
|
localSettings: WritingSectionSettings | LevelSectionSettings;
|
|
updateLocalAndScheduleGlobal: (updates: Partial<WritingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
|
|
currentSection?: WritingExercise;
|
|
level?: boolean;
|
|
}
|
|
|
|
const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndScheduleGlobal, level }) => {
|
|
const { currentModule, dispatch } = useExamEditorStore();
|
|
const {
|
|
difficulty,
|
|
focusedSection,
|
|
type,
|
|
academic_url
|
|
} = useExamEditorStore((store) => store.modules["writing"]);
|
|
|
|
const randomDiff = difficulty.length === 1
|
|
? capitalize(difficulty[0])
|
|
: difficulty.length == 0 ?
|
|
"Random" :
|
|
`Selected (${difficulty.sort().map(dif => capitalize(dif)).join(", ")})` as Difficulty;
|
|
|
|
const DIFFICULTIES = difficulty.length === 1
|
|
? ["A1", "A2", "B1", "B2", "C1", "C2", "Random"]
|
|
: ["A1", "A2", "B1", "B2", "C1", "C2", randomDiff, "Random"];
|
|
|
|
const difficultyOptions: Option[] = DIFFICULTIES.map(level => ({
|
|
label: level,
|
|
value: level
|
|
}));
|
|
const [specificDiff, setSpecificDiff] = useState(randomDiff);
|
|
|
|
const generatePassage = useCallback((sectionId: number) => {
|
|
if (type === "academic" && academic_url !== undefined && sectionId == 1) {
|
|
generate(
|
|
sectionId,
|
|
currentModule,
|
|
"writing",
|
|
{
|
|
method: 'POST',
|
|
queryParams: {
|
|
difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
|
|
type: type!
|
|
},
|
|
files: {
|
|
file: academic_url!,
|
|
}
|
|
},
|
|
(data: any) => [{
|
|
prompt: data.question,
|
|
difficulty: data.difficulty
|
|
}]
|
|
)
|
|
} else {
|
|
generate(
|
|
sectionId,
|
|
currentModule,
|
|
"writing",
|
|
{
|
|
method: 'GET',
|
|
queryParams: {
|
|
difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
|
|
type: type!,
|
|
...(localSettings.writingTopic && { topic: localSettings.writingTopic })
|
|
}
|
|
},
|
|
(data: any) => [{
|
|
prompt: data.question,
|
|
difficulty: data.difficulty
|
|
}]
|
|
);
|
|
}
|
|
}, [type, academic_url, currentModule, specificDiff, difficulty, localSettings.writingTopic]);
|
|
|
|
const onTopicChange = useCallback((writingTopic: string) => {
|
|
updateLocalAndScheduleGlobal({ writingTopic });
|
|
}, [updateLocalAndScheduleGlobal]);
|
|
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const triggerFileInput = () => {
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (file) {
|
|
const blobUrl = URL.createObjectURL(file);
|
|
if (academic_url !== undefined) {
|
|
URL.revokeObjectURL(academic_url);
|
|
}
|
|
dispatch({ type: "UPDATE_MODULE", payload: { updates: { academic_url: blobUrl } } });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{type === "academic" && focusedSection === 1 && <Dropdown
|
|
title="Upload Image"
|
|
module={"writing"}
|
|
open={localSettings.isImageUploadOpen}
|
|
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isImageUploadOpen: isOpen }, false)}
|
|
contentWrapperClassName={level ? `border border-ielts-writing` : ''}
|
|
>
|
|
<div className="flex w-full flex-row gap-2 items-center px-2 pb-4">
|
|
<div className="flex w-full flex-col gap-4">
|
|
<div className="flex flex-col gap-2">
|
|
<label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
|
|
<ReactSelect
|
|
options={difficultyOptions}
|
|
value={difficultyOptions.find(opt => opt.value === specificDiff)}
|
|
onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
|
|
menuPortalTarget={document?.body}
|
|
components={{
|
|
IndicatorSeparator: null,
|
|
ValueContainer: ({ children, ...props }) => (
|
|
<components.ValueContainer {...props}>
|
|
<div className="flex flex-row gap-2 items-center pl-4">
|
|
<MdSignalCellularAlt size={14} className="text-gray-600" />
|
|
{children}
|
|
</div>
|
|
</components.ValueContainer>
|
|
)
|
|
}}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
minHeight: '50px',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '0.5rem',
|
|
boxShadow: 'none',
|
|
backgroundColor: 'white',
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
border: '1px solid #e5e7eb',
|
|
}
|
|
}),
|
|
valueContainer: (styles) => ({
|
|
...styles,
|
|
padding: '0 8px',
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
}),
|
|
input: (styles) => ({
|
|
...styles,
|
|
margin: '0',
|
|
padding: '0'
|
|
}),
|
|
dropdownIndicator: (styles) => ({
|
|
...styles,
|
|
padding: '8px'
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
className="text-sm"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row justify-between gap-4">
|
|
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim flex-grow">
|
|
Upload a graph, chart or diagram
|
|
</span>
|
|
<input
|
|
type="file"
|
|
accept="image/png, image/jpeg"
|
|
onChange={handleFileUpload}
|
|
style={{ display: 'none' }}
|
|
ref={fileInputRef}
|
|
/>
|
|
<button
|
|
key={`section-${focusedSection}`}
|
|
className={clsx(
|
|
"flex items-center w-[140px] px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
|
|
`bg-ielts-writing/70 border border-ielts-writing hover:bg-ielts-writing disabled:bg-ielts-writing/40`,
|
|
)}
|
|
onClick={triggerFileInput}
|
|
>
|
|
<div className="flex flex-row">
|
|
<FaFileUpload className="mr-2" size={24} />
|
|
<span>Upload</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Dropdown>}
|
|
{
|
|
(type !== "academic" || (type === "academic" && focusedSection == 2)) && <Dropdown
|
|
title="Generate Instructions"
|
|
module={"writing"}
|
|
open={localSettings.isWritingTopicOpen}
|
|
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
|
|
contentWrapperClassName={level ? `border border-ielts-writing` : ''}
|
|
>
|
|
<div className="px-2 pb-4 flex flex-col w-full">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-2">
|
|
<label className="block font-normal text-base text-mti-gray-dim mb-2">Topic (Optional)</label>
|
|
<div className="flex gap-2 min-w-0">
|
|
<Input
|
|
key={`section-${focusedSection}`}
|
|
type="text"
|
|
placeholder="Topic"
|
|
name="category"
|
|
onChange={onTopicChange}
|
|
roundness="xl"
|
|
value={localSettings.writingTopic}
|
|
thin
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
|
|
<ReactSelect
|
|
options={difficultyOptions}
|
|
value={difficultyOptions.find(opt => opt.value === specificDiff)}
|
|
onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
|
|
menuPortalTarget={document?.body}
|
|
components={{
|
|
IndicatorSeparator: null,
|
|
ValueContainer: ({ children, ...props }) => (
|
|
<components.ValueContainer {...props}>
|
|
<div className="flex flex-row gap-2 items-center pl-4">
|
|
<MdSignalCellularAlt size={14} className="text-gray-600" />
|
|
{children}
|
|
</div>
|
|
</components.ValueContainer>
|
|
)
|
|
}}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
minHeight: '50px',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '0.5rem',
|
|
boxShadow: 'none',
|
|
backgroundColor: 'white',
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
border: '1px solid #e5e7eb',
|
|
}
|
|
}),
|
|
valueContainer: (styles) => ({
|
|
...styles,
|
|
padding: '0 8px',
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
}),
|
|
input: (styles) => ({
|
|
...styles,
|
|
margin: '0',
|
|
padding: '0'
|
|
}),
|
|
dropdownIndicator: (styles) => ({
|
|
...styles,
|
|
padding: '8px'
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
className="text-sm"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full h-full justify-center items-center mt-2">
|
|
<GenerateBtn
|
|
genType="writing"
|
|
module={"writing"}
|
|
sectionId={focusedSection}
|
|
generateFnc={generatePassage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Dropdown>
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default WritingComponents;
|