feat: create success upload ui in share extension, implement deep linking for drive folders and fix folder loading logic

Author: CandelR

assets/lang/strings.ts

@@ -333,6 +333,7 @@ const translations = {
         fileNameFallback: 'File',
         rename: 'Rename',
         itemsSelected: '{0} items selected',
+        itemsUploaded: '{0} items uploaded',
         searchPlaceholder: 'Search in Drive',
         rootFolderName: 'Drive',
         noResults: 'No results found',
@@ -343,8 +344,11 @@ const translations = {
         folderNameEmpty: 'Folder name cannot be empty',
         folderCreateError: 'Failed to create folder. Please try again.',
         uploadSuccess: 'Files uploaded successfully',
+        uploadedTitle: 'Uploaded!',
+        uploadedSubtitle: 'Encrypted and safely stored in your selected folder',
+        viewInFolder: 'View in folder',
         errorGeneral: 'Upload failed. Please try again.',
-        errorNoInternet: 'No internet connection.',
+        errorNoInternet: 'No internet connection. Please try again.',
         errorSessionExpired: 'Session expired. Please sign in again.',
         errorPrep: 'Could not prepare the file for upload.',
         errorFileTooLarge: 'The maximum upload size is 300 MB at a time.',
@@ -1166,6 +1170,7 @@ const translations = {
         fileNameFallback: 'Archivo',
         rename: 'Renombrar',
         itemsSelected: '{0} elementos seleccionados',
+        itemsUploaded: '{0} elementos subidos',
         searchPlaceholder: 'Buscar en Drive',
         rootFolderName: 'Drive',
         noResults: 'Sin resultados',
@@ -1176,8 +1181,11 @@ const translations = {
         folderNameEmpty: 'El nombre no puede estar vacío',
         folderCreateError: 'Error al crear la carpeta. Inténtalo de nuevo.',
         uploadSuccess: 'Archivos subidos correctamente',
+        uploadedTitle: '¡Subido!',
+        uploadedSubtitle: 'Encriptado y guardado de forma segura en la carpeta seleccionada',
+        viewInFolder: 'Ver en carpeta',
         errorGeneral: 'Error al subir. Inténtalo de nuevo.',
-        errorNoInternet: 'Sin conexión a internet.',
+        errorNoInternet: 'Sin conexión a internet. Inténtalo de nuevo.',
         errorSessionExpired: 'Sesión expirada. Inicia sesión de nuevo.',
         errorPrep: 'No se pudo preparar el archivo para la subida.',
         errorFileTooLarge: 'El tamaño máximo de subida es de 300 MB a la vez.',

src/contexts/Drive/Drive.context.tsx

@@ -9,8 +9,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import appService from '@internxt-mobile/services/AppService';
 import errorService from '@internxt-mobile/services/ErrorService';
 import notificationsService from '@internxt-mobile/services/NotificationsService';
-import { AppStateStatus, NativeEventSubscription } from 'react-native';
 import { NotificationType } from '@internxt-mobile/types/index';
+import { AppStateStatus, NativeEventSubscription } from 'react-native';
 
 import { driveFolderService } from '@internxt-mobile/services/drive/folder';
 import { mapFileWithIsFolder, mapFolderWithIsFolder } from 'src/helpers/driveItemMappers';
@@ -85,6 +85,8 @@ export const DriveContextProvider: React.FC<DriveContextProviderProps> = ({ chil
   const [currentFolder, setCurrentFolder] = useState<DriveFoldersTreeNode | null>(null);
   const currentFolderId = useRef<string | null>(null);
   const onAppStateChangeListener = useRef<NativeEventSubscription | null>(null);
+  const folderAbortControllers = useRef<Map<string, AbortController>>(new Map());
+  const driveFoldersTreeRef = useRef<DriveFoldersTree>({ [rootFolderId]: ROOT_FOLDER_NODE });
 
   const handleAppStateChange = (state: AppStateStatus) => {
     if (state === 'active' && currentFolderId.current) {
@@ -110,6 +112,10 @@ export const DriveContextProvider: React.FC<DriveContextProviderProps> = ({ chil
     };
   }, []);
 
+  useEffect(() => {
+    driveFoldersTreeRef.current = driveFoldersTree;
+  }, [driveFoldersTree]);
+
   useEffect(() => {
     asyncStorageService.getItem(AsyncStorageKey.PreferredDriveViewMode).then((preferredDriveViewMode) => {
       if (preferredDriveViewMode && preferredDriveViewMode !== viewMode) {
@@ -245,43 +251,71 @@ export const DriveContextProvider: React.FC<DriveContextProviderProps> = ({ chil
     };
   };
 
-  const loadFolderContent = async (folderId: string, options?: LoadFolderContentOptions) => {
-    const shouldResetPagination = options?.resetPagination;
-    const driveFolderTreeNode: DriveFoldersTreeNode = driveFoldersTree[folderId] ?? ROOT_FOLDER_NODE;
-    if (!driveFolderTreeNode) throw new Error('Cannot load this folder');
-
-    if (options?.focusFolder && driveFolderTreeNode) {
-      setCurrentFolder(driveFolderTreeNode);
-    }
+  const registerFolderLoad = (folderId: string): AbortController => {
+    folderAbortControllers.current.get(folderId)?.abort();
+    const controller = new AbortController();
+    folderAbortControllers.current.set(folderId, controller);
+    return controller;
+  };
 
-    let files: DriveFileForTree[] = [];
-    let folders: DriveFolderForTree[] = [];
+  const updateFolderNode = (folderId: string, updates: Partial<DriveFoldersTreeNode>) => {
+    setDriveFoldersTree((prevTree) => {
+      const node = prevTree[folderId];
+      if (!node) return prevTree;
+      return { ...prevTree, [folderId]: { ...node, ...updates } };
+    });
+  };
 
+  const fetchFolderData = async (
+    folderId: string,
+    options: LoadFolderContentOptions | undefined,
+    controller: AbortController,
+  ): Promise<{ files: DriveFileForTree[]; folders: DriveFolderForTree[] } | null> => {
     if (options?.loadAllContent) {
       const allContent = await fetchAllFolderContent(folderId);
-      files = allContent.files;
-      folders = allContent.folders;
-    } else {
-      const nextFilesPage = options?.resetPagination
-        ? 1
-        : Math.ceil(driveFolderTreeNode.files.length / FILES_LIMIT_PER_PAGE) + 1;
-      const nextFoldersPage = options?.resetPagination
-        ? 1
-        : Math.ceil(driveFolderTreeNode.folders.length / FOLDERS_LIMIT_PER_PAGE) + 1;
-
-      const paginatedContent = await fetchFolderContent(folderId, nextFilesPage, nextFoldersPage);
-      files = paginatedContent.files;
-      folders = paginatedContent.folders;
+      return controller.signal.aborted ? null : allContent;
     }
 
-    updateDriveFoldersTree({
-      folderId,
-      parentId: driveFolderTreeNode.parentId,
-      newFiles: files,
-      newFolders: folders,
-      error: undefined,
-      resetPagination: shouldResetPagination ?? false,
-    });
+    const currentDriveFoldersTree = driveFoldersTreeRef.current[folderId] ?? ROOT_FOLDER_NODE;
+    const nextFilesPage = options?.resetPagination
+      ? 1
+      : Math.ceil(currentDriveFoldersTree.files.length / FILES_LIMIT_PER_PAGE) + 1;
+    const nextFoldersPage = options?.resetPagination
+      ? 1
+      : Math.ceil(currentDriveFoldersTree.folders.length / FOLDERS_LIMIT_PER_PAGE) + 1;
+
+    const folderContentResult = await fetchFolderContent(folderId, nextFilesPage, nextFoldersPage);
+    return controller.signal.aborted ? null : folderContentResult;
+  };
+
+  const loadFolderContent = async (folderId: string, options?: LoadFolderContentOptions) => {
+    const driveFolderNode = driveFoldersTreeRef.current[folderId] ?? ROOT_FOLDER_NODE;
+    if (options?.focusFolder) setCurrentFolder(driveFolderNode);
+
+    const controller = registerFolderLoad(folderId);
+    updateFolderNode(folderId, { loading: true, error: undefined });
+
+    try {
+      const driveFolderNodeContent = await fetchFolderData(folderId, options, controller);
+      if (!driveFolderNodeContent) return;
+
+      updateDriveFoldersTree({
+        folderId,
+        parentId: driveFolderNode.parentId,
+        newFiles: driveFolderNodeContent.files,
+        newFolders: driveFolderNodeContent.folders,
+        error: undefined,
+        resetPagination: options?.resetPagination ?? false,
+      });
+    } catch (error) {
+      if (controller.signal.aborted) return;
+      updateFolderNode(folderId, { loading: false, error: error as Error });
+      throw error;
+    } finally {
+      if (folderAbortControllers.current.get(folderId) === controller) {
+        folderAbortControllers.current.delete(folderId);
+      }
+    }
   };
 
   const updateDriveFoldersTree = ({
@@ -299,47 +333,46 @@ export const DriveContextProvider: React.FC<DriveContextProviderProps> = ({ chil
     newFolders: DriveFolderForTree[];
     error?: Error;
   }) => {
-    const driveFolderTreeNode = driveFoldersTree[folderId];
-
-    const allFiles = resetPagination ? newFiles : [...(driveFolderTreeNode?.files ?? []), ...newFiles];
-
-    const allFolders = resetPagination ? newFolders : [...(driveFolderTreeNode?.folders ?? []), ...newFolders];
-
-    const newTreeNodes = {
-      [folderId]: {
-        name: driveFolderTreeNode?.name || 'Drive',
-        parentId: parentId,
-        uuid: folderId,
-        files: allFiles,
-        folders: allFolders,
-        loading: false,
-        error,
-      } as DriveFoldersTreeNode,
-    };
+    setDriveFoldersTree((prevDriveFoldersTree) => {
+      const driveFolderTreeNode = prevDriveFoldersTree[folderId];
 
-    allFolders.forEach((folder) => {
-      const existingNode = driveFoldersTree[folder.uuid];
-      if (!existingNode) {
-        newTreeNodes[folder.uuid] = {
-          uuid: folder.uuid,
-          name: folder.plainName ?? '',
-          parentId: folder.parentUuid,
-          id: folder.id,
-          updatedAt: folder.updatedAt,
-          createdAt: folder.createdAt,
-          loading: true,
-          files: [],
-          folders: [],
-          // @ts-expect-error - leave old implementation in order to not break anything
-          currentFoldersPage: 2,
-          error: undefined,
-        };
-      }
-    });
+      const allFiles = resetPagination ? newFiles : [...(driveFolderTreeNode?.files ?? []), ...newFiles];
+
+      const allFolders = resetPagination ? newFolders : [...(driveFolderTreeNode?.folders ?? []), ...newFolders];
+
+      const newTreeNodes = {
+        [folderId]: {
+          name: driveFolderTreeNode?.name || 'Drive',
+          parentId: parentId,
+          uuid: folderId,
+          files: allFiles,
+          folders: allFolders,
+          loading: false,
+          error,
+        } as DriveFoldersTreeNode,
+      };
+
+      allFolders.forEach((folder) => {
+        const existingNode = prevDriveFoldersTree[folder.uuid];
+        if (!existingNode) {
+          newTreeNodes[folder.uuid] = {
+            uuid: folder.uuid,
+            name: folder.plainName ?? '',
+            parentId: folder.parentUuid,
+            id: folder.id,
+            updatedAt: folder.updatedAt,
+            createdAt: folder.createdAt,
+            loading: true,
+            files: [],
+            folders: [],
+            // @ts-expect-error - leave old implementation in order to not break anything
+            currentFoldersPage: 2,
+            error: undefined,
+          };
+        }
+      });
 
-    setDriveFoldersTree({
-      ...driveFoldersTree,
-      ...newTreeNodes,
+      return { ...prevDriveFoldersTree, ...newTreeNodes };
     });
   };
 

src/navigation/AppLinks.ts

@@ -0,0 +1,11 @@
+const SCHEME = 'internxt://';
+
+export const AppLinks = {
+  driveFolder: (folderUuid: string): string => `${SCHEME}tab-explorer/drive/folder/${folderUuid}`,
+  signIn: (): string => `${SCHEME}sign-in`,
+} as const;
+
+export const AppPaths = {
+  driveFolder: (folderUuid: string): string => `tab-explorer/drive/folder/${folderUuid}`,
+  signIn: (): string => 'sign-in',
+} as const;

src/navigation/DriveNavigator.tsx

@@ -13,7 +13,6 @@ export const DriveNavigator = () => {
         name="DriveFolder"
         component={DriveFolderScreen}
         initialParams={{
-          isRootFolder: true,
           folderUuid: user?.rootFolderId,
         }}
         options={{ animation: 'default' }}

src/navigation/LinkingConfiguration.ts

@@ -13,7 +13,17 @@ const linking: LinkingOptions<RootStackParamList> = {
     screens: {
       Debug: 'debug',
       SignIn: 'sign-in',
-      TabExplorer: 'tab-explorer',
+      TabExplorer: {
+        path: 'tab-explorer',
+        screens: {
+          Drive: {
+            path: 'drive',
+            screens: {
+              DriveFolder: 'folder/:folderUuid',
+            },
+          },
+        },
+      },
       WebLogin: 'login-success',
     },
   },

src/screens/drive/DriveFolderScreen/DriveFolderScreen.helpers.ts

@@ -1,5 +1,44 @@
+import { FolderAncestor } from '../../../services/drive/folder/driveFolder.service';
 import { DriveItemData, DriveItemStatus, DriveListItem } from '../../../types/drive';
 import { FolderUploadState } from '../../../types/drive/folderUpload';
+import { DriveStackParamList } from '../../../types/navigation';
+
+export type DriveFolderRoute = {
+  name: 'DriveFolder';
+  params: DriveStackParamList['DriveFolder'];
+};
+
+export const buildDeepLinkRoutes = (folderUuid: string, ancestors: FolderAncestor[]): DriveFolderRoute[] | null => {
+  if (ancestors.length === 0) return null;
+  const [targetFolder, ...ancestorFolders] = ancestors;
+
+  if (targetFolder.uuid !== folderUuid) return null;
+
+  const nameByUuid = new Map(ancestors.map((ancestor) => [ancestor.uuid, ancestor.plainName ?? undefined]));
+  const ancestorFoldersFromRoot = [...ancestorFolders].reverse();
+
+  const routes: DriveFolderRoute[] = ancestorFoldersFromRoot.map((ancestor) => ({
+    name: 'DriveFolder',
+    params: {
+      folderUuid: ancestor.uuid,
+      folderName: ancestor.plainName,
+      parentUuid: ancestor.parentUuid ?? undefined,
+      parentFolderName: ancestor.parentUuid ? nameByUuid.get(ancestor.parentUuid) : undefined,
+    },
+  }));
+
+  routes.push({
+    name: 'DriveFolder',
+    params: {
+      folderUuid,
+      folderName: targetFolder.plainName,
+      parentUuid: targetFolder.parentUuid ?? undefined,
+      parentFolderName: targetFolder.parentUuid ? nameByUuid.get(targetFolder.parentUuid) : undefined,
+    },
+  });
+
+  return routes;
+};
 
 export const buildFolderUploadListItem = (state: FolderUploadState): DriveListItem => ({
   id: `folder-upload-${state.uploadId}`,