From f57f48d67c517380fc72e7142832a08ff77f5c87 Mon Sep 17 00:00:00 2001
From: Montassar Ghanmy <Monta.ghanmy@gmail.com>
Date: Wed, 19 Feb 2025 09:30:49 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20restore/refresh=20after=20?=
 =?UTF-8?q?upload=20(#803)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pending-root-list.tsx                     |  2 +-
 .../pending-root-row.tsx                      | 23 ++++++++++++-------
 .../features/drive/hooks/use-drive-item.tsx   |  8 ++++++-
 .../app/views/client/body/drive/browser.tsx   |  2 --
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
index 07e905bad..56ac67c1a 100644
--- a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
@@ -131,7 +131,7 @@ const PendingRootList = ({
                   style={{ width: '100%', maxHeight: 300 }}
                 >
                   {keys.map(key => (
-                    <PendingRootRow key={key} rootKey={key} root={roots[key]} parentId={parentId} />
+                    <PendingRootRow key={key} rootKey={key} root={roots[key]} />
                   ))}
                 </PerfectScrollbar>
               </div>
diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
index 6d72ed500..2c66893fd 100644
--- a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx
@@ -19,17 +19,16 @@ import Languages from 'app/features/global/services/languages-service';
 const PendingRootRow = ({
   rootKey,
   root,
-  parentId,
 }: {
   rootKey: string;
   root: UploadRootType;
-  parentId: string;
 }): JSX.Element => {
   const { pauseOrResumeRootUpload, cancelRootUpload, clearRoots } = useUpload();
   const [showFolder, setShowFolder] = useState(false);
   const [restoredFolder, setRestoredFolder] = useState(false);
+  const { item } = useDriveItem(root?.id || '');
   const { restore } = useDriveActions();
-  const { refresh } = useDriveItem(parentId || '');
+  const { refresh, children } = useDriveItem(item?.parent_id || '');
 
   const firstPendingFile = root.items[0];
   const uploadedFilesSize = root.uploadedSize;
@@ -42,6 +41,7 @@ const PendingRootRow = ({
     if (!showFolder || isFileRoot) {
       const redirectionURL = RouterService.generateRouteFromState({
         itemId: root.id,
+        dirId: item?.parent_id || '',
       });
       window.open(redirectionURL, '_blank');
     } else {
@@ -74,16 +74,23 @@ const PendingRootRow = ({
     }
   }, [isUploadCompleted]);
 
+  const waitForChild = async (itemId: string, retries = 5, interval = 1000) => {
+    for (let attempt = 0; attempt < retries; attempt++) {
+      await new Promise(resolve => setTimeout(resolve, interval));
+      if (children.some(child => child.id === itemId)) return true;
+    }
+    return false;
+  };
+
   useEffect(() => {
     const postProcess = async () => {
       if (isUploadCompleted && !restoredFolder) {
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        await restore(root.id, parentId);
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        await refresh(parentId);
+        if (!isFileRoot) await restore(root.id, item?.parent_id || '');
+        const found = isFileRoot || (await waitForChild(root.id));
+        if (found) await refresh(item?.parent_id || '');
       }
     };
-    if (isUploadCompleted && !restoredFolder) {
+    if (isUploadCompleted && root.id && !restoredFolder) {
       setRestoredFolder(true);
       postProcess();
     }
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx b/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx
index 106ea1112..41f901b60 100644
--- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx
+++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx
@@ -1,7 +1,7 @@
 import { ToasterService } from '@features/global/services/toaster-service';
 import { LoadingStateInitTrue } from '@features/global/state/atoms/Loading';
 import useRouterCompany from '@features/router/hooks/use-router-company';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 import { DriveItemAtom, DriveItemChildrenAtom, DriveItemPagination } from '../state/store';
 import { DriveItem } from '../types';
@@ -154,6 +154,12 @@ export const useDriveItem = (id: string) => {
     item?.item?.is_in_trash;
   const sharedWithMe = id == 'shared_with_me';
 
+  useEffect(() => {
+    if (id) {
+      refresh(id, true); // Re-fetch from backend and update Recoil state
+    }
+  }, [id, refresh]);
+
   return {
     sharedWithMe,
     inTrash,
diff --git a/tdrive/frontend/src/app/views/client/body/drive/browser.tsx b/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
index 0d6582333..972df462e 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
@@ -341,8 +341,6 @@ export default memo(
                 companyId,
                 parentId,
               });
-              await new Promise (resolve => setTimeout(resolve, 1000));
-              refresh(parentId);
             }}
             onDragOver={handleDragOver}
             onDrop={handleDrop}