From 37f62e15cfd96f2258d1e531d047e966505e084c Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Wed, 9 Oct 2024 17:16:48 +0200
Subject: [PATCH] Use new typescript api for user graphs

---
 .../static/webpack/user/family-graph-index.js | 27 ++++++++++++-------
 .../templates/core/user_godfathers_tree.jinja |  3 +--
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/core/static/webpack/user/family-graph-index.js b/core/static/webpack/user/family-graph-index.js
index 8c7a9773..8ddb8d35 100644
--- a/core/static/webpack/user/family-graph-index.js
+++ b/core/static/webpack/user/family-graph-index.js
@@ -1,16 +1,26 @@
 import cytoscape from "cytoscape";
 import cxtmenu from "cytoscape-cxtmenu";
 import klay from "cytoscape-klay";
+import { familyGetFamilyGraph } from "#openapi";
 
 cytoscape.use(klay);
 cytoscape.use(cxtmenu);
 
-async function getGraphData(url, godfathersDepth, godchildrenDepth) {
-  const data = await (
-    await fetch(
-      `${url}?godfathers_depth=${godfathersDepth}&godchildren_depth=${godchildrenDepth}`,
-    )
-  ).json();
+async function getGraphData(userId, godfathersDepth, godchildrenDepth) {
+  const data = (
+    await familyGetFamilyGraph({
+      path: {
+        // biome-ignore lint/style/useNamingConvention: api is snake_case
+        user_id: userId,
+      },
+      query: {
+        // biome-ignore lint/style/useNamingConvention: api is snake_case
+        godfathers_depth: godfathersDepth,
+        // biome-ignore lint/style/useNamingConvention: api is snake_case
+        godchildren_depth: godchildrenDepth,
+      },
+    })
+  ).data;
   return [
     ...data.users.map((user) => {
       return { data: user };
@@ -160,8 +170,7 @@ function createGraph(container, data, activeUserId) {
 
 /**
  * @typedef FamilyGraphConfig
- * @param {string} apiUrl Base url for fetching the tree as a string
- * @param {string} activeUser Id of the user to fetch the tree from
+ * @param {number} activeUser Id of the user to fetch the tree from
  * @param {number} depthMin Minimum tree depth for godfathers and godchildren
  * @param {number} depthMax Maximum tree depth for godfathers and godchildren
  **/
@@ -248,7 +257,7 @@ window.loadFamilyGraph = (config) => {
 
       async fetchGraphData() {
         this.graphData = await getGraphData(
-          config.apiUrl,
+          config.activeUser,
           this.godfathersDepth,
           this.godchildrenDepth,
         );
diff --git a/core/templates/core/user_godfathers_tree.jinja b/core/templates/core/user_godfathers_tree.jinja
index 979c8ab4..91033b15 100644
--- a/core/templates/core/user_godfathers_tree.jinja
+++ b/core/templates/core/user_godfathers_tree.jinja
@@ -92,8 +92,7 @@
   <script>
     window.addEventListener("DOMContentLoaded", () => {
       loadFamilyGraph({
-        apiUrl: "{{ api_url }}",
-        activeUser: "{{ object.id }}",
+        activeUser: {{ object.id }},
         depthMin: {{ depth_min }},
         depthMax: {{ depth_max }},
       });