[PB-6362] feature/Cloud sync

src/App.tsx

@@ -13,7 +13,9 @@ import DeleteAccountModal from './components/modals/DeleteAccountModal';
 import EditNameModal from './components/modals/EditNameModal';
 import LanguageModal from './components/modals/LanguageModal';
 import LinkCopiedModal from './components/modals/LinkCopiedModal';
+import SignOutModal from './components/modals/SignOutModal';
 
+import { useNavigationContainerRef } from '@react-navigation/native';
 import { DriveContextProvider } from './contexts/Drive';
 import { ThemeProvider, useTheme } from './contexts/Theme';
 import { getRemoteUpdateIfAvailable, useLoadFonts } from './helpers';
@@ -35,10 +37,12 @@ import { authThunks } from './store/slices/auth';
 import { paymentsThunks } from './store/slices/payments';
 import { hydratePhotosStateThunk } from './store/slices/photos';
 import { uiActions } from './store/slices/ui';
+import { RootStackParamList } from './types/navigation';
 
 let listener: NativeEventSubscription | null = null;
 
 function AppContent(): JSX.Element {
+  const navigationRef = useNavigationContainerRef<RootStackParamList>();
   const dispatch = useAppDispatch();
   const tailwind = useTailwind();
   const getColor = useGetColor();
@@ -241,7 +245,7 @@ function AppContent(): JSX.Element {
                     onScreenUnlocked={handleUnlockScreen}
                   />
 
-                  {initialScreenLocked && screenLocked ? null : <Navigation />}
+                  {initialScreenLocked && screenLocked ? null : <Navigation navigationRef={navigationRef} />}
                   <AppToast />
 
                   <LinkCopiedModal isOpen={isLinkCopiedModalOpen} onClose={onLinkCopiedModalClosed} />
@@ -252,6 +256,7 @@ function AppContent(): JSX.Element {
                     onClose={onChangeProfilePictureModalClosed}
                   />
                   <LanguageModal isOpen={isLanguageModalOpen} onClose={onLanguageModalClosed} />
+                  <SignOutModal onSignedOut={() => navigationRef.reset({ index: 0, routes: [{ name: 'SignIn' }] })} />
                 </Portal.Host>
               </DriveContextProvider>
             ) : (

src/components/modals/SignOutModal/index.tsx

@@ -1,23 +1,24 @@
 import { View } from 'react-native';
 
-import { useNavigation } from '@react-navigation/native';
 import { useTailwind } from 'tailwind-rn';
 import strings from '../../../../assets/lang/strings';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import { authSelectors, authThunks } from '../../../store/slices/auth';
 import { uiActions } from '../../../store/slices/ui';
-import { RootScreenNavigationProp } from '../../../types/navigation';
 import AppButton from '../../AppButton';
 import AppText from '../../AppText';
 import UserProfilePicture from '../../UserProfilePicture';
 import CenterModal from '../CenterModal';
 
-function SignOutModal(): JSX.Element {
+interface SignOutModalProps {
+  readonly onSignedOut: () => void;
+}
+
+function SignOutModal({ onSignedOut }: SignOutModalProps): JSX.Element {
   const tailwind = useTailwind();
   const dispatch = useAppDispatch();
   const userFullName = useAppSelector(authSelectors.userFullName);
   const user = useAppSelector((state) => state.auth.user);
-  const navigation = useNavigation<RootScreenNavigationProp<'TabExplorer'>>();
   const { isSignOutModalOpen } = useAppSelector((state) => state.ui);
   const onClosed = () => {
     dispatch(uiActions.setIsSignOutModalOpen(false));
@@ -27,7 +28,7 @@ function SignOutModal(): JSX.Element {
   };
   const onSignOutButtonPressed = () => {
     dispatch(authThunks.signOutThunk({ reason: 'manual' }));
-    navigation.replace('SignIn');
+    onSignedOut();
     onClosed();
   };
 

src/navigation/TabExplorerNavigator.tsx

@@ -19,7 +19,6 @@ import MoveItemsModal from '../components/modals/MoveItemsModal';
 import NotEnoughDeviceSpaceModal from '../components/modals/NotEnoughDeviceSpaceModal';
 import RunOutOfStorageModal from '../components/modals/RunOutOfStorageModal';
 import { SharedLinkInfoModal } from '../components/modals/SharedLinkInfoModal';
-import SignOutModal from '../components/modals/SignOutModal';
 import useGetColor from '../hooks/useColor';
 import { SharedScreen } from '../screens/drive/SharedScreen/SharedScreen';
 import EmptyScreen from '../screens/EmptyScreen';
@@ -102,7 +101,6 @@ export default function TabExplorerNavigator(props: RootStackScreenProps<'TabExp
       <RunOutOfStorageModal />
       <EmptyFileNotAllowedModal />
       <NotEnoughDeviceSpaceModal />
-      <SignOutModal />
       <SecurityModal isOpen={isSecurityModalOpen} onClose={onSecurityModalClosed} />
     </View>
   );

src/navigation/index.tsx

@@ -1,13 +1,16 @@
-import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
+import { NavigationContainer, NavigationContainerRefWithCurrent } from '@react-navigation/native';
 import { useRef } from 'react';
 import { View } from 'react-native';
 
 import { RootStackParamList } from '../types/navigation';
 import LinkingConfiguration from './LinkingConfiguration';
 import RootNavigator from './RootNavigator';
 
-export default function Navigation() {
-  const navigationRef = useNavigationContainerRef<RootStackParamList>();
+interface NavigationProps {
+  readonly navigationRef: NavigationContainerRefWithCurrent<RootStackParamList>;
+}
+
+export default function Navigation({ navigationRef }: NavigationProps) {
   const routeNameRef = useRef<string>();
 
   return (

src/screens/HomeScreen/useDiscoverPhotosSheet.spec.tsx

@@ -1,11 +1,11 @@
-import { renderHook, act } from '@testing-library/react-native';
+import * as useCases from '@internxt-mobile/useCases/drive';
 import { configureStore } from '@reduxjs/toolkit';
-import { Provider } from 'react-redux';
+import { act, renderHook } from '@testing-library/react-native';
 import React from 'react';
+import { Provider } from 'react-redux';
 import asyncStorageService from '../../services/AsyncStorageService';
 import photosReducer, { PhotosState } from '../../store/slices/photos';
 import { useDiscoverPhotosSheet } from './useDiscoverPhotosSheet';
-import * as useCases from '@internxt-mobile/useCases/drive';
 
 jest.mock('../../services/AsyncStorageService', () => ({
   __esModule: true,
@@ -26,7 +26,23 @@ const makeWrapper = (photosState?: Partial<PhotosState>) => {
   const store = configureStore({
     reducer: { photos: photosReducer },
     preloadedState: {
-      photos: { enabled: false, networkCondition: 'wifi-only', permissionStatus: 'undetermined', syncStatus: 'idle', pendingBackupAssets: 0, totalScannedAssets: 0, totalAssetsUploaded: 0, currentUploadProgress: 0, lastSyncTimestamp: null, uploadingAssetIds: [], deviceId: null, sessionTotalAssets: 0, sessionUploadedAssets: 0, ...photosState },
+      photos: {
+        enabled: false,
+        networkCondition: 'wifi-only',
+        permissionStatus: 'undetermined',
+        syncStatus: 'idle',
+        pendingBackupAssets: 0,
+        totalScannedAssets: 0,
+        totalAssetsUploaded: 0,
+        currentUploadProgress: 0,
+        lastSyncTimestamp: null,
+        uploadingAssetIds: [],
+        deviceId: null,
+        sessionTotalAssets: 0,
+        sessionUploadedAssets: 0,
+        cloudFetchRevision: 0,
+        ...photosState,
+      },
     },
   });
   return ({ children }: { children: React.ReactNode }) => <Provider store={store}>{children}</Provider>;