TIL 11주 3일차-react native project

리뷰 삭제, 수정

-> ReviewEdit.jsx

deleteDoc, updataDoc, useMutation 등 이용하였다.

 

export default function ReviewEdit({
  navigation,
  route: {
    params: { review, from },
  },
}) {
  const [newratings, setNewratings] = useState(0);
  const [newContents, setNewContents] = useState('');
  const isDark = useColorScheme();

  const deleteReview = async (id) => {
    await deleteDoc(doc(dbService, 'reviews', id));
  };

  const editReview = async (id) => {
    await updateDoc(doc(dbService, 'reviews', id), {
      rating: newratings,
      contents: newContents,
    });
  };

 

-> useMutation 쿼리함수에 들어갈 삭제 / 수정 함수를 만들어준다

 

 

const { mutate: removeReview } = useMutation(
    ['deleteReview', review.id],
    (body) => deleteReview(body),
    {
      onSuccess: () => {
        console.log('삭제성공');
      },
      onError: () => {
        console.log('err in delete:', err);
      },
    }
  );
  const { mutate: reviseReview } = useMutation(
    ['editReview', review.id],
    (body) => editReview(body),
    {
      onSuccess: () => {
        console.log('수정성공');
      },
      onError: () => {
        console.log('err in edit:', err);
      },
    }
  );

-> removeReview, reviseReview로 삭제 및 수정함수 작명 + 예외처리

 

const onDelete = async () => {
    Alert.alert('리뷰 삭제', '정말 삭제하시겠습니까?', [
      {
        text: '취소',
        style: 'cancel',
      },
      {
        text: '삭제',
        style: 'destructive',
        onPress: async () => {
          try {
            await removeReview(review.id);
            if (from === 'MusicalDetail') {
              navigation.navigate('MusicalDetail', {
                musicalId: review.musicalId,
              });
            } else if (from === 'Mypage') {
              navigation.navigate('Tabs', { screen: 'Mypage' });
            }
          } catch (err) {
            console.log('err:', err);
          }
        },
      },
    ]);
  };
  const onEdit = () => {
    if (!newratings && !newContents) {
      alert('수정한 부분이 없습니다.');
      return;
    }

    let editObj = {};
    if (newratings) {
      Object.assign(editObj, { rating: newratings });
    }
    if (newContents) {
      Object.assign(editObj, { contents: newContents });
    }
    Alert.alert('리뷰 수정', '이대로 리뷰 수정하시겠습니까?', [
      { text: '취소', style: 'cancel' },
      {
        text: '수정',
        style: 'default',
        onPress: async () => {
          try {
            await reviseReview({ id: review.id, editObj });
            setNewContents('');
            setNewratings(0);
            if (from === 'MusicalDetail') {
              navigation.reset({
                index: 1,
                routes: [
                  {
                    name: 'MusicalDetail',
                    params: { musicalId: review.musicalId },
                  },
                  {
                    name: 'ReviewDetail',
                    params: { review: { ...review, ...editObj }, from },
                  },
                ],
              });
            } else if (from === 'MyPage') {
              navigation.reset({
                routes: [
                  {
                    name: 'Tabs',
                    params: { screen: 'MyPage' },
                  },
                ],
              });
            }
          } catch (err) {
            console.log('err:', err);
          }
        },
      },
    ]);
  };

-> 리뷰 수정 함수 : 빈 객체를 생성 후 수정할 내용을 Object, assign을 이용하여 빈 객체에 담아준다.

 

      <EditButton
        style={{ opacity: !newContents && !newratings ? 0.1 : 1 }}
        disabled={!newContents && !newratings}
        onPress={onEdit}
      >
        <BtnTitle disabled={!newContents && !newratings}>수정하기</BtnTitle>
      </EditButton>
      <DeleteBtn onPress={onDelete}>
        <DeleteBtnTitle>삭제하기</DeleteBtnTitle>
      </DeleteBtn>