goodsFromCategory

shop/src/components/MainImg.js

@@ -8,7 +8,7 @@ import thunk from 'redux-thunk';
 import store from "../reducers";
 import Catalog from "./catalog";
 //import {Goods} from "./index";
-import CGoodsCategory from "./goods";
+import CGoodsCategory from "./goodsCategory";
 
   
 const Main = ({className = "MainImg" }) => {

shop/src/components/catalog.js

@@ -10,7 +10,6 @@ import actionCatalogCard from './../reducers/reducerCat';
 
 const Catalog = ({state, categories = [], getData = () => console.log("no")}) => {
     useEffect(() => categories.length == 0 && getData(), []);
-    //console.log(categories)
     return(
         <>
         <ul className = "catalog">

shop/src/components/goods.js

@@ -1,84 +0,0 @@
-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} from "../reducers/index";
-import { useEffect } from 'react';
-
-  // const Goods = ({className = "goods",  goods = [], getData, id}) => {
-  //     useEffect(() =>  getData(id), [id])
-
-  //     return(
-  //         <>
-  //           <div className = "goodsWrapper">
-  //               <h4>Товары</h4>
-  //               <div className = {className}>          
-  //               {goods.map(good => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
-  //               </div>
-  //           </div>
-  //         </>
-  //     )
-  // }
-  
-  const getGoods = state => {
-  
-    if(state.promiseRed.goods && state.promiseRed.goods.payload) {
-        return state.promiseRed.goods.payload.data.GoodFind
-    }
-  
-    return [];
-  };
-
-
-
-  
-  const mapStateToProps = state => ({
-    state: state,
-    goods: getGoods(state)
-  });
-  
-  const mapDispatchToProps = dispatch => bindActionCreators({
-    getData: actionGoods
-  }, dispatch);
-  
-
-
-const OneGood = ({className = "oneGood", image, name, price}) => {
-
-  return (
-    <>
-    <div className = {className}>
-      <h5>{name}</h5>
-
-      <img width = "120px" src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
-      <span>{price}грн</span>
-    </div>
-    </>
-  )
-}
-
-
-
-const GoodsCategory = ({goods = [], id, tittle = "Товари", getData = actionGoods}) => {
-  useEffect(() =>  getData(id), [id])
-  return(
-      <>
-        <div className = "goodsWrapper">
-            <GoodsList goodsArr = {goods} className = "goods" fn = {console.log("pratsuu")}/>
-        </div>
-      </>
-  )
-}
-
-
-const CGoodsCategory = connect(mapStateToProps, mapDispatchToProps)(GoodsCategory);
-
-const GoodsList = ({goodsArr, className = "goods"}) => {
-  return (
-  <div className = {className}>          
-  {goodsArr.map((good) => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
-  </div>
-  )
-}
-
-  export default CGoodsCategory;

shop/src/components/goodsCategory.js

@@ -0,0 +1,50 @@
+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 { useEffect } from 'react';
+import {OneGood, CGoodsList} from "./index";
+
+
+  
+  const mapStateToProps = state => ({
+    state: state,
+    goods: getGoods(state)
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({
+    getData: actionGoods
+  }, dispatch);
+  
+
+
+
+// const GoodsList = ({goods = [], className = "goods"}) => {
+//   return (
+//     <div className = {className}>          
+//       {goods.map((good) => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+//     </div>
+//   )
+// }
+
+//  const CGoodsList = connect(mapStateToProps, mapDispatchToProps)(GoodsList);
+
+
+const GoodsCategory = ({id, tittle = "Товари", getData}) => {
+  useEffect(() =>  getData(id), [id])
+  return(
+      <>
+        <div className = "goodsWrapper">
+            <CGoodsList />
+        </div>
+      </>
+  )
+}
+
+const CGoodsCategory = connect(mapStateToProps, mapDispatchToProps)(GoodsCategory);
+
+
+
+
+  export default CGoodsCategory;

shop/src/components/goodsList.js

@@ -0,0 +1,28 @@
+import {OneGood} from "./index";
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+import {getData, getGoods, actionGoods} from "../reducers";
+import {Provider, connect} from 'react-redux';
+
+  const mapStateToProps = state => ({
+    state: state,
+    goods: getGoods(state)
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({
+    getData: actionGoods
+  }, dispatch);
+  
+
+
+
+const GoodsList = ({goods = [], className = "goods"}) => {
+  return (
+    <div className = {className}>          
+      {goods.map((good) => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+    </div>
+  )
+}
+
+ const CGoodsList = connect(mapStateToProps, mapDispatchToProps)(GoodsList);
+
+ export default CGoodsList;

shop/src/components/index.js

@@ -7,10 +7,13 @@ import Footer from "./footer";
 import Main from "./MainImg";
 import actionCatalogCard from "../reducers/reducerCat";
 import Links from "./links"
-import Goods from "./goods";
+import CGoodsCategory from "./goodsCategory";
+import OneGood from './oneGood';
+import CGoodsList from "./goodsList";
 
 
-export {Header,Footer, actionCatalogCard, Main, Links, Goods};
+
+export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList};
 
 
 

shop/src/components/oneGood.js

@@ -0,0 +1,17 @@
+
+
+const OneGood = ({className = "oneGood", image, name, price}) => {
+
+    return (
+      <>
+      <div className = {className}>
+        <h5>{name}</h5>
+  
+        <img width = "120px" src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
+        <span>{price}грн</span>
+      </div>
+      </>
+    )
+  }
+
+  export default OneGood;

shop/src/reducers/actionGoods.js

@@ -0,0 +1,34 @@
+import {Provider, connect} from 'react-redux';
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+import thunk from 'redux-thunk';
+import {actionPromise} from "./index"
+import gql from "./gql";
+import { useEffect } from 'react';
+
+
+
+const actionGoods = (_id) => {
+  return async dispatch => { 
+    const queryJson = JSON.stringify([{
+      "categories._id": `${_id}`
+    }]);
+
+    await dispatch(actionPromise(`goods`, gql (
+      `query goods($query: String) {
+        GoodFind(query: $query )  {
+          name, price,
+          images{url}, _id
+          categories {
+          _id
+          createdAt
+          name
+          }
+        }
+      }` ,{ query:  queryJson })))
+  }
+}
+
+
+
+
+ export default actionGoods;

shop/src/reducers/getGoods.js

@@ -1,34 +1,13 @@
-import {Provider, connect} from 'react-redux';
-import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import thunk from 'redux-thunk';
-import {actionPromise} from "./index"
-import gql from "./gql";
-import { useEffect } from 'react';
 
 
 
-const actionGoods = (_id) => {
-  return async dispatch => { 
-    const queryJson = JSON.stringify([{
-      "categories._id": `${_id}`
-    }]);
+  const getGoods = state => {
+  
+    if(state.promiseRed.goods && state.promiseRed.goods.payload) {
+        return state.promiseRed.goods.payload.data.GoodFind
+    }
+  
+    return [];
+  };
 
-    await dispatch(actionPromise(`goods`, gql (
-      `query goods($query: String) {
-        GoodFind(query: $query )  {
-          name, price,
-          images{url}, _id
-          categories {
-          _id
-          createdAt
-          name
-          }
-        }
-      }` ,{ query:  queryJson })))
-  }
-}
-
-
-
-
- export default actionGoods;
+  export default getGoods;

shop/src/reducers/index.js

@@ -2,9 +2,10 @@ import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
 import actionPromise from "./actionPromise";
 import gql from "./gql";
-import actionGoods from "./getGoods"
+import actionGoods from "./actionGoods"
+import getGoods from "./getGoods";
 
-export {actionPromise, gql, actionGoods};
+export {actionPromise, gql, actionGoods, getGoods};