Redesigned the Record page along with solving some bugs on the FillBlanks
This commit is contained in:
Tiago Ribeiro
239
src/pages/record.tsx
Normal file
239
src/pages/record.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import Head from "next/head";
|
||||
import SingleDatasetChart from "@/components/UserResultChart";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import ProfileCard from "@/components/ProfileCard";
|
||||
import {withIronSessionSsr} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {Stat, User} from "@/interfaces/user";
|
||||
import {useEffect, useState} from "react";
|
||||
import useStats from "@/hooks/useStats";
|
||||
import {averageScore, convertToUserSolutions, formatModuleTotalStats, groupByDate, groupBySession, totalExams} from "@/utils/stats";
|
||||
import {Divider} from "primereact/divider";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import {Timeline} from "primereact/timeline";
|
||||
import moment from "moment";
|
||||
import {AutoComplete} from "primereact/autocomplete";
|
||||
import useUsers from "@/hooks/useUsers";
|
||||
import {Dropdown} from "primereact/dropdown";
|
||||
import useExamStore from "@/stores/examStore";
|
||||
import {Exam, ListeningExam, ReadingExam, SpeakingExam, WritingExam} from "@/interfaces/exam";
|
||||
import {Module} from "@/interfaces";
|
||||
import axios from "axios";
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
import {useRouter} from "next/router";
|
||||
import Icon from "@mdi/react";
|
||||
import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
|
||||
import {uniqBy} from "lodash";
|
||||
import {getExamById} from "@/utils/exams";
|
||||
import {sortByModule} from "@/utils/moduleUtils";
|
||||
import Layout from "@/components/High/Layout";
|
||||
import clsx from "clsx";
|
||||
import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
|
||||
import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
const user = req.session.user;
|
||||
|
||||
if (!user) {
|
||||
res.setHeader("location", "/login");
|
||||
res.statusCode = 302;
|
||||
res.end();
|
||||
return {
|
||||
props: {
|
||||
user: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
props: {user: req.session.user},
|
||||
};
|
||||
}, sessionOptions);
|
||||
|
||||
export default function History({user}: {user: User}) {
|
||||
const [selectedUser, setSelectedUser] = useState<User>(user);
|
||||
const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
|
||||
|
||||
const {users, isLoading: isUsersLoading} = useUsers();
|
||||
const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
|
||||
|
||||
const setExams = useExamStore((state) => state.setExams);
|
||||
const setShowSolutions = useExamStore((state) => state.setShowSolutions);
|
||||
const setUserSolutions = useExamStore((state) => state.setUserSolutions);
|
||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (stats && !isStatsLoading) {
|
||||
setGroupedStats(groupByDate(stats));
|
||||
}
|
||||
}, [stats, isStatsLoading]);
|
||||
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
const date = moment(parseInt(timestamp));
|
||||
const formatter = "YYYY/MM/DD - HH:mm";
|
||||
|
||||
return date.format(formatter);
|
||||
};
|
||||
|
||||
const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
|
||||
const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
|
||||
reading: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
listening: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
writing: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
speaking: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
};
|
||||
|
||||
stats.forEach((x) => {
|
||||
scores[x.module!] = {
|
||||
total: scores[x.module!].total + x.score.total,
|
||||
correct: scores[x.module!].correct + x.score.correct,
|
||||
missing: scores[x.module!].missing + x.score.missing,
|
||||
};
|
||||
});
|
||||
|
||||
return Object.keys(scores)
|
||||
.filter((x) => scores[x as Module].total > 0)
|
||||
.map((x) => ({module: x as Module, ...scores[x as Module]}));
|
||||
};
|
||||
|
||||
const customContent = (timestamp: string) => {
|
||||
if (!groupedStats) return <></>;
|
||||
|
||||
const dateStats = groupedStats[timestamp];
|
||||
const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
|
||||
const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
|
||||
const aggregatedScores = aggregateScoresByModule(dateStats).filter((x) => x.total > 0);
|
||||
|
||||
const aggregatedLevels = aggregatedScores.map((x) => ({
|
||||
module: x.module,
|
||||
level: calculateBandScore(x.correct, x.total, x.module, user.focus),
|
||||
}));
|
||||
|
||||
const selectExam = () => {
|
||||
const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
|
||||
|
||||
Promise.all(examPromises).then((exams) => {
|
||||
if (exams.every((x) => !!x)) {
|
||||
setUserSolutions(convertToUserSolutions(dateStats));
|
||||
setShowSolutions(true);
|
||||
setExams(exams.map((x) => x!).sort(sortByModule));
|
||||
setSelectedModules(
|
||||
exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
);
|
||||
router.push("/exam");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={timestamp}
|
||||
className={clsx(
|
||||
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300",
|
||||
correct / total >= 0.7 && "hover:border-mti-green",
|
||||
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-blue",
|
||||
correct / total < 0.3 && "hover:border-mti-orange",
|
||||
)}
|
||||
onClick={selectExam}
|
||||
role="button">
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<span className="font-medium">{formatTimestamp(timestamp)}</span>
|
||||
<span
|
||||
className={clsx(
|
||||
correct / total >= 0.7 && "text-mti-green",
|
||||
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-blue",
|
||||
correct / total < 0.3 && "text-mti-orange",
|
||||
)}>
|
||||
Level{" "}
|
||||
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4 place-items-center w-full">
|
||||
{aggregatedLevels.map(({module, level}) => (
|
||||
<div
|
||||
key={module}
|
||||
className={clsx(
|
||||
"flex gap-2 items-center w-fit text-white px-4 py-2 rounded-xl",
|
||||
module === "reading" && "bg-ielts-reading",
|
||||
module === "listening" && "bg-ielts-listening",
|
||||
module === "writing" && "bg-ielts-writing",
|
||||
module === "speaking" && "bg-ielts-speaking",
|
||||
)}>
|
||||
{module === "reading" && <BsBook className="w-4 h-4" />}
|
||||
{module === "listening" && <BsHeadphones className="w-4 h-4" />}
|
||||
{module === "writing" && <BsPen className="w-4 h-4" />}
|
||||
{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
|
||||
<span className="text-sm">{level.toFixed(1)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>IELTS GPT | Muscat Training Institute</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<Layout user={user}>
|
||||
<div className="w-fit">
|
||||
{!isUsersLoading && user.type !== "student" && (
|
||||
<>
|
||||
<select
|
||||
className="select w-full max-w-xs bg-white border border-mti-gray-platinum outline-none font-normal text-base"
|
||||
onChange={(e) => setSelectedUser(users.find((x) => x.id === e.target.value)!)}>
|
||||
{users.map((x) => (
|
||||
<option key={x.id} selected={selectedUser.id === x.id} value={x.id}>
|
||||
{x.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
|
||||
<div className="grid grid-cols-3 w-full gap-6">
|
||||
{Object.keys(groupedStats)
|
||||
.sort((a, b) => parseInt(b) - parseInt(a))
|
||||
.map(customContent)}
|
||||
</div>
|
||||
)}
|
||||
{groupedStats && Object.keys(groupedStats).length === 0 && !isStatsLoading && (
|
||||
<span className="font-semibold ml-1">No record to display...</span>
|
||||
)}
|
||||
</Layout>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user