peremoga done

shop/src/App.css

@@ -258,19 +258,31 @@ button {
 .basketInner {
   display: flex;
   justify-content: center;
+  flex-direction: column;
   flex-wrap: wrap;
   width: 80%;
   /* background-color: rosybrown; */
 }
+.basketgoodsInner {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 /* .basketInner .oneGood {
   height: 320px;
 } */
+
+
 .oneGoodInner {
   position: relative;
 }
 .basketButoons {
   display: flex;
 }
+.basketBottom {
+  display: flex;
+  justify-content: center;
+}
 .basketInner .oneGood button {
   width: 40px;
 }

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, actionCartAdd, actionCartDelete} from "../reducers";
+import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, actionGoods, actionCartAdd, actionCartDelete, actionCartClear} from "../reducers";
 
 
 
@@ -20,10 +20,7 @@ function arrFromObj(obj) {
 
     var newArr = [];
     for (let key in obj) {
-
-
             newArr.push(obj[key])
-
     }
     return newArr;
 }
@@ -32,39 +29,44 @@ function arrFromObj(obj) {
 const mapStateToProps = state => ({
     state: state,
     basket: state.basket,
-    // idGoodsObj: ObjFilter(state.basket, "price"),
     GoodsArr: arrFromObj(ObjFilter(state.basket, "price")),
-    // goodCard: getGoods(state, "goodCard", "GoodFindOne"),
-
-
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
-    //getData: actionGoods,
     onAdd: actionCartAdd,
     onDel: actionCartDelete,
+    onClear: actionCartClear
   }, dispatch);
 
 
-const BasketPage = ({ basket, GoodsArr, onAdd, onDel}) => {
-
-
-    console.log(basket);
-
+const BasketPage = ({ basket, GoodsArr, onAdd, onDel, onClear}) => {
+    
+    if(!basket.price){
+        return(
+            <div>Зайдіть у каталог щоб замовити, та повертайтесь</div>
+        )
+    }
     return (
         <>
             <div className = "basketInner">
-
-                    {GoodsArr.map((good) => <div className = "oneGood"><OneGood key = {good._id} id = {good.id}
+                <div className = "basketgoodsInner">
+                    {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 onClick = {() => onAdd(good.name, good.price, good.id,  good.description, good.image)}>+</button> 
                         <h4>{good.count}</h4>    
                         <button onClick = {() => onDel(good.name, good.price, good.id,  good.description, good.image)}>-</button>   
                     </div>    
-            </div>
-            )}
 
+
+                    </div>
+                    )}
+                </div>
+                <div className = "basketBottom">
+                    <button>Замовити</button>
+                    <button onClick = {() => onClear(basket)}>ТаНуНафіг</button>
+                </div>
             </div>
         </>
     )

shop/src/components/header.js

@@ -29,7 +29,7 @@ const StandartMenu = ({className = "standartMenu", getCat = null}) => {
     )
 }
 
-//const CStandartMenu = connect(() => ({className: "standartMenu" }), { getCat: catalogCard })(StandartMenu);
+
 
 const TabletMenu = ({}) => {
     const [show, setShow] = useState(false)
@@ -71,7 +71,7 @@ const CToLoginPage = connect(s => ({login: s.auth.payload && s.auth.payload.sub.
 
 
 const Basket = ({basketCount, data, className = "basket"}) => {
-    console.log(data)
+
     return(
     <div className = {className}>
         <Link to = "/basket">
@@ -88,7 +88,7 @@ const CBasket = connect(s => ({data: s.basket, basketCount: s.basket.price}), {}
 
 
 const Header = ({}) => {
-    //const [basketCount, buyDelete] = useState(0);
+
     const [wishes, wishesCount] = useState(0);
     console.log(connect((s) => ({isLoggedIn: s.auth.payload})))
     return(
@@ -109,20 +109,10 @@ const Header = ({}) => {
                     </div>
                     <div>
                         <CToLoginPage/>
-                        {/* <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
-                        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
-                        </svg>
-                        <Link to = "/login" >
-                            <span className = "link">Вхід</span>
-                        </Link> */}
+
                     </div>
                     <CBasket/>
-                    {/* <div>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-bag" viewBox="0 0 16 16">
-                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
-                        </svg>
-                        <span>{basketCount}</span>
-                    </div> */}
+
                 </div>
             </div>          
         </>

shop/src/reducers/cartReducer.js

@@ -29,31 +29,46 @@ function cartReducer(state, { type, count, id, image,  name, description,  price
     }
 
     if (type === "CART_DELETE") {
-        state = {
-            ...state,
-            price: state.price - price,
-            [id] : {
-                price: price,
-                id: id,
-                description: description,
-                image: image,
-                name, name,
-                count: (state[id].count - 1) 
-            },
+        if((state[id].count - 1) == 0) {
+            state = {
+                ...state,
+                price: state.price - price,
+            
+            }
+            delete state[id]
+            state.price == 0 && delete state.price;
+        } else {
+            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;   
-    
+
 
 
     }
-    localStorage.basket = JSON.stringify(state)
+    if (type === "CART_CLEAR") {
+        state = {}
+
+
+
+    }
+    if(!state.price){
+        localStorage.removeItem("basket");
+    } else {
+
+        localStorage.basket = JSON.stringify(state)
+    }
 
     return state;
 }
@@ -82,9 +97,10 @@ const actionCartDelete = (name, price, id, description, image, count) => ({
     image
 });
 
-const actionCartClear = (id) => ({
-    type: "CART_DELETEE",
-    id,
+const actionCartClear = (count, price) => ({
+    type: "CART_CLEAR",
+    count,
+    price
 });
 
 export {cartReducer, actionCartAdd, actionCartDelete, actionCartClear};