Local First avec React Native et Expo - 10. TP 4 : Utiliser un HOC pour rendre observable un composant

Mise en ligne : vendredi 18 octobre 2024

TP 4 : Composant d'ordre supérieur (HOC) et withObservable

1. Mise en place

Si ce n'est déjà fait, cloner le repo GitHub du projet. Ce tp aura comme base la branche 8-tp3-query-api. Si vous aviez déjà commencer le projet Todo List, qui nous sert de fil rouge, tout est prêt pour que vous puissiez commencer le TP.

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

Vous allez devoir :

• créer un composant pour votre FlatList, afin de l'extraire de notre page.
• utiliser un composant d'ordre supérieur afin de rendre observable les données contenues dans ce composant.

A vous de jouer ! 😀

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

3. Correction

a. Création du composant ListOfTaskListsView

src/components/ListOfTaskListsView
import { Text, FlatList } from 'react-native';
import ListCardView from './ListCardView';
import TaskList from '@/database/model/TaskList';

type ListOfTaskListsViewProps = {
	taskLists: TaskList[];
};

export default function ListOfTaskListsView({
	taskLists,
}: ListOfTaskListsViewProps) {
	return (
		<FlatList
			contentContainerStyle={{ gap: 10 }}
			ListEmptyComponent={<Text>Ajouter votre première liste ...</Text>}
			data={taskLists}
			keyExtractor={(item) => item.id}
			renderItem={({ item }) => <ListCardView list={item} />}
		/>
	);
}

Pour le moment, le fonctionnement de notre application reste le même, nous avons juste déplacer notre FlatList dans un nouveau composant.

src/app/index.tsx
<ListOfTaskListsView taskLists={taskLists} />

Elle a une props taskLists, qui nous permet d'afficher les TaskLists, car nous n'avons pas encore implémenté le pattern observable et avons donc toujours besoin du useState de la page principale de l'application.

b. Transformation du composant en composant d'ordre supérieur (HOC) utilisant withObservable

Nous devons importer withObservables:

src/components/ListOfTaskListsView
import { withObservables } from '@nozbe/watermelondb/react';

Nous devons créer, ensuite, notre composant d'ordre supérieur :

src/components/ListOfTaskListsView
const enhance = withObservables([], () => ({
    taskLists: getTaskLists(),
}))

Elle appellera, bien entendu, la fonction getTaskLists(), que nous devrons modifier pour qu'elle prenne en compte le pattern observable :

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

Nous devons, pour finir, exporter notre composant d'ordre supérieur (HOC), qui prendra en paramètre le composant ListOfTaskListsView :

src/components/ListOfTaskListsView
export default enhance(ListOfTaskListsView);

Ne pas oublier, au passage, d'enlever l'export default à la fonction ListOfTaskListsView.

c. Utilisation de LIstOfTaskListsView dans notre page

Nous pouvons supprimer la props de notre composant, ainsi que le useState et useEffect, qui sont désormais inutiles :

src/app/index.tsx
<ListOfTaskListsView />

3. Conclusion

Notre application utilise, maintenant, le pattern observable et un composant d'ordre supérieur (HOC) pour gérer l'affichage et la mise à jour de nos TaskLists.

Dans le prochain article (et tutoriel vidéo associé), nous verrons comment supprimer un élément dans notre base de données.

Happy coding 😉