[React] 좋아요/싫어요 ㅠㅠ

DONNIE·2023년 7월 5일
0

React

목록 보기
18/26
  • 구현 내용

    게시글에 대한 사용자 상태값으로 아이콘 및 좋아요 수 반영
    좋아요 눌려졌을때 싫어요 누를 경우 좋아요 취소 + 싫어요 실행
    ㅠㅠ 정말 짱 싫어요

  • return 문내 내용

  • 좋아요, 싫어요에 따라 함수에 전달하는 인자와 게시글 id보냄

 <div className="user-action custom-flex-item ">
                        <span className="faq-like custom-flex-item cursor-btn" onClick={(e)=>onClickAction(e,selectedList.faqId,'LIKE')}><img src={selectedList.reactionState==='LIKE' ? Liked : Like} alt="btn_like"/><p>{selectedList.likeCount}</p></span>   
                        <span >|</span>
                        <span className="faq-dislike custom-flex-item cursor-btn" onClick={(e)=>onClickAction(e,selectedList.faqId,'DISLIKE')}><img src={selectedList.reactionState==='DISLIKE' ? Disliked : Dislike} alt='btn_dislike'/><p>{selectedList.dislikeCount}</p></span> 
                    </div> 
  • 함수내 내용
  • 내 반응과 취소할 반응 key값을 변수로 전달 ^- ^ㅗ
const onClickAction = (e,id,reaction) => {
        const formData = new FormData();

        let yourReaction = reaction==='LIKE' ? 'likeCount' : 'dislikeCount'
        let oppositeReaction = reaction === 'LIKE' ? 'dislikeCount' : 'likeCount'

        formData.append('faqId', id);
        formData.append('reaction',reaction )

        var config = {
            method: 'post',
            maxBodyLength: Infinity,
            headers: { 
               'Authorization': 'Bearer ' + process.env.REACT_APP_TEMP_JWT_LGEKR,
            },
            data : formData
            };
        axiosInstance2('/faq/reaction', config)
        .then(function (response){
            let resData = response.data;
            if(resData.code===200) {
                let data = resData.result
                console.log(data)
                setSelectedList({
                    ...selectedList,
                    reactionState : selectedList.reactionState === reaction ? "NONE" : reaction,
                    [yourReaction] : selectedList.reactionState === reaction ? selectedList[yourReaction]-1
                                   : selectedList[yourReaction]+1 ,
                    [oppositeReaction] : (selectedList.reactionState !== 'NONE' && selectedList.reactionState !== reaction) 
                                        ? selectedList[oppositeReaction]-1 
                                        : selectedList[oppositeReaction]
                                        
                })
            }else {
                console.log(resData)
            }
        })
        .catch(function(error) {
            console.log('error',error)
        })
    }
profile
후론트엔드 개발자

0개의 댓글