diff --git a/apps/mobile/src/components/modal/cloud/CloudModal.tsx b/apps/mobile/src/components/modal/cloud/CloudModal.tsx new file mode 100644 index 000000000..adc1240de --- /dev/null +++ b/apps/mobile/src/components/modal/cloud/CloudModal.tsx @@ -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((_, ref) => { + const modalRef = useForwardedRef(ref); + const navigation = useNavigation['navigation']>(); + return ( + + + + + Would you like to access cloud services to upload your library to the cloud? + + + + + ); +}); + +export default CloudModal; diff --git a/apps/mobile/src/components/settings/SettingsItem.tsx b/apps/mobile/src/components/settings/SettingsItem.tsx index fc2d25b84..37f33a7ea 100644 --- a/apps/mobile/src/components/settings/SettingsItem.tsx +++ b/apps/mobile/src/components/settings/SettingsItem.tsx @@ -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 ( { diff --git a/apps/mobile/src/screens/onboarding/NewLibrary.tsx b/apps/mobile/src/screens/onboarding/NewLibrary.tsx index d38cfa985..71ce01bd3 100644 --- a/apps/mobile/src/screens/onboarding/NewLibrary.tsx +++ b/apps/mobile/src/screens/onboarding/NewLibrary.tsx @@ -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 ( @@ -57,7 +56,7 @@ const NewLibraryScreen = ({ navigation }: OnboardingStackScreenProps<'NewLibrary New Library OR - diff --git a/apps/mobile/src/screens/overview/Overview.tsx b/apps/mobile/src/screens/overview/Overview.tsx index 86cde76b0..7cc71c35f 100644 --- a/apps/mobile/src/screens/overview/Overview.tsx +++ b/apps/mobile/src/screens/overview/Overview.tsx @@ -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 ( diff --git a/apps/mobile/src/screens/settings/Settings.tsx b/apps/mobile/src/screens/settings/Settings.tsx index 50ce3771d..7ec0e42c8 100644 --- a/apps/mobile/src/screens/settings/Settings.tsx +++ b/apps/mobile/src/screens/settings/Settings.tsx @@ -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 ( ( { } return ( - + {cloudLibrary.data ? ( @@ -96,23 +101,27 @@ const Authenticated = () => { ) : ( - - - + + + + + Uploading your library to the cloud will allow you to access your + library from other devices using your account & importing. + + + + )} ); diff --git a/apps/mobile/src/screens/settings/library/CloudSettings/Login.tsx b/apps/mobile/src/screens/settings/library/CloudSettings/Login.tsx index 35b33991b..88738c329 100644 --- a/apps/mobile/src/screens/settings/library/CloudSettings/Login.tsx +++ b/apps/mobile/src/screens/settings/library/CloudSettings/Login.tsx @@ -13,17 +13,18 @@ const Login = () => { }; return ( - + - - To access cloud related features, please login + + Cloud Sync will upload your library to the cloud so you can access your + library from other devices by importing it from the cloud. {(authState.status === 'notLoggedIn' || authState.status === 'loggingIn') && ( @@ -70,6 +89,7 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin })} )} + ); };