calendrier-avent/app/play/TodayTest.tsx

48 lines
1.7 KiB
TypeScript

'use client';
import { getFirstActiveTestWithGrade } from '@/actions/mangeTest';
import { TestCard } from '@/components/custom';
import { Session } from 'next-auth';
import { signOut } from 'next-auth/react';
import { useEffect, useState } from 'react';
import Image from 'next/image';
import LogOut from '@images/logout.svg';
import { GradingForm } from '@/components/forms/GradingForm';
import YourGrade from '@images/your-grade.svg';
export function TodayTest({ session }: { session: Session }) {
const [activeTest, setActiveTest] = useState<{ data: any | null; error: Error | null; isLoading: boolean }>({ isLoading: true, data: null, error: null });
useEffect(() => {
getFirstActiveTestWithGrade(new Date(), session.user.id)
.catch((err) => setActiveTest({ data: null, error: err, isLoading: false }))
.then((data) => setActiveTest({ data, error: null, isLoading: false }));
}, [session.user.id]);
return (
<>
<TestCard data={activeTest.data} error={activeTest.error} isLoading={activeTest.isLoading} />
{activeTest.data &&
(activeTest.data.grades[0] ? (
<div className={'w-full md:w-[400px]'}>
<div className={'flex flex-row justify-evenly'}>
<Image src={YourGrade} alt={'Your Grade'} width={100} />
<span className={'w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center'}>{activeTest.data.grades[0].grade}</span>
</div>
</div>
) : (
<GradingForm session={session} testId={activeTest.data.id} />
))}
<div>
<button
onClick={async () => {
await signOut();
}}
>
<Image src={LogOut} alt={'Logo'} width={50} height={50} className={'mx-auto w-full md:w-[400px]'} />
</button>
</div>
</>
);
}