Implemented the speaking exercise;

Cleaned up a bit of the code;
This commit is contained in:
Tiago Ribeiro
2023-06-15 15:39:40 +01:00
parent f5ec910010
commit bc7eaea911
5 changed files with 208 additions and 68 deletions

View File

@@ -1,19 +1,14 @@
/* eslint-disable @next/next/no-img-element */
import Icon from "@mdi/react";
import {mdiAccountVoice, mdiArrowLeft, mdiArrowRight, mdiBookOpen, mdiHeadphones, mdiPen} from "@mdi/js";
import {useEffect, useState} from "react";
import {useState} from "react";
import {Module} from "@/interfaces";
import clsx from "clsx";
import {useRouter} from "next/router";
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import ProfileLevel from "@/components/ProfileLevel";
import {User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import ProgressBar from "@/components/Low/ProgressBar";
import {BsBook, BsCheckCircle, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
import {averageScore, formatModuleTotalStats, totalExams, totalExamsByModule} from "@/utils/stats";
import {BsBook, BsCheckCircle, BsHeadphones, BsMegaphone, BsPen} 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";
interface Props {
user: User;
@@ -24,10 +19,6 @@ export default function Selection({user, onStart}: Props) {
const [selectedModules, setSelectedModules] = useState<Module[]>([]);
const {stats} = useStats(user?.id);
const calculateAverageLevel = () => {
return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4;
};
const toggleModule = (module: Module) => {
const modules = selectedModules.filter((x) => x !== module);
setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
@@ -45,13 +36,18 @@ export default function Selection({user, onStart}: Props) {
<h6 className="font-normal text-base text-mti-gray-taupe capitalize">{user.type}</h6>
</div>
<ProgressBar
label={`Level ${calculateAverageLevel().toFixed(1)}`}
percentage={Math.round((calculateAverageLevel() * 100) / 9)}
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={100}
color="blue"
className="max-w-xs w-32 self-end h-10"
/>
</div>
<ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-lg" />
<ProgressBar
label=""
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
color="blue"
className="w-full h-3 drop-shadow-lg"
/>
<div className="flex justify-between w-full mt-8">
<div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">