Local First avec React Native et Expo - 8. TP 3 : Query API

Mise en ligne : lundi 14 octobre 2024

TP 3 : Query API et fetch de données

1. Mise en place

Si ce n'est déjà fait, cloner le repo GitHub du projet. Ce tp aura comme base la branche tp2-function-addTaskList.

Nous allons ajouter une fonction qui nous permettra de reset les données contenues dans watermelonDB. En effet, nous n'avons pas encore implémenté la suppression, et nous risquons, peut-être, de nous retrouver avec de nombreux éléments dans notre base de données.

src/database/database.js
export const resetDB = async () => {
	await database.write(async () => {
		await database.unsafeResetDatabase();
	});
};

Nous allons, ensuite, l'utiliser dans notre page, en ajoutant un bouton et une fonction handleReset.

src/app/index.tsx
<Button
		title="Reset DB"
		onPress={handleResetDB}
/>

src/app/index.tsx
const handleResetDB = async () => {
		await resetDB();
		// Effectuer un fetch après le reset de la database
	};

Nous allons également modifier la <ListCardView />, en y modifiant le type de list (de any à TaskList) et en modifiant le texte, qui affichera désormais le nom de la liste (list.name) :

src/components/ListCardView.tsx
type ListCardViewProps = {
	list: TaskList;
};
export default function ListCardView({ list }: ListCardViewProps) {
	return (
		<View style={styles.rowCardContainer}>
			<Text>{list.name}</Text>
			<AntDesign
				name="right"
				size={20}
			/>
		</View>
	);
}

2. Enoncé du problème à résoudre

Vous devrez :

• Implémenter la fonction qui vous permettra de récupérer les données, triées par ordre alphabétique (par rapport à la colonne name).
• Faire en sorte que les données soient récupérer au chargement de la page.
• Faire en sorte que les données soient afficher dans la FlatList.
• Faire en sorte que si nous ajoutons une nouvelle TaskList, la FlatList soit mise à jour, et bien évidemment triées, par ordre alphabétique.

A vous de jouer ! 😀

Essayez de réaliser ce TP, sans regarder la correction 😉.

3. Correction

Nous commençons par implémenter une fonction pour fetch les données.

src/database/functions/task-lists.ts
export const getTaskLists = async () => {
	const taskList = await database
		.get<TaskList>('task_lists')
		.query(Q.sortBy('name'))
		.fetch();
	return taskList;
};

Nous ajoutons un useState pour gérer le state de nos TaskList.

src/app/index.tsx
const [taskLists, setTaskLists] = useState<TaskList[]>([]);

Nous ajoutons, ensuite, une fonction qui appeler getTaskLists et mettra à jour notre state.

src/app/index.tsx
const fetchTaskLists = async () => {
	const taskLists = await getTaskLists();
	setTaskLists(taskLists);
};

Nous allons utiliser la fonction fetchTaskLists à plusieurs endroits :

• dans un useEffect
• dans la fonction handleResetDB

src/app/index.tsx
const handleResetDB = async () => {
	await resetDB();
	fetchTaskLists();
};
useEffect(() => {
	fetchTaskLists();
}, []);

Nous devons modifier la propriété data de la FlatList.

src/app/index.tsx
data={taskLists}

Pour terminer, il faut implémenter le tri au moment de l'ajout d'une TaskLIst. Là, nous avons, potentiellement deux manières :

• Tri avec une méthode sort.
• Appel de la fonction fetchTaskList()

const handleAdd = async (text: string) => {
	const newTaskList = await addTaskList(text);
	setTaskLists(
		[newTaskList, ...taskLists].sort((a, b) => a.name.localeCompare(b.name))
	);
};

ou

const handleAdd = async (text: string) => {
	const newTaskList = await addTaskList(text);
	fetchTaskLists();
};

Nous avons désormais notre FlatList qui es totalement fonctionnelle, avec nos données stockées dans watermelonDB, que nous récupérer à chaque lancement de l'application.