Merge pull request #247 from JpnShop/favoirtes-#238

favorite-#241
JpnShop · Oct 27, 2022 · 1188f87 · 1188f87
2 parents 3de12a0 + 1c045d3
commit 1188f87
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/src/components/CardList/Card.jsx b/src/components/CardList/Card.jsx
@@ -1,13 +1,33 @@
-import React from 'react'
+import React, { useMemo, useCallback } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { cls } from '../../utils'
 import heart from '/public/assets/heart-on.svg'
+import HeartIcon from '../common/HeartIcon'
+import {
+  useAddFavoriteItemMutation,
+  useDeleteFavoriteItemMutation,
+} from '../../store/api/favoriteApiSlice'
 
-function Card({ data, purchase }) {
+function Card({ data, purchase, favorites }) {
   const { brand, productName, thumbnail, price, sale } = data
   const saleCost = parseInt((price * (100 - sale)) / 100)
   const location = useLocation().pathname
   const navigate = useNavigate()
+  const [addFavoriteItem] = useAddFavoriteItemMutation()
+  const [deleteFavoriteItem] = useDeleteFavoriteItemMutation()
+  const isFavorite = useMemo(
+    () => favorites?.some((element) => element.productId === data.productId),
+    [favorites, data],
+  )
+  const onHeartClick = useCallback(
+    (e) => {
+      e.stopPropagation()
+      isFavorite
+        ? deleteFavoriteItem({ product_id: data.productId })
+        : addFavoriteItem({ product_id: data.productId })
+    },
+    [isFavorite, data],
+  )
 
   return (
     <div onClick={() => navigate(`/product/${data.productId}`)}>
@@ -16,8 +36,11 @@ function Card({ data, purchase }) {
           <img src={thumbnail} alt={productName} className="absolute" />
         </div>
         {!purchase && (
-          <div className="absolute w-[13%] max-w-[35px] top-2.5 right-2.5">
-            <img src={heart} alt="heart" />
+          <div
+            onClick={onHeartClick}
+            className="absolute w-[13%] max-w-[35px] top-2.5 right-2.5"
+          >
+            <HeartIcon off={!isFavorite} size="25px" />
           </div>
         )}
       </div>

diff --git a/src/components/CardList/Container.jsx b/src/components/CardList/Container.jsx
@@ -1,14 +1,18 @@
 import React from 'react'
 import Card from './Card'
 import NoList from './NoList'
+import {
+  useAddFavoriteItemMutation,
+  useDeleteFavoriteItemMutation,
+} from '../../store/api/favoriteApiSlice'
 
-function Container({ list, pt = 'pt-52' }) {
+function Container({ list, pt = 'pt-52', favorites }) {
   return (
     <div className={`${pt}`}>
       {list && list.length > 0 ? (
         <div className="w-full grid grid-cols-2 gap-[2px]">
           {list.map((item, idx) => (
-            <Card key={idx} data={item} />
+            <Card key={idx} data={item} favorites={favorites} />
           ))}
         </div>
       ) : (

diff --git a/src/components/Category/index.jsx b/src/components/Category/index.jsx
@@ -4,14 +4,16 @@ import Container from '../CardList/Container'
 import Capsule from './Capsule'
 import { useParams } from 'react-router-dom'
 import { useGetTagItemsQuery } from '../../store/api/productApiSlice'
+import { useGetFavoriteItemsQuery } from '../../store/api/favoriteApiSlice'
 
 function CategoryFashion() {
   const { topCG, subCG } = useParams()
   const { data } = useGetTagItemsQuery(subCG)
+  const { data: favorites } = useGetFavoriteItemsQuery()
   return (
     <div>
       <CategoryList topCG={topCG} subCG={subCG} />
-      <Container list={data} />
+      <Container list={data} favorites={favorites} />
       <Capsule />
     </div>
   )