wishesReducer

shop/src/App.css

@@ -485,7 +485,7 @@ button {
 .total {
   display: flex;
   justify-content: center;
-  background-color: rgb(58, 58, 65);
+  background-color: rgba(10, 10, 10, 0.5);
   padding: 10px;
   align-items: center;
 }

shop/src/components/goodsCategory.js

@@ -2,7 +2,7 @@ import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import thunk from 'redux-thunk';
 import {actionPromise} from "./index"
-import {gql, actionGoods, actionOrderAddNewGood, getData, actionCartAdd} from "../reducers/";
+import {gql, actionGoods, actionOrderAddNewGood, actionWishAdd, getData, actionCartAdd, actionWishDelete} from "../reducers/";
 import { useEffect } from 'react';
 import {OneGood, CGoodsList} from "./index";
 
@@ -14,25 +14,28 @@ import {OneGood, CGoodsList} from "./index";
     status: state.promiseRed && state.promiseRed.goods &&
     state.promiseRed.goods.payload && state.promiseRed.goods &&
     state.promiseRed.goods.status,
+    wishes: state.wishListReducer
 
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
     getData: actionGoods,
     onAdd: actionCartAdd,
-    onAddtoOrder: actionOrderAddNewGood
+    onAddtoOrder: actionOrderAddNewGood,
+    addWish: actionWishAdd,
+    delWish: actionWishDelete
   }, dispatch);
   
 
 
-const GoodsCategory = ({goods, id, tittle = "Товари", onAddtoOrder, getData, onAdd}) => {
+const GoodsCategory = ({goods, wishes, id, tittle = "Товари", addWish, delWish,  onAddtoOrder, getData, onAdd}) => {
 
   useEffect(() =>  getData(id), [id])
   return(
       <>
         
         <div className = "goodsWrapper">
-            <CGoodsList arr = {goods} onAdd = {onAdd} onAddtoOrder = {onAddtoOrder}/>
+            <CGoodsList arr = {goods} isWish = {wishes.goods} onAdd = {onAdd} wishAdd = {addWish} wishDelete = {delWish} onAddtoOrder = {onAddtoOrder}/>
         </div>
       </>
   )

shop/src/components/goodsList.js

@@ -18,9 +18,9 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 
 
 
-const GoodsList = ({arr = [], className = "goods", onAdd, onAddtoOrder}) => {
+const GoodsList = ({arr = [], isWish, className = "goods", wishAdd, wishDelete, onAdd, onAddtoOrder}) => {
   const history = useHistory();
-  // console.log(arr)
+
   if(arr.length == 0) {
     return(
         <>
@@ -36,6 +36,18 @@ const GoodsList = ({arr = [], className = "goods", onAdd, onAddtoOrder}) => {
         <OneGood  id = {good._id} name = {good.name} price = {good.price} 
         image = {good.images ? `${urlUpload}/${good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}
         />
+        <div>
+          {isWish.indexOf(good._id) == -1 ? 
+          <svg onClick = {() => wishAdd (good._id)} xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
+            <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
+          </svg> :
+          <svg onClick = {() => wishDelete (good._id)} xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
+          </svg>
+          }
+
+
+          </div>
         <div>
            {(history.location.pathname.includes(`/catalog/`) || history.location.pathname.includes(`/search/`)) && <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>В кошик</button>}
            {history.location.pathname.includes(`/orderPage/`) && <button onClick = {() => onAddtoOrder(good._id, good.name, good.images, good.price,   )}>Додати до замовлення</button>} 

shop/src/components/goodsListSearch.js

@@ -1,6 +1,6 @@
 import {OneGood} from "./index";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import {getData, actionGoods, getSearchedGoods, actionSearch} from "../reducers";
+import {getData, actionGoods, actionWishDelete, actionWishAdd, getSearchedGoods, actionSearch} from "../reducers";
 import {Provider, connect} from 'react-redux';
 import {GoodsNotFound } from "./index";
 
@@ -11,16 +11,22 @@ const mapStateToProps = state => ({
     status: state.promiseRed && state.promiseRed.search &&
     state.promiseRed.search.payload && state.promiseRed.search &&
     state.promiseRed.search.status,
+
+    wishes: state.wishListReducer
+    
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
-    getData: actionSearch
+    getData: actionSearch,
+    addWish: actionWishAdd,
+    delWish: actionWishDelete,
+    
   }, dispatch);
   
 
 
-const GoodsListSearch = ({status, search = [], className = "goods"}) => {
-
+const GoodsListSearch = ({status, addWish, delWish, search = [], className = "goods"}) => {
+    
     if(search.length == 0) {
         return(
             <>

shop/src/components/goodsSearch.js

@@ -2,27 +2,30 @@ import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import thunk from 'redux-thunk';
 import {actionPromise} from "./index"
-import {gql, actionGoods, getData, actionSearch, actionCartAdd} from "../reducers/index";
+import {gql, actionGoods, actionWishDelete, actionWishAdd, getData, actionSearch, actionCartAdd} from "../reducers/index";
 import { useEffect } from 'react';
 import {OneGood, CGoodsList} from "./index";
 
 
 const mapStateToProps = state => ({
     state: state,
-    search: getData(state, "search", "GoodFind")
+    search: getData(state, "search", "GoodFind"),
+    wishes: state.wishListReducer
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
     getData: actionSearch,
-    onAdd: actionCartAdd
+    onAdd: actionCartAdd,
+    addWish: actionWishAdd,
+    delWish: actionWishDelete
   }, dispatch);
 
-  const GoodsSearch = ({search, name, getData, onAdd}) => {
+  const GoodsSearch = ({search, wishes, addWish, delWish, name, getData, onAdd}) => {
     useEffect(() =>  getData(name), [name])
     return(
     <>
             <div className = "goodsWrapper">
-              <CGoodsList arr = {search} onAdd = {onAdd}/>
+              <CGoodsList arr = {search} isWish = {wishes.goods} wishDelete = {delWish} wishAdd = {addWish}  onAdd = {onAdd}/>
             </div>
     </>
     )

shop/src/components/oneGood.js

@@ -11,7 +11,10 @@ const OneGood = ({className = "oneGoodInner", image,  name, price, id}) => {
             <div className = "forOneGoodImg">
               <img width = "120px" src = {image}/>
             </div>
-            <span>{price}грн</span>
+            <div>
+              <span>{price}грн</span>
+
+            </div>
 
         </Link>
 

shop/src/reducers/authReducer.js

@@ -25,6 +25,7 @@ function authReducer(state, action){
         localStorage.removeItem("authToken");
         
         localStorage.removeItem("basket");
+        localStorage.removeItem("wishList");
         return {}
     }
     return state

shop/src/reducers/cartReducer.js

@@ -9,7 +9,7 @@ function cartReducer(state, { type, count, id, image,  name, description,  price
             state =  JSON.parse(localStorage.basket);
         }
         else { 
-            state = {}
+            state = {};
         }
     }
 

shop/src/reducers/index.js

@@ -20,6 +20,7 @@ import actionGoodUpdate from "./actionGoodUpdate";
 import {orderUpdateReducer, actionOrderClear, actionOrderAddNewGood, actionOrderAddOne, actionOrderAddOrder, actionOrderDelete} from "./orderUpdateReduser"
 import {actionOrdersFind, actionOrderFindOne} from "./actionOrdersFind";
 import actionOrderUpdate from "./actionUpdateOrder";
+import {wishListReducer, actionWishAdd, actionWishDelete} from "./wishListReducer";
 
 
 function promiseReducer(state={}, action){
@@ -40,13 +41,14 @@ function promiseReducer(state={}, action){
       promiseRed: promiseReducer, 
       auth: authReducer,
       basket: cartReducer,
-      orderUpdateReducer
+      orderUpdateReducer,
+      wishListReducer
   }), compose(applyMiddleware(thunk)))
 
 export {actionPromise, actionOrdersFind,  gql, actionGoods, getData, promiseReducer, store, actionSearch,
    actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, 
    updateImgAction, actionCartAdd, actionOrderClear, actionCartDelete, actionCartClear, actionOrder,
-    actionReg, actionOrderUpdate, actionUserFindOne, actionOrderAddNewGood, actionOrderAddOne, orderUpdateReducer, actionOrderAddOrder, actionOrderDelete, actionOrderFindOne, actionUserUpdate, actionSearchUser, actionGoodUpdate};
+    actionReg, actionOrderUpdate, actionUserFindOne, wishListReducer, actionWishAdd, actionWishDelete, actionOrderAddNewGood, actionOrderAddOne, orderUpdateReducer, actionOrderAddOrder, actionOrderDelete, actionOrderFindOne, actionUserUpdate, actionSearchUser, actionGoodUpdate};
 
 
 

shop/src/reducers/wishListReducer.js

@@ -0,0 +1,57 @@
+
+
+
+
+function wishListReducer (state, {type, _id}) {
+    if(state === undefined) {
+        if(localStorage.authToken && localStorage.wishList) {
+            state = JSON.parse(localStorage.wishList);
+        }
+        else {
+            state = {
+                count: 0,
+                goods: []
+            };
+        }
+    }
+
+    if(type == "WISH_ADD") {
+
+        state = {
+            ...state,
+            count: state.count + 1,
+            goods: [...state.goods, _id]
+        }
+    }
+
+    if(type == "WISH_DELETE") {
+        let newGoodsArr = state.goods.splice(state.goods.indexOf(_id), 1)
+
+        state = {
+            ...state,
+            count: state.count - 1,
+            goods: state.goods
+
+        }
+    }
+    localStorage.wishList = JSON.stringify(state)
+
+    return state;
+
+}
+
+
+const actionWishAdd = (_id) => ({
+    type: "WISH_ADD",
+    _id
+});
+
+const actionWishDelete = (_id) => ({
+    type: "WISH_DELETE",
+    _id
+});
+
+
+
+
+export {wishListReducer, actionWishAdd, actionWishDelete};