🐛 Fix restore/refresh after upload (#803)

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>

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));
+        if (!isFileRoot) await restore(root.id, item?.parent_id || '');
-        await restore(root.id, parentId);
+        const found = isFileRoot || (await waitForChild(root.id));
-        await new Promise(resolve => setTimeout(resolve, 1000));
+        if (found) await refresh(item?.parent_id || '');
-        await refresh(parentId);
       }
     };
-    if (isUploadCompleted && !restoredFolder) {
+    if (isUploadCompleted && root.id && !restoredFolder) {
       setRestoredFolder(true);
       postProcess();
     }

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,

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}