🐛(frontend) fix empty left panel after deleting root doc

When we were deleting a root document, the left panel
was getting empty. It was because the panel thought that
it was a child document and was trying clear
dynamically the panel.
Now, we are checking if the document is a root or not,
if it is a root we just redirect to the homepage.

Author: AntoLC

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to
 ### Fixed
 
 - 🐛(service-worker) Fix useOffline Maximum update depth exceeded #1196
+- 🐛(frontend) fix empty left panel after deleting root doc #1197
 - 🐛(helm) charts generate invalid YAML for collaboration API / WS #890
 - 🐛(frontend) 401 redirection overridden #1214
 

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -15,15 +15,15 @@ import { useRemoveDoc } from '../api/useRemoveDoc';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
-  onClose: () => void;
   doc: Doc;
-  afterDelete?: (doc: Doc) => void;
+  onClose: () => void;
+  onSuccess?: (doc: Doc) => void;
 }
 
 export const ModalRemoveDoc = ({
-  onClose,
   doc,
-  afterDelete,
+  onClose,
+  onSuccess,
 }: ModalRemoveDocProps) => {
   const { toast } = useToastProvider();
   const { t } = useTranslation();
@@ -35,19 +35,17 @@ export const ModalRemoveDoc = ({
     error,
   } = useRemoveDoc({
     onSuccess: () => {
-      toast(t('The document has been deleted.'), VariantType.SUCCESS, {
-        duration: 4000,
-      });
-      if (afterDelete) {
-        afterDelete(doc);
-        return;
-      }
-
-      if (pathname === '/') {
+      if (onSuccess) {
+        onSuccess(doc);
+      } else if (pathname === '/') {
         onClose();
       } else {
         void push('/');
       }
+
+      toast(t('The document has been deleted.'), VariantType.SUCCESS, {
+        duration: 4000,
+      });
     },
   });
 

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

@@ -125,15 +125,15 @@ export const DocTreeItemActions = ({
     },
   });
 
-  const afterDelete = () => {
+  const onSuccessDelete = () => {
     if (parentId) {
       void router.push(`/docs/${parentId}`).then(() => {
         setTimeout(() => {
           treeContext?.treeData.deleteNode(doc.id);
         }, 100);
       });
     } else if (doc.id === treeContext?.root?.id && !parentId) {
-      void router.push(`/docs/`);
+      void router.push(`/`);
     } else if (treeContext && treeContext.root) {
       void router.push(`/docs/${treeContext.root.id}`).then(() => {
         setTimeout(() => {
@@ -193,7 +193,7 @@ export const DocTreeItemActions = ({
         <ModalRemoveDoc
           onClose={deleteModal.onClose}
           doc={doc}
-          afterDelete={afterDelete}
+          onSuccess={onSuccessDelete}
         />
       )}
     </Box>