Vous utilisez un navigateur obsolète, veuillez le mettre à jour.
Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com
Une question ? Pas de panique, on va vous aider !
Bonjour à tous,
Je rencontre un problème pour récupérer les données d'une sous-collections "messages" qui est elle même dans une collection "channels" avec firebase
Mes channels qui sont dans un sidebar sont coder de cette façon en react.js :
import React, { useEffect, useState } from "react"; import "./Sidebar.css"; import AddIcon from "@mui/icons-material/Add"; import SidebarChannel from "./SidebarChannel"; import { useSelector } from "react-redux"; import { selectUser } from "./features/userSlice"; import 'firebase/auth'; import { query, onSnapshot, orderBy, collection, addDoc} from 'firebase/firestore'; import {db, auth } from './firebase'; function Sidebar() { const [channels, setChannels] = useState([]); useEffect(()=> { const q = query(collection(db,'channels')); const unsubscribe = onSnapshot(q, (QuerySnapshot)=> { let channels = []; QuerySnapshot.forEach((doc)=> { channels.push({...doc.data(), id: doc.id}); }); setChannels(channels); }); return() => unsubscribe(); }, []); const handleAddChannel = async (e) => { e.preventDefault(); const channelName = prompt("Créer un salon"); if (channelName) { await addDoc(collection(db, "channels"), { channelName: channelName, }) } }; return ( <div className="sidebar__channelsList"> {channels.map((channel, id) => ( <SidebarChannel key={id} id={channel.id} channelName={channel.channelName} /> ))} </div> ); } export default Sidebar;
en cliquant sur ces "channels", je dois récupérer les messages des users
Le problème c'est que je ne vois pas comment je peux récupérer les données de la sous collection "messages" :
const firestore = getFirestore(); const getUserMessages = async (channelId) => { const ref = firestore.collection('channels'); const messagesSnapshot = await ref.collection('messages').get(); return messagesSnapshot.docs.map((messages) => messages.data()); };
Je vous remercie d'avance pour votre aide
-Edité par Hôrn 13 avril 2024 à 23:40:20
A croire qu'à chaque fois que je met un message chez vous, je règle mon problème par moi même.
Et vu que le forum, n'autorise pas une réponse en dessous de 24h (<_<) , je n'ai pas pu répondre de suite.
Voici pour ceux a qui cela intéresse mon code :
useEffect(()=> { if (channelId) { const messageRef = query(collection(db, "channels", channelId, "messages")); const unsubscribe = onSnapshot(messageRef, (QuerySnapshot)=> { let messages = []; QuerySnapshot.forEach((doc)=> { messages.push({...doc.data(), id: doc.id}); }); setMessages(messages); }); return() => unsubscribe(); } }, [channelId]);
Vous pouvez rédiger votre message en Markdown ou en HTML uniquement.