Build family information provider
This commit is contained in:
parent
ce7e21d20d
commit
d9993cab21
@ -13,6 +13,8 @@ import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
|
|||||||
import { BaseLoginPage } from "./widgets/BaseLoginpage";
|
import { BaseLoginPage } from "./widgets/BaseLoginpage";
|
||||||
import { DeleteAccountRoute } from "./routes/DeleteAccountRoute";
|
import { DeleteAccountRoute } from "./routes/DeleteAccountRoute";
|
||||||
import { FamiliesListRoute } from "./routes/FamiliesListRoute";
|
import { FamiliesListRoute } from "./routes/FamiliesListRoute";
|
||||||
|
import { BaseFamilyRoute } from "./widgets/BaseFamilyRoute";
|
||||||
|
import { FamilyHomeRoute } from "./routes/family/FamilyHomeRoute";
|
||||||
|
|
||||||
interface AuthContext {
|
interface AuthContext {
|
||||||
signedIn: boolean;
|
signedIn: boolean;
|
||||||
@ -41,6 +43,10 @@ export function App(): React.ReactElement {
|
|||||||
<Route path="*" element={<BaseAuthenticatedPage />}>
|
<Route path="*" element={<BaseAuthenticatedPage />}>
|
||||||
<Route path="" element={<FamiliesListRoute />} />
|
<Route path="" element={<FamiliesListRoute />} />
|
||||||
<Route path="profile" element={<ProfileRoute />} />
|
<Route path="profile" element={<ProfileRoute />} />
|
||||||
|
<Route path="family/:familyId/*" element={<BaseFamilyRoute />}>
|
||||||
|
<Route path="" element={<FamilyHomeRoute />} />
|
||||||
|
<Route path="*" element={<NotFoundRoute />} />
|
||||||
|
</Route>
|
||||||
<Route path="*" element={<NotFoundRoute />} />
|
<Route path="*" element={<NotFoundRoute />} />
|
||||||
</Route>
|
</Route>
|
||||||
) : (
|
) : (
|
||||||
|
@ -111,6 +111,18 @@ export class FamilyApi {
|
|||||||
).data.map((f: FamilyAPI) => new Family(f));
|
).data.map((f: FamilyAPI) => new Family(f));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get information about a single family
|
||||||
|
*/
|
||||||
|
static async GetSingle(id: number): Promise<Family> {
|
||||||
|
const res = await APIClient.exec({
|
||||||
|
method: "GET",
|
||||||
|
uri: `/family/${id}`,
|
||||||
|
});
|
||||||
|
|
||||||
|
return new Family(res.data);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Attempt to leave a family
|
* Attempt to leave a family
|
||||||
*/
|
*/
|
||||||
|
3
geneit_app/src/routes/family/FamilyHomeRoute.tsx
Normal file
3
geneit_app/src/routes/family/FamilyHomeRoute.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function FamilyHomeRoute(): React.ReactElement {
|
||||||
|
return <p>family home</p>;
|
||||||
|
}
|
54
geneit_app/src/widgets/BaseFamilyRoute.tsx
Normal file
54
geneit_app/src/widgets/BaseFamilyRoute.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { Outlet, useParams } from "react-router-dom";
|
||||||
|
import { Family, FamilyApi } from "../api/FamilyApi";
|
||||||
|
import React from "react";
|
||||||
|
import { AsyncWidget } from "./AsyncWidget";
|
||||||
|
|
||||||
|
interface FamilyContext {
|
||||||
|
family: Family;
|
||||||
|
reloadFamilyInfo: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const FamilyContextK = React.createContext<FamilyContext | null>(null);
|
||||||
|
|
||||||
|
export function BaseFamilyRoute(): React.ReactElement {
|
||||||
|
const { familyId } = useParams();
|
||||||
|
|
||||||
|
const [family, setFamily] = React.useState<null | Family>(null);
|
||||||
|
|
||||||
|
const loadKey = React.useRef(1);
|
||||||
|
|
||||||
|
const load = async () => {
|
||||||
|
setFamily(await FamilyApi.GetSingle(Number(familyId)));
|
||||||
|
};
|
||||||
|
|
||||||
|
const onReload = () => {
|
||||||
|
loadKey.current += 1;
|
||||||
|
setFamily(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AsyncWidget
|
||||||
|
ready={family != null}
|
||||||
|
loadKey={`${familyId}-${loadKey}`}
|
||||||
|
load={load}
|
||||||
|
errMsg="Échec du chargement des informations de la famille !"
|
||||||
|
build={() => (
|
||||||
|
<FamilyContextK.Provider
|
||||||
|
value={{
|
||||||
|
family: family!,
|
||||||
|
reloadFamilyInfo: onReload,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p>base family route</p>
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</FamilyContextK.Provider>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useFamily(): FamilyContext {
|
||||||
|
return React.useContext(FamilyContextK)!;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user