ENCOA-311
This commit is contained in:
Carlos-Mesquita
@@ -5,9 +5,13 @@ import { generate } from "../Shared/Generate";
|
||||
import GenerateBtn from "../Shared/GenerateBtn";
|
||||
import { LevelSectionSettings, WritingSectionSettings } from "@/stores/examEditor/types";
|
||||
import useExamEditorStore from "@/stores/examEditor";
|
||||
import { WritingExercise } from "@/interfaces/exam";
|
||||
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 {
|
||||
@@ -25,6 +29,21 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
|
||||
type,
|
||||
academic_url
|
||||
} = useExamEditorStore((store) => store.modules["writing"]);
|
||||
|
||||
const randomDiff = difficulty.length === 1
|
||||
? capitalize(difficulty[0])
|
||||
: `Random (${difficulty.map(dif => capitalize(dif)).join(", ")})` as Difficulty;
|
||||
|
||||
const DIFFICULTIES = difficulty.length === 1
|
||||
? ["A1", "A2", "B1", "B2", "C1", "C2"]
|
||||
: ["A1", "A2", "B1", "B2", "C1", "C2", randomDiff];
|
||||
|
||||
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(
|
||||
@@ -34,7 +53,7 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
|
||||
{
|
||||
method: 'POST',
|
||||
queryParams: {
|
||||
difficulty,
|
||||
difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
|
||||
type: type!
|
||||
},
|
||||
files: {
|
||||
@@ -42,7 +61,8 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
|
||||
}
|
||||
},
|
||||
(data: any) => [{
|
||||
prompt: data.question
|
||||
prompt: data.question,
|
||||
difficulty: data.difficulty
|
||||
}]
|
||||
)
|
||||
} else {
|
||||
@@ -53,18 +73,18 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
|
||||
{
|
||||
method: 'GET',
|
||||
queryParams: {
|
||||
difficulty,
|
||||
difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
|
||||
type: type!,
|
||||
...(localSettings.writingTopic && { topic: localSettings.writingTopic })
|
||||
}
|
||||
},
|
||||
(data: any) => [{
|
||||
prompt: data.question
|
||||
prompt: data.question,
|
||||
difficulty: data.difficulty
|
||||
}]
|
||||
);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [localSettings.writingTopic, difficulty, academic_url]);
|
||||
}, [type, academic_url, currentModule, specificDiff, difficulty, localSettings.writingTopic]);
|
||||
|
||||
const onTopicChange = useCallback((writingTopic: string) => {
|
||||
updateLocalAndScheduleGlobal({ writingTopic });
|
||||
@@ -96,72 +116,181 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
|
||||
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isImageUploadOpen: isOpen }, false)}
|
||||
contentWrapperClassName={level ? `border border-ielts-writing` : ''}
|
||||
>
|
||||
<div className="flex flex-row gap-2 items-center px-2 pb-4">
|
||||
|
||||
<div className="flex flex-row p-2 gap-4">
|
||||
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
|
||||
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 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" && academic_url !== undefined)) && <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="flex flex-row gap-2 items-center px-2 pb-4">
|
||||
{type !== "academic" ?
|
||||
<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.writingTopic}
|
||||
<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 flex-col flex-grow gap-4 px-2">
|
||||
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
|
||||
Generate instructions based on the uploaded image.
|
||||
</span>
|
||||
<div className="flex w-full h-full justify-center items-center mt-2">
|
||||
<GenerateBtn
|
||||
genType="writing"
|
||||
module={"writing"}
|
||||
sectionId={focusedSection}
|
||||
generateFnc={generatePassage}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className="flex self-end h-16 mb-1">
|
||||
<GenerateBtn
|
||||
genType="writing"
|
||||
module={"writing"}
|
||||
sectionId={focusedSection}
|
||||
generateFnc={generatePassage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
|
||||
Reference in New Issue
Block a user