[MOB-60] locations & tags query invalidation on updates (#2111)

Trigger UI updates on location adding/delete and tags

lint

name

apps/mobile/src/components/modal/ImportModal.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useCallback } from 'react';
 import { Alert, Platform, Text, View } from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import RNFS from 'react-native-fs';
-import { useLibraryMutation } from '@sd/client';
+import { useLibraryMutation, useRspcLibraryContext } from '@sd/client';
 import { Modal, ModalRef } from '~/components/layout/Modal';
 import { Button } from '~/components/primitive/Button';
 import useForwardedRef from '~/hooks/useForwardedRef';
@@ -16,6 +16,7 @@ const ImportModal = forwardRef<ModalRef, unknown>((_, ref) => {
 
 	const addLocationToLibrary = useLibraryMutation('locations.addLibrary');
 	const relinkLocation = useLibraryMutation('locations.relink');
+	const rspc = useRspcLibraryContext();
 
 	const createLocation = useLibraryMutation('locations.create', {
 		onError: (error, variables) => {
@@ -31,7 +32,7 @@ const ImportModal = forwardRef<ModalRef, unknown>((_, ref) => {
 			}
 		},
 		onSettled: () => {
-			// Close the modal
+			rspc.queryClient.invalidateQueries(['locations.list']);
 			modalRef.current?.close();
 		}
 	});

apps/mobile/src/components/modal/confirmModals/DeleteLocationModal.tsx

@@ -1,16 +1,17 @@
 import { useRef } from 'react';
-import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
+import { useLibraryMutation, usePlausibleEvent, useRspcLibraryContext } from '@sd/client';
 import { ConfirmModal, ModalRef } from '~/components/layout/Modal';
 
 type Props = {
 	locationId: number;
 	onSubmit?: () => void;
 	trigger: React.ReactNode;
+	triggerStyle?: string;
 };
 
-const DeleteLocationModal = ({ trigger, onSubmit, locationId }: Props) => {
+const DeleteLocationModal = ({ trigger, onSubmit, locationId, triggerStyle }: Props) => {
 	const modalRef = useRef<ModalRef>(null);
-
+	const rspc = useRspcLibraryContext();
 	const submitPlausibleEvent = usePlausibleEvent();
 
 	const { mutate: deleteLoc, isLoading: deleteLocLoading } = useLibraryMutation(
@@ -22,6 +23,7 @@ const DeleteLocationModal = ({ trigger, onSubmit, locationId }: Props) => {
 			},
 			onSettled: () => {
 				modalRef.current?.close();
+				rspc.queryClient.invalidateQueries(['locations.list']);
 			}
 		}
 	);
@@ -33,6 +35,7 @@ const DeleteLocationModal = ({ trigger, onSubmit, locationId }: Props) => {
 			ctaLabel="Delete"
 			ctaAction={() => deleteLoc(locationId)}
 			loading={deleteLocLoading}
+			triggerStyle={triggerStyle}
 			trigger={trigger}
 			ctaDanger
 		/>

apps/mobile/src/components/modal/confirmModals/DeleteTagModal.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
+import { useLibraryMutation, usePlausibleEvent, useRspcLibraryContext } from '@sd/client';
 import { ConfirmModal, ModalRef } from '~/components/layout/Modal';
 
 type Props = {
@@ -11,13 +11,14 @@ type Props = {
 
 const DeleteTagModal = ({ trigger, onSubmit, tagId, triggerStyle }: Props) => {
 	const modalRef = useRef<ModalRef>(null);
-
+	const rspc = useRspcLibraryContext();
 	const submitPlausibleEvent = usePlausibleEvent();
 
 	const { mutate: deleteTag, isLoading: deleteTagLoading } = useLibraryMutation('tags.delete', {
 		onSuccess: () => {
 			submitPlausibleEvent({ event: { type: 'tagDelete' } });
 			onSubmit?.();
+			rspc.queryClient.invalidateQueries(['tags.list']);
 		},
 		onSettled: () => {
 			modalRef.current?.close();

apps/mobile/src/components/modal/location/LocationModal.tsx

@@ -1,11 +1,12 @@
 import { forwardRef } from 'react';
 import { Text, View } from 'react-native';
-import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
 import { Modal, ModalRef } from '~/components/layout/Modal';
-import { Button } from '~/components/primitive/Button';
+import { Button, FakeButton } from '~/components/primitive/Button';
 import useForwardedRef from '~/hooks/useForwardedRef';
 import { tw } from '~/lib/tailwind';
 
+import DeleteLocationModal from '../confirmModals/DeleteLocationModal';
+
 interface Props {
 	locationId: number;
 	editLocation: () => void;
@@ -13,24 +14,21 @@ interface Props {
 
 export const LocationModal = forwardRef<ModalRef, Props>(({ locationId, editLocation }, ref) => {
 	const modalRef = useForwardedRef(ref);
-	const submitPlausibleEvent = usePlausibleEvent();
-	const { mutate: deleteLoc } = useLibraryMutation('locations.delete', {
-		onSuccess: () => {
-			submitPlausibleEvent({ event: { type: 'locationDelete' } });
-		},
-		onSettled: () => {
-			modalRef.current?.close();
-		}
-	});
 	return (
 		<Modal ref={modalRef} snapPoints={['17']} title="Location actions">
 			<View style={tw`mt-4 flex-row gap-5 px-6`}>
-				<Button onPress={editLocation} style={tw`flex-1`} variant="gray">
+				<Button style={tw`flex-1 px-0`} onPress={editLocation} variant="gray">
 					<Text style={tw`text-sm font-medium text-ink`}>Edit</Text>
 				</Button>
-				<Button style={tw`flex-1`} onPress={() => deleteLoc(locationId)} variant="danger">
-					<Text style={tw`text-sm font-medium text-ink`}>Delete</Text>
-				</Button>
+				<DeleteLocationModal
+					locationId={locationId}
+					triggerStyle="flex-1"
+					trigger={
+						<FakeButton variant="danger">
+							<Text style={tw`text-sm font-medium text-ink`}>Delete</Text>
+						</FakeButton>
+					}
+				/>
 			</View>
 		</Modal>
 	);

apps/mobile/src/components/modal/tag/CreateTagModal.tsx

@@ -2,7 +2,12 @@ import { useQueryClient } from '@tanstack/react-query';
 import { forwardRef, useEffect, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import ColorPicker from 'react-native-wheel-color-picker';
-import { ToastDefautlColor, useLibraryMutation, usePlausibleEvent } from '@sd/client';
+import {
+	ToastDefautlColor,
+	useLibraryMutation,
+	usePlausibleEvent,
+	useRspcLibraryContext
+} from '@sd/client';
 import { FadeInAnimation } from '~/components/animation/layout';
 import { ModalInput } from '~/components/form/Input';
 import { Modal, ModalRef } from '~/components/layout/Modal';
@@ -12,7 +17,7 @@ import { useKeyboard } from '~/hooks/useKeyboard';
 import { tw, twStyle } from '~/lib/tailwind';
 
 const CreateTagModal = forwardRef<ModalRef, unknown>((_, ref) => {
-	const queryClient = useQueryClient();
+	const rspc = useRspcLibraryContext();
 	const modalRef = useForwardedRef(ref);
 
 	const [tagName, setTagName] = useState('');
@@ -33,7 +38,7 @@ const CreateTagModal = forwardRef<ModalRef, unknown>((_, ref) => {
 			setTagColor(ToastDefautlColor);
 			setShowPicker(false);
 
-			queryClient.invalidateQueries(['tags.list']);
+			rspc.queryClient.invalidateQueries(['tags.list']);
 
 			submitPlausibleEvent({ event: { type: 'tagCreate' } });
 		},

apps/mobile/src/screens/onboarding/GetStarted.tsx

@@ -49,22 +49,22 @@ export function OnboardingContainer({ children }: React.PropsWithChildren) {
 					<CaretLeft size={24} weight="bold" color="white" />
 				</Pressable>
 			)}
-			<View style={tw`z-10 items-center justify-center flex-1`}>
+			<View style={tw`z-10 flex-1 items-center justify-center`}>
 				<KeyboardAvoidingView
 					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
 					keyboardVerticalOffset={bottom}
-					style={tw`items-center justify-center flex-1 w-full`}
+					style={tw`w-full flex-1 items-center justify-center`}
 				>
-					<MotiView style={tw`items-center justify-center w-full px-4`}>
+					<MotiView style={tw`w-full items-center justify-center px-4`}>
 						{children}
 					</MotiView>
 				</KeyboardAvoidingView>
-				<Text style={tw`absolute text-xs bottom-8 text-ink-dull/50`}>
+				<Text style={tw`absolute bottom-8 text-xs text-ink-dull/50`}>
 					&copy; {new Date().getFullYear()} Spacedrive Technology Inc.
 				</Text>
 			</View>
 			{/* Bloom */}
-			<Image source={BloomOne} style={tw`absolute w-screen h-screen top-100 opacity-20`} />
+			<Image source={BloomOne} style={tw`top-100 absolute h-screen w-screen opacity-20`} />
 		</View>
 	);
 }
@@ -104,7 +104,7 @@ const GetStartedScreen = ({ navigation }: OnboardingStackScreenProps<'GetStarted
 			{/* Get Started Button */}
 			<FadeInUpAnimation delay={1200} style={tw`mt-8`}>
 				<AnimatedButton variant="accent" onPress={() => navigation.push('NewLibrary')}>
-					<Text style={tw`text-base font-medium text-center text-ink`}>Get Started</Text>
+					<Text style={tw`text-center text-base font-medium text-ink`}>Get Started</Text>
 				</AnimatedButton>
 			</FadeInUpAnimation>
 		</OnboardingContainer>