311 lines
15 KiB
TypeScript
311 lines
15 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import {useState} from "react";
|
|
import {Module} from "@/interfaces";
|
|
import clsx from "clsx";
|
|
import {User} from "@/interfaces/user";
|
|
import ProgressBar from "@/components/Low/ProgressBar";
|
|
import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
|
|
import {totalExamsByModule} from "@/utils/stats";
|
|
import useStats from "@/hooks/useStats";
|
|
import Button from "@/components/Low/Button";
|
|
import {calculateAverageLevel} from "@/utils/score";
|
|
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/examStore";
|
|
import moment from "moment";
|
|
|
|
interface Props {
|
|
user: User;
|
|
page: "exercises" | "exams";
|
|
onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
|
|
disableSelection?: boolean;
|
|
}
|
|
|
|
export default function Selection({user, page, onStart, disableSelection = false}: Props) {
|
|
const [selectedModules, setSelectedModules] = useState<Module[]>([]);
|
|
const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
|
|
const [variant, setVariant] = useState<Variant>("full");
|
|
|
|
const {stats} = useStats(user?.id);
|
|
const {sessions, isLoading, reload} = useSessions(user.id);
|
|
|
|
const state = useExamStore((state) => state);
|
|
|
|
const toggleModule = (module: Module) => {
|
|
const modules = selectedModules.filter((x) => x !== module);
|
|
setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
|
|
};
|
|
|
|
const loadSession = async (session: Session) => {
|
|
state.setSelectedModules(session.selectedModules);
|
|
state.setExam(session.exam);
|
|
state.setExams(session.exams);
|
|
state.setSessionId(session.sessionId);
|
|
state.setAssignment(session.assignment);
|
|
state.setExerciseIndex(session.exerciseIndex);
|
|
state.setPartIndex(session.partIndex);
|
|
state.setModuleIndex(session.moduleIndex);
|
|
state.setTimeSpent(session.timeSpent);
|
|
state.setUserSolutions(session.userSolutions);
|
|
state.setShowSolutions(false);
|
|
state.setQuestionIndex(session.questionIndex);
|
|
};
|
|
|
|
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: totalExamsByModule(stats, "reading"),
|
|
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: totalExamsByModule(stats, "listening"),
|
|
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: totalExamsByModule(stats, "writing"),
|
|
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: totalExamsByModule(stats, "speaking"),
|
|
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: totalExamsByModule(stats, "level"),
|
|
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 scrollbar-hide flex gap-8 overflow-x-scroll">
|
|
{sessions
|
|
.sort((a, b) => moment(b.date).diff(moment(a.date)))
|
|
.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={!disableSelection && !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") || disableSelection ? "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") && !disableSelection && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{(selectedModules.includes("reading") || disableSelection) && (
|
|
<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={!disableSelection && !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") || disableSelection ? "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") && !disableSelection && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{(selectedModules.includes("listening") || disableSelection) && (
|
|
<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={!disableSelection && !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") || disableSelection ? "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") && !disableSelection && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{(selectedModules.includes("writing") || disableSelection) && (
|
|
<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={!disableSelection && !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") || disableSelection ? "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") && !disableSelection && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{(selectedModules.includes("speaking") || disableSelection) && (
|
|
<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>
|
|
{!disableSelection && (
|
|
<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") || disableSelection ? "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 && !disableSelection && (
|
|
<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
|
|
)}
|
|
{(selectedModules.includes("level") || disableSelection) && (
|
|
<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>
|
|
<Button
|
|
onClick={() =>
|
|
onStart(
|
|
!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
|
|
avoidRepeatedExams,
|
|
variant,
|
|
)
|
|
}
|
|
color="purple"
|
|
className="-md:hidden w-full max-w-xs px-12 md:self-end"
|
|
disabled={selectedModules.length === 0 && !disableSelection}>
|
|
Start Exam
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|