Не получается отсортировать по времени в firestore V9 FIREBASE, REACT

Question

Делаю чат приложение на react с использованиеем firebase. Не могу настроить программу так, что бы корректно изображались сообщения. Они все идут в разброс. Не понимаю, что я делаю не так, много чего пытался но результата 0. Пробую через orderBy, но это не даёт результата

Помогите плз)))

import { Avatar, Button, Container, Grid, TextField } from '@mui/material';
import React, { useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth, db } from '..';
import Loader from './Loader';
import { serverTimestamp,  collection, addDoc, orderBy, query, getDocs, where} from "firebase/firestore"; 
import { useCollectionData, } from "react-firebase-hooks/firestore"




const Chat = () => {
    const [user]  = useAuthState(auth)
    const [value, setValue] = useState('')
    
    const messagesColection = collection(db, "messages")
    const [messages, loading] = query(useCollectionData(messagesColection, orderBy('createdAt')))
  
  


    const sendMessage = async() => {

        await addDoc(messagesColection, {
                displayName: user.displayName,
                uid: user.uid,
                photoURL: user.photoURL,
                text: value,
                createdAt: serverTimestamp(),
          });
          
          setValue('')
        }
        
    if (loading) {
        return <Loader/>
    }
  
    return (
        <Container>
            <Grid Container
                justifyContent={"center"}
                alignItems={"center"}
                style={{height: window.innerHeight - 50, position: "relative", top: "15px"}}
            >
                <div style={{width:"80%", height: '70vh', border:'1px solid gray', overflowY: 'auto'}}>
                    {messages.map( message => 
                        <div style={{
                            margin:10,
                            border: user.uid === message.uid ? '2px solid red' : '1px solid #000',
                            marginLeft: user.uid === message.uid ? 'auto' : '10px',
                            width: 'fit-content',
                            padding: "5px"

                            }}>
                            <Grid container>
                                <Avatar src={message.photoURL}/>
                                <div>{message.displayName}</div>
                            </Grid>
                            <div>{message.text}</div>
                        </div>)}
                        
                </div>  
                <Grid 
                        container
                        direction={"column"}
                        alignItems={"flex-end"}
                        style={{width: '80%'}}
                        >
                        <TextField 
                            fullWidth
                            rowsMax={2}
                            variant={"outlined"}
                            value={value}
                            onChange={e => setValue(e.target.value)}
                            />
                        <Button onClick={sendMessage} variant={"outlined"}>Send</Button>
                    </Grid>      
            </Grid>
        </Container>
    );
}

export default Chat;

Answer 1

В общем получилось, это было сложно

import { Button, Container, Grid, TextField } from '@mui/material';
import React, { useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth, db } from '..';
import Loader from './Loader';
import { serverTimestamp,  collection, addDoc, orderBy, query} from "firebase/firestore"; 
import { useCollectionData, } from "react-firebase-hooks/firestore"
import SendIcon from '@mui/icons-material/Send';
import Message from './Message'
import "./Chat.css"


const Chat = () => {
    
    const [user]  = useAuthState(auth)
    const [value, setValue] = useState('')
    const messagesColection = collection(db, "messages")
    const queryMessages = query(messagesColection, orderBy("createdAt"));
    const [messages, loading] = query(useCollectionData(queryMessages, orderBy('createdAt')))
  
    
    const sendMessage = async() => {
        await addDoc(messagesColection, {
                displayName: user.displayName,
                uid: user.uid,
                photoURL: user.photoURL,
                text: value,
                createdAt: serverTimestamp(),
          });
          setValue('')
    }
        
    if (loading) {
        return <Loader/>
    }
  
    return (
        <Container>
            <Grid Container
                justifyContent={"center"}
                alignItems={"center"}
                className={"containerMessages"}
                // style={{height: window.innerHeight - 50}}
            >
                <div style={{height: '80vh', border:'1px solid gray', overflowY: 'auto', marginBottom: "15px"}}>
                    {messages.map( message => 
                        <div 
                            className='containerMessage'
                            style={{
                            margin:10,
                            background: user.uid === message.uid ? 'box-shadow: 6px 0px 12px 0px #943ba38f;' : 'linear-gradient(333deg, #253be2b3, #253be2b3)',
                            background: user.uid === message.uid ? 'linear-gradient(333deg, #253be2b3, #00000000)' : 'linear-gradient(105deg, #943ba38f, #00000000)',
                            marginLeft: user.uid === message.uid ? 'auto' : '10px',
                            width: 'fit-content',
                            }}>
                            <Message
                                name={message.displayName}
                                avatar={message.photoURL}
                                text={message.text}
                                uid={message.uid}
                            ></Message>
                        </div>)}
                        
                </div>
                {(value !== '') ?   
                    <Grid 
                        direction={"column"}
                        alignItems={"flex-end"}
                        container
                    >
                        <TextField 
                            fullWidth
                            rowsMax={2}
                            variant={"outlined"}
                            value={value}
                            onChange={e => setValue(e.target.value)}
                            marginBottom={"10px"}
                            />
                        <Button size="large" onClick={sendMessage} variant={"outlined"} endIcon={<SendIcon />}>Send</Button>
                        
                    </Grid>                                
                :
                    <Grid 
                        container
                        direction={"column"}
                        alignItems={"flex-end"}
                        marginBottom={"10px"}
                        className={"areaMessage"}
                        >
                        <TextField
                            error
                            fullWidth
                            id="outlined-error"
                            label="Write a message"
                            value={value}
                            onChange={e => setValue(e.target.value)}
                        />
                        <Button size="large" disabled variant={"outlined"} endIcon={<SendIcon />}>Send</Button>
                </Grid>  
                }    
            </Grid>
        </Container>
    );
}

export default Chat;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

Не получается отсортировать по времени в firestore V9 FIREBASE, REACT

Ответы (1 шт):