♻️(frontend) use more reliable properties in useTreeUtils

Using the treeContext was causing issues with the current parent detection, in many places the context is not available. "depth" property is more reliable than "nb_accesses_ancestors".

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx

@@ -195,22 +195,21 @@ export const DocTree = ({ initialTargetId }: DocTreeProps) => {
  >
  <Box $direction="row" $align="center" $width="100%">
  <SimpleDocItem doc={rootNode} showAccesses={true} />
- <div className="doc-tree-root-item-actions">
- <DocTreeItemActions
- doc={rootNode}
- onCreateSuccess={(createdDoc) => {
- const newDoc = {
- ...createdDoc,
- children: [],
- childrenCount: 0,
- parentId: treeContext.root?.id ?? undefined,
- };
- treeContext?.treeData.addChild(null, newDoc);
- }}
- isOpen={rootActionsOpen}
- onOpenChange={setRootActionsOpen}
- />
- </div>
+ <DocTreeItemActions
+ doc={rootNode}
+ onCreateSuccess={(createdDoc) => {
+ const newDoc = {
+ ...createdDoc,
+ children: [],
+ childrenCount: 0,
+ parentId: treeContext.root?.id ?? undefined,
+ };
+ treeContext?.treeData.addChild(null, newDoc);
+ }}
+ isOpen={rootActionsOpen}
+ isRoot={true}
+ onOpenChange={setRootActionsOpen}
+ />
  </Box>
  </StyledLink>
  )}

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx

@@ -5,7 +5,6 @@ import {
 } from '@gouvfr-lasuite/ui-kit';
 import { useModal } from '@openfun/cunningham-react';
 import { useRouter } from 'next/router';
-import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -21,29 +20,28 @@ import {
 import { useCreateChildrenDoc } from '../api/useCreateChildren';
 import { useDetachDoc } from '../api/useDetach';
 import MoveDocIcon from '../assets/doc-extract-bold.svg';
-import { useTreeUtils } from '../hooks';
 
 type DocTreeItemActionsProps = {
  doc: Doc;
- parentId?: string | null;
- onCreateSuccess?: (newDoc: Doc) => void;
  isOpen?: boolean;
+ isRoot?: boolean;
+ onCreateSuccess?: (newDoc: Doc) => void;
  onOpenChange?: (isOpen: boolean) => void;
+ parentId?: string | null;
 };
 
 export const DocTreeItemActions = ({
  doc,
- parentId,
- onCreateSuccess,
  isOpen,
+ isRoot = false,
+ onCreateSuccess,
  onOpenChange,
+ parentId,
 }: DocTreeItemActionsProps) => {
  const router = useRouter();
  const { t } = useTranslation();
  const deleteModal = useModal();
-
  const copyLink = useCopyDocLink(doc.id);
- const { isCurrentParent } = useTreeUtils(doc);
  const { mutate: detachDoc } = useDetachDoc();
  const treeContext = useTreeContext<Doc>();
  const { mutate: duplicateDoc } = useDuplicateDoc({
@@ -77,7 +75,7 @@ export const DocTreeItemActions = ({
  icon: <Icon iconName="link" $size="24px" />,
  callback: copyLink,
  },
- ...(!isCurrentParent
+ ...(!isRoot
  ? [
  {
  label: t('Move to my docs'),
@@ -135,7 +133,7 @@ export const DocTreeItemActions = ({
  };
 
  return (
- <Fragment>
+ <Box className="doc-tree-root-item-actions">
  <Box
  $direction="row"
  $align="center"
@@ -187,6 +185,6 @@ export const DocTreeItemActions = ({
  afterDelete={afterDelete}
  />
  )}
- </Fragment>
+ </Box>
  );
 };

src/frontend/apps/impress/src/features/docs/doc-tree/hooks/useTreeUtils.tsx

@@ -1,14 +1,9 @@
-import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
-
 import { Doc } from '@/docs/doc-management';
 
 export const useTreeUtils = (doc: Doc) => {
- const treeContext = useTreeContext<Doc>();
-
  return {
- isParent: doc.nb_accesses_ancestors <= 1, // it is a parent
- isChild: doc.nb_accesses_ancestors > 1, // it is a child
- isCurrentParent: treeContext?.root?.id === doc.id || doc.depth === 1, // it can be a child but not for the current user
+ isTopRoot: doc.depth === 1,
+ isChild: doc.depth > 1,
  isDesynchronized: !!(
  doc.ancestors_link_reach &&
  (doc.computed_link_reach !== doc.ancestors_link_reach ||

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -1,4 +1,3 @@
-import { TreeProvider } from '@gouvfr-lasuite/ui-kit';
 import { Tooltip, useModal } from '@openfun/cunningham-react';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
@@ -142,9 +141,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
  </Box>
  </Box>
  {shareModal.isOpen && (
- <TreeProvider initialNodeId={doc.id}>
- <DocShareModal doc={doc} onClose={shareModal.close} />
- </TreeProvider>
+ <DocShareModal doc={doc} onClose={shareModal.close} />
  )}
  </>
  );