Feat: Added total games play and total time spent playing

src/app/dashboard/page.tsx

@@ -3,14 +3,39 @@ import { redirect } from 'next/navigation';
 
 import AccountPage from '@/components/common/ui/dashboard/AccountDetails/AccountPage';
 import { getUser } from '@/lib/lucia';
+import { prisma } from '@/lib/prisma';
 
-const page = async () => {
-  const user = await getUser();
-  if (!user) {
+const Page = async () => {
+  //can put this in a function later
+  const userResponse = await getUser();
+  if (!userResponse) {
     redirect('/login');
   }
 
-  return <AccountPage />;
+  const fullUser = await prisma.user.findUnique({
+    where: { email: userResponse.email },
+    select: {
+      id: true,
+      email: true,
+      name: true,
+      role: true,
+      picture: true,
+      totalGames: true,
+      totalTime: true,
+      joinedAt: true,
+    },
+  });
+
+  if (!fullUser) {
+    redirect('/login');
+  }
+
+  const userStats = await prisma.userStats.findMany({
+    where: { userId: fullUser.id },
+  });
+
+  // have to do like 10 loops because i don't know how to use React Hooks :skull:
+  return <AccountPage user={fullUser} userStats={userStats} />;
 };
 
-export default page;
+export default Page;

src/app/types/safeUser.ts

@@ -0,0 +1,4 @@
+import type { User } from '@prisma/client';
+
+//it's literally just the full user table but without the password because im scared lol
+export type SafeUser = Omit<User, 'hashedPassword'>;

src/components/common/ui/dashboard/AccountDetails/AccountPage.tsx

@@ -1,15 +1,22 @@
 'use client';
 
 import React from 'react';
+import { UserStats } from '@prisma/client';
 
+import { SafeUser } from '@/app/types/safeUser';
 import SignOutButton from '@/components/authentication/SignOutButton';
 import { NavigationBar } from '../../navigation/navbar';
 import { AccountDetails } from './AccountDetails';
 import { UserProvider } from './UserContext';
 
-const AccountPage = () => {
+interface AccountPageProps {
+  user: SafeUser;
+  userStats: UserStats[];
+}
+
+const AccountPage: React.FC<AccountPageProps> = ({ user, userStats }) => {
   return (
-    <UserProvider>
+    <UserProvider user={user} userStats={userStats}>
       <div className="flex h-full flex-col items-center justify-center">
         <NavigationBar />
         <AccountDetails />

src/components/common/ui/dashboard/AccountDetails/AvatarAndName.tsx

@@ -7,13 +7,22 @@ import { useUserContext } from './UserContext';
 export const AvatarAndName = async () => {
   const { user } = useUserContext();
 
+  // Format the date as "Joined 18 Feb 2022"
+  const formattedDate = user?.joinedAt
+    ? new Date(user.joinedAt).toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      })
+    : 'Loading...';
+
   return (
     <div className="flex w-full flex-col md:w-1/4">
       <div className="flex w-full text-foreground">
         <UserRoundPen size={72} className="flex-shrink-0 *:stroke-foreground" />
         <div className="flex h-full w-full flex-col justify-center p-4">
           <h1 className="text-3xl">{user?.name ?? 'Loading...'}</h1>
-          <p>{user?.}</p>
+          <p>Joined {formattedDate}</p>
         </div>
       </div>
       <ExperienceBar />

src/components/common/ui/dashboard/AccountDetails/TestStats.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
 
+import { useUserContext } from './UserContext';
+
+const formatTime = (totalTime: number) => {
+  const totalSeconds = Math.floor(totalTime);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes} min ${seconds} sec`;
+};
+
 export const TestStats = () => {
+  const { user } = useUserContext();
+  //"responsive design hahaha"
   return (
-    //"responsive design hahaha"
     <div className="flex w-3/4 flex-col items-center gap-2 p-4 text-foreground sm:flex-row md:flex-col lg:flex-row">
       <div className="flex w-full flex-col">
-        <p>tests started</p>
-        <p className="text-2xl">432</p>
+        <p>Total Games Played</p>
+        <p className="text-2xl">{user?.totalGames}</p>
       </div>
       <div className="flex w-full flex-col">
-        <p>tests completed</p>
-        <p className="text-2xl">432</p>
+        <p>Total Time Spent Playing</p>
+        <p className="text-2xl">
+          {user ? formatTime(user.totalTime) : 'Loading...'}
+        </p>
       </div>
     </div>
   );

src/components/common/ui/dashboard/AccountDetails/UserContext.tsx

@@ -1,11 +1,7 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { User, UserStats } from '@prisma/client';
+import React, { createContext, useContext } from 'react';
+import { UserStats } from '@prisma/client';
 
-// Adjust import to match your app structure
-import { getUser } from '@/lib/lucia';
-import { prisma } from '@/lib/prisma';
-
-type SafeUser = Omit<User, 'hashedPassword'>;
+import { SafeUser } from '@/app/types/safeUser';
 
 interface UserContextType {
   user: SafeUser | null;
@@ -14,57 +10,18 @@ interface UserContextType {
 
 const UserContext = createContext<UserContextType | undefined>(undefined);
 
-export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [user, setUser] = useState<SafeUser | null>(null);
-  const [userStats, setUserStats] = useState<UserStats[] | null>(null);
-
-  //some like go through 10 rings typa beat to get the full user table
-  useEffect(() => {
-    const fetchUserData = async () => {
-      const userResponse = await getUser();
-      if (userResponse) {
-        const fullUser = await prisma.user.findUnique({
-          where: {
-            email: userResponse.email,
-          },
-          select: {
-            id: true,
-            email: true,
-            name: true,
-            role: true,
-            picture: true,
-            totalGames: true,
-            totalTime: true,
-            joinedAt: true,
-            userStats: true,
-            //reason why im selecting so much is to not include password (idk maybe it's bad to query it so i got rid of it)
-          },
-        });
-
-        if (fullUser) {
-          setUser(fullUser);
-
-          const statsResponse = await prisma.userStats.findMany({
-            where: { userId: fullUser.id },
-          });
-          setUserStats(statsResponse);
-        }
-      }
-    };
-
-    fetchUserData();
-  }, []);
-
+export const UserProvider: React.FC<{
+  user: SafeUser;
+  userStats: UserStats[];
+  children: React.ReactNode;
+}> = ({ user, userStats, children }) => {
   return (
     <UserContext.Provider value={{ user, userStats }}>
       {children}
     </UserContext.Provider>
   );
 };
 
-//react magic im still learning - anton
 export const useUserContext = () => {
   const context = useContext(UserContext);
   if (context === undefined) {