Merge branch 'feature/ExamGenRework' of https://bitbucket.org/ecropdev/ielts-ui into feature/ExamGenRework

src/components/Exercises/FillBlanks/index.tsx

@@ -1,5 +1,3 @@
-//import "@/utils/wdyr";
-
 import { FillBlanksExercise, FillBlanksMCOption } from "@/interfaces/exam";
 import clsx from "clsx";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -99,7 +97,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 			shuffleMaps,
 			isPractice
 		}));
-	// eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [id, answers, type, isPractice, shuffleMaps, calculateScore]);
 
 	const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);

src/components/Medium/StatGridItem.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { BsClock, BsXCircle } from "react-icons/bs";
 import clsx from "clsx";
 import { Stat, User } from "@/interfaces/user";
-import { Module, Step } from "@/interfaces";
+import { Grading, Module, Step } from "@/interfaces";
 import ai_usage from "@/utils/ai.detection";
-import { calculateBandScore } from "@/utils/score";
+import { calculateBandScore, getGradingLabel } from "@/utils/score";
 import moment from "moment";
 import { Assignment } from "@/interfaces/results";
 import { uuidv4 } from "@firebase/util";
@@ -15,6 +15,7 @@ import { getExamById } from "@/utils/exams";
 import { Exam, UserSolution } from "@/interfaces/exam";
 import ModuleBadge from "../ModuleBadge";
 import useExamStore from "@/stores/exam";
+import { findBy } from "@/utils";
 
 const formatTimestamp = (timestamp: string | number) => {
 	const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
@@ -70,6 +71,7 @@ const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number
 interface StatsGridItemProps {
 	width?: string | undefined;
 	height?: string | undefined;
+	gradingSystems: Grading[]
 	examNumber?: number | undefined;
 	stats: Stat[];
 	timestamp: string | number;
@@ -88,6 +90,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	timestamp,
 	user,
 	assignments,
+	gradingSystems,
 	users,
 	training,
 	selectedTrainingExams,
@@ -182,9 +185,34 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 		return true;
 	};
 
+	const levelAverage = () =>
+		aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length
+
+	const renderLevelScore = () => {
+		const defaultLevelScore = levelAverage().toFixed(1)
+		if (!stats.every(s => s.module === "level")) return defaultLevelScore
+		if (gradingSystems.length === 0) return defaultLevelScore
+
+		const score = {
+			correct: stats.reduce((acc, curr) => acc + curr.score.correct, 0),
+			total: stats.reduce((acc, curr) => acc + curr.score.total, 0)
+		}
+
+		const level: number = calculateBandScore(score.correct, score.total, "level", user.focus);
+
+		if (!!assignment) {
+			const gradingSystem = findBy(gradingSystems, 'entity', assignment.entity)
+			if (!gradingSystem) return defaultLevelScore
+
+			return getGradingLabel(level, gradingSystem.steps)
+		}
+
+		return getGradingLabel(level, gradingSystems[0].steps)
+	}
+
 	const content = (
 		<>
-			<div className="w-full flex justify-between -md:items-center 2xl:items-center">
+			<div className="w-full flex justify-between">
 				<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
 					<span className="font-medium">{formatTimestamp(timestamp)}</span>
 					<div className="flex items-center gap-2">
@@ -202,12 +230,10 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 				</div>
 				<div className="flex flex-col gap-2">
 					<div className="flex flex-row gap-2">
-						{!!assignment && (assignment.released || assignment.released === undefined) && (
+						{((!!assignment && (assignment.released || assignment.released === undefined)) || !assignment) && (
 							<span className={textColor}>
-								Level{" "}
-								{(
-									aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length
-								).toFixed(1)}
+								Level{' '}
+								{renderLevelScore()}
 							</span>
 						)}
 						{shouldRenderPDFIcon() && renderPdfIcon(session, textColor, textColor)}