ENCOA-311
This commit is contained in:
Carlos-Mesquita
@@ -7,11 +7,15 @@ import Input from "@/components/Low/Input";
|
||||
import GenerateBtn from "../Shared/GenerateBtn";
|
||||
import clsx from "clsx";
|
||||
import { FaFemale, FaMale } from "react-icons/fa";
|
||||
import { InteractiveSpeakingExercise, LevelPart, SpeakingExercise } from "@/interfaces/exam";
|
||||
import { Difficulty, InteractiveSpeakingExercise, LevelPart, SpeakingExercise } from "@/interfaces/exam";
|
||||
import { toast } from "react-toastify";
|
||||
import { generateVideos } from "../Shared/generateVideos";
|
||||
import { Module } from "@/interfaces";
|
||||
import useCanGenerate from "./useCanGenerate";
|
||||
import ReactSelect, { components } from "react-select";
|
||||
import { capitalize } from "lodash";
|
||||
import Option from "@/interfaces/option";
|
||||
import { MdSignalCellularAlt } from "react-icons/md";
|
||||
|
||||
export interface Avatar {
|
||||
name: string;
|
||||
@@ -36,9 +40,23 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
|
||||
|
||||
const [selectedAvatar, setSelectedAvatar] = useState<Avatar | null>(null);
|
||||
|
||||
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 generateScript = useCallback((scriptSectionId: number) => {
|
||||
const queryParams: {
|
||||
difficulty: string;
|
||||
difficulty: string[];
|
||||
first_topic?: string;
|
||||
second_topic?: string;
|
||||
topic?: string;
|
||||
@@ -70,19 +88,22 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
|
||||
return [{
|
||||
prompts: data.questions,
|
||||
first_topic: data.first_topic,
|
||||
second_topic: data.second_topic
|
||||
second_topic: data.second_topic,
|
||||
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
|
||||
}];
|
||||
case 2:
|
||||
return [{
|
||||
topic: data.topic,
|
||||
question: data.question,
|
||||
prompts: data.prompts,
|
||||
suffix: data.suffix
|
||||
suffix: data.suffix,
|
||||
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
|
||||
}];
|
||||
case 3:
|
||||
return [{
|
||||
title: data.topic,
|
||||
prompts: data.questions
|
||||
prompts: data.questions,
|
||||
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
|
||||
}];
|
||||
default:
|
||||
return [data];
|
||||
@@ -92,7 +113,7 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
|
||||
level
|
||||
);
|
||||
|
||||
}, [difficulty, level, section.sectionId, focusedSection, id, sectionId, localSettings.speakingTopic, localSettings.speakingSecondTopic]);
|
||||
}, [difficulty, level, section.sectionId, focusedSection, id, sectionId, localSettings.speakingTopic, localSettings.speakingSecondTopic, specificDiff]);
|
||||
|
||||
const onTopicChange = useCallback((speakingTopic: string) => {
|
||||
updateLocalAndScheduleGlobal({ speakingTopic });
|
||||
@@ -192,7 +213,7 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
|
||||
contentWrapperClassName={level ? `border border-ielts-speaking` : ''}
|
||||
>
|
||||
|
||||
<div className={clsx("gap-2 px-2 pb-4", secId === 1 ? "flex flex-col w-full" : "flex flex-row items-center")}>
|
||||
<div className="gap-4 px-2 pb-4 flex flex-col w-full">
|
||||
<div className="flex flex-col flex-grow gap-4 px-2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">{`${secId === 1 ? "First Topic" : "Topic"}`} (Optional)</label>
|
||||
<Input
|
||||
@@ -201,8 +222,9 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
|
||||
placeholder="Topic"
|
||||
name="category"
|
||||
onChange={onTopicChange}
|
||||
roundness="full"
|
||||
roundness="xl"
|
||||
value={localSettings.speakingTopic}
|
||||
thin
|
||||
/>
|
||||
</div>
|
||||
{secId === 1 &&
|
||||
@@ -214,12 +236,69 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
|
||||
placeholder="Topic"
|
||||
name="category"
|
||||
onChange={onSecondTopicChange}
|
||||
roundness="full"
|
||||
roundness="xl"
|
||||
value={localSettings.speakingSecondTopic}
|
||||
thin
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className={clsx("flex h-16 mb-1", secId === 1 ? "justify-center mt-4" : "self-end")}>
|
||||
<div className="flex flex-col gap-2 px-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 h-16 mb-1 justify-center mt-4">
|
||||
<GenerateBtn
|
||||
module="speaking"
|
||||
genType={`${id ? `${id}-` : ''}speakingScript`}
|
||||
|
||||
Reference in New Issue
Block a user