refactor: profile components

why did I do it like that???

src/app/profile/[id]/page.tsx

@@ -77,8 +77,8 @@ export default async function ProfilePage({ params }: Props) {
 
 	return (
 		<div>
-			<ProfileInformation user={user} createdAt={user.createdAt} />
+			<ProfileInformation userId={user.id} />
-			<MiiList isLoggedIn={session?.user != null} userId={user?.id} sessionUserId={Number(session?.user.id ?? -1)} />
+			<MiiList isLoggedIn={session?.user != null} userId={user.id} sessionUserId={Number(session?.user.id ?? -1)} />
 		</div>
 	);
 }

src/app/profile/settings/page.tsx

@@ -2,7 +2,6 @@ import { Metadata } from "next";
 import { redirect } from "next/navigation";
 
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
 
 import ProfileSettings from "@/components/profile-settings";
 import ProfileInformation from "@/components/profile-information";
@@ -21,11 +20,9 @@ export default async function ProfileSettingsPage() {
 
 	if (!session) redirect("/login");
 
-	const userExtra = await prisma.user.findUnique({ where: { id: Number(session.user.id) } });
-
 	return (
 		<div>
-			<ProfileInformation createdAt={userExtra!.createdAt} inSettings />
+			<ProfileInformation inSettings />
 			<ProfileSettings />
 		</div>
 	);

src/components/profile-information.tsx

@@ -1,31 +1,30 @@
+import Link from "next/link";
 import Image from "next/image";
-import { User } from "@prisma/client";
 import { Icon } from "@iconify/react";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
-import Link from "next/link";
 
 interface Props {
-	user?: User;
+	userId?: number;
-	createdAt: Date;
 	inSettings?: boolean;
 }
 
-export default async function ProfileInformation({ user: userData, createdAt, inSettings }: Props) {
+export default async function ProfileInformation({ userId, inSettings }: Props) {
 	const session = await auth();
 
-	const id = userData && userData.id ? userData.id : Number(session?.user.id);
+	const id = userId ? userId : Number(session?.user.id);
-	const user = userData ? userData : session?.user;
+	const user = await prisma.user.findUnique({ where: { id } });
-
 	const likedMiis = await prisma.like.count({ where: { userId: id } });
 
+	if (!user) return null;
+
 	return (
 		<div className="flex gap-4 mb-2 max-md:flex-col">
 			<div className="flex w-full gap-4 overflow-x-scroll">
 				{/* Profile picture */}
 				<Image
-					src={user?.image ?? "/guest.webp"}
+					src={user.image ?? "/guest.webp"}
 					alt="profile picture"
 					width={128}
 					height={128}
@@ -34,7 +33,7 @@ export default async function ProfileInformation({ user: userData, createdAt, in
 				{/* User information */}
 				<div className="flex flex-col w-full relative">
 					<h1 className="text-4xl font-extrabold w-full break-words flex items-center gap-2">
-						{user?.name}
+						{user.name}
 						{id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && (
 							<div data-tooltip="Admin" className="font-normal text-orange-400">
 								<Icon icon="mdi:shield-moon" />
@@ -51,8 +50,8 @@ export default async function ProfileInformation({ user: userData, createdAt, in
 					<h4 className="mt-auto text-sm">
 						Liked <span className="font-bold">{likedMiis}</span> Miis
 					</h4>
-					<h4 className="text-sm" title={`${createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
+					<h4 className="text-sm" title={`${user.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
-						Created: {createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
+						Created: {user.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
 					</h4>
 				</div>
 			</div>