basket by click

shop/src/components/Main.js

@@ -1,13 +1,12 @@
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
-import {actionCatalogCard} from "./index"
 import { useState } from 'react';
 import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import store from "../reducers";
 import Catalog from "./catalog";
-import {searchInput, CGoodsCategory, SearchInput, CGoodsSearch, LoginForm, CGoodCard, YourProfile} from "./index";
+import {actionCatalogCard, CBasketPage, searchInput, CGoodsCategory, SearchInput, CGoodsSearch, LoginForm, CGoodCard, YourProfile} from "./index";
 
 
   
@@ -39,6 +38,7 @@ const Main = ({className = "MainImg" }) => {
                         <Route path = "/good/:id" component = {({match}) => <CGoodCard id = {match.params.id}/>}/>
                         <Route path = "/login" component = {LoginForm}/>
                         <Route path = "/profile/:login" component = {YourProfile}/>
+                        <Route path = "/basket" component = {CBasketPage}/>
                         <Route path="/about" component = {About} exact/>
                         <Route path = "/post" component = {Post} exact/>
                         <Route path = "/contacts" component = {Contacts} />

shop/src/components/basket.js

@@ -0,0 +1,69 @@
+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";
+
+
+
+function ObjFilter(obj, filterKey) {
+    var newObj = {};
+    for (let key in obj) {
+
+        if(key !== filterKey){
+            newObj[key] = obj[key]
+        }
+    }
+    return newObj;
+}
+function arrFromObj(obj) {
+
+    var newArr = [];
+    for (let key in obj) {
+
+
+            newArr.push(obj[key])
+
+    }
+    return newArr;
+}
+
+
+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,
+  }, dispatch);
+
+
+const BasketPage = ({basket, getData, GoodsArr}) => {
+
+
+    console.log(GoodsArr);
+
+    return (
+        <>
+        <div>
+            {GoodsArr.map((good) => <div><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`}/>
+             <h4>{good.count}</h4>
+            </div>
+            )}
+        </div>
+        </>
+    )
+}
+
+
+const CBasketPage = connect(mapStateToProps, mapDispatchToProps)(BasketPage);
+
+export default CBasketPage;

shop/src/components/goodCard.js

@@ -48,7 +48,7 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
       width > 900 ? setFinallyWidth(true) : setFinallyWidth(false);
 
       }
-
+      console.log(goodCard)
 
      return(
         <> 
@@ -58,7 +58,7 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
             <img src = {goodCard.images ? `${urlUpload}/${goodCard.images[0].url}`: `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
             <span>{`${goodCard.price}грн`}</span>
             <p>{goodCard.description}</p>
-            <button onClick = {() => onAdd(goodCard.price, id)}>В кошик</button>
+            <button onClick = {() => onAdd(goodCard.name, goodCard.price, goodCard._id,  goodCard.description, goodCard.images)}>В кошик</button>
           </div>
         }
         </>

shop/src/components/header.js

@@ -74,10 +74,12 @@ const Basket = ({basketCount, data, className = "basket"}) => {
     console.log(data)
     return(
     <div className = {className}>
-        <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 || "0"}грн</span>
+        <Link to = "/basket">
+            <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 || "0"}грн</span>
+        </Link>
     </div>
     )
 }

shop/src/components/index.js

@@ -17,12 +17,13 @@ import GoodsNotFound from "./goodsNotFound";
 import LoginForm from "./loginOnPage";
 import CGoodCard from "./goodCard";
 import UpdateForm from "./updateForm";
-import YourProfile from "./profilePage"
+import YourProfile from "./profilePage";
+import CBasketPage from "./basket";
 
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, GoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, UpdateForm, YourProfile};
+LoginForm, CGoodCard, UpdateForm, YourProfile, CBasketPage};
 
 
 

shop/src/reducers/cartReducer.js

@@ -1,7 +1,9 @@
 import jwt_decode from "jwt-decode";
+import { connect } from "react-redux";
+import {actionGoodCard} from "./index";
 
 
-function cartReducer(state, { type, id, count, price }) {
+function cartReducer(state, { type, count, id, image,  name, description,  price,}) {
     if(state === undefined){
         if(localStorage.authToken && localStorage.basket) {
             state =  JSON.parse(localStorage.basket);
@@ -11,12 +13,16 @@ function cartReducer(state, { type, id, count, price }) {
     }
     }
     if (type === "CART_ADD") {
-
         state = {
             ...state,
             
             price: price + (state.price ||0),
-            [id]: count + (state[id] || 0),
+             [id]:{ price: price,
+                    id: id,
+                    description: description,
+                    image: image,
+                    name, name,
+                   count: (count + 1 )|| 0},
         };
     }
 
@@ -33,11 +39,14 @@ function cartReducer(state, { type, id, count, price }) {
 
 
 
-const actionCartAdd = (price, id, count = 1) => ({
+const actionCartAdd = (name, price, id, description, image, count = 1) => ({
     type: "CART_ADD",
     id,
     count,
-    price
+    price,
+    name,
+    description,
+    image
     
 });