[프로젝트] 코드리뷰-client 04

댓글로 넘어가보자

      <ButtonBox>
          <Button>댓글</Button>
          <LikeBox onClick={handleLikeClick}>
            <LikeCount>{like}</LikeCount>
            <Like primary={like}>
              <i className="far fa-thumbs-up"></i>
            </Like>
          </LikeBox>
        </ButtonBox>
        {state.userId && <NewCommentForm nowContentId={id} nowUserId={state.userId} getSingleData={getSingleData} />}
        <CommentForm>
          {comments?.map((comment, idx) => (
            <SingleComment key={idx} comment={comment} getSingleData={getSingleData} id={id} />
          ))}
        </CommentForm>

로그인시 댓글등록이 가능하게 보여지지만 

아니면 달수가없다. 보이지않는다.

 

---

Newcommnetform. js

---

{state.userId && <NewCommentForm nowContentId={id} nowUserId={state.userId} getSingleData={getSingleData} />}

 

 

댓글을 수정한 사람이 댓글수정삭제를 할수있게 위해 nowUserId에 userId를 내려주고, 데이터에 담긴 comments가 잇기때문에 함께 내려준다.  => 해당 컨텐츠 아이디 어떤곳의 댓글인지 알기위해 내려준다.

 

const NewCommentForm = ({ nowContentId, nowUserId, getSingleData, id }) => {
  const [newComment, setNewComment] = useState("");
  const handleChangeComment = (e) => {
    setNewComment(e.target.value);
  };

  const onClickSubmit = async () => {
    const comment = {
      content: newComment,
      contentId: nowContentId,
    };
    await postComment(comment);
    await getSingleData(id);
  };

  return (
    <WritingAllignment>
      <CommentWriting
        type='text'
        onChange={handleChangeComment}
        placeholder={!nowUserId && "댓글을 작성 하려면 로그인 하세요"}
      />
      <CommentButton onClick={onClickSubmit}>등록</CommentButton>
    </WritingAllignment>
  );
};

작성한 댓글내용을 저장할 state를 만들어준다. 

 const [newComment, setNewComment] = useState("");

댓글작성시 api를 봐보자 body에 필요한것이 contentsId와 content였다.

content에는 댓글의 내용이 들어가야될것이며

contentsId에는 게시글의 id가 들어가야하기에, id를 받아온 nowcontentid를 넣어야한다.

 

 const onClickSubmit = async () => {
    const comment = {
      content: newComment,
      contentId: nowContentId,
    };
    await postComment(comment);
    await getSingleData(id);
  };

export const postComment = async (comment) => {
  try {
    const data = await axios.post(`${URL}/comment`, comment, cookieOption);

    return data;
  } catch (e) {}
};

const getSingleData = async () => {
    const data = await getSingleContent(id);
    setSingleData(data);
    setLike(data.like);
  };
  
  export const getSingleContent = async (id) => {
  try {
    const {
      data: { visitCnt },
    } = await axios.get(`${URL}/content/${id}`, cookieOption);

    return visitCnt;
  } catch (e) {}
};

commnet를 내용을 담아 보내주면 해당 컨텐츠의 내용들이 다시 업데이트가되야하니 getSingleData(id)도 다시 업데이트를 ㅣㅅ켜준다. =>> 디테일페이지가 재렌더링

 

---

Singlecomment.js

---

<SingleComment key={idx} comment={comment} getSingleData={getSingleData} id={id} />

 

 

 

commnets => commnet는 배열안의 객체 하나하나 요것을 내려준다.

 

const SingleComment = ({ comment, getSingleData }) => {
  const state = useSelector((state) => state.allReducer);
  const [isEditing, setIsEditing] = useState(false);
  const [changeContent, setChangeContent] = useState("");
  const { nickname, createdAt, content, userId, id } = comment;

  const handleEdit = async () => {
    const change = !isEditing;
    if (!change) {
      await editComment(id, changeContent);
    }
    setChangeContent(content);
    setIsEditing(change);
    getSingleData();
  };

  const handlechangeContent = (e) => {
    setChangeContent(e.target.value);
  };

  const handleDelete = async () => {
    await deleteComment(id);
    getSingleData();
  };

  const check = parseInt(userId) === parseInt(state.userId);

  return (
    <CommentBox>
      <CommentAlignment>
        <UserBox>
          <User>{nickname}</User>
          <Inform>{formatDate(createdAt)}</Inform>
        </UserBox>
        {isEditing ? (
          <EditComment value={changeContent} onChange={handlechangeContent} />
        ) : (
          <Comment>{content}</Comment>
        )}
      </CommentAlignment>

      {check && (
        <ModifyBox>
          <ModifyPopup onClick={handleEdit}>{isEditing ? "완료" : "수정"}</ModifyPopup>
          <ModifyPopup onClick={handleDelete}>삭제</ModifyPopup>
        </ModifyBox>
      )}
    </CommentBox>
  );
};

 

check와 isEditing은 이전에 게시글 수정에서 했던것과 같은 프로세스로 진행한다.