From 80a379d202ef61766dc023c619943c68c068675e Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Tue, 11 Jun 2024 19:53:28 +0300 Subject: [PATCH] code cleanup, design tweaks --- apps/mobile/src/screens/BackfillWaiting.tsx | 87 ++++------ .../settings/library/CloudSettings.tsx | 152 +++++++++++------- .../screens/settings/library/SyncSettings.tsx | 26 ++- 3 files changed, 142 insertions(+), 123 deletions(-) diff --git a/apps/mobile/src/screens/BackfillWaiting.tsx b/apps/mobile/src/screens/BackfillWaiting.tsx index ce98b839b..2b7ebc9fb 100644 --- a/apps/mobile/src/screens/BackfillWaiting.tsx +++ b/apps/mobile/src/screens/BackfillWaiting.tsx @@ -1,9 +1,9 @@ -/* eslint-disable react-hooks/exhaustive-deps */ import { useNavigation } from '@react-navigation/native'; import { AppLogo } from '@sd/assets/images'; +import { useLibraryMutation } from '@sd/client'; import { Image } from 'expo-image'; import React, { useEffect } from 'react'; -import { Dimensions, StyleSheet, Text, View } from 'react-native'; +import { Dimensions, Text, View } from 'react-native'; import Animated, { Easing, useAnimatedStyle, @@ -12,9 +12,7 @@ import Animated, { withTiming } from 'react-native-reanimated'; import { Circle, Defs, RadialGradient, Stop, Svg } from 'react-native-svg'; -import { useLibraryMutation, useLibraryQuery } from '@sd/client'; -import { BackfillWaitingStackScreenProps } from '~/navigation/BackfillWaitingStack'; -import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; +import { tw, twStyle } from '~/lib/tailwind'; const { width } = Dimensions.get('window'); @@ -36,29 +34,33 @@ const BackfillWaiting = () => { }; }); - const enableSync = useLibraryMutation(['sync.backfill'], {}); + const enableSync = useLibraryMutation(['sync.backfill'], { + onSuccess: () => { + navigation.navigate('Root', { + screen: 'Home', + params: { + screen: 'SettingsStack', + params: { + screen: 'SyncSettings' + } + } + }); + } + }); useEffect(() => { - async function _() { - await enableSync.mutateAsync(null).then(() => - navigation.navigate('Root', { - screen: 'Home', - params: { - screen: 'SettingsStack', - params: { - screen: 'SyncSettings' - } - } - }) - ); - } - - _(); + (async () => { + await enableSync.mutateAsync(null); + })(); }, []); return ( - - + + @@ -69,47 +71,14 @@ const BackfillWaiting = () => { - - + + Library is being backfilled right now for Sync! - Please hold + Please hold while this process takes place. ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#000000', // Black background - alignItems: 'center', - justifyContent: 'center' - }, - gradientContainer: { - position: 'absolute', - width: width * 2, // Adjust the size of the circular gradient - height: width * 2, // Keep the aspect ratio to make it circular - borderRadius: (width * 0.8) / 2, - alignItems: 'center', - justifyContent: 'center' - }, - icon: { - width: 100, - height: 100, - marginBottom: 20 - }, - text: { - color: '#FFFFFF', - textAlign: 'center', - marginHorizontal: 40, - marginBottom: 20, - fontSize: 16, - lineHeight: 24 - }, - boldText: { - fontWeight: 'bold' - } -}); - export default BackfillWaiting; diff --git a/apps/mobile/src/screens/settings/library/CloudSettings.tsx b/apps/mobile/src/screens/settings/library/CloudSettings.tsx index b2d25c5ee..b7e33bc17 100644 --- a/apps/mobile/src/screens/settings/library/CloudSettings.tsx +++ b/apps/mobile/src/screens/settings/library/CloudSettings.tsx @@ -7,7 +7,7 @@ import { Button } from '~/components/primitive/Button'; import { Divider } from '~/components/primitive/Divider'; import { SettingsTitle } from '~/components/settings/SettingsContainer'; import { styled, tw, twStyle } from '~/lib/tailwind'; -import { cancel, login, useAuthStateSnapshot } from '~/stores/auth'; +import { cancel, login, logout, useAuthStateSnapshot } from '~/stores/auth'; const InfoBox = styled(View, 'rounded-md border border-app bg-transparent p-2'); @@ -22,14 +22,14 @@ const CloudSettings = () => { const AuthSensitiveChild = () => { const authState = useAuthStateSnapshot(); if (authState.status === 'loggedIn') return ; - if (authState.status === 'notLoggedIn' || authState.status === 'loggingIn') - return ; + if (authState.status === 'notLoggedIn' || authState.status === 'loggingIn') return ; return null; }; const Authenticated = () => { const { library } = useLibraryContext(); + const authState = useAuthStateSnapshot(); const cloudLibrary = useLibraryQuery(['cloud.library.get'], { suspense: true, retry: false }); @@ -39,61 +39,86 @@ const Authenticated = () => { const thisInstance = cloudLibrary.data?.instances.find( (instance) => instance.uuid === library.instance_id ); - const cloudInstances = cloudLibrary.data?.instances - .filter((instance) => instance.uuid !== library.instance_id) + const cloudInstances = cloudLibrary.data?.instances.filter( + (instance) => instance.uuid !== library.instance_id + ); return ( {cloudLibrary.data ? ( - Library - + + Library + {authState.status === 'loggedIn' && ( + + )} + + Name {cloudLibrary.data.name} - + {thisInstance && ( - - This Instance - - Id + + + This Instance + + + + Id - {thisInstance.id} - UUID + + + UUID {thisInstance.uuid} - Public Key + + + Public Key - {thisInstance.identity} + + {thisInstance.identity} + + )} - + + {cloudInstances?.length} + + + Instances + + + - {cloudInstances?.length} - - Instances - - - { renderItem={({ item }) => } keyExtractor={(item) => item.id} numColumns={(cloudInstances?.length ?? 0) > 1 ? 2 : 1} - {...(cloudInstances?.length ?? 0) > 1 ? {columnWrapperStyle: tw`w-full justify-between`} : {}} + {...(cloudInstances?.length ?? 0) > 1 ? {columnWrapperStyle: tw`justify-between w-full`} : {}} /> @@ -114,7 +139,9 @@ const Authenticated = () => { onPress={async () => await createLibrary.mutateAsync(null)} > {createLibrary.isLoading ? ( - Connecting library to Spacedrive Cloud... + + Connecting library to Spacedrive Cloud... + ) : ( Connect library to Spacedrive Cloud )} @@ -132,49 +159,60 @@ interface Props { const Instance = ({data, length}: Props) => { return ( - 1 ? 'w-[49%]' : 'w-full')}> - Id + 1 ? 'w-[49%]' : 'w-full', 'gap-4')}> + + Id {data.id} - UUID + + + UUID {data.uuid} - Public Key + + + Public Key {data.identity} + - ) -} + ); +}; const Login = () => { const authState = useAuthStateSnapshot(); + const buttonText = { + notLoggedIn: 'Login', + loggingIn: 'Cancel', + } return ( - - - {authState.status === 'loggingIn' && ( - )} + ); }; diff --git a/apps/mobile/src/screens/settings/library/SyncSettings.tsx b/apps/mobile/src/screens/settings/library/SyncSettings.tsx index 671d46db6..1de3813b8 100644 --- a/apps/mobile/src/screens/settings/library/SyncSettings.tsx +++ b/apps/mobile/src/screens/settings/library/SyncSettings.tsx @@ -5,6 +5,7 @@ import { useLibraryQuery, useLibrarySubscription } from '@sd/client'; +import { MotiView } from 'moti'; import { Circle } from 'phosphor-react-native'; import React, { useEffect, useState } from 'react'; import { Text, View } from 'react-native'; @@ -20,7 +21,9 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin const [startBackfill, setStart] = useState(false); - useLibrarySubscription(['library.actors'], { onData: setData }); + useLibrarySubscription(['library.actors'], { onData: (data) => { + setData(data); + } }); useEffect(() => { if (startBackfill === true) { @@ -43,11 +46,11 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin {Object.keys(data).map((key) => { return ( - + {key} @@ -68,11 +71,18 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin export default SyncSettingsScreen; function OnlineIndicator({ online }: { online: boolean }) { - const size = 10; + const size = 8; return ( {online ? ( - + + + + ) : ( )} @@ -85,10 +95,11 @@ function StartButton({ name }: { name: string }) { return (