Dans cette article, nous allons ajouter une nouvelle fonctionnalité dans notre application de gestion des tâches. Lors de la création d’une tâche, nous allons pouvoir définir une catégorie. Pour cela, nous allons dans un premier temps, ajouter une collection dans Firestore dans laquelle nous allons stocker les catégories. Ensuite, nous ajouterons dans notre fichier “Firebase” le moyen de récupérer les informations de cette collection. Et enfin, nous modifirons la fenêtre modale d’ajout de tâches pour ajouter une liste déroulante.

Modification de la base de données

Pour commencer, nous allons ajouter une nouvelle collection dans notre base de données. On le fait depuis la console Firebase (https://console.firebase.google.com/).

Je la nomme ‘Categorie’, et j’ajoute juste un champ que je vais appeler ‘Categorie’ aussi. Je rajoute 4 documents: Professionel, Personnel, Achats, Autres.

C’est terminé pour la base de données. Je trouve que c’est l’un des gros points forts de Firestore, c’est très facile à gérer depuis la console.

Ajout de la lecture de la nouvelle collection

Les modifications doivent être faites dans le fichier “firebase.js”. On va juste ajouter la lecture de la collection.

    ...
    categories: () => {
        return db.collection('Categorie')
    }
    ...

C’est tout pour la partie backend. Et encore, c’est un bien grand mot pour le peu de travail que nous avons eu besoin de faire.

Modification du formulaire de création

Maintenant, on va modifier le formulaire de création de tâches pour ajouter la catégorie. Cette modification doit se faire dans le fichier ‘addTodo.js’. On va le faire en plusieurs parties:

• Ajouter une liste déroulante
• Charger les données

Ajout de liste déroulante

On va importer un nouvel objet dans notre page

import { View, TextInput, StyleSheet, Picker } from 'react-native'

On va l’intégrer dans notre formulaire:

    <Picker
        selectedValue={categories}
        onValueChange={(value) => setCategorie(value)}
    >
        {renderCategorie()}
    </Picker>

Pour stocker les infos, nous allons avoir besoin de 2 nouvelles d’état

    const [categories, setCategories] = useState([])
    const [categorie, setCategorie] = useState('')

Chargement des catégories

Ensuite, on va charger les données.

Pour commencer, il faut que nous ajoutions notre “High Order Component”. D’abord, on l’importe.

import { firebaseHOC } from '../Firebase'

On modifie aussi l’export de notre composant. On déplace le “export default” à la fin du fichier pour lui ajouter le “HOC”.

export default firebaseHOC(AddTodo)

Maintenant, nous sommes capables de faire appel aux API Firestore. On va le faire depuis un “useEffect” que nous allons ajouter dans notre fichier.

    useEffect(() => {
        const loadCategories = () => firebase.categories().onSnapshot(
            (querySnapshot) => {
                const list = []
                querySnapshot.forEach(element => {
                    const { categorie } = element.data()
                    list.push({
                        categorie,
                        id: element.id
                    })
                });
                setCategories(list)
            }
        )

        loadCategories()
    }, [])

Dans cette fonction, on fait un appel à l’API Firestore, on va lire les infos et les ajouter dans un tableau que nous pourrons ensuite stocker dans la variable d’état “categories”.

Maintenant que c’est fait, nous allons définir la fonction “renderCategories” que nous avons crées dans la partie précédente.

    const renderCategorie = () => {
        return categories.map(item =>
            <Picker.Item label={item.categorie} value={item.id} key={item.id} />
        )
    }

On boucle sur le contenu du tableau “categories” pour créer un enregistrement dans la liste déroulante.

Enregistrement des données

Il ne nous reste plus qu’à enregistrer l’ensemble du formulaire sous Firestore.

On modifie le bouton dans le fichier “AddTodo.js”. On ajoute l’id de la catégorie lors de l’appel vers la fonction addTodo. Nous allons le stocker dans le document.

    <MaterialIcons
        name={'save'}
        size={40}
        style={styles.buttonStyle}
        onPress={() => addTodo(tache, categorie)}
    />

On va dans le fichier “firebase.js” pour modifier la fonction “addTodos”.

    addTodos: (tache, categorie) => {
        return db.collection('todos').add(
            {
                tache,
                categorie: db.doc('categorie/' + categorie)
            })
    },

Lors de l’enregistrement de notre catégorie, nous allons stocker une référence vers le document de la collection ‘categorie’. Pour notre cas, ce n’est pas forcément necessaire pour le moment mais il faut prendre directement les bonnes habitudes.

Voici ce que donne maintenant l’enregistrement dans Firestore

Nous verrons dans le prochain article comment modifier la page d’accueil pour profiter de l’ajout de la catégorie et aussi un petit point important: la suppression des tâches.