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-09 23:42:16 +01:00
parent 494fc9bab6
commit 15f9fb320d
1 changed files with 37 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/pages/(generation)/ReadingGeneration.tsx
View File

@@ -26,16 +26,21 @@ import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const availableTypes = [
{ type: "fillBlanks", label: "Fill the Blanks" },
{ type: "trueFalse", label: "True or False" },
{ type: "writeBlanks", label: "Write the Blanks" },
{ type: "paragraphMatch", label: "Match Sentences" },
];
const PartTab = ({
part,
types,
difficulty,
index,
setPart,
updatePart,
}: {
part?: ReadingPart;
types: string[];
index: number;
difficulty: Difficulty;
setPart: (part?: ReadingPart) => void;
@@ -44,6 +49,14 @@ const PartTab = ({
}) => {
const [topic, setTopic] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [types, setTypes] = useState<string[]>([]);
const toggleType = (type: string) =>
setTypes((prev) =>
prev.includes(type)
? [...prev.filter((x) => x !== type)]
: [...prev, type]
);
const generate = () => {
const url = new URLSearchParams();
@@ -181,6 +194,28 @@ const PartTab = ({
return (
<Tab.Panel className="w-full bg-ielts-reading/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-reading/70 border-ielts-reading text-white"
)}
>
{x.label}
</span>
))}
</div>
</div>
<div className="flex gap-4 items-end">
<Input
type="text"
@@ -249,7 +284,6 @@ const ReadingGeneration = () => {
const [part2, setPart2] = useState<ReadingPart>();
const [part3, setPart3] = useState<ReadingPart>();
const [minTimer, setMinTimer] = useState(60);
const [types, setTypes] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<ReadingExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(
@@ -266,20 +300,6 @@ const ReadingGeneration = () => {
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const availableTypes = [
{ type: "fillBlanks", label: "Fill the Blanks" },
{ type: "trueFalse", label: "True or False" },
{ type: "writeBlanks", label: "Write the Blanks" },
{ type: "paragraphMatch", label: "Match Sentences" },
];
const toggleType = (type: string) =>
setTypes((prev) =>
prev.includes(type)
? [...prev.filter((x) => x !== type)]
: [...prev, type]
);
const loadExam = async (examId: string) => {
const exam = await getExamById("reading", examId.trim());
if (!exam) {
@@ -333,7 +353,6 @@ const ReadingGeneration = () => {
setPart3(undefined);
setDifficulty(sample(DIFFICULTIES)!);
setMinTimer(60);
setTypes([]);
})
.catch((error) => {
console.log(error);
@@ -376,30 +395,6 @@ const ReadingGeneration = () => {
/>
</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-reading/70 border-ielts-reading text-white"
)}
>
{x.label}
</span>
))}
</div>
</div>
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">
<Tab
@@ -453,7 +448,6 @@ const ReadingGeneration = () => {
].map(({ part, setPart }, index) => (
<PartTab
part={part}
types={types}
difficulty={difficulty}
index={index + 1}
key={index}