mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-27 10:01:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

[MOB-115] Cloud sync UX flow (#2636)

Browse Source 
* Improved cloud sync UX flow

* fix formatting

* improved UX flow with clearer descriptions of modals

* show cloud modal after 1s

* run formatting
This commit is contained in:
ameer2468
2024-07-24 14:07:02 +03:00
committed by GitHub
parent 75d11b96b1
commit ffa089bfb8
8 changed files with 112 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/mobile/src/components/modal/cloud/CloudModal.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { useNavigation } from '@react-navigation/native';
import React, { forwardRef } from 'react';
import { Text, View } from 'react-native';
import { Icon } from '~/components/icons/Icon';
import { Modal, ModalRef } from '~/components/layout/Modal';
import { Button } from '~/components/primitive/Button';
import useForwardedRef from '~/hooks/useForwardedRef';
import { tw } from '~/lib/tailwind';
import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
const CloudModal = forwardRef<ModalRef>((_, ref) => {
const modalRef = useForwardedRef(ref);
const navigation = useNavigation<SettingsStackScreenProps<'CloudSettings'>['navigation']>();
return (
<Modal showCloseButton ref={modalRef} snapPoints={['30']} title="Cloud Sync">
<View style={tw`mx-auto max-w-[80%] flex-col items-center gap-0`}>
<Icon style={tw`mt-5`} name="CloudSync" size={48} />
<Text style={tw`my-2 text-center leading-5 text-ink-dull`}>
Would you like to access cloud services to upload your library to the cloud?
</Text>
<Button
style={tw`mt-3`}
onPress={() => {
navigation.navigate('CloudSettings');
modalRef.current?.dismiss();
}}
variant="accent"
>
<Text style={tw`font-medium text-ink`}>Start</Text>
</Button>
</View>
</Modal>
);
});
export default CloudModal;

9
apps/mobile/src/components/settings/SettingsItem.tsx
View File

@@ -1,5 +1,5 @@
import { CaretRight, Icon } from 'phosphor-react-native';
import { Alert, Pressable, Text, View } from 'react-native';
import { Pressable, Text, View } from 'react-native';
import { tw, twStyle } from '~/lib/tailwind';
import { FeatureUnavailableAlert } from '../primitive/FeatureUnavailableAlert';
@@ -11,6 +11,7 @@ type SettingsItemProps = {
rightArea?: React.ReactNode;
comingSoon?: boolean;
rounded?: 'top' | 'bottom';
syncEnabled?: boolean;
};
export function SettingsItem(props: SettingsItemProps) {
@@ -24,6 +25,12 @@ export function SettingsItem(props: SettingsItemProps) {
: props.rounded === 'bottom'
? 'border-b border-r border-l'
: 'border-l border-r';
// Hide Cloud settings if sync is disabled
if (props.syncEnabled === false && props.title === 'Cloud') {
return null;
}
return (
<Pressable
onPress={() => {

9
apps/mobile/src/screens/onboarding/NewLibrary.tsx
View File

@@ -1,9 +1,10 @@
import * as Haptics from 'expo-haptics';
import { Controller } from 'react-hook-form';
import { Alert, Text, View } from 'react-native';
import { Text, View } from 'react-native';
import { useOnboardingContext } from '~/components/context/OnboardingContext';
import { Icon } from '~/components/icons/Icon';
import { Button } from '~/components/primitive/Button';
import { FeatureUnavailableAlert } from '~/components/primitive/FeatureUnavailableAlert';
import { Input } from '~/components/primitive/Input';
import { tw } from '~/lib/tailwind';
import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator';
@@ -18,9 +19,7 @@ const NewLibraryScreen = ({ navigation }: OnboardingStackScreenProps<'NewLibrary
navigation.navigate('Privacy');
});
const handleImport = () => {
Alert.alert('TODO');
};
const handleImport = () => FeatureUnavailableAlert();
return (
<OnboardingContainer>
@@ -57,7 +56,7 @@ const NewLibraryScreen = ({ navigation }: OnboardingStackScreenProps<'NewLibrary
<Text style={tw`text-center font-medium text-ink`}>New Library</Text>
</Button>
<Text style={tw`px-4 text-xs font-bold text-ink-faint`}>OR</Text>
<Button onPress={handleImport} variant="outline">
<Button style={tw`opacity-50`} onPress={handleImport} variant="outline">
<Text style={tw`text-center font-medium text-ink`}>Import Library</Text>
</Button>
</View>

4
apps/mobile/src/screens/overview/Overview.tsx
View File

@@ -20,11 +20,13 @@ const EMPTY_STATISTICS = {
export default function OverviewScreen() {
const { data: node } = useBridgeQuery(['nodeState']);
const stats = useLibraryQuery(['library.statistics'], {
initialData: { ...EMPTY_STATISTICS }
});
// Running the query here so the data is already available for settings screen
useLibraryQuery(['sync.enabled']);
return (
<ScreenContainer>
<OverviewStats stats={stats} />

5
apps/mobile/src/screens/settings/Settings.tsx
View File

@@ -16,7 +16,7 @@ import {
} from 'phosphor-react-native';
import React from 'react';
import { Platform, SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
import { DebugState, useDebugState, useDebugStateEnabler } from '@sd/client';
import { DebugState, useDebugState, useDebugStateEnabler, useLibraryQuery } from '@sd/client';
import ScreenContainer from '~/components/layout/ScreenContainer';
import { SettingsItem } from '~/components/settings/SettingsItem';
import { tw, twStyle } from '~/lib/tailwind';
@@ -156,7 +156,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) {
export default function SettingsScreen({ navigation }: SettingsStackScreenProps<'Settings'>) {
const debugState = useDebugState();
const syncEnabled = useLibraryQuery(['sync.enabled']);
return (
<ScreenContainer tabHeight={false} style={tw`gap-0 px-5 py-0`}>
<SectionList
@@ -164,6 +164,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
sections={sections(debugState)}
renderItem={({ item }) => (
<SettingsItem
syncEnabled={syncEnabled.data}
comingSoon={item.comingSoon}
title={item.title}
leftIcon={item.icon}

45
apps/mobile/src/screens/settings/library/CloudSettings/CloudSettings.tsx
View File

@@ -1,6 +1,7 @@
import { useMemo } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
import { useLibraryContext, useLibraryMutation, useLibraryQuery } from '@sd/client';
import { Icon } from '~/components/icons/Icon';
import Card from '~/components/layout/Card';
import Empty from '~/components/layout/Empty';
import ScreenContainer from '~/components/layout/ScreenContainer';
@@ -55,7 +56,11 @@ const Authenticated = () => {
}
return (
<ScreenContainer tabHeight={false}>
<ScreenContainer
scrollview={Boolean(cloudLibrary.data)}
style={tw`gap-0`}
tabHeight={false}
>
{cloudLibrary.data ? (
<View style={tw`flex-col items-start gap-5`}>
<Library cloudLibrary={cloudLibrary.data} />
@@ -96,23 +101,27 @@ const Authenticated = () => {
</Card>
</View>
) : (
<Card style={tw`relative py-10`}>
<Button
style={tw`mx-auto max-w-[82%]`}
disabled={createLibrary.isLoading}
onPress={async () => await createLibrary.mutateAsync(null)}
>
{createLibrary.isLoading ? (
<Text style={tw`text-ink`}>
Connecting library to Spacedrive Cloud...
</Text>
) : (
<Text style={tw`font-medium text-ink`}>
Connect library to Spacedrive Cloud
</Text>
)}
</Button>
</Card>
<View style={tw`flex-1 justify-center`}>
<Card style={tw`relative p-6`}>
<Icon style={tw`mx-auto mb-2`} name="CloudSync" size={64} />
<Text style={tw`mx-auto text-center text-sm text-ink`}>
Uploading your library to the cloud will allow you to access your
library from other devices using your account & importing.
</Text>
<Button
variant={'accent'}
style={tw`mx-auto mt-4 max-w-[82%]`}
disabled={createLibrary.isLoading}
onPress={async () => await createLibrary.mutateAsync(null)}
>
{createLibrary.isLoading ? (
<Text style={tw`text-ink`}>Connecting library...</Text>
) : (
<Text style={tw`font-medium text-ink`}>Connect library</Text>
)}
</Button>
</Card>
</View>
)}
</ScreenContainer>
);

9
apps/mobile/src/screens/settings/library/CloudSettings/Login.tsx
View File

@@ -13,17 +13,18 @@ const Login = () => {
};
return (
<View style={tw`flex-1 flex-col items-center justify-center gap-2`}>
<Card style={tw`w-full items-center justify-center py-6`}>
<Card style={tw`w-full items-center justify-center gap-2 p-6`}>
<View style={tw`flex-col items-center gap-2`}>
<Icon name="CloudSync" size={64} />
<Text style={tw`mb-4 max-w-[60%] text-center text-ink`}>
To access cloud related features, please login
<Text style={tw`text-center text-sm text-ink`}>
Cloud Sync will upload your library to the cloud so you can access your
library from other devices by importing it from the cloud.
</Text>
</View>
{(authState.status === 'notLoggedIn' || authState.status === 'loggingIn') && (
<Button
variant="accent"
style={tw`mx-auto mt-1 max-w-[50%]`}
style={tw`mx-auto mt-4 max-w-[50%]`}
onPress={async (e) => {
e.preventDefault();
if (authState.status === 'loggingIn') {

32
apps/mobile/src/screens/settings/library/SyncSettings.tsx
View File

@@ -1,7 +1,8 @@
import { inferSubscriptionResult } from '@oscartbeaumont-sd/rspc-client';
import { useIsFocused } from '@react-navigation/native';
import { MotiView } from 'moti';
import { Circle } from 'phosphor-react-native';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Text, View } from 'react-native';
import {
Procedures,
@@ -11,7 +12,9 @@ import {
} from '@sd/client';
import { Icon } from '~/components/icons/Icon';
import Card from '~/components/layout/Card';
import { ModalRef } from '~/components/layout/Modal';
import ScreenContainer from '~/components/layout/ScreenContainer';
import CloudModal from '~/components/modal/cloud/CloudModal';
import { Button } from '~/components/primitive/Button';
import { tw } from '~/lib/tailwind';
import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
@@ -19,8 +22,11 @@ import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettings'>) => {
const syncEnabled = useLibraryQuery(['sync.enabled']);
const [data, setData] = useState<inferSubscriptionResult<Procedures, 'library.actors'>>({});
const modalRef = useRef<ModalRef>(null);
const [startBackfill, setStart] = useState(false);
const pageFocused = useIsFocused();
const [showCloudModal, setShowCloudModal] = useState(false);
useLibrarySubscription(['library.actors'], { onData: setData });
@@ -29,18 +35,31 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin
navigation.navigate('BackfillWaitingStack', {
screen: 'BackfillWaiting'
});
setTimeout(() => setShowCloudModal(true), 1000);
}
}, [startBackfill, navigation]);
useEffect(() => {
if (pageFocused && showCloudModal) modalRef.current?.present();
return () => {
if (showCloudModal) setShowCloudModal(false);
};
}, [pageFocused, showCloudModal]);
return (
<ScreenContainer scrollview={false} style={tw`gap-0 px-6`}>
{syncEnabled.data === false ? (
<View style={tw`flex-1 justify-center`}>
<Card style={tw`relative flex-col items-center gap-5 py-6`}>
<Card style={tw`relative flex-col items-center gap-5 p-6`}>
<View style={tw`flex-col items-center gap-2`}>
<Icon name="Sync" size={64} />
<Text style={tw`max-w-[70%] text-center leading-5 text-ink`}>
To enable sync, please start the backfill operations
<Icon name="Sync" size={72} style={tw`mb-2`} />
<Text style={tw`text-center leading-5 text-ink`}>
With Sync, you can share your library with other devices using P2P
technology.
</Text>
<Text style={tw`text-center leading-5 text-ink`}>
Additionally, allowing you to enable Cloud services to upload your
library to the cloud, making it accessible on any of your devices.
</Text>
</View>
<Button
@@ -48,7 +67,7 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin
style={tw`mx-auto max-w-[82%]`}
onPress={() => setStart(true)}
>
<Text style={tw`font-medium text-white`}>Start backfill</Text>
<Text style={tw`font-medium text-white`}>Start</Text>
</Button>
</Card>
</View>
@@ -70,6 +89,7 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin
})}
</View>
)}
<CloudModal ref={modalRef} />
</ScreenContainer>
);
};