댓글 (삭제) 2-4차

page컴포넌트에서

 const userComments = useSelector(
    (state: any) => state.boardPageComment.boardComment
  );
  // 데이터 형태
  0 = [boardId] : [
  //아래는 내용
  	0:[...],
    1:[...]
  ]
  
  const userPageComment = userComments[boardId];
  
  return(
   <Comment userPageComment={userPageComment} />
  );

props로 Comment로 넘김
이렇게 넘긴 이유는 page 마다 가지고 있는 번호가 있기에때문에
page/1가 가지고 있는 댓글 목록을 보여주기 위함

문제 사항
Commemt 컴포넌트에서 props로 넘겨 받은 데이터가 있으면
정상적으로 데이터가 출력 되는데 데이터가 없는 상태에서
objectComment가 빈배열에서 map을 사용 해서 에러가 남
조건을 objectComment가 배열인지 판별하고 길이가 0보다 클때 map사용

//객체가 가지고 있는 값들을 배열로 반환하는 메서드 Object.values
  const objectComment = Object.values(props);
  //배열인지 확인
  console.log(Array.isArray(objectComment));
  console.log(objectComment);
  
  
  return(
   {objectComment.map((items: any, index: number) =>
              Array.isArray(items) && items.length > 0 ? (
                items.map((item: any, innerIndex: number) => {
                  console.log(`${items}------------------------------`);
                  return (
                    <li key={innerIndex}>
                      <span>{item.displayName}</span>
                      <span>{item.timedata}</span>
                      <div>{item.content}</div>
                      <div className="comment_txt">
                        <div className="comment_btn">
                          <input type="submit" value="댓글" />
                          <input type="submit" value="수정" />
                          <input
                            type="button"
                            onClick={handleCommentDelete}
                            value="삭제"
                          />
                        </div>
                      </div>
                    </li>
                  );
                })
              ) : (
                <div>댓글 없음</div>
              )
            )}
  )

댓글데이터가 없으면 objectComment는 undefined가 나온다
배열이 중첩이여서 objectComment.map(items) 한 후
Array.isArray(items) && items.length > 0 조건을 건다
배열이 맞는지 확인 하고 길이가 0 이상이면 데이터 출력

Array.isArray
배열인지 판별

3차

삭제 기능
Comment 컴포넌트

  const handleCommentDelete = () => {
    try {
      dispatch(
        deleteComment({
          boardId: selectedBoardId,
          dataCUid: userId || "",
        }) as any
      );
    } catch (error) {}
  };

return(
 <input
  type="button"
  onClick={handleCommentDelete}
  value="삭제"
 />
);

deleteComment비동기로 선택된 보드아이디와 userId 넘김

boardPageComment Slice
댓글 데이터를 추가 하는 slice의 reducer에 작성

deleteCommentSlice: (state, action) => {
      const { boardId, dataCUid } = action.payload;

      const filteredComments = state.boardComment[boardId].filter(
        (comm) => comm.dataCUid !== dataCUid
      );
      console.log(filteredComments);
      state.boardComment[boardId] = filteredComments;
    },

filter 사용 하여 맞지 않은 값들을 담은 후 새로운 배열로 반환

deleteComment 비동기

 //하위 컬렉션
    const lastCallectionRef = collection(docRef, "comment");
    const commentDoc = await getDocs(lastCallectionRef);

    for (const [index, docC] of commentDoc.docs.entries()) {
      const dataC = docC.data();
      const dataCUid = dataC.userUid;
      const dataIndex = dataC.index;
      
      //삭제 되는 부분
      if (dataCUid === userId) {
        // const docRef = doc(lastCallectionRef, dataIndex);
        // await deleteDoc(docRef);
        thunkAPI.dispatch(deleteCommentSlice({ boardId, dataCUid }));
      }
    }

문제 사항
상태관리에서 로그인한 사용자uid와 데이터상의uid가 같으면 상태 삭제 되는 것을 확인 하였으나 uid가 같으면 동일한 uid를 가진 댓글이 다 삭제 됨
데이터에 조건을 더 추가 할 예정

4차

문제사항 해결/ 댓글 수 출력

댓글을 입력할때 고유한id를 가지게 설정하고 도큐멘트id도 같이 설정

deleteComment Thunk

 
    //하위 컬렉션
    const lastCallectionRef = collection(docRef, "comment");
    const commentDoc = await getDocs(lastCallectionRef);

    //댓글 데이터
    for (const [index, docC] of commentDoc.docs.entries()) {
      const dataC = docC.data();
      const dataCUid = dataC.dataCUid;
      const dataIndex = dataC.numIndex; 필드에 있는 고유 id
      const docId = docC.id; 필드가 담겨 있는 도큐멘트 id

		//조건을 하나더 추가
      if (dataCUid === userId && dataIndex === docId) {
        const docRef = doc(lastCallectionRef, dataIndex);
        await deleteDoc(docRef);

        thunkAPI.dispatch(deleteCommentSlice({ boardId, dataCUid }));
      }
    }

조건은 필드에 있는(파이어베이스 데이터)uid와 현재 로그인한 uid가 같고
필드에 있는id와 필드를 담고 있는 도큐멘트id가 같을 때
데이터를 삭제하고 state에도 데이터 삭제

Page컴포넌트

const userComments = useSelector(
    (state: any) => state.boardPageComment.boardComment
  );

  const userPageComment = userComments[boardId];
  
  return(
   <Comment userPageComment={userPageComment} />
  );

Comment 컴포넌트

const objectComment = Object.values(props);
const commentCount: any = objectComment[0];

return(
 <p>댓글 수 {commentCount.length}</p>
 );

page컴포넌트에서 넘긴 props에서 댓글 개수를 출력