質問編集履歴

追記

2021/02/27 14:30

投稿

moyong

スコア19

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -354,165 +354,11 @@
   return (
-    <div className={styles.post}>
-      <div className={styles.post_avatar}>
-        <Avatar
-          src={props.avatar}
-          className={styles.hoverAvatar}
-          onClick={() => props.updateProfile(props.username, props.avatar)}/>
-      </div>
-      <div className={styles.post_body}>
-        <div>
-          <div className={styles.post_header}>
-            <h3>
-              <span
-                className={styles.post_headerUser}
-                onClick={() => props.updateProfile(props.username, props.avatar)}
-              >@{props.username}</span>
-              <span className={styles.post_headerTime}>
-                {new Date(props.timestamp?.toDate()).toLocaleString()}
-              </span>
-            </h3>
-          </div>
-          <div className={styles.post_tweet}>
-            {props.trainingArray.map((record: any, index: number) => (
-              <p key={index} className="text-lg text-white font-bold">{record.trainingName} {record.trainingWeight}✖︎{record.trainingReps}回</p>
-            ))}
-          </div>
-        </div>
-        {props.image && (
-          <div className={styles.post_tweetImage}>
-            <img src={props.image} alt="tweet" />
-          </div>
-        )}
-        <MessageIcon
-          className={styles.post_commentIcon}
-          onClick={() => setOpenComments(!openComments)}
-        />
-        {
+  .
-          user.uid === props.postUid &&
-          <DeleteIcon
-          className={styles.post_deleteIcon}
-          onClick={deletePost}
-        />
-        }
+  .
-        {openComments && (
-          <>
-            {
+  .
-              comments.map((com) => (
-                <div key={com.id} className={styles.post_comment}>
-                  <Avatar src={com.avatar} className={classes.small}/>
-                  <span className={styles.post_commentUser}>@{com.username}</span>
-                  <span className={styles.post_commentText}>{com.text}</span>
-                  <span className={styles.post_headerTime}>{new Date(com.timestamp?.toDate()).toLocaleString()}</span>
-                </div>
-              ))
-            }
-            <form onSubmit={newComment}>
-              <div className={styles.post_form}>
-              <input
-                className={styles.post_input}
-                type="text"
-                placeholder="Type new comment..."
-                value={comment}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setComment(e.target.value)
-                }}
-              />
-              <button
-                type="submit"
-                disabled={!comment}
-                className={
-                  comment ? styles.post_button : styles.post_buttonDisable
-                }
-              >
-                <SendIcon className={styles.post_sendIcon} />
-              </button>
-              </div>
-            </form>
-          </>
-        )}
-      </div>
-    </div>
   )
@@ -524,4 +370,156 @@
 ```
+```FeedTSX
+import React, { useState, useEffect } from 'react'
+import styles from './Feed.module.css';
+import { db } from "../firebase";
+import TrainingInput from './TrainingInput';
+import Post from './Post';
+import User from './User';
+import { selectUser } from "../features/userSlice";
+import { useSelector } from "react-redux";
+interface User {
+  profileUserName: string;
+  avatar: string;
+}
+interface Post {
+  id: string;
+  avatar: string;
+  image: string;
+  trainingArray: [];
+  timestamp: any;
+  username: string;
+  uid: string;
+}
+const Feed: React.FC = () => {
+  const [ posts, setPosts] = useState<Post[]>([{
+      id: "",
+      avatar: "",
+      image: "",
+      trainingArray: [],
+      timestamp: null,
+      username: "",
+      uid: "",
+    },
+  ]);
+  const user = useSelector(selectUser);
+  const [profileUser, setProfileUser ] = useState<User>({
+    profileUserName: user.displayName,
+    avatar: user.photoUrl
+    }
+  )
+  // データベースから投稿一覧を取得してstateに入れる
+  useEffect(() => {
+    const unSub = db
+    .collection("training_posts")
+    .orderBy("timestamp", "desc")
+    .onSnapshot((snapshot) => setPosts(
+      snapshot.docs.map((doc) => ({
+        id: doc.id,
+        avatar: doc.data().avatar,
+        image: doc.data().image,
+        trainingArray: doc.data().training_array,
+        timestamp: doc.data().timestamp,
+        username: doc.data().username,
+        uid: doc.data().uid
+      }))
+    ));
+    return () => {
+      unSub();
+    };
+  }, []);
+  //ユーザープロフィール画面の表示をユーザーごとに切り替える
+  const updateProfile = (name:string, avatar:string) => {
+    console.log(`${name} + ${avatar}`);
+    setProfileUser({
+      profileUserName: name,
+      avatar: avatar,
+    })
+  }
+  return (
+  .
+  .
+  .
+  );
+}
+export default Feed
+```
 原因がわかりましたら、教えていただきたいです。

追記

2021/02/27 14:30

投稿

moyong

スコア19

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -72,6 +72,94 @@
 ```
+Post.tsxへは、親のFeed.tsxからpropsを渡しています。
+```FeedTSX
+{posts.length &&
+            <>
+              {posts.map((post) => (
+                <Post
+                  key={post.id}
+                  postId={post.id}
+                  avatar={post.avatar}
+                  image={post.image}
+                  trainingArray={post.trainingArray}
+                  timestamp={post.timestamp}
+                  username={post.username}
+                  postUid={post.uid}
+                  updateProfile={updateProfile}
+                />
+              ))}
+            </>
+          }
+```
+```FeedTSX
+// データベースから投稿一覧を取得してstateに入れる
+  useEffect(() => {
+    const unSub = db
+    .collection("training_posts")
+    .orderBy("timestamp", "desc")
+    .onSnapshot((snapshot) => setPosts(
+      snapshot.docs.map((doc) => ({
+        id: doc.id,
+        avatar: doc.data().avatar,
+        image: doc.data().image,
+        trainingArray: doc.data().training_array,
+        timestamp: doc.data().timestamp,
+        username: doc.data().username,
+        uid: doc.data().uid
+      }))
+    ));
+    return () => {
+      unSub();
+    };
+  }, []);
+```
+### Cloud Firestoreのコンソール画面
 「training_posts」や「comments」という名前はないよ、とエラー文を解釈してコンソール画面を確認してみましたが、
 タイプミスもないようですし、なぜアクセスできないのかが分からないです。