453 lines
18 KiB
TypeScript
453 lines
18 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import { useMemo, useState } from "react";
|
|
import { Module } from "@/interfaces";
|
|
import clsx from "clsx";
|
|
import { Stat, User } from "@/interfaces/user";
|
|
import {
|
|
BsArrowRepeat,
|
|
BsBook,
|
|
BsCheck,
|
|
BsCheckCircle,
|
|
BsClipboard,
|
|
BsHeadphones,
|
|
BsMegaphone,
|
|
BsPen,
|
|
BsXCircle,
|
|
} from "react-icons/bs";
|
|
import Button from "@/components/Low/Button";
|
|
import { sortByModuleName } from "@/utils/moduleUtils";
|
|
import { capitalize } from "lodash";
|
|
import ProfileSummary from "@/components/ProfileSummary";
|
|
import { Variant } from "@/interfaces/exam";
|
|
import useSessions, { Session } from "@/hooks/useSessions";
|
|
import SessionCard from "@/components/Medium/SessionCard";
|
|
import useExamStore from "@/stores/exam";
|
|
import useStats from "../hooks/useStats";
|
|
|
|
interface Props {
|
|
user: User;
|
|
page: "exercises" | "exams";
|
|
onStart: (
|
|
modules: Module[],
|
|
avoidRepeated: boolean,
|
|
variant: Variant
|
|
) => void;
|
|
}
|
|
|
|
export default function Selection({ user, page, onStart }: Props) {
|
|
const [selectedModules, setSelectedModules] = useState<Module[]>([]);
|
|
const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
|
|
const [variant, setVariant] = useState<Variant>("full");
|
|
|
|
const {
|
|
data: {
|
|
allStats = [],
|
|
moduleCount: { reading, listening, writing, speaking, level } = {
|
|
reading: 0,
|
|
listening: 0,
|
|
writing: 0,
|
|
speaking: 0,
|
|
level: 0,
|
|
},
|
|
},
|
|
} = useStats<{
|
|
allStats: Stat[];
|
|
moduleCount: Record<Module, number>;
|
|
}>(user?.id, !user?.id, "byModule");
|
|
const { sessions, isLoading, reload } = useSessions(user.id);
|
|
|
|
const dispatch = useExamStore((state) => state.dispatch);
|
|
|
|
const toggleModule = (module: Module) => {
|
|
const modules = selectedModules.filter((x) => x !== module);
|
|
setSelectedModules((prev) =>
|
|
prev.includes(module) ? modules : [...modules, module]
|
|
);
|
|
};
|
|
|
|
const isCompleteExam = useMemo(
|
|
() =>
|
|
["reading", "listening", "writing", "speaking"].every((m) =>
|
|
selectedModules.includes(m as Module)
|
|
),
|
|
[selectedModules]
|
|
);
|
|
|
|
const loadSession = async (session: Session) => {
|
|
dispatch({ type: "SET_SESSION", payload: { session } });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
|
|
{user && (
|
|
<ProfileSummary
|
|
user={user}
|
|
items={[
|
|
{
|
|
icon: (
|
|
<BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
|
|
),
|
|
label: "Reading",
|
|
value: reading || 0,
|
|
tooltip: "The amount of reading exams performed.",
|
|
},
|
|
{
|
|
icon: (
|
|
<BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
|
|
),
|
|
label: "Listening",
|
|
value: listening || 0,
|
|
tooltip: "The amount of listening exams performed.",
|
|
},
|
|
{
|
|
icon: (
|
|
<BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
|
|
),
|
|
label: "Writing",
|
|
value: writing || 0,
|
|
tooltip: "The amount of writing exams performed.",
|
|
},
|
|
{
|
|
icon: (
|
|
<BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
|
|
),
|
|
label: "Speaking",
|
|
value: speaking || 0,
|
|
tooltip: "The amount of speaking exams performed.",
|
|
},
|
|
{
|
|
icon: (
|
|
<BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
|
|
),
|
|
label: "Level",
|
|
value: level || 0,
|
|
tooltip: "The amount of level exams performed.",
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
|
|
<section className="flex flex-col gap-3">
|
|
<span className="text-lg font-bold">About {capitalize(page)}</span>
|
|
<span className="text-mti-gray-taupe">
|
|
{page === "exercises" && (
|
|
<>
|
|
In the realm of language acquisition, practice makes perfect,
|
|
and our exercises are the key to unlocking your full potential.
|
|
Dive into a world of interactive and engaging exercises that
|
|
cater to diverse learning styles. From grammar drills that build
|
|
a strong foundation to vocabulary challenges that broaden your
|
|
lexicon, our exercises are carefully designed to make learning
|
|
English both enjoyable and effective. Whether you're
|
|
looking to reinforce specific skills or embark on a holistic
|
|
language journey, our exercises are your companions in the
|
|
pursuit of excellence. Embrace the joy of learning as you
|
|
navigate through a variety of activities that cater to every
|
|
facet of language acquisition. Your linguistic adventure starts
|
|
here!
|
|
</>
|
|
)}
|
|
{page === "exams" && (
|
|
<>
|
|
Welcome to the heart of success on your English language
|
|
journey! Our exams are crafted with precision to assess and
|
|
enhance your language skills. Each test is a passport to your
|
|
linguistic prowess, designed to challenge and elevate your
|
|
abilities. Whether you're a beginner or a seasoned learner,
|
|
our exams cater to all levels, providing a comprehensive
|
|
evaluation of your reading, writing, speaking, and listening
|
|
skills. Prepare to embark on a journey of self-discovery and
|
|
language mastery as you navigate through our thoughtfully
|
|
curated exams. Your success is not just a destination; it's
|
|
a testament to your dedication and our commitment to empowering
|
|
you with the English language.
|
|
</>
|
|
)}
|
|
</span>
|
|
</section>
|
|
|
|
{sessions.length > 0 && (
|
|
<section className="flex flex-col gap-3 md:gap-3">
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
onClick={reload}
|
|
className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
|
|
>
|
|
<span className="text-mti-black text-lg font-bold">
|
|
Unfinished Sessions
|
|
</span>
|
|
<BsArrowRepeat
|
|
className={clsx("text-xl", isLoading && "animate-spin")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span className="text-mti-gray-taupe flex gap-8 overflow-x-auto pb-2">
|
|
{sessions.map((session) => (
|
|
<SessionCard
|
|
session={session}
|
|
key={session.sessionId}
|
|
reload={reload}
|
|
loadSession={loadSession}
|
|
/>
|
|
))}
|
|
</span>
|
|
</section>
|
|
)}
|
|
|
|
<section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
|
|
<div
|
|
onClick={
|
|
!selectedModules.includes("level")
|
|
? () => toggleModule("reading")
|
|
: undefined
|
|
}
|
|
className={clsx(
|
|
"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
|
|
selectedModules.includes("reading")
|
|
? "border-mti-purple-light"
|
|
: "border-mti-gray-platinum"
|
|
)}
|
|
>
|
|
<div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
|
|
<BsBook className="h-7 w-7 text-white" />
|
|
</div>
|
|
<span className="font-semibold">Reading:</span>
|
|
<p className="text-left text-xs">
|
|
Expand your vocabulary, improve your reading comprehension and
|
|
improve your ability to interpret texts in English.
|
|
</p>
|
|
{!selectedModules.includes("reading") &&
|
|
!selectedModules.includes("level") && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{selectedModules.includes("reading") && (
|
|
<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
|
|
)}
|
|
{selectedModules.includes("level") && (
|
|
<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
|
|
)}
|
|
</div>
|
|
<div
|
|
onClick={
|
|
!selectedModules.includes("level")
|
|
? () => toggleModule("listening")
|
|
: undefined
|
|
}
|
|
className={clsx(
|
|
"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
|
|
selectedModules.includes("listening")
|
|
? "border-mti-purple-light"
|
|
: "border-mti-gray-platinum"
|
|
)}
|
|
>
|
|
<div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
|
|
<BsHeadphones className="h-7 w-7 text-white" />
|
|
</div>
|
|
<span className="font-semibold">Listening:</span>
|
|
<p className="text-left text-xs">
|
|
Improve your ability to follow conversations in English and your
|
|
ability to understand different accents and intonations.
|
|
</p>
|
|
{!selectedModules.includes("listening") &&
|
|
!selectedModules.includes("level") && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{selectedModules.includes("listening") && (
|
|
<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
|
|
)}
|
|
{selectedModules.includes("level") && (
|
|
<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
|
|
)}
|
|
</div>
|
|
<div
|
|
onClick={
|
|
!selectedModules.includes("level")
|
|
? () => toggleModule("writing")
|
|
: undefined
|
|
}
|
|
className={clsx(
|
|
"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
|
|
selectedModules.includes("writing")
|
|
? "border-mti-purple-light"
|
|
: "border-mti-gray-platinum"
|
|
)}
|
|
>
|
|
<div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
|
|
<BsPen className="h-7 w-7 text-white" />
|
|
</div>
|
|
<span className="font-semibold">Writing:</span>
|
|
<p className="text-left text-xs">
|
|
Allow you to practice writing in a variety of formats, from simple
|
|
paragraphs to complex essays.
|
|
</p>
|
|
{!selectedModules.includes("writing") &&
|
|
!selectedModules.includes("level") && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{selectedModules.includes("writing") && (
|
|
<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
|
|
)}
|
|
{selectedModules.includes("level") && (
|
|
<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
|
|
)}
|
|
</div>
|
|
<div
|
|
onClick={
|
|
!selectedModules.includes("level")
|
|
? () => toggleModule("speaking")
|
|
: undefined
|
|
}
|
|
className={clsx(
|
|
"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
|
|
selectedModules.includes("speaking")
|
|
? "border-mti-purple-light"
|
|
: "border-mti-gray-platinum"
|
|
)}
|
|
>
|
|
<div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
|
|
<BsMegaphone className="h-7 w-7 text-white" />
|
|
</div>
|
|
<span className="font-semibold">Speaking:</span>
|
|
<p className="text-left text-xs">
|
|
You'll have access to interactive dialogs, pronunciation
|
|
exercises and speech recordings.
|
|
</p>
|
|
{!selectedModules.includes("speaking") &&
|
|
!selectedModules.includes("level") && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{selectedModules.includes("speaking") && (
|
|
<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
|
|
)}
|
|
{selectedModules.includes("level") && (
|
|
<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
|
|
)}
|
|
</div>
|
|
<div
|
|
onClick={
|
|
selectedModules.length === 0 || selectedModules.includes("level")
|
|
? () => toggleModule("level")
|
|
: undefined
|
|
}
|
|
className={clsx(
|
|
"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
|
|
selectedModules.includes("level")
|
|
? "border-mti-purple-light"
|
|
: "border-mti-gray-platinum"
|
|
)}
|
|
>
|
|
<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
|
|
<BsClipboard className="h-7 w-7 text-white" />
|
|
</div>
|
|
<span className="font-semibold">Level:</span>
|
|
<p className="text-left text-xs">
|
|
You'll be able to test your english level with multiple
|
|
choice questions.
|
|
</p>
|
|
{!selectedModules.includes("level") &&
|
|
selectedModules.length === 0 && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{selectedModules.includes("level") && (
|
|
<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
|
|
)}
|
|
{!selectedModules.includes("level") &&
|
|
selectedModules.length > 0 && (
|
|
<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
|
|
)}
|
|
</div>
|
|
</section>
|
|
<div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
|
|
<div className="flex w-full flex-col items-center gap-3">
|
|
<div
|
|
className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
|
|
onClick={() => setAvoidRepeatedExams((prev) => !prev)}
|
|
>
|
|
<input type="checkbox" className="hidden" />
|
|
<div
|
|
className={clsx(
|
|
"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
|
|
"transition duration-300 ease-in-out",
|
|
avoidRepeatedExams && "!bg-mti-purple-light "
|
|
)}
|
|
>
|
|
<BsCheck color="white" className="h-full w-full" />
|
|
</div>
|
|
<span
|
|
className="tooltip"
|
|
data-tip="If possible, the platform will choose exams not yet done."
|
|
>
|
|
Avoid Repeated Questions
|
|
</span>
|
|
</div>
|
|
<div
|
|
className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
|
|
onClick={() =>
|
|
setVariant((prev) => (prev === "full" ? "partial" : "full"))
|
|
}
|
|
>
|
|
<input type="checkbox" className="hidden" />
|
|
<div
|
|
className={clsx(
|
|
"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
|
|
"transition duration-300 ease-in-out",
|
|
variant === "full" && "!bg-mti-purple-light "
|
|
)}
|
|
>
|
|
<BsCheck color="white" className="h-full w-full" />
|
|
</div>
|
|
<span>Full length exams</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="tooltip w-full"
|
|
data-tip={`Your screen size is too small to do ${page}`}
|
|
>
|
|
<Button
|
|
color="purple"
|
|
className="w-full max-w-xs px-12 md:hidden"
|
|
disabled
|
|
>
|
|
Start Exam
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-4 w-full">
|
|
<Button
|
|
color="green"
|
|
variant={isCompleteExam ? "solid" : "outline"}
|
|
onClick={() =>
|
|
isCompleteExam
|
|
? setSelectedModules([])
|
|
: setSelectedModules([
|
|
"reading",
|
|
"listening",
|
|
"writing",
|
|
"speaking",
|
|
])
|
|
}
|
|
className="-md:hidden w-full max-w-xs px-12 md:self-end"
|
|
>
|
|
Complete Exam
|
|
</Button>
|
|
<Button
|
|
onClick={() =>
|
|
onStart(
|
|
selectedModules.sort(sortByModuleName),
|
|
avoidRepeatedExams,
|
|
variant
|
|
)
|
|
}
|
|
color="purple"
|
|
className="-md:hidden w-full max-w-xs px-12 md:self-end"
|
|
disabled={selectedModules.length === 0}
|
|
>
|
|
Start Exam
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|