Provide user info in context
This commit is contained in:
parent
1934354665
commit
fc58e65ea1
@ -10,47 +10,33 @@ import {
|
|||||||
TextField,
|
TextField,
|
||||||
Typography,
|
Typography,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import React, { useRef } from "react";
|
import React from "react";
|
||||||
import { ServerApi } from "../api/ServerApi";
|
import { ServerApi } from "../api/ServerApi";
|
||||||
import { ReplacePasswordResponse, User, UserApi } from "../api/UserApi";
|
import { ReplacePasswordResponse, User, UserApi } from "../api/UserApi";
|
||||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
import { useAlert } from "../widgets/AlertDialogProvider";
|
||||||
|
import { useUser } from "../widgets/BaseAuthenticatedPage";
|
||||||
|
import { useConfirm } from "../widgets/ConfirmDialogProvider";
|
||||||
import { PasswordInput } from "../widgets/PasswordInput";
|
import { PasswordInput } from "../widgets/PasswordInput";
|
||||||
import { formatDate } from "../widgets/TimeWidget";
|
import { formatDate } from "../widgets/TimeWidget";
|
||||||
import { useConfirm } from "../widgets/ConfirmDialogProvider";
|
|
||||||
import { useAlert } from "../widgets/AlertDialogProvider";
|
|
||||||
|
|
||||||
export function ProfileRoute(): React.ReactElement {
|
export function ProfileRoute(): React.ReactElement {
|
||||||
const [user, setUser] = React.useState<null | User>(null);
|
const user = useUser();
|
||||||
|
|
||||||
const load = async () => {
|
|
||||||
const u = await UserApi.GetUserInfo();
|
|
||||||
setUser(u);
|
|
||||||
};
|
|
||||||
|
|
||||||
const counter = useRef(0);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AsyncWidget
|
|
||||||
loadKey={counter.current}
|
|
||||||
load={load}
|
|
||||||
errMsg="Echec du chargement des informations du compte utilisateur !"
|
|
||||||
build={() => (
|
|
||||||
<div style={{ maxWidth: "500px", margin: "auto" }}>
|
<div style={{ maxWidth: "500px", margin: "auto" }}>
|
||||||
<Typography variant="h3">Profil</Typography>
|
<Typography variant="h3">Profil</Typography>
|
||||||
|
|
||||||
<ProfileSettingsCard
|
<ProfileSettingsCard
|
||||||
user={user!}
|
user={user.user}
|
||||||
onUpdate={() => (counter.current += 1)}
|
onUpdate={() => user.reloadUserInfo()}
|
||||||
/>
|
/>
|
||||||
{user?.has_password && <ChangePasswordCard />}
|
{user.user.has_password && <ChangePasswordCard />}
|
||||||
<DeleteAccountButton />
|
<DeleteAccountButton />
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function ProfileSettingsCard(p: { user: User; onUpdate: () => {} }) {
|
function ProfileSettingsCard(p: { user: User; onUpdate: () => void }) {
|
||||||
const [newName, setNewName] = React.useState(p.user.name);
|
const [newName, setNewName] = React.useState(p.user.name);
|
||||||
|
|
||||||
const [error, setError] = React.useState<string | null>(null);
|
const [error, setError] = React.useState<string | null>(null);
|
||||||
|
@ -15,6 +15,13 @@ import { User, UserApi } from "../api/UserApi";
|
|||||||
import { AsyncWidget } from "./AsyncWidget";
|
import { AsyncWidget } from "./AsyncWidget";
|
||||||
import { RouterLink } from "./RouterLink";
|
import { RouterLink } from "./RouterLink";
|
||||||
|
|
||||||
|
interface UserContext {
|
||||||
|
user: User;
|
||||||
|
reloadUserInfo: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UserContextK = React.createContext<UserContext | null>(null);
|
||||||
|
|
||||||
export function BaseAuthenticatedPage(): React.ReactElement {
|
export function BaseAuthenticatedPage(): React.ReactElement {
|
||||||
const [user, setUser] = React.useState<null | User>(null);
|
const [user, setUser] = React.useState<null | User>(null);
|
||||||
|
|
||||||
@ -48,6 +55,12 @@ export function BaseAuthenticatedPage(): React.ReactElement {
|
|||||||
load={load}
|
load={load}
|
||||||
errMsg="Echec du chargement des informations utilisateur !"
|
errMsg="Echec du chargement des informations utilisateur !"
|
||||||
build={() => (
|
build={() => (
|
||||||
|
<UserContextK.Provider
|
||||||
|
value={{
|
||||||
|
user: user!,
|
||||||
|
reloadUserInfo: load,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
minHeight: "100vh",
|
minHeight: "100vh",
|
||||||
@ -110,7 +123,12 @@ export function BaseAuthenticatedPage(): React.ReactElement {
|
|||||||
</AppBar>
|
</AppBar>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
|
</UserContextK.Provider>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function useUser(): UserContext {
|
||||||
|
return React.useContext(UserContextK)!;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user