button on small goods

shop/src/App.css

@@ -199,7 +199,11 @@ content {
   font-size: 16px;
   height: 75px;
 }
-
+.smallGoodInner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .goodCard {
   display: flex;
   flex-direction: column;
@@ -249,10 +253,15 @@ button {
   border-radius: 15%;
 }
 
-.About {
-
+.basketInner {
+  display: flex;
+  align-items: center;
+  width: 80%;
+  background-color: rosybrown;
+}
+.basketInner .oneGood {
+  height: 270px;
 }
-
 .footer {
   position: fixed;
   width: 100%;
@@ -337,6 +346,13 @@ button {
     padding: 0%;
     background: none;
   }
+  .basketInner {
+    width: 100%;
+  }
+  .basketInner .oneGood {
+    height: 200px;
+  }
+
   .oneGood {
     background-color: rgb(10, 10, 10);
     padding: auto;

shop/src/components/basket.js

@@ -45,20 +45,23 @@ const mapStateToProps = state => ({
   }, dispatch);
 
 
-const BasketPage = ({basket, getData, GoodsArr}) => {
+const BasketPage = ({basket, getData, GoodsArr, className = "goods"}) => {
 
 
     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 className = "basketInner">
+                <div className = {className}>
+                    {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>  
+                    <button>З кошика</button>         
+                    </div>
+                    )}
+                </div>
             </div>
-            )}
-        </div>
         </>
     )
 }

shop/src/components/goodsCategory.js

@@ -2,29 +2,31 @@ 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, getGoods} from "../reducers/index";
+import {gql, actionGoods, getGoods, actionCartAdd} from "../reducers/index";
 import { useEffect } from 'react';
-import {OneGood, GoodsList} from "./index";
+import {OneGood, CGoodsList} from "./index";
 
 
   
   const mapStateToProps = state => ({
     state: state,
-    goods: getGoods(state, "goods", "GoodFind")
+    goods: getGoods(state, "goods", "GoodFind"),
+
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
-    getData: actionGoods
+    getData: actionGoods,
+    onAdd: actionCartAdd
   }, dispatch);
   
 
 
-const GoodsCategory = ({goods, id, tittle = "Товари", getData}) => {
+const GoodsCategory = ({goods, id, tittle = "Товари", getData, onAdd}) => {
   useEffect(() =>  getData(id), [id])
   return(
       <>
         <div className = "goodsWrapper">
-            <GoodsList arr = {goods}/>
+            <CGoodsList arr = {goods} onAdd = {onAdd}/>
         </div>
       </>
   )

shop/src/components/goodsList.js

@@ -6,8 +6,8 @@ import {Provider, connect} from 'react-redux';
 
   const mapStateToProps = state => ({
     state: state,
-    goods: getGoods(state),
-    search: getGoods(state)
+    arr: getGoods(state),
+    // search: getGoods(state)
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
@@ -17,7 +17,8 @@ import {Provider, connect} from 'react-redux';
 
 
 
-const GoodsList = ({arr = [], className = "goods"}) => {
+const GoodsList = ({arr = [], className = "goods", onAdd}) => {
+  // console.log(arr)
   if(arr.length == 0) {
     return(
         <>
@@ -27,7 +28,17 @@ const GoodsList = ({arr = [], className = "goods"}) => {
 }
   return (
     <div className = {className}>          
-      {arr.map((good) => <OneGood key = {good._id} 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`}/>)}
+      {arr.map((good) => 
+      <>
+      <div className = "oneGood">
+      <OneGood key = {good._id} 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>
+            <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>В кошик</button>
+          </div>
+          </div>
+      </>
+      )}
+
     </div>
   )
 }

shop/src/components/goodsSearch.js

@@ -2,9 +2,9 @@ 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, getGoods, actionSearch} from "../reducers/index";
+import {gql, actionGoods, getGoods, actionSearch, actionCartAdd} from "../reducers/index";
 import { useEffect } from 'react';
-import {OneGood, GoodsList} from "./index";
+import {OneGood, CGoodsList} from "./index";
 
 
 const mapStateToProps = state => ({
@@ -13,15 +13,16 @@ const mapStateToProps = state => ({
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
-    getData: actionSearch
+    getData: actionSearch,
+    onAdd: actionCartAdd
   }, dispatch);
 
-  const GoodsSearch = ({search, name, getData}) => {
+  const GoodsSearch = ({search, name, getData, onAdd}) => {
     useEffect(() =>  getData(name), [name])
     return(
     <>
             <div className = "goodsWrapper">
-              <GoodsList arr = {search}/>
+              <CGoodsList arr = {search} onAdd = {onAdd}/>
             </div>
     </>
     )

shop/src/components/index.js

@@ -9,7 +9,7 @@ import actionCatalogCard from "../reducers/reducerCat";
 import Links from "./links"
 import CGoodsCategory from "./goodsCategory";
 import OneGood from './oneGood';
-import GoodsList from "./goodsList";
+import CGoodsList from "./goodsList";
 import SearchInput from "./searchInput";
 import CGoodsSearch from "./goodsSearch";
 import CGoodsListSearch from "./goodsListSearch";
@@ -22,7 +22,7 @@ import CBasketPage from "./basket";
 
 
 
-export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, GoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
+export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
 LoginForm, CGoodCard, UpdateForm, YourProfile, CBasketPage};
 
 

shop/src/components/oneGood.js

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

shop/src/reducers/actionGoods.js

@@ -17,7 +17,8 @@ const actionGoods = (_id) => {
       `query goods($query: String) {
         GoodFind(query: $query )  {
           name, price,
-          images{url}, _id
+          images{url}, _id,
+          description
           categories {
           _id
           createdAt