From 25ec9c2e5021efaa8fb5406fa0d842f3909344a2 Mon Sep 17 00:00:00 2001
From: Fayorg <ebr@aketechnology.com>
Date: Mon, 18 Dec 2023 16:17:29 +0100
Subject: [PATCH] add: auto-refresh on the results pages

---
 actions/results.ts          | 33 +++++++++++++++++++++++
 app/results/[id]/page.tsx   | 45 ++++++++++++++++----------------
 components/custom/chart.tsx | 52 ++++++++++++++++++-------------------
 3 files changed, 81 insertions(+), 49 deletions(-)
 create mode 100644 actions/results.ts

diff --git a/actions/results.ts b/actions/results.ts
new file mode 100644
index 0000000..cd42c1d
--- /dev/null
+++ b/actions/results.ts
@@ -0,0 +1,33 @@
+"use server";
+import prisma from "@/lib/prisma";
+
+export interface Results {
+	name: string;
+	total: number;
+}
+
+export async function getResults(testId: number) {
+    const grades = await prisma.grade.findMany({ where: { testId: testId, user: { isTeacher: false } } });
+
+	const allGrades = ['1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6'];
+	let gradeOccurences = new Array(allGrades.length).fill(0);
+	const gradeList = grades.map((grade) => grade.grade);
+
+	for (let i = 0; i < gradeList.length; i++) {
+		gradeOccurences[allGrades.indexOf(gradeList[i].toString())]++;
+	}
+
+	let data: Results[] = [];
+	for (let i = 0; i < gradeOccurences.length; i++) {
+		data.push({
+			name: allGrades[i],
+			total: gradeOccurences[i],
+		});
+	}
+
+    return data;
+}
+
+export async function getTeacherResult(testId: number) {
+    return await prisma.grade.findFirst({ where: { testId: testId, user: { isTeacher: true } } });
+}
\ No newline at end of file
diff --git a/app/results/[id]/page.tsx b/app/results/[id]/page.tsx
index c3330fc..554ba50 100644
--- a/app/results/[id]/page.tsx
+++ b/app/results/[id]/page.tsx
@@ -1,35 +1,34 @@
-'use server';
+'use client';
 import { Chart } from '@components/custom/chart';
 import logo from '@images/logo.svg';
 import Image from 'next/image';
-import Prisma from '@lib/prisma';
 import ginger from '@images/ginger.png';
+import { getResults, getTeacherResult, Results } from '@/actions/results';
+import { useEffect, useState } from 'react';
 
-interface data {
-	name: string;
-	total: number;
-}
+export default function Page({ params }: { params: { id: string } }) {
+	const testId = parseInt(params.id);
 
-export default async function Page({ params }: { params: { id: string } }) {
-	const teacherGrade = await Prisma.grade.findFirst({ where: { testId: parseInt(params.id), user: { isTeacher: true } } });
+	const [teacherGrade, setTeacherGrade] = useState<number>(0);
+	const [data, setData] = useState<Results[]>([]);
 
-	const grades = await Prisma.grade.findMany({ where: { testId: parseInt(params.id), user: { isTeacher: false } } });
+	function featchResults(testId: number) {
+		getTeacherResult(testId)
+			.then((res) => setTeacherGrade(res?.grade || 0))
+			.catch((err) => console.error(err));
 
-	const allGrades = ['1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6'];
-	let gradeOccurences = new Array(allGrades.length).fill(0);
-	const gradeList = grades.map((grade) => grade.grade);
-
-	for (let i = 0; i < gradeList.length; i++) {
-		gradeOccurences[allGrades.indexOf(gradeList[i].toString())]++;
+		getResults(testId)
+			.then((res) => setData(res))
+			.catch((err) => console.error(err));
 	}
 
-	let data: data[] = [];
-	for (let i = 0; i < gradeOccurences.length; i++) {
-		data.push({
-			name: allGrades[i],
-			total: gradeOccurences[i],
-		});
-	}
+	useEffect(() => {
+		featchResults(testId);
+	}, [testId]);
+
+	setTimeout(() => {
+		featchResults(testId);
+	}, 5000);
 
 	return (
 		<div className={'p-4 md:p-12 w-full h-screen bg-black flex flex-col justify-between gap-y-4'}>
@@ -38,7 +37,7 @@ export default async function Page({ params }: { params: { id: string } }) {
 				<div className={'flex justify-center relative w-full'}>
 					<div className={'flex items-center text-center'}>
 						<Image src={ginger} alt={'Logo'} width={120} height={120} className={'inline-flex'} />
-						<h2 className={'text-4xl font-bold text-white absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]'}>{teacherGrade.grade}</h2>
+						<h2 className={'text-4xl font-bold text-white absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]'}>{teacherGrade}</h2>
 					</div>
 				</div>
 			)}
diff --git a/components/custom/chart.tsx b/components/custom/chart.tsx
index a271d8f..526dd0c 100644
--- a/components/custom/chart.tsx
+++ b/components/custom/chart.tsx
@@ -1,32 +1,32 @@
-"use client"
+'use client';
 
-import {Santa} from "@components/custom/santa";
+import { Santa } from '@components/custom/santa';
 
 interface ChartProps {
-    data: {
-        name: string
-        total: number
-    }[]
+	data: {
+		name: string;
+		total: number;
+	}[];
 }
 
-export function Chart({...props}: ChartProps) {
-    return (
-        <div className={"text-[#F0F0F0] flex-1 flex items-end"}>
-            <div className={"w-full"}>
-                <div className={"flex flex-row justify-between w-full items-end"}>
-                    {props.data.map((item, index) => (
-                        <Santa height={item.total} key={index}/>
-                    ))}
-                </div>
-                <div className={"flex flex-row justify-between w-full items-end mt-2"}>
-                    {props.data.map((item, index) => (
-                        <div className={"w-[100px] h-fit flex flex-col items-center"} key={index}>
-                            <div className={"h-[14px] w-[3pt] bg-white"}/>
-                            <span className={""}>{item.name}</span>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
+export function Chart({ ...props }: ChartProps) {
+	return (
+		<div className={'text-[#F0F0F0] flex-1 flex items-end'}>
+			<div className={'w-full'}>
+				<div className={'flex flex-row justify-between w-full items-end'}>
+					{props.data.map((item, index) => (
+						<Santa height={item.total} key={index} />
+					))}
+				</div>
+				<div className={'flex flex-row justify-between w-full items-end mt-2'}>
+					{props.data.map((item, index) => (
+						<div className={'w-[100px] h-fit flex flex-col items-center'} key={index}>
+							<div className={'h-[14px] w-[3pt] bg-white'} />
+							<span className={''}>{item.name}</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }