basket with 2 buttons

shop/src/App.css

@@ -199,6 +199,9 @@ content {
   font-size: 16px;
   height: 75px;
 }
+.forOneGoodImg {
+  height: 120px;
+}
 .smallGoodInner {
   display: flex;
   flex-direction: column;
@@ -242,7 +245,6 @@ content {
 button {
   margin: 10px;
   width: 100px;
-
   background-color: rgb(58, 58, 65);
   border-radius: 15%;
 }
@@ -258,10 +260,13 @@ button {
   justify-content: center;
   flex-wrap: wrap;
   width: 80%;
-  background-color: rosybrown;
+  /* background-color: rosybrown; */
 }
-.basketInner .oneGood {
-  height: 370px;
+/* .basketInner .oneGood {
+  height: 320px;
+} */
+.oneGoodInner {
+  position: relative;
 }
 .basketButoons {
   display: flex;

shop/src/components/basket.js

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { connect } from "react-redux";
 import{OneGood} from "../components";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, actionGoods} from "../reducers";
+import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, actionGoods, actionCartAdd, actionCartDelete} from "../reducers";
 
 
 
@@ -40,15 +40,16 @@ const mapStateToProps = state => ({
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
-    getData: actionGoods,
-    // onAdd: actionCartAdd,
+    //getData: actionGoods,
+    onAdd: actionCartAdd,
+    onDel: actionCartDelete,
   }, dispatch);
 
 
-const BasketPage = ({basket, getData, GoodsArr, className = "goods"}) => {
+const BasketPage = ({ basket, GoodsArr, onAdd, onDel}) => {
 
 
-    console.log(GoodsArr);
+    console.log(basket);
 
     return (
         <>
@@ -57,9 +58,9 @@ const BasketPage = ({basket, getData, GoodsArr, className = "goods"}) => {
                     {GoodsArr.map((good) => <div className = "oneGood"><OneGood key = {good._id} id = {good.id}
                     name = {good.name} price = {good.price} image = {good.image ? `${urlUpload}/${good.image[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
                     <div className = "basketButoons">
-                        <button>+</button> 
+                        <button onClick = {() => onAdd(good.name, good.price, good.id,  good.description, good.image)}>+</button> 
                         <h4>{good.count}</h4>    
-                        <button>-</button>   
+                        <button onClick = {() => onDel(good.name, good.price, good.id,  good.description, good.image)}>-</button>   
                     </div>    
             </div>
             )}

shop/src/components/oneGood.js

@@ -1,6 +1,6 @@
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 
-const OneGood = ({className, image, name, price, id}) => {
+const OneGood = ({className = "oneGoodInner", image, name, price, id}) => {
 
     return (
       <>
@@ -8,8 +8,9 @@ const OneGood = ({className, image, name, price, id}) => {
         <Link to = {`/good/` + id}>
 
             <h5>{name}</h5>
-      
-            <img width = "120px" src = {image}/>
+            <div className = "forOneGoodImg">
+              <img width = "120px" src = {image}/>
+            </div>
             <span>{price}грн</span>
 
         </Link>

shop/src/reducers/cartReducer.js

@@ -10,10 +10,11 @@ function cartReducer(state, { type, count, id, image,  name, description,  price
         }
         else { 
             state = {}
+        }
     }
-    }
+
     if (type === "CART_ADD") {
-        //debugger
+
         state = {
             ...state,
             
@@ -28,9 +29,29 @@ function cartReducer(state, { type, count, id, image,  name, description,  price
     }
 
     if (type === "CART_DELETE") {
-        const { [id]: skip, ...newState } = state;
+        state = {
+            ...state,
+            price: state.price - price,
+            [id] : {
+                price: price,
+                id: id,
+                description: description,
+                image: image,
+                name, name,
+                count: (state[id].count - 1) 
+            },
+
+        }
+        //Object.assign(state, newState)
+
+        // let {price = newState.price, ...rest} = state
+        //console.log(newState)
+        console.log(state)
+        // localStorage.basket = JSON.stringify(state)
+        //          return state;   
+    
+
 
-        return newState;
     }
     localStorage.basket = JSON.stringify(state)
 
@@ -51,14 +72,18 @@ const actionCartAdd = (name, price, id, description, image, count = 0) => ({
     
 });
 
-const actionCartDelete = (id, count = 1) => ({
-    type: "CART_ADD",
+const actionCartDelete = (name, price, id, description, image, count) => ({
+    type: "CART_DELETE",
     id,
-    count: -count,
+    count: count ,
+    price,
+    name,
+    description,
+    image
 });
 
 const actionCartClear = (id) => ({
-    type: "CART_DELETE",
+    type: "CART_DELETEE",
     id,
 });