Nous ajoutons des jetons partout, ce qui est important, mais pour les commandes, nous ne voulons pas seulement ajouter le
jeton, nous voulons également nous assurer que les commandes appartiennent vraiment à l'utilisateur connecté.
Maintenant, la bonne chose est que nous stockons l'ID utilisateur généré par Firebase dans notre magasin Redux.
Donc, mapper nos commandes aux utilisateurs n'est pas trop difficile, nous avons accès à notre magasin complet ici,
afin que nous puissions obtenir l'ID utilisateur en appelant getState. auth. userId, c'est tout, cela
nous donne l'ID utilisateur de l'utilisateur actuellement connecté
et maintenant nous pouvons l'injecter ici et remplacer l'U1 codé en dur par userId.
Bien sûr, non seulement pour ajouter des commandes, mais aussi pour récupérer des commandes, car nous voulons récupérer les
commandes de l'utilisateur actuellement connecté.
Alors ici, recevons également ce deuxième argument, récupérons notre userId et échangeons ici des guillemets
simples pour des ticks arrière afin que nous puissions utiliser cette injection pratique et pratique ici, puis remplacer ou interpoler
comme on l'appelle ici en ajoutant l'ID utilisateur. Ainsi, cela garantit également que les commandes sont stockées correctement, mais bien sûr, ce
ne sont pas
seulement les commandes, les produits doivent également être stockés de la sorte. Nous devons nous assurer que lorsque nous créons
un produit, nous y ajoutons effectivement notre ID de propriétaire, c'est quelque chose que nous
ne faisons pas actuellement et c'est quelque chose que nous devons faire.
Donc ici, je veux aussi obtenir l'ID utilisateur ici dans créer un produit et quand j'envoie ensuite ma demande pour
créer un nouveau produit, je ne veux pas seulement définir le titre, la description et ainsi de suite, je
veux
également définir un propriétaire Le champ ID et le nom exact sont à vous, qui est égal à l'ID utilisateur de l'utilisateur connecté et c'est maintenant quelque
chose de tout nouveau, maintenant
nous commençons vraiment à mapper les
produits à un utilisateur, quelque chose que nous faisions auparavant de manière fictive. Cela signifie également que lorsque nous expédions créer un produit
ici, je veux transmettre une nouvelle information, je veux également y ajouter l'ID du propriétaire et également pointer
l'ID utilisateur ici et cela signifie que dans le réducteur de produits, nous devons
respecter cela et là-bas, au lieu de coder en dur cet ID
ici, nous pouvons maintenant obtenir cela de notre action. productData, à partir de l'ID du propriétaire, car
c'est ce que je viens d'ajouter.
Alors ici, les produits, j'ai ajouté l'ID du propriétaire, j'ai ajouté cette clé aux données du produit, à
l'action que j'envoie, maintenant dans le réducteur, nous devons l'utiliser, l'extraire ici et l'utiliser comme ID du propriétaire du
produit que nous créons localement à Redux.
Bien sûr, cela signifie également qu'ici, lorsque j'obtiens les produits qui appartiennent à cet utilisateur, je veux également
m'assurer que je filtre correctement pour l'ID correct.
Donc, lorsque nous appelons des produits définis ici, je veux m'assurer que les
produits utilisateur sont vraiment filtrés vers le bas pour l'utilisateur connecté, donc dans le créateur d'action produits, lorsque nous récupérons tous les produits, ici
bien sûr, je veux récupérer tous les produits, mais là, je veux aussi pouvoir obtenir mon état afin que je puisse obtenir mon userId
de l'état parce qu'ici, lorsque nous créons les produits chargés, je ne veux pas simplement
les transférer, je veux aussi ajouter un nouvel utilisateur produits clé de mon objet d'action où je prends
les produits chargés et ici je les filtre et je regarde chaque produit et si l'ID du propriétaire du produit, s'il est égal à l'ID utilisateur,
alors je veux le garder car alors c'est un produit créé par l'utilisateur actuellement connecté, sinon
je
ne le garderai pas.
Cela fait toujours partie du produit chargé que je passe au produit mais pas des produits que j'ai passés
aux produits utilisateur et
qui me permet de revenir au réducteur et là dans les produits définis, les produits utilisateur sont initialisés non
pas en filtrant ici mais en définissant il est égal aux produits utilisateur d'action qui prend maintenant les produits filtrés filtrés dans le créateur
d'action avec la logique que nous venons d'écrire où nous prenons l'ID utilisateur. Cela garantit que nous ne voyons que les produits
que nous avons vraiment créés et que nous ne voyons pas le produit d'autres utilisateurs.
Maintenant, bien sûr, nous pouvons également nous assurer que dans notre magasin de produits ici, nous ne commençons
pas avec nos produits factices, mais nous
commençons en fait avec un tableau vide dans les deux cas ici. Cela signifie également bien sûr que maintenant, si nous enregistrons cela et que
nous nous connectons, nous devrions pouvoir voir notre produit précédent, le
voici,
mais si je vais à l'administrateur, nous ne
le voyons pas là-bas et cela a beaucoup de sens car ce produit a été
créé plus tôt dans le cours et n'a donc pas d'ID propriétaire. Ce produit n'a pas d'ID de propriétaire, donc il n'est inclus dans aucun produit utilisateur, ce qui
est génial car maintenant j'ai un bel exemple qu'il n'y a pas encore de
produits, peut-être devrions-nous également afficher un message ici.
En remarque dans les commandes, nous ne voyons rien non
plus et nous devrions peut-être également afficher un message ici car les commandes pour U1, ce n'est plus un ID utilisateur
valide, donc
ces commandes ne sont jamais chargées pour aucun utilisateur et c'est bien parce que Voilà comment il devrait être.
Alors maintenant, avec cela, je vais juste ajuster ces pages un peu pour afficher un message si nous ne pouvons pas charger de données.
Donc, ici, dans l'écran des produits utilisateur, si la longueur des produits utilisateur est égale à zéro, je ne veux pas retourner ma liste plate, mais à
la place, je retournerai une vue où j'ai un texte où je dis qu'aucun produit n'a été trouvé, peut-être commencez à en créer et nous devrons
y configurer des styles, nous devons également importer la vue et le texte sinon nous ne pouvons pas
afficher cela et maintenant je vais faire
un style en ligne rapide
et sale ici avec flex one, justifier centre de contenu et centre d'alignement des éléments, bien sûr, vous pouvez également attribuer votre propre
police ici au texte et ainsi de suite, je vais le faire comme ceci, puis le
copier et le déplacer vers l'écran des commandes, assurez-vous que vous importez la vue
et le texte là aussi, puis ici, nous pouvons
également ajouter cette vérification, si la longueur des produits utilisateur est vide, bien sûr ici, nous devons vérifier la
longueur des commandes, pas la longueur des produits utilisateur, mais si elle est vide, je dis qu'aucune
commande n'a été trouvée, peut-être commencer à commander certains produits comme ça et avec ça,
on devrait voir ce texte si rien n'est trouvé.
Donc, si j'essaye maintenant à nouveau et que je me connecte très rapidement et que nous allons à la page d'administration, nous voyons le texte ici et si nous allons
à la page des
commandes, nous voyons également le texte ici.
Alors maintenant, cela fonctionne comme il se doit.
Si je crée maintenant un nouveau produit d'autre part, par exemple un foulard disons avec un joli petit
URL que j'ai sélectionné pour 55 $. 99, un foulard en laine, si je fais cela et
que je soumets cela, cela fonctionne bien et il apparaît également ici sous admin, apparaît également sous les produits, nous pourrions bien sûr également
le filtrer si vous le vouliez, mais pourquoi pas, pourquoi ne l'avons-nous
pas ici aussi et
si j'ajoute ceci au panier et que je clique sur commande maintenant, maintenant ici sous commandes, nous le voyons et sur Firebase, nous
voyons également que sous commandes maintenant nous avons un nœud avec notre userId avec notre ordres.
Donc, cela fonctionne maintenant vraiment comme il le devrait ici sur
cette application et donc maintenant ici, nous avons une configuration avec laquelle nous pouvons travailler.