ReactのJavaScriptファイルでツイートアプリの投稿の表示を降順にしたい。

Question

前提・実現したいこと

こちらの記事を参考にReactとFirebaseを使って簡易的なツイートアプリを作っています。
https://hirokianzai.com/2019/02/17/react-firebase-tweet-app
これを再現しただけだと、投稿した内容が古い順に表示されていますが、これを新しい物から順に上から表示されるようにしたいです。

発生している問題・エラーメッセージ

投稿した内容が古い順に表示されてしまう。

該当のソースコード

import React, { Component } from 'react';
import './App.css';
import firebase from 'firebase/app';
import firestore from 'firebase/firestore';
import config from './firebase-config.js';

firebase.initializeApp(config);
const db = firebase.firestore();
const collection = db.collection('tweets');

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], user: '', text: '' };
    this.tweet = this.tweet.bind(this);
    this.userName = this.userName.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <React.Fragment>
        <div className="container">
          <form onSubmit={this.handleSubmit} autoComplete="off">
            <div><input onChange={this.userName} value={this.state.user} id='tweets' placeholder=" 名前" className="name" maxlength="20" required/></div>
            <br/>
            <div><textarea id="new-todo" onChange={this.tweet} value={this.state.text} placeholder=" 投稿内容" className="text" maxlength="200" required/></div>
            <br/>
            <button className="btn forum" type="submit">投稿</button>
          </form>
          </div>
      　{/*  TweetList Componentの呼び出し */}
        <div className="tweet-list">
          <TweetList items={this.state.items}/>
        </div>
      </React.Fragment>
    );
  }
  userName(event){
    this.setState({user:event.target.value});
  }
  tweet(event){
    this.setState({text:event.target.value});
  }
  componentDidMount(){
    collection.orderBy('created','desc').get()/*  この行に'desc'を付け加えたことによってリロード後に限り投稿が新しいもの順になりました */
    .then(snapshot =>{
      snapshot.docs.map(doc => {
        console.log(doc.data());
        const allItems = {
          user: doc.data().user,
          text: doc.data().text,
          created: doc.data().created,
        }
        this.setState(state => ({
          items: state.items.concat(allItems),
          user: '',text: ''
        }));
      });
    });
  }

  handleSubmit(event) {
    {/*  名前・投稿内容が入力されなかった場合のバリデーション */}
    event.preventDefault();
    if(this.state.user === "") {
      alert('名前を入力してください')
      return;
    } else if(this.state.text === "") {
      alert('投稿内容を入力してください')
      return;
    }

    const newItem = {
      user: this.state.user,
      text: this.state.text,
    };

    {/*データベースに入れる*/}
    collection.add({
      user: this.state.user,
      text: this.state.text,
      created: firebase.firestore.FieldValue.serverTimestamp()
    })
    .then(doc => {
      console.log(`${doc.id}をDBに追加`);
    })
    .catch(error =>{
      console.log(error);
    });

    this.setState(state => ({
      items: state.items.concat(newItem),
      user: '',
      text: ''
    }));
  }
}

class TweetList extends React.Component {
  render() {
    return (
      <React.Fragment>
        <ul>
          {this.props.items.map((item, i) => (
            <li key={i}>
            <div className="line-bc">
              <div className="balloon6">
                <div className="faceicon">
                <img src="icon.png"/>{item.user}
                </div>
                <div className="chatting">
                  <div className="says">
                    <p>{item.text}</p>
                  </div>
                </div>
              </div>
            </div>
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}
export default App;

試したこと

自分なりに調べてみたところ、リロード後にはちゃんと新しい投稿順に並べ替えることができたのですが、投稿直後だけは投稿した物が最下部に表示されてしまいます。上の記事通りに作った現在のJavaScriptのソースコードを添付しますのでどうか教えてください。

補足情報（FW/ツールのバージョンなど）

Answer 1

{/*データベースに入れる*/}
collection.add({
// ...

this.setState(state => ({
  items: state.items.concat(newItem),
  user: '',
  text: ''
}));

この段階ではデータがコレクションおよびitemsの末尾に追加されてしまうためだと思います。
componentDidMount中でdescを記載することで降順取得ができるようになることは理解いただいているようなので、同様の処理を追加時に行うだけだと思います。
※コレクションに対して再度collection.orderBy('created','desc').get()して取得した値をstateに入れるか、itemsだけをsort()を使って並べ替えるかの二択だと思います。

Comments

[yoshiki44]

ご解答ありがとうございます。解決の方向性が分かりました。
コードについてはこのような形で近づいているでしょうか？いろいろ試してみたのですがまだうまくいかないです。見当違いでしょうか？

```JavaScript
{/*データベースに入れる*/}
collection.add({
// ...

collection.orderBy('created','desc').get()
this.setState(state => ({
items: state.items.concat(newItem),
user: '',
text: ''
}));
```