Solved merge conflicts

package.json

@@ -96,6 +96,7 @@
   },
   "devDependencies": {
     "@simbathesailor/use-what-changed": "^2.0.0",
+    "@types/": "welldone-software/why-did-you-render",
     "@types/blob-stream": "^0.1.33",
     "@types/formidable": "^3.4.0",
     "@types/howler": "^2.2.11",
@@ -107,7 +108,6 @@
     "@types/react-datepicker": "^4.15.1",
     "@types/uuid": "^9.0.1",
     "@types/wavesurfer.js": "^6.0.6",
-    "@welldone-software/why-did-you-render": "^8.0.3",
     "@wixc3/react-board": "^2.2.0",
     "autoprefixer": "^10.4.13",
     "husky": "^8.0.3",

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";

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)}

src/exams/Finish.tsx

@@ -18,10 +18,7 @@ import {
 	BsHeadphones,
 	BsMegaphone,
 	BsPen,
-	BsShareFill,
 } from "react-icons/bs";
-import { LevelScore } from "@/constants/ielts";
-import { getLevelScore } from "@/utils/score";
 import { capitalize } from "lodash";
 import Modal from "@/components/Modal";
 import { UserSolution } from "@/interfaces/exam";
@@ -67,6 +64,7 @@ export default function Finish({ user, practiceScores, scores, modules, informat
 	const router = useRouter()
 
 	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
+	useEffect(() => setSelectedPracticeScore(practiceScores.find((x) => x.module === selectedModule)!), [practiceScores, selectedModule]);
 
 	const moduleColors: { [key in Module]: { progress: string; inner: string } } = {
 		reading: {
@@ -289,7 +287,7 @@ export default function Finish({ user, practiceScores, scores, modules, informat
 											<div className="bg-mti-green mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
 											<div className="flex flex-col">
 												<span className="text-mti-green">
-													{selectedPracticeScore.correct} / {selectedScore.total}
+													{selectedPracticeScore.correct} / {selectedPracticeScore.total}
 												</span>
 												<span className="text-lg whitespace-nowrap">Practice Questions</span>
 											</div>

src/pages/exam.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-//import "@/utils/wdyr";
 
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";

src/pages/record.tsx

@@ -26,7 +26,7 @@ import { mapBy, redirect, serialize } from "@/utils";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { checkAccess } from "@/utils/permissions";
 import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
-import { getGradingSystemByEntity } from "@/utils/grading.be";
+import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
 import { Grading } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
 import CardList from "@/components/High/CardList";
@@ -43,9 +43,10 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const entities = await getEntitiesWithRoles(checkAccess(user, ["admin", "developer"]) ? undefined : entityIDs)
 	const users = await (checkAccess(user, ["admin", "developer"]) ? getUsers() : getEntitiesUsers(mapBy(entities, 'id')))
 	const assignments = await (checkAccess(user, ["admin", "developer"]) ? getAssignments() : getEntitiesAssignments(mapBy(entities, 'id')))
+	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
 
 	return {
-		props: serialize({ user, users, assignments, entities }),
+		props: serialize({ user, users, assignments, entities, gradingSystems }),
 	};
 }, sessionOptions);
 
@@ -56,11 +57,12 @@ interface Props {
 	users: User[];
 	assignments: Assignment[];
 	entities: EntityWithRoles[]
+	gradingSystems: Grading[]
 }
 
 const MAX_TRAINING_EXAMS = 10;
 
-export default function History({ user, users, assignments, entities }: Props) {
+export default function History({ user, users, assignments, entities, gradingSystems }: Props) {
 	const router = useRouter();
 	const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
 		state.selectedUser,
@@ -158,6 +160,7 @@ export default function History({ user, users, assignments, entities }: Props) {
 			<StatsGridItem
 				key={uuidv4()}
 				stats={dateStats}
+				gradingSystems={gradingSystems}
 				timestamp={timestamp}
 				user={user}
 				assignments={assignments}

src/pages/training/[id]/index.tsx

@@ -172,6 +172,7 @@ const TrainingContent: React.FC<{user: User}> = ({user}) => {
 									{trainingContent.exams.map((exam, examIndex) => (
 										<StatsGridItem
 											key={`exam-${examIndex}`}
+											gradingSystems={[]}
 											width="380px"
 											height="150px"
 											examNumber={examIndex + 1}

src/utils/stats.ts

@@ -138,6 +138,7 @@ export const convertToUserSolutions = (stats: Stat[]): UserSolution[] => {
 		solutions: stat.solutions,
 		type: stat.type,
 		module: stat.module,
-		shuffleMaps: stat.shuffleMaps
+		shuffleMaps: stat.shuffleMaps,
+		isPractice: stat.isPractice
 	}));
 };

src/utils/wdyr.ts

@@ -1,13 +0,0 @@
-/// <reference types="@welldone-software/why-did-you-render" />
-
-import React from "react";
-
-if (process.env.NODE_ENV === "development") {
-    const whyDidYouRender = require("@welldone-software/why-did-you-render");
-    whyDidYouRender(React, {
-        trackAllPureComponents: true,
-        trackHooks: true,
-        logOwnerReasons: true,
-        collapseGroups: true,
-    });
-}

tsconfig.json

@@ -21,9 +21,15 @@
 		"baseUrl": ".",
 		"downlevelIteration": true,
 		"paths": {
-      "@/*": ["./src/*"],
-      "@/training/*": ["./src/components/TrainingContent/*"],
-      "@/editor/*": ["./src/components/ExamEditor/*"]
+			"@/*": [
+				"./src/*"
+			],
+			"@/training/*": [
+				"./src/components/TrainingContent/*"
+			],
+			"@/editor/*": [
+				"./src/components/ExamEditor/*"
+			]
 		}
 	},
 	"include": [