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:
parent
efb6eaf274
commit
600692e3e5
@ -2,20 +2,55 @@
|
|||||||
|
|
||||||
import { AccountInfo } from "@/components/account-info";
|
import { AccountInfo } from "@/components/account-info";
|
||||||
import { UserDataContext } from "@/components/providers/userdata-provider";
|
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() {
|
export function AccountDialog() {
|
||||||
const userContext = useContext(UserDataContext);
|
const userContext = useContext(UserDataContext);
|
||||||
|
const [isLoaded, setIsLoaded] = useState<boolean>(false);
|
||||||
|
|
||||||
if (!userContext?.userData) {
|
if (!userContext?.userData) {
|
||||||
userContext?.setUserData({ name: "Mathis" });
|
userContext?.setUserData({
|
||||||
return <p>Loading...</p>;
|
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 (
|
||||||
return <AccountInfo userData={userContext.userData} />;
|
<div>
|
||||||
|
<AccountInfo
|
||||||
|
userData={userContext?.userData as IUserData}
|
||||||
|
setUserData={
|
||||||
|
userContext?.setUserData as Dispatch<SetStateAction<IUserData | undefined>>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user