리액트 심화 과정 - 4강 댓글 가져오기

image-community/src/components/CommentList.js

@@ -1,21 +1,40 @@
 import React from "react";
 import { Grid, Image, Text } from "../elements";
+import { useDispatch, useSelector } from "react-redux";
+import { actionCreators as commentActions } from "../redux/modules/comment";
+
+const CommentList = (props) => {
+  const dispatch = useDispatch();
+  const comment_list = useSelector((state) => state.comment.list);
+  const { post_id } = props;
+
+  React.useEffect(() => {
+    console.log(comment_list);
+    if (!comment_list[post_id]) {
+      dispatch(commentActions.getCommentFB(post_id));
+    }
+  }, []);
+
+  if (!comment_list[post_id] || !post_id) {
+    // 아직 DB에서 데이터가 안넘어왔을때는 오류를 내니까 공백이라도 보여주자.
+    return null;
+  }
 
-const CommentList = () => {
   return (
     <React.Fragment>
       <Grid padding="16px">
-        <CommentItem />
-        <CommentItem />
-        <CommentItem />
-        <CommentItem />
-        <CommentItem />
-        <CommentItem />
+        {comment_list[post_id].map((c) => {
+          return <CommentItem key={c.id} {...c} />;
+        })}
       </Grid>
     </React.Fragment>
   );
 };
 
+CommentList.defaultProps = {
+  post_id: null,
+};
+
 export default CommentList;
 
 const CommentItem = (props) => {

image-community/src/pages/PostDetail.js

@@ -29,8 +29,8 @@ const PostDetail = (props) => {
           is_me={post.user_info.user_id === user_info?.uid ? true : false}
         />
       )}
-      <CommentWrite />
-      <CommentList />
+      <CommentWrite post_id={id} />
+      <CommentList post_id={id} />
     </React.Fragment>
   );
 };

image-community/src/pages/PostList.js

@@ -14,7 +14,7 @@ const PostList = (props) => {
   const history = props.history;
 
   React.useEffect(() => {
-    if (post_list.length === 0) {
+    if (post_list.length < 2) {
       dispatch(postActions.getPostFB());
     }
   }, []);

image-community/src/redux/configureStore.js

@@ -6,13 +6,15 @@ import { connectRouter } from "connected-react-router";
 import User from "./modules/user";
 import Post from "./modules/post";
 import Image from "./modules/image";
+import Comment from "./modules/comment";
 
 export const history = createBrowserHistory();
 
 const rootReducer = combineReducers({
   user: User,
   post: Post,
   image: Image,
+  comment: Comment,
   router: connectRouter(history),
 });
 

image-community/src/redux/modules/comment.js

@@ -0,0 +1,77 @@
+import { createAction, handleActions } from "redux-actions";
+import { produce } from "immer";
+import { firestore } from "../../shared/firebase";
+import "moment";
+import moment from "moment";
+
+const initialState = {
+  list: {},
+  is_loading: false,
+};
+
+const SET_COMMENT = "SET_COMMENT";
+const ADD_COMMENT = "ADD_COMMENT";
+const LOADING = "LOADING";
+
+const setComment = createAction(SET_COMMENT, (post_id, comment_list) => ({
+  post_id,
+  comment_list,
+}));
+const addComment = createAction(ADD_COMMENT, (post_id, comment) => ({
+  post_id,
+  comment,
+}));
+
+const loading = createAction(LOADING, (is_loading) => ({ is_loading }));
+
+const getCommentFB = (post_id) => {
+  return function (dispatch, getState, { history }) {
+    if (!post_id) {
+      return;
+    }
+
+    const commentDB = firestore.collection("comment");
+
+    commentDB
+      .where("post_id", "==", post_id)
+      .orderBy("insert_dt", "desc")
+      .get()
+      .then((docs) => {
+        let list = [];
+
+        docs.forEach((doc) => {
+          list.push({ ...doc.data(), id: doc.id });
+        });
+        // console.log(list);
+        dispatch(setComment(post_id, list));
+      })
+      .catch((err) => {
+        console.log("댓글 정보를 가져오다가 실패했는디요?");
+      });
+  };
+};
+
+export default handleActions(
+  {
+    [SET_COMMENT]: (state, action) =>
+      produce(state, (draft) => {
+        draft.list[action.payload.post_id] = action.payload.comment_list;
+        // comment들을 담는 list를 딕셔너리 형으로 만들고
+        // post_id를 key, 해당 post의 comment들(딕셔너리)을 배열 형태로 담은 comment_list를 value로 할당.
+      }),
+    [ADD_COMMENT]: (state, action) => produce(state, (draft) => {}),
+    [LOADING]: (state, action) =>
+      produce(state, (draft) => {
+        draft.is_loading = action.payload.is_loading;
+      }),
+  },
+  initialState
+);
+
+const actionCreators = {
+  getCommentFB,
+  setComment,
+  addComment,
+};
+
+export { actionCreators };