Local First avec React Native et Expo - 11. CRUD : DELETE - La suppression

Mise en ligne : vendredi 18 octobre 2024

CRUD : DELETE - La suppression

1. Le projet

Si ce n'est pas déjà fait, cloner le repo GitHub du projet.

2. Modification de l'UI

Nous allons apporter quelques modifications à notre UI, afin d'implémenter la suppression d'un Post dans notre application.

Nous allons transformer la <View /> du renderItem de notre ListPost en <Pressable /> afin de lui rajouter un onLongPress.

src/components/ListPost.tsx
renderItem={({ item }) => (
	<Pressable
		style={styles.cardRow}
		onLongPress={null}>
		<View style={styles.title}>
		<Text>
			{item.title} - {item.id}
		</Text>
		<Text style={styles.likes}>{item.likes} likes</Text>
		</View>
		<View style={styles.checked}>
			{item.isPinned ? (
				<Feather
						name="check-circle"
						size={24}
						color="green"
				/>
			) : (
				<View />
			)}			
		</View>
	</Pressable>			
)}

Nous allons, ensuite, ajouter un ListFooterComponent à la FlatList :

src/components/ListPost.tsx
ListFooterComponent={
	<View style={styles.footer}>
		<Text style={styles.footerText}>
			Appuyez longuement sur un élément pour le supprimer
		</Text>
	</View>
}

Pour finaliser les modifications de notre UI, nous allons ajouter un peu de styles, dans le StyleSheet.create :

src/components/ListPost.tsx
footer: {
	padding: 10,
},
footerText: {
	fontSize: 12,
	fontStyle: 'italic',
},

3. La fonction de suppression

Implémentons la fonction de suppression, en n'oubliant pas de l'utiliser dans un writer:

src/database/functions.ts
export const deletePost = (id: string) => {
	database.write(async () => {
		const post = await database.get<Post>('posts').find(id);
		await post.destroyPermanently();
	});
};

La méthode find(id) nous permet de chercher un élément dans la table Post.

Avec watermelonDB, nous avons deux choix qui s'offrent à nous :

• destroyPermanently(), si nous n'avons pas de backend à synchroniser (comme supabase par exemple).
• markAsDeleted(), si nous avons un backend à synchroniser.

4. Utilisation de la fonction de suppression

Ajoutons une fonction de suppression dans le Pressable, que nous avons créés précédemment :

src/components/ListPost.tsx
onLongPress={() => deletePost(item.id)}

Nous pouvons, maintenant, supprimer les éléments de ListPost 😉.