[#50] add: 좋아요, 좋아요 취소, 목록 추가 기능 구현

yurim22 · yurim22 · commit 6d44a88e683e · 2021-10-10T09:43:50.000+09:00
diff --git a/src/components/MyPage/Card/CardItem.js b/src/components/MyPage/Card/CardItem.js
@@ -19,7 +19,7 @@ import {
   Status,
 } from './styles';
 
-function Card({ post }) {
+function Card({ post, isLike }) {
   // console.log('auction post', post);
   const dispatch = useDispatch();
   const [liked, setLiked] = useState(false);
@@ -47,12 +47,11 @@ function Card({ post }) {
   const onClickUnLike = useCallback(id => {
     if (window.confirm('해당 경매 작품을 찜목록에 제거하시겠습니까 ?')) {
       setLiked(false);
-      alert('찜 목록에 제거되었습니다.');
       dispatch({
         type: UNLIKE_AUCTION_REQUEST,
         data: {
           nftid: post.id,
-          user: post.user,
+          user: String(JSON.parse(localStorage.getItem('userInfo')).id),
         },
       });
     }
@@ -85,9 +84,14 @@ function Card({ post }) {
 
   // 마이페이지 좋아요한 작품에는 하트 fill 처리
   useEffect(() => {
+    setLiked(false);
     if (window.location.pathname === '/mypage/wishlist') {
       setLiked(true);
     }
+    if (isLike) {
+      setLiked(true);
+    }
+    console.log('islike? ', liked);
   });
 
   return (
diff --git a/src/components/MyPage/Card/CardList.js b/src/components/MyPage/Card/CardList.js
@@ -2,13 +2,19 @@ import React from 'react';
 import CardItem from './CardItem';
 import { CardWrap, CardListWrapper } from './styles';
 
-function CardList({ auctions }) {
+function CardList({ auctions, likeAuctions }) {
   console.log('auctions------------+', auctions);
+  console.log('like auctions------------+', likeAuctions);
+
   return (
     <CardWrap>
       <CardListWrapper>
         {auctions.map(post => (
-          <CardItem key={post.id} post={post} />
+          <CardItem
+            key={post.id}
+            post={post}
+            isLike={likeAuctions.includes(post.id)}
+          />
         ))}
       </CardListWrapper>
     </CardWrap>
diff --git a/src/components/MyPage/LikeImage/index.js b/src/components/MyPage/LikeImage/index.js
@@ -22,7 +22,10 @@ function LikeImage() {
       <MyUploadText># 좋아요한 작품</MyUploadText>
 
       {likeAuctions.length > 0 ? (
-        <CardList auctions={likeAuctions} />
+        <CardList
+          auctions={likeAuctions}
+          likeAuctions={likeAuctions.map(item => item.id)}
+        />
       ) : (
         <EmptyWrap>
           <Empty description={false} />
diff --git a/src/components/MyPage/MyUpload/index.js b/src/components/MyPage/MyUpload/index.js
@@ -1,21 +1,30 @@
 import React, { useEffect } from 'react';
 import styled from '@emotion/styled';
 import { useDispatch, useSelector } from 'react-redux';
-import { LOAD_MY_AUCTION_REQUEST } from 'reducers/auction';
+import {
+  LOAD_MY_AUCTION_REQUEST,
+  LOAD_LIKE_AUCTION_REQUEST,
+} from 'reducers/auction';
 import { Empty } from 'antd';
 import CardList from '../Card/CardList';
 import Button from './Button';
 
 function MyUpload() {
   const dispatch = useDispatch();
-  const { myAuctions } = useSelector(state => state.auctionReducer);
+  const { myAuctions, likeAuctions } = useSelector(
+    state => state.auctionReducer,
+  );
   const userInfo = JSON.parse(localStorage.getItem('userInfo'));
 
   useEffect(() => {
     dispatch({
       type: LOAD_MY_AUCTION_REQUEST,
       data: userInfo.id,
     });
+    dispatch({
+      type: LOAD_LIKE_AUCTION_REQUEST,
+      data: JSON.parse(localStorage.getItem('userInfo')).id,
+    });
   }, []);
   return (
     <>
@@ -25,7 +34,10 @@ function MyUpload() {
       </MyUploadHeader>
 
       {myAuctions.length > 0 ? (
-        <CardList auctions={myAuctions} />
+        <CardList
+          auctions={myAuctions}
+          likeAuctions={likeAuctions.map(item => item.id)}
+        />
       ) : (
         <EmptyWrap>
           <Empty description={false} />
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -32,10 +32,16 @@ function home() {
     dispatch({
       type: LOAD_AUCTION_REQUEST,
     });
-    dispatch({
-      type: LOAD_LIKE_AUCTION_REQUEST,
-    });
+    if (localStorage.getItem('userInfo')) {
+      dispatch({
+        type: LOAD_LIKE_AUCTION_REQUEST,
+        data: JSON.parse(localStorage.getItem('userInfo')).id,
+      });
+    }
   }, []);
+  console.log('-----------', mainAuctions, likeAuctions);
+
+  const likeAuctionsId = likeAuctions?.map(like => like.id);
 
   // PagingNation
   // 현재 페이지
@@ -83,7 +89,11 @@ function home() {
           <CardWrap>
             <CardListBox>
               {currentAuctions.map(post => (
-                <CardItem key={post.id} post={post} />
+                <CardItem
+                  key={post.id}
+                  post={post}
+                  isLike={likeAuctionsId.includes(post.id)}
+                />
               ))}
             </CardListBox>
 
diff --git a/src/pages/search/index.js b/src/pages/search/index.js
@@ -3,13 +3,18 @@ import Header from 'components/Common/Header';
 import { FiSearch } from 'react-icons/fi';
 import { Empty } from 'antd';
 import { useDispatch, useSelector } from 'react-redux';
-import { SEARCH_NFT_REQUEST } from 'reducers/auction';
+import {
+  SEARCH_NFT_REQUEST,
+  LOAD_LIKE_AUCTION_REQUEST,
+} from 'reducers/auction';
 import styled from '@emotion/styled';
 import CardItem from 'components/MyPage/Card/CardItem';
 
 const Search = ({ match }) => {
   console.log(match);
-  const { searchNft } = useSelector(state => state.auctionReducer);
+  const { searchNft, likeAuctions } = useSelector(
+    state => state.auctionReducer,
+  );
   const dispatch = useDispatch();
   console.log('searchNft--------', searchNft);
 
@@ -18,8 +23,16 @@ const Search = ({ match }) => {
       type: SEARCH_NFT_REQUEST,
       data: match.params.id,
     });
+    if (localStorage.getItem('userInfo')) {
+      dispatch({
+        type: LOAD_LIKE_AUCTION_REQUEST,
+        data: JSON.parse(localStorage.getItem('userInfo')).id,
+      });
+    }
   }, [match.params.id]);
 
+  const likeAuctionsId = likeAuctions.map(like => like.id);
+
   return (
     <>
       <Header />
@@ -34,7 +47,11 @@ const Search = ({ match }) => {
         {searchNft.length > 0 ? (
           <CardListBox>
             {searchNft.map(post => (
-              <CardItem key={post.id} post={post} />
+              <CardItem
+                key={post.id}
+                post={post}
+                isLike={likeAuctionsId.includes(post.id)}
+              />
             ))}
           </CardListBox>
         ) : (
diff --git a/src/reducers/auction.js b/src/reducers/auction.js
@@ -374,7 +374,7 @@ const auctionReducer = (state = initialState, action) =>
         console.log(action.data);
         draft.unlikeAuctionLoading = false;
         draft.likeAuctions = draft.likeAuctions.filter(
-          v => v.id !== action.data.id,
+          v => v.id !== action.data,
         );
         draft.unlikeAuctionDone = true;
         break;
diff --git a/src/sagas/auction.js b/src/sagas/auction.js
@@ -79,8 +79,6 @@ import {
   TERMINATE_AUCTION_REQUEST,
 } from '../reducers/auction';
 
-import { ADD_AUCTION_TO_ME, REMOVE_AUCTION_OF_ME } from '../reducers/user';
-
 // home 모든 경매템 로드
 function loadAuctionAPI() {
   return axios.get('main/NFT/allNFT');
@@ -105,13 +103,14 @@ function* loadAuction(action) {
 //  좋아요한 작품(wishlist) 경매템 로드
 function loadLikeAuctionAPI(id) {
   console.log('user 값이 뭘까요 ?? ---->', id);
-  return axios.get(`main/NFT/userlikelist/${id}`);
+  return instance.get(`main/NFT/userlikelist/${id}`);
 }
 
 function* loadLikeAuction(action) {
   console.log('loadLikeAuctionAPI action', action);
   try {
     const result = yield call(loadLikeAuctionAPI, action.data);
+    // const likeItem = yield call(loadOneAuctionAPI, action.data.nftid);
     console.log('loadLikeAuctionAPI,', result);
     yield put({
       type: LOAD_LIKE_AUCTION_SUCCESS,
@@ -252,7 +251,7 @@ function* removeAuction(action) {
 
 function likeAPI(data) {
   console.log('data', data);
-  return axios({
+  return instance({
     url: '/main/NFT/likeNFT',
     method: 'post',
     data: {
@@ -268,9 +267,11 @@ function* likeAuction(action) {
     console.log(action.data);
     const result = yield call(loadOneAuctionAPI, action.data.nftid);
     console.log('like in auction', result.data);
+    const likeItem = yield call(loadOneAuctionAPI, action.data.nftid);
+    console.log('like auction', likeItem.data);
     yield put({
       type: LIKE_AUCTION_SUCCESS,
-      data: result.data,
+      data: likeItem.data,
     });
   } catch (err) {
     console.error(err);
@@ -282,7 +283,8 @@ function* likeAuction(action) {
 }
 
 function unLikeAPI(data) {
-  return axios({
+  console.log(data);
+  return instance({
     url: '/main/NFT/likeNFT',
     method: 'delete',
     data: {
@@ -298,8 +300,9 @@ function* unLikeAuction(action) {
     console.log('result in delet', result.data);
     yield put({
       type: UNLIKE_AUCTION_SUCCESS,
-      data: result.data,
+      data: action.data.nftid,
     });
+    alert('찜 목록에 제거되었습니다.');
   } catch (err) {
     console.error(err);
     yield put({
