mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 09:53:30 +00:00
ui adjustments and code cleanup
This commit is contained in:
ameer2468
parent
8f66b8dd5e
commit
2309fc6373
|
|
@ -9,7 +9,7 @@ import { SettingsTitle } from '~/components/settings/SettingsContainer';
|
|||
import { styled, tw } from '~/lib/tailwind';
|
||||
import { cancel, login, useAuthStateSnapshot } from '~/stores/auth';
|
||||
|
||||
const InfoBox = styled(View, 'rounded-md border border-app-inputborder bg-app-input p-2');
|
||||
const InfoBox = styled(View, 'rounded-md border border-app bg-transparent p-2');
|
||||
|
||||
const CloudSettings = () => {
|
||||
return (
|
||||
|
|
@ -48,11 +48,11 @@ const Authenticated = () => {
|
|||
<View style={tw`flex-col items-start gap-5`}>
|
||||
<Card style={tw`w-full`}>
|
||||
<Text style={tw`font-semibold text-ink`}>Library</Text>
|
||||
<Divider style={tw`mb-4 mt-2`}/>
|
||||
<Divider style={tw`mt-2 mb-4`}/>
|
||||
<SettingsTitle style={tw`mb-1`}>Name</SettingsTitle>
|
||||
<View style={tw`rounded-md border border-app-inputborder bg-app-input p-2`}>
|
||||
<InfoBox>
|
||||
<Text style={tw`text-ink`}>{cloudLibrary.data.name}</Text>
|
||||
</View>
|
||||
</InfoBox>
|
||||
<Button
|
||||
disabled={syncLibrary.isLoading}
|
||||
variant="accent"
|
||||
|
|
@ -61,22 +61,23 @@ const Authenticated = () => {
|
|||
syncLibrary.mutateAsync(null);
|
||||
}}
|
||||
>
|
||||
<Text style={tw`text-xs font-bold text-ink`}>Sync Library</Text>
|
||||
<Text style={tw`text-xs font-medium text-ink`}>Sync Library</Text>
|
||||
</Button>
|
||||
</Card>
|
||||
{thisInstance && (
|
||||
<Card style={tw`w-full`}>
|
||||
<Text style={tw`font-semibold text-ink`}>This Instance</Text>
|
||||
<Divider style={tw`mb-4 mt-2`}/>
|
||||
<Divider style={tw`mt-2 mb-4`}/>
|
||||
<SettingsTitle style={tw`mb-1 text-ink`}>Id</SettingsTitle>
|
||||
<InfoBox>
|
||||
|
||||
<Text style={tw`text-ink-dull`}>{thisInstance.id}</Text>
|
||||
</InfoBox>
|
||||
<SettingsTitle style={tw`mb-1 mt-4`}>UUID</SettingsTitle>
|
||||
<SettingsTitle style={tw`mt-4 mb-1`}>UUID</SettingsTitle>
|
||||
<InfoBox>
|
||||
<Text style={tw`text-ink-dull`}>{thisInstance.uuid}</Text>
|
||||
</InfoBox>
|
||||
<SettingsTitle style={tw`mb-1 mt-4`}>Public Key</SettingsTitle>
|
||||
<SettingsTitle style={tw`mt-4 mb-1`}>Public Key</SettingsTitle>
|
||||
<InfoBox>
|
||||
<Text numberOfLines={1} style={tw`text-ink-dull`}>{thisInstance.identity}</Text>
|
||||
</InfoBox>
|
||||
|
|
@ -91,13 +92,14 @@ const Authenticated = () => {
|
|||
</View>
|
||||
<Text style={tw`font-semibold text-ink`}>Instances</Text>
|
||||
</View>
|
||||
<Divider style={tw`mb-4 mt-2`}/>
|
||||
<VirtualizedListWrapper contentContainerStyle={tw`flex-1`} horizontal>
|
||||
<Divider style={tw`mt-2 mb-4`}/>
|
||||
<VirtualizedListWrapper scrollEnabled={false} contentContainerStyle={tw`flex-1`} horizontal>
|
||||
<FlatList
|
||||
data={cloudInstances}
|
||||
scrollEnabled={false}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
ItemSeparatorComponent={() => <View style={tw`h-2`}/>}
|
||||
columnWrapperStyle={tw`w-full justify-between`}
|
||||
columnWrapperStyle={tw`justify-between w-full`}
|
||||
renderItem={({ item }) => <Instance data={item} />}
|
||||
keyExtractor={(item) => item.id}
|
||||
numColumns={2}
|
||||
|
|
@ -109,9 +111,7 @@ const Authenticated = () => {
|
|||
<View style={tw`relative`}>
|
||||
<Button
|
||||
disabled={createLibrary.isLoading}
|
||||
onPress={() => {
|
||||
createLibrary.mutateAsync(null);
|
||||
}}
|
||||
onPress={async () => await createLibrary.mutateAsync(null)}
|
||||
>
|
||||
{createLibrary.isLoading ? (
|
||||
<Text style={tw`text-ink`}>Connecting library to Spacedrive Cloud...</Text>
|
||||
|
|
@ -136,11 +136,11 @@ const Instance = ({data}: Props) => {
|
|||
<InfoBox>
|
||||
<Text numberOfLines={1} style={tw`text-ink-dull`}>{data.id}</Text>
|
||||
</InfoBox>
|
||||
<SettingsTitle style={tw`mb-1 mt-4`}>UUID</SettingsTitle>
|
||||
<SettingsTitle style={tw`mt-4 mb-1`}>UUID</SettingsTitle>
|
||||
<InfoBox>
|
||||
<Text numberOfLines={1} style={tw`text-ink-dull`}>{data.uuid}</Text>
|
||||
</InfoBox>
|
||||
<SettingsTitle style={tw`mb-1 mt-4`}>Public Key</SettingsTitle>
|
||||
<SettingsTitle style={tw`mt-4 mb-1`}>Public Key</SettingsTitle>
|
||||
<InfoBox>
|
||||
<Text numberOfLines={1} style={tw`text-ink-dull`}>{data.identity}</Text>
|
||||
</InfoBox>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,29 @@
|
|||
import { inferSubscriptionResult } from '@oscartbeaumont-sd/rspc-client';
|
||||
import { Circle } from 'phosphor-react-native';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
import {
|
||||
Procedures,
|
||||
useDiscoveredPeers,
|
||||
useFeatureFlag,
|
||||
useLibraryMutation,
|
||||
useLibraryQuery,
|
||||
useLibrarySubscription
|
||||
} from '@sd/client';
|
||||
import { Circle } from 'phosphor-react-native';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
import Card from '~/components/layout/Card';
|
||||
import ScreenContainer from '~/components/layout/ScreenContainer';
|
||||
import { Button } from '~/components/primitive/Button';
|
||||
import { tw } from '~/lib/tailwind';
|
||||
import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
|
||||
|
||||
const ACTORS = {
|
||||
Ingest: 'Sync Ingest',
|
||||
CloudSend: 'Cloud Sync Sender',
|
||||
CloudReceive: 'Cloud Sync Receiver',
|
||||
CloudIngest: 'Cloud Sync Ingest'
|
||||
};
|
||||
|
||||
const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettings'>) => {
|
||||
const syncEnabled = useLibraryQuery(['sync.enabled']);
|
||||
|
||||
const [data, setData] = useState<inferSubscriptionResult<Procedures, 'library.actors'>>({});
|
||||
|
||||
const [startBackfill, setStart] = useState(false);
|
||||
|
||||
useLibrarySubscription(['library.actors'], { onData: setData });
|
||||
|
||||
useEffect(() => {
|
||||
if (startBackfill === true) {
|
||||
console.log('Starting Backfill!');
|
||||
|
||||
navigation.navigate('BackfillWaitingStack', {
|
||||
screen: 'BackfillWaiting'
|
||||
});
|
||||
|
|
@ -45,92 +35,62 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin
|
|||
{syncEnabled.data === false ? (
|
||||
<Button
|
||||
variant={'accent'}
|
||||
onPress={() => {
|
||||
setStart(true);
|
||||
}}
|
||||
onPress={() => setStart(true)}
|
||||
>
|
||||
<Text>Start Backfill Operations</Text>
|
||||
</Button>
|
||||
) : (
|
||||
<View>
|
||||
<Text
|
||||
style={tw`flex flex-col items-center justify-center text-left text-white`}
|
||||
>
|
||||
Ingester
|
||||
<OnlineIndicator online={data[ACTORS.Ingest] ?? false} />
|
||||
</Text>
|
||||
<View>
|
||||
{data[ACTORS.Ingest] ? (
|
||||
<StopButton name={ACTORS.Ingest} />
|
||||
) : (
|
||||
<StartButton name={ACTORS.Ingest} />
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={tw`flex flex-col items-center justify-center text-left text-white`}
|
||||
>
|
||||
Sender
|
||||
<OnlineIndicator online={data[ACTORS.CloudSend] ?? false} />
|
||||
</Text>
|
||||
<View>
|
||||
{data[ACTORS.CloudSend] ? (
|
||||
<StopButton name={ACTORS.CloudSend} />
|
||||
) : (
|
||||
<StartButton name={ACTORS.CloudSend} />
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={tw`flex flex-col items-center justify-center text-left text-white`}
|
||||
>
|
||||
Receiver
|
||||
<OnlineIndicator online={data[ACTORS.CloudReceive] ?? false} />
|
||||
</Text>
|
||||
<View>
|
||||
{data[ACTORS.CloudReceive] ? (
|
||||
<StopButton name={ACTORS.CloudReceive} />
|
||||
) : (
|
||||
<StartButton name={ACTORS.CloudReceive} />
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={tw`flex flex-col items-center justify-center text-left text-white`}
|
||||
>
|
||||
Cloud Ingester
|
||||
<OnlineIndicator online={data[ACTORS.CloudIngest] ?? false} />
|
||||
</Text>
|
||||
<View>
|
||||
{data[ACTORS.CloudIngest] ? (
|
||||
<StopButton name={ACTORS.CloudIngest} />
|
||||
) : (
|
||||
<StartButton name={ACTORS.CloudIngest} />
|
||||
)}
|
||||
</View>
|
||||
<View style={tw`flex-row flex-wrap gap-2`}>
|
||||
{Object.keys(data).map((key) => {
|
||||
return (
|
||||
<Card style={tw`w-[48%] flex-col gap-2`} key={key}>
|
||||
<OnlineIndicator online={data[key] ?? false} />
|
||||
<Text
|
||||
key={key}
|
||||
style={tw`flex flex-col items-center justify-center text-left text-white`}
|
||||
>
|
||||
{key}
|
||||
</Text>
|
||||
{data[key] ? (
|
||||
<StopButton name={key} />
|
||||
) : (
|
||||
<StartButton name={key} />
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</ScreenContainer>
|
||||
)}
|
||||
</ScreenContainer>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default SyncSettingsScreen;
|
||||
|
||||
function OnlineIndicator({ online }: { online: boolean }) {
|
||||
const size = 10;
|
||||
return online ? (
|
||||
<Circle size={size} color="#00ff0a" weight="fill" />
|
||||
return (
|
||||
<View style={tw`items-center justify-center w-6 h-6 p-2 mb-1 border rounded-full border-app-inputborder bg-app-input`}>
|
||||
{online ? (
|
||||
<Circle size={size} color={tw.color('green-400')} weight="fill" />
|
||||
) : (
|
||||
<Circle size={size} color="#ff0600" weight="fill" />
|
||||
);
|
||||
<Circle size={size} color={tw.color('red-400')} weight="fill" />
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function StartButton({ name }: { name: string }) {
|
||||
const startActor = useLibraryMutation(['library.startActor']);
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="accent"
|
||||
disabled={startActor.isLoading}
|
||||
onPress={() => startActor.mutate(name)}
|
||||
>
|
||||
<Text style={tw`font-medium text-ink`}>
|
||||
{startActor.isLoading ? 'Starting' : 'Start'}
|
||||
</Text>
|
||||
{startActor.isLoading ? <Text>Starting</Text> : <Text>Start</Text>}
|
||||
</Button>
|
||||
);
|
||||
|
|
@ -138,14 +98,15 @@ function StartButton({ name }: { name: string }) {
|
|||
|
||||
function StopButton({ name }: { name: string }) {
|
||||
const stopActor = useLibraryMutation(['library.stopActor']);
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="accent"
|
||||
disabled={stopActor.isLoading}
|
||||
onPress={() => stopActor.mutate(name)}
|
||||
>
|
||||
{stopActor.isLoading ? <Text>Stopping</Text> : <Text>Stop</Text>}
|
||||
<Text style={tw`font-medium text-ink`}>
|
||||
{stopActor.isLoading ? 'Stopping' : 'Stop'}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue