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 (
-
-
+
+
-
-
+
+
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 (
startActor.mutate(name)}
>
-
+
{startActor.isLoading ? 'Starting' : 'Start'}
{startActor.isLoading ? Starting : Start}
@@ -101,10 +112,11 @@ function StopButton({ name }: { name: string }) {
return (
stopActor.mutate(name)}
>
-
+
{stopActor.isLoading ? 'Stopping' : 'Stop'}