리뷰기능 만들기(2)

채팅리스트에 리뷰를 올리고 채팅방에 리뷰를 선택할 수 있게만 들었다.
글 작성자가 채팅완료를 누르면 글작성자와 상대방에게 동시에 리뷰방?이 생긴다.
이제 firebase의 DB에 업데이트된 리뷰 값을 저장하기만 하면 된다.

계획은 user review의 count를 갱신해 주는 방법으로 구현해보려고했다.

reveiw : [{option: '친절하고 매너가 좋아요', count: 0} , {option: '재미있어요', count: 0} , {option: '자상하고 편안했어요!', count: 0} , {count: 0 , option: '대화의 폭이 넓네요!'} , {option: '시간약속을 잘 지켰어요', count: 0}]

DB의 모든user에는 review값이 저장되어 있다.

    await updateDoc(
      doc(
        dbService,
        'Review',
        getmessage[0].chattingRoomId,
        'message',
        getmessage[0].id
      ),
      { selected: selectedReview, confirmState: false, progress: 'done' }
    )
      .then(async () => {
        const docRef = doc(dbService, 'user', getmessage[0].opponentsUid);
        const docSnap = await getDoc(docRef);

        setOpponentReviewList(docSnap.data().review);
      })
      .then(async () => {
        if (updatedOpponentReveiwList != undefined) {
          return await updateDoc(
            doc(dbService, 'user', getmessage[0].opponentsUid),
            {
              review: updatedOpponentReveiwList,
            }
          );
        }
      })

리뷰방의 값을 업데이트하고 상대방 DB의 user.review값을 가져온다음에

  const handleReviewState = () => {
    opponentReveiwList?.map((item) => {
      reveiwState?.map((t) => {
        if (item.option === t) {
          return item.count++;
        }
      });
    });
  };

값을 가공해서 업데이트하는 형식을 생각했다.
AuthStateListener에서 초기 값을 계속해서 초기화 해주기 때문에 계속해서 갱신이 안되고 초기값이 나왔다.
그래서 리뷰를 제출했을 때 user의 데이터를 가져오고 값이 없으면 새로운 상태를 저장해 주고 값이 있으면 그 값으로 반복문을 돌려서 값을 갱신해 주려고 했다.

  const handleReviewState = () => {
    if (opponentReveiwList?.review[0] === undefined) {
      const renew = userReview?.map((item) => {
        reveiwState?.map((t) => {
          if (item.option === t) {
            return item.count++;
          }
        });
      });
      setUpdatedReview(renew);
    } else if (opponentReveiwList?.review[0]) {
      const renew = opponentReveiwList?.map((item) => {
        reveiwState?.map((t) => {
          if (item.option === t) {
            return item.count++;
          }
        });
      });
      setUpdatedReview(renew);
    }
  };

8/25일

db에 숫자로 저장될 때 초기화 되는 것 같아서 문자열로 넣어봤지만 결과는 같았다.

  const userReview = [
    { option: '친절하고 매너가 좋아요', count: '0' },
    { option: '재미있어요', count: '0' },
    { option: '자상하고 편안했어요!', count: '0' },
    { option: '대화의 폭이 넓었어요!', count: '0' },
    { option: '시간약속을 잘 지켰어요', count: '0' },
  ];
  
 let counting = Number(item.count) + 1;
return (item.count = counting.toString());

then(async () => {
        const docRef = doc(dbService, 'user', getmessage[0].opponentsUid);
        const docSnap = await getDoc(docRef);

        setOpponentReviewList(docSnap.data());
        console.log('test1:', updatedReview);
      }).then(async () => {
        if (updatedOpponentReveiwList[0] === undefined) return;
        console.log('test2:', updatedReview);
        // handleReviewState();
        await updateDoc(doc(dbService, 'user', getmessage[0].opponentsUid), {
          review: updatedReview,
        }).then(() => {
          console.log('test3:', updatedReview);
        });

test1 => test2 => getDoc=>handleReviewState함수 순서로 실행 되기 때문에 이전의 초기 값이 DB에 저장되는 것 같았다 그래서 getDoc이 어느 타이밍에 불러와지는지 알아보려고했다.
값들이 죄다 undefined가 떠서 언제 값이 들어오는지 알수가 없었다.
결국 getdoc을 chatlist를 클릭할때 불로오도록 하고 데이터의 흐름을 지켜 보았다.

  const handleUserInfo = async () => {
    const docRef = doc(dbService, 'user', opponentuid);
    const docSnap = await getDoc(docRef);

    setOpponentReviewList(docSnap.data());
    console.log('getdoctest1:', opponentReviewList);
    console.log('test1:', updatedReview);
  };
  
  

리뷰방을 클릭하면

getdoctest1와 test1 이 찍히고 조금있다가 데이터를 받아온다.

하지만 왜인지 map이 작동을 안해서 count증가가 되지 않았다. 어느 시점에서 초기화기 되기 때문에 그런걸까?
이방법이 되지 않으면
이제 배열을 한번에 저장하는 방법 대신 리뷰목록 하나당 update를 시켜주는 방법을 할 수 밖에 없을 것 같다.