From 600692e3e5378e8a44d3ff5b148b70ed614bdc93 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Wed, 12 Jun 2024 15:13:23 +0200
Subject: [PATCH] feat(component): Add loading and context handling

The update enhances the account dialog component by introducing loading state management and improved context handling. Instead of displaying "Loading..." while user data is being fetched, a Skeleton component is now rendered. Additionally, detailed user data fields are now provided when setting the user data context. An effect hook supplies the proper loading state management.
---
 src/components/account-dialog.tsx | 49 ++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/account-dialog.tsx b/src/components/account-dialog.tsx
index 7df0ee5..9827a88 100644
--- a/src/components/account-dialog.tsx
+++ b/src/components/account-dialog.tsx
@@ -2,20 +2,55 @@
 
 import { AccountInfo } from "@/components/account-info";
 import { UserDataContext } from "@/components/providers/userdata-provider";
-import { useContext } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { IUserData } from "@/interfaces/userdata.interface";
+import {
+	type Dispatch,
+	type SetStateAction,
+	useContext,
+	useEffect,
+	useState,
+} from "react";
 
 export function AccountDialog() {
 	const userContext = useContext(UserDataContext);
+	const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
 	if (!userContext?.userData) {
-		userContext?.setUserData({ name: "Mathis" });
-		return <p>Loading...</p>;
+		userContext?.setUserData({
+			age: 0,
+			city: "Chambéry",
+			created_at: "jaj",
+			dollarAvailables: 34,
+			email: "mherriot@tutanota.com",
+			id: "",
+			isActive: false,
+			lastName: "Herriot",
+			pseudo: "Avnyr",
+			roleId: "",
+			updated_at: "",
+			firstName: "Mathis",
+		});
 	}
 
-	//TODO No account context
+	useEffect(() => {
+		if (userContext?.userData) {
+			setIsLoaded(true);
+		}
+	}, [userContext?.userData]);
 
-	//TODO Loading context
+	if (!isLoaded) {
+		return <Skeleton className="w-14 h-10 rounded" />;
+	}
 
-	//TODO Account context
-	return <AccountInfo userData={userContext.userData} />;
+	return (
+		<div>
+			<AccountInfo
+				userData={userContext?.userData as IUserData}
+				setUserData={
+					userContext?.setUserData as Dispatch<SetStateAction<IUserData | undefined>>
+				}
+			/>
+		</div>
+	);
 }