Часть 21. Используйте firestore, query, collection и getDocs
В этой статье мы собираемся получить данные пользователя, чтобы мы могли щелкнуть по ним и начать чат позже.
"Исходный код"
Во-первых, в Sidebar.js нам нужно импортировать следующее.
import { useState, useEffect } from 'react'; import { collection, getDocs, query, where } from "@firebase/firestore"; import { db } from '../firebase'; import { useAuth } from '../Auth';
Далее нам нужно создать состояние друзей и получить currentUser с помощью useAuth().
UserRef должен указывать на коллекцию с именем «users». Выберите тех, у кого другой адрес электронной почты, что и у пользователя.
Наконец, мы устанавливаем doc.data() с идентификатором в качестве данных друзей.
const Sidebar = () => { const [friends, setFriends] = useState([]) const { currentUser } = useAuth(); useEffect(() => { async function fetchFriends() { const usersRef = collection(db, "users"); const q = query(usersRef, where("email", "!=", currentUser?.email)); const querySnapshot = await getDocs(q); setFriends(querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }))) } fetchFriends() }, [])
Визуализация друзей
Чтобы визуализировать друга, нам нужно создать компонент «Друг». Мы можем скопировать из компонента «Чат», просто удалив последнее сообщение и временную метку. Приготовьтесь передать компоненту photoURL и displayName.
import { Avatar } from '@mui/material'; import styled from 'styled-components'; const Friend = ({ photoURL, displayName }) => { return ( <Container > <FrdAvatar src={photoURL} /> <ChatContainer> <div style={{ gridArea: 'name' }}>{displayName}</div> </ChatContainer> </Container> ) } export default Friend const Container = styled.div` display:flex; align-items:center; cursor:pointer; min-height:67px; padding-left: 15px; word-break:break-word; :hover { background-color:#F5F5F5; } ` const FrdAvatar = styled(Avatar)` margin:5px; margin-right:15px; ` const ChatContainer = styled.div` display:grid; padding:10px; width:100%; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid #ededed; gap:10px; grid-template-areas: "name name time" "latest_message latest_message." ; `
Вернитесь на боковую панель и импортируйте компонент «Друг».
import Friend from './Friend';
Визуализируйте друзей с помощью функции карты.
{friends.map(friend => ( <Friend key={friend.id} photoURL={friend.photoURL} displayName={friend.displayName} id={friend.id} /> ))}
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.