From 68b185e49a732b1d46e8f76e0419dfb42254f551 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Thu, 20 Feb 2025 09:09:25 +0100
Subject: [PATCH] wip

---
 .../features/docs/doc-tree/api/useDocTree.tsx | 52 +++++++++++++++++++
 .../docs/doc-tree/components/DocTree.tsx      |  9 ++--
 .../docs/doc-tree/components/DocTreeItem.tsx  |  6 +--
 3 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-tree/api/useDocTree.tsx

diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/api/useDocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/api/useDocTree.tsx
new file mode 100644
index 00000000..e4a289a2
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/api/useDocTree.tsx
@@ -0,0 +1,52 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { Doc } from '../../doc-management';
+
+export type DocsTreeParams = {
+  docId: string;
+  page: number;
+  page_size?: number;
+};
+
+export const getDocTree = async (params: DocsTreeParams): Promise<Doc[]> => {
+  const { docId, page, page_size } = params;
+  const searchParams = new URLSearchParams();
+
+  if (page) {
+    searchParams.set('page', page.toString());
+  }
+  if (page_size) {
+    searchParams.set('page_size', page_size.toString());
+  }
+
+  const response = await fetchAPI(
+    `documents/${docId}/tree/?${searchParams.toString()}`,
+  );
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to get the doc tree',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<Doc[]>;
+};
+
+export const KEY_LIST_DOC_CHILDREN = 'doc-tree';
+
+export function useDocTree(
+  params: DocsTreeParams,
+  queryConfig?: Omit<
+    UseQueryOptions<Doc[], APIError, Doc[]>,
+    'queryKey' | 'queryFn'
+  >,
+) {
+  return useQuery<Doc[], APIError, Doc[]>({
+    queryKey: [KEY_LIST_DOC_CHILDREN, params],
+    queryFn: () => getDocTree(params),
+    ...queryConfig,
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
index ed781957..af5a3fe4 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
@@ -9,7 +9,7 @@ import { useCunninghamTheme } from '@/cunningham';
 
 import { Doc, useDoc } from '../../doc-management';
 import { SimpleDocItem } from '../../docs-grid';
-import { useInfiniteDocChildren } from '../api/useDocChildren';
+import { useDocTree } from '../api/useDocTree';
 import { TreeViewDataType, TreeViewMoveResult } from '../types/tree';
 
 import { DocTreeItem } from './DocTreeItem';
@@ -31,7 +31,7 @@ export const DocTree = ({ docId }: Props) => {
     treeData: treeDataStore,
   } = useTreeStore();
 
-  const { data, isLoading, isFetching, isRefetching } = useInfiniteDocChildren({
+  const { data, isLoading, isFetching, isRefetching } = useDocTree({
     docId,
     page_size: 25,
     page: 1,
@@ -62,7 +62,10 @@ export const DocTree = ({ docId }: Props) => {
       return;
     }
 
-    const newChildren = data.pages.flatMap((page) => page.results);
+    console.log(data);
+    const newChildren = data ?? [];
+    const root = newChildren.shift();
+    console.log('root', root);
     const newData: DocTreeDataType[] = newChildren.map((child) => ({
       ...child,
       childrenCount: child.numchild,
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItem.tsx
index 48e6c10d..5c98cfcb 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItem.tsx
@@ -1,6 +1,6 @@
 import { useModal } from '@openfun/cunningham-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { NodeRendererProps } from 'react-arborist';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
@@ -102,7 +102,7 @@ export const DocTreeItem = ({ node, ...props }: DocTreeItemProps) => {
     },
   ];
   return (
-    <>
+    <Fragment>
       <TreeViewNode
         onClick={() => router.push(`/docs/${node.data.id}`)}
         node={node}
@@ -150,6 +150,6 @@ export const DocTreeItem = ({ node, ...props }: DocTreeItemProps) => {
           <ModalRenameDoc onClose={renameModal.onClose} doc={node.data} />,
           document.getElementById('modals') as HTMLElement,
         )}
-    </>
+    </Fragment>
   );
 };