Часть 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. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.