From c37bb2691b01b3ea505db6c0add0ca2e21d198d3 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 18 Dec 2023 17:57:27 +0000
Subject: [PATCH] Added the ability to view the stats in a specific time
 interval

---
 src/dashboards/Admin.tsx |  2 +-
 src/pages/stats.tsx      | 71 +++++++++++++++++++++++-----------------
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/dashboards/Admin.tsx b/src/dashboards/Admin.tsx
index 37514f3d..b91291d7 100644
--- a/src/dashboards/Admin.tsx
+++ b/src/dashboards/Admin.tsx
@@ -206,7 +206,7 @@ export default function AdminDashboard({user}: Props) {
 
 	const DefaultDashboard = () => (
 		<>
-			<section className="w-full grid grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
+			<section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
 				<IconCard
 					Icon={BsPersonFill}
 					label="Students"
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 1c8b322d..5be1f2cb 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -22,6 +22,8 @@ import useGroups from "@/hooks/useGroups";
 import DatePicker from "react-datepicker";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import ProfileSummary from "@/components/ProfileSummary";
+import moment from "moment";
+import {Stat} from "@/interfaces/user";
 
 ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
 
@@ -59,8 +61,9 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Stats() {
 	const [statsUserId, setStatsUserId] = useState<string>();
-	const [startDate, setStartDate] = useState<Date | null>(null);
+	const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
 	const [endDate, setEndDate] = useState<Date | null>(new Date());
+	const [displayStats, setDisplayStats] = useState<Stat[]>([]);
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
@@ -72,16 +75,19 @@ export default function Stats() {
 		if (user) setStatsUserId(user.id);
 	}, [user]);
 
-	// useEffect(() => {
-	// 	if (stats && stats.length > 0) {
-	// 		const sortedStats = stats.sort((a, b) => a.date - b.date);
-	// 		const firstStat = sortedStats.shift()!;
+	useEffect(() => {
+		const startDateFilter = (s: Stat) => moment.unix(s.date / 1000).isAfter(moment(startDate));
+		const endDateFilter = (s: Stat) => {
+			console.log(moment.unix(s.date / 1000), moment(endDate).isAfter(moment.unix(s.date)));
+			return moment(endDate).isAfter(moment.unix(s.date / 1000));
+		};
 
-	// 		setStartDate(moment.unix(firstStat.date).toDate());
-	// 		console.log(stats.filter((x) => moment.unix(x.date).isAfter(startDate)));
-	// 		console.log(stats.filter((x) => moment.unix(x.date).isBefore(endDate)));
-	// 	}
-	// }, [stats]);
+		const filters = [];
+		if (startDate) filters.push(startDateFilter);
+		if (endDate) filters.push(endDateFilter);
+
+		setDisplayStats(filters.reduce((d, f) => d.filter(f), stats));
+	}, [endDate, startDate, stats]);
 
 	const calculateTotalScorePerSession = () => {
 		const groupedBySession = groupBySession(stats);
@@ -167,7 +173,7 @@ export default function Stats() {
 					/>
 
 					<section className="flex flex-col gap-3">
-						<div className="w-full flex justify-between gap-8 items-center">
+						<div className="w-full flex justify-between gap-4 items-center">
 							<>
 								{(user.type === "developer" || user.type === "admin") && (
 									<Select
@@ -202,20 +208,22 @@ export default function Stats() {
 									/>
 								)}
 							</>
-							{/* <DatePicker
-									dateFormat="dd/MM/yyyy"
-									startDate={startDate}
-									endDate={endDate}
-									selectsRange
-									filterDate={(date) => !moment(date).isSameOrBefore(moment(startDate))}
-									onChange={([initialDate, finalDate]) => {
-										setStartDate(initialDate);
-										setEndDate(finalDate);
-									}}
-								/> */}
+							<DatePicker
+								dateFormat="dd/MM/yyyy"
+								className="border border-mti-gray-dim/40 px-4 py-1.5 rounded-lg text-center w-[256px]"
+								startDate={startDate}
+								endDate={endDate}
+								selectsRange
+								showMonthDropdown
+								filterDate={(date) => moment(date).isSameOrBefore(moment(new Date()))}
+								onChange={([initialDate, finalDate]) => {
+									setStartDate(initialDate ?? moment("01/01/2023").toDate());
+									setEndDate(finalDate);
+								}}
+							/>
 						</div>
 
-						{stats.length > 0 && (
+						{displayStats.length > 0 && (
 							<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
 								{/* Exams per module */}
 								<div className="flex flex-col gap-10 border w-full h-fit md:h-96 md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
@@ -225,14 +233,17 @@ export default function Stats() {
 											<div className="flex flex-col gap-2" key={module}>
 												<div className="flex justify-between items-end">
 													<span className="text-xs">
-														<span className="font-medium">{totalExamsByModule(stats, module)}</span> of{" "}
-														<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
+														<span className="font-medium">{totalExamsByModule(displayStats, module)}</span> of{" "}
+														<span className="font-medium">{Object.keys(groupBySession(displayStats)).length}</span>
 													</span>
 													<span className="text-xs">{capitalize(module)}</span>
 												</div>
 												<ProgressBar
 													color={module}
-													percentage={(totalExamsByModule(stats, module) * 100) / Object.keys(groupBySession(stats)).length}
+													percentage={
+														(totalExamsByModule(displayStats, module) * 100) /
+														Object.keys(groupBySession(displayStats)).length
+													}
 													label=""
 													className="h-3"
 												/>
@@ -271,7 +282,7 @@ export default function Stats() {
 									<Chart
 										type="line"
 										data={{
-											labels: Object.keys(groupBySession(stats)).map((_, index) => index),
+											labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
 											datasets: [
 												{
 													type: "line",
@@ -294,7 +305,7 @@ export default function Stats() {
 									<Chart
 										type="line"
 										data={{
-											labels: Object.keys(groupBySession(stats)).map((_, index) => index),
+											labels: Object.keys(groupBySession(displayStats)).map((_, index) => index),
 											datasets: [
 												...MODULE_ARRAY.map((module, index) => ({
 													type: "line" as const,
@@ -315,7 +326,7 @@ export default function Stats() {
 									<Chart
 										type="line"
 										data={{
-											labels: Object.keys(groupBySession(stats.filter((s) => !!s.timeSpent))).map((_, index) => index),
+											labels: Object.keys(groupBySession(displayStats.filter((s) => !!s.timeSpent))).map((_, index) => index),
 											datasets: [
 												{
 													type: "line",
@@ -334,7 +345,7 @@ export default function Stats() {
 							</div>
 						)}
 					</section>
-					{stats.length === 0 && (
+					{displayStats.length === 0 && (
 						<section className="flex flex-col gap-3">
 							<span className="font-semibold ml-1">No stats to display...</span>
 						</section>