From d9993cab210c0793b13ac171b4bc2ca266833dcd Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Sat, 8 Jul 2023 11:59:55 +0200
Subject: [PATCH] Build family information provider

---
 geneit_app/src/App.tsx                        |  6 +++
 geneit_app/src/api/FamilyApi.ts               | 12 +++++
 .../src/routes/family/FamilyHomeRoute.tsx     |  3 ++
 geneit_app/src/widgets/BaseFamilyRoute.tsx    | 54 +++++++++++++++++++
 4 files changed, 75 insertions(+)
 create mode 100644 geneit_app/src/routes/family/FamilyHomeRoute.tsx
 create mode 100644 geneit_app/src/widgets/BaseFamilyRoute.tsx

diff --git a/geneit_app/src/App.tsx b/geneit_app/src/App.tsx
index 3543794..6e3d5e6 100644
--- a/geneit_app/src/App.tsx
+++ b/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>
         ) : (
diff --git a/geneit_app/src/api/FamilyApi.ts b/geneit_app/src/api/FamilyApi.ts
index 9c26432..785b9b6 100644
--- a/geneit_app/src/api/FamilyApi.ts
+++ b/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
    */
diff --git a/geneit_app/src/routes/family/FamilyHomeRoute.tsx b/geneit_app/src/routes/family/FamilyHomeRoute.tsx
new file mode 100644
index 0000000..93b3be0
--- /dev/null
+++ b/geneit_app/src/routes/family/FamilyHomeRoute.tsx
@@ -0,0 +1,3 @@
+export function FamilyHomeRoute(): React.ReactElement {
+  return <p>family home</p>;
+}
diff --git a/geneit_app/src/widgets/BaseFamilyRoute.tsx b/geneit_app/src/widgets/BaseFamilyRoute.tsx
new file mode 100644
index 0000000..5e14c7f
--- /dev/null
+++ b/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)!;
+}