React Nwetter - home.js

import React, { useState, useEffect } from "react";
import { dbService } from "myBase";
import Nweet from "components/Nweet";
import NweetFactory from "components/NweetFactory";
const Home = ({ userObj }) => {
// const getNweets = async () => {
// const dbnweets = await dbService.collection("nweets").get();
// dbnweets.forEach((document) => {
// const nweetObject = {
// ...document.data(),
// id: document.id,
// };
// setNweets((prev) => [nweetObject, ...prev]);
// });
// };
const [nweets, setNweets] = useState([]);
useEffect(() => {
dbService
.collection("nweets")
.orderBy("createdAt", "desc")
.onSnapshot((snapshot) => {
const nweetArray = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setNweets(nweetArray);
});
}, []);
return (

<div className="container">
  <NweetFactory userObj={userObj} />
  <div style={{ marginTop: 30 }}>
    {nweets.map((nweet) => (
      <Nweet
        key={nweet.id}
        nweetObj={nweet}
        isOwner={nweet.creatorId === userObj.uid}
      />
    ))}
  </div>
</div>

);
};
export default Home;
ログイン後の構成画面router
ホームページでツイッター機能を実装
写真をtweet機能に添付して送信し、プレビューを実現できます.
idがtrueの場合、tweetは変更/削除機能を有効にします.
userObjectをパラメータとして取得し、オブジェクトから情報を取得します.