Build family information provider

geneit_app/src/App.tsx

@@ -13,6 +13,8 @@ import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { BaseLoginPage } from "./widgets/BaseLoginpage";
 import { DeleteAccountRoute } from "./routes/DeleteAccountRoute";
 import { FamiliesListRoute } from "./routes/FamiliesListRoute";
+import { BaseFamilyRoute } from "./widgets/BaseFamilyRoute";
+import { FamilyHomeRoute } from "./routes/family/FamilyHomeRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -41,6 +43,10 @@ export function App(): React.ReactElement {
           <Route path="*" element={<BaseAuthenticatedPage />}>
             <Route path="" element={<FamiliesListRoute />} />
             <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>
         ) : (

geneit_app/src/api/FamilyApi.ts

@@ -111,6 +111,18 @@ export class FamilyApi {
     ).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
    */

geneit_app/src/routes/family/FamilyHomeRoute.tsx

@@ -0,0 +1,3 @@
+export function FamilyHomeRoute(): React.ReactElement {
+  return <p>family home</p>;
+}

geneit_app/src/widgets/BaseFamilyRoute.tsx

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