devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed approach on available type selection

Browse Source
This commit is contained in:
Joao Ramos
2024-07-07 16:59:49 +01:00
parent 0c5c024098
commit 494fc9bab6
1 changed files with 82 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/pages/(generation)/ListeningGeneration.tsx
View File

@@ -18,23 +18,42 @@ import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const MULTIPLE_CHOICE = { type: "multipleChoice", label: "Multiple Choice" };
const WRITE_BLANKS_QUESTIONS = {
type: "writeBlanksQuestions",
label: "Write the Blanks: Questions",
};
const WRITE_BLANKS_FILL = {
type: "writeBlanksFill",
label: "Write the Blanks: Fill",
};
const WRITE_BLANKS_FORM = {
type: "writeBlanksForm",
label: "Write the Blanks: Form",
};
const MULTIPLE_CHOICE_3 = {
type: "multipleChoice3Options",
label: "Multiple Choice",
};
const PartTab = ({
part,
types,
difficulty,
availableTypes,
index,
setPart,
updatePart,
}: {
part?: ListeningPart;
difficulty: Difficulty;
types: string[];
availableTypes: { type: string; label: string }[];
index: number;
setPart: (part?: ListeningPart) => void;
updatePart: Dispatch<SetStateAction<ListeningPart | undefined>>;
}) => {
const [topic, setTopic] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [types, setTypes] = useState<string[]>([]);
const generate = () => {
const url = new URLSearchParams();
@@ -126,8 +145,37 @@ const PartTab = ({
});
};
const toggleType = (type: string) =>
setTypes((prev) =>
prev.includes(type)
? [...prev.filter((x) => x !== type)]
: [...prev, type]
);
return (
<Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Exercises
</label>
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
{availableTypes.map((x) => (
<span
onClick={() => toggleType(x.type)}
key={x.type}
className={clsx(
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!types.includes(x.type)
? "bg-white border-mti-gray-platinum"
: "bg-ielts-listening/70 border-ielts-listening text-white"
)}
>
{x.label}
</span>
))}
</div>
</div>
<div className="flex gap-4 items-end">
<Input
type="text"
@@ -228,7 +276,6 @@ const ListeningGeneration = () => {
const [minTimer, setMinTimer] = useState(30);
const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<ListeningExam>();
const [types, setTypes] = useState<string[]>([]);
const [difficulty, setDifficulty] = useState<Difficulty>(
sample(DIFFICULTIES)!
);
@@ -243,25 +290,11 @@ const ListeningGeneration = () => {
setMinTimer(sum > 0 ? sum : 5);
}, [part1, part2, part3, part4]);
const availableTypes = [
{ type: "multipleChoice", label: "Multiple Choice" },
{ type: "writeBlanksQuestions", label: "Write the Blanks: Questions" },
{ type: "writeBlanksFill", label: "Write the Blanks: Fill" },
{ type: "writeBlanksForm", label: "Write the Blanks: Form" },
];
const router = useRouter();
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const toggleType = (type: string) =>
setTypes((prev) =>
prev.includes(type)
? [...prev.filter((x) => x !== type)]
: [...prev, type]
);
const submitExam = () => {
const parts = [part1, part2, part3, part4].filter((x) => !!x);
console.log({ parts });
@@ -289,7 +322,6 @@ const ListeningGeneration = () => {
setPart3(undefined);
setPart4(undefined);
setDifficulty(sample(DIFFICULTIES)!);
setTypes([]);
})
.catch((error) => {
console.log(error);
@@ -349,30 +381,6 @@ const ListeningGeneration = () => {
/>
</div>
</div>
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Exercises
</label>
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
{availableTypes.map((x) => (
<span
onClick={() => toggleType(x.type)}
key={x.type}
className={clsx(
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!types.includes(x.type)
? "bg-white border-mti-gray-platinum"
: "bg-ielts-listening/70 border-ielts-listening text-white"
)}
>
{x.label}
</span>
))}
</div>
</div>
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1">
<Tab
@@ -434,15 +442,41 @@ const ListeningGeneration = () => {
</Tab.List>
<Tab.Panels>
{[
{ part: part1, setPart: setPart1 },
{ part: part2, setPart: setPart2 },
{ part: part3, setPart: setPart3 },
{ part: part4, setPart: setPart4 },
].map(({ part, setPart }, index) => (
{
part: part1,
setPart: setPart1,
types: [
MULTIPLE_CHOICE,
WRITE_BLANKS_QUESTIONS,
WRITE_BLANKS_FILL,
WRITE_BLANKS_FORM,
],
},
{
part: part2,
setPart: setPart2,
types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS],
},
{
part: part3,
setPart: setPart3,
types: [MULTIPLE_CHOICE_3, WRITE_BLANKS_QUESTIONS],
},
{
part: part4,
setPart: setPart4,
types: [
MULTIPLE_CHOICE,
WRITE_BLANKS_QUESTIONS,
WRITE_BLANKS_FILL,
WRITE_BLANKS_FORM,
],
},
].map(({ part, setPart, types }, index) => (
<PartTab
part={part}
difficulty={difficulty}
types={types}
availableTypes={types}
index={index + 1}
key={index}
setPart={setPart}