구현 내용
게시글에 대한 사용자 상태값으로 아이콘 및 좋아요 수 반영
좋아요 눌려졌을때 싫어요 누를 경우 좋아요 취소 + 싫어요 실행
ㅠㅠ 정말 짱 싫어요
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>
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)
})
}