import React, { useState, useEffect } from 'react'; import { useTransition } from 'react-spring'; import { WithMe, UserAvatar } from './LiveEventElements'; import { realtimeDB } from '../../firebase'; import { LoadingSpinner } from '../../components'; function WithMeList({ currentProtest }) { const [withMeUsers, setWithMeUsers] = useState([]); const [avatars, setAvatars] = useState([]); const [loading, setLoading] = useState(true); const avatarsFadeIn = useTransition(avatars, (avatar) => avatar.id, { from: { opacity: 0 }, enter: { opacity: 1 }, config: { duration: 350 }, }); useEffect(() => { if (currentProtest?.id) { const withMeData = realtimeDB .ref('24-10-20_check_ins') .orderByChild('protestId') .equalTo(currentProtest.id) .limitToLast(35); withMeData.on('child_added', (data) => { const user = data.val(); setWithMeUsers((prevState) => { return [{ ...user, id: data.key }, ...prevState]; }); if (user.pictureUrl) { setAvatars((prevState) => { return [...prevState, { url: user.pictureUrl, id: data.key }]; }); } }); withMeData.once('value', () => setLoading(false)); } }, [currentProtest]); if (!currentProtest) { return ( <WithMe> <h2 style={{ textAlign: 'center' }}>עשו צ'ק אין להפגנה בשביל לראות מי מפגין איתכם</h2> </WithMe> ); } if (loading) { return ( <WithMe style={{ textAlign: 'center' }}> <p>טוען נתונים...</p> <LoadingSpinner /> </WithMe> ); } return ( <WithMe> <WithMe.ProtestInfo> <WithMe.ProtestInfo.Title>{currentProtest.displayName}</WithMe.ProtestInfo.Title> <WithMe.ProtestInfo.Counter>{withMeUsers.length} מפגינות ומפגינים באתר</WithMe.ProtestInfo.Counter> </WithMe.ProtestInfo> <WithMe.Avatars> {avatarsFadeIn.map(({ item, props, key }) => ( <UserAvatar style={props} src={item.url} key={key} /> ))} </WithMe.Avatars> </WithMe> ); } export default WithMeList;