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.
This commit is contained in:
Mathis H (Avnyr) 2024-06-12 15:13:23 +02:00
parent efb6eaf274
commit 600692e3e5
Signed by: Mathis
GPG Key ID: DD9E0666A747D126

View File

@ -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>
);
}