goods on page noe time

shop/src/App.css

@@ -82,6 +82,11 @@ aside {
 content {
   width: 70%;
 }
+.goods {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
 
 .About {
 

shop/src/App.js

@@ -24,7 +24,10 @@ function promiseReducer(state={}, action){
   return state;
 }
 
-const store = createStore(combineReducers({promiseRed: promiseReducer}), compose(applyMiddleware(thunk)))
+
+const store = createStore(combineReducers({
+  promiseRed: promiseReducer
+}), compose(applyMiddleware(thunk)))
 
 
 function App() {

shop/src/components/MainImg.js

@@ -5,8 +5,10 @@ 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 store from "../reducers";
+import Catalog from "./catalog";
+import {Goods} from "./index";
+// import Goods from "../reducers/goods";
 
   
 const Main = ({className = "MainImg" }) => {
@@ -23,7 +25,7 @@ const Main = ({className = "MainImg" }) => {
             <content>
                 <Route path = "/" component = {MainMag} exact/>
                 <Route path = "/catalog/" component={MainCatalog} exact/>
-                <Route path = "/catalog/:id" component= {({match}) => <Id name = {match.params.id}/>}/>
+                <Route path = "/catalog/:id" component= {({match}) => <Goods id = {match.params.id}/>}/>
                 <Route path="/about" component = {About} exact/>
                 <Route path = "/post" component = {Post} exact/>
                 <Route path = "/contacts" component = {Contacts} />

shop/src/components/catalog.js

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

shop/src/components/goods.js

@@ -0,0 +1,57 @@
+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 OneGood = ({className = "oneGood", image, name, price}) => {
+    return (
+      <>
+      <div>
+        <h5>{name}</h5>
+        <span>{price}грн</span>
+        <img src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
+      </div>
+      </>
+    )
+  }
+  
+  
+  const Goods = ({className = "goods", state, goods = [], getData, id}) => {
+      useEffect(() => goods.length == 0 && getData(id), [id])
+      console.log(goods)
+      return(
+          <>
+                    <h1>{id}</h1>
+          <div className = {className}>
+  
+            {/* <button onClick = {() => getData(id)}>hello</button> */}
+            {goods.map(good => <OneGood name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+          </div>
+          </>
+      )
+  }
+  
+  const getGoods = state => {
+    console.log(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);
+  
+  export default connect(mapStateToProps, mapDispatchToProps)(Goods);

shop/src/components/index.js

@@ -7,9 +7,10 @@ import Footer from "./footer";
 import Main from "./MainImg";
 import actionCatalogCard from "../reducers/reducerCat";
 import Links from "./links"
+import Goods from "./goods";
 
 
-export {Header,Footer, actionCatalogCard, Main, Links};
+export {Header,Footer, actionCatalogCard, Main, Links, Goods};
 
 
 

shop/src/reducers/getGoods.js

@@ -0,0 +1,80 @@
+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 })))
+  }
+}
+
+
+
+// const OneGood = ({className = "oneGood", image, name, price}) => {
+//   return (
+//     <>
+//     <div>
+//       <h5>{name}</h5>
+//       <span>{price}грн</span>
+//       <img src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
+//     </div>
+//     </>
+//   )
+// }
+
+
+// const Goods = ({className = "goods", state, goods = [], getData, id}) => {
+//     useEffect(() => goods.length == 0 && getData(id), [])
+//     console.log(goods)
+//     return(
+//         <>
+//                   <h1>{id}</h1>
+//         <div className = {className}>
+
+//           {/* <button onClick = {() => getData(id)}>hello</button> */}
+//           {goods.map(good => <OneGood name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+//         </div>
+//         </>
+//     )
+// }
+
+// const getGoods = state => {
+//   console.log(state);
+
+//   if(state.promiseRed.data && state.promiseRed.data.payload) {
+//       return state.promiseRed.data.payload.data.GoodFind
+//   }
+
+//   return [];
+// };
+
+// const mapStateToProps = state => ({
+//   state: state,
+//   goods: getGoods(state)
+// });
+
+// const mapDispatchToProps = dispatch => bindActionCreators({
+//   getData: actionGoods
+// }, dispatch);
+
+ export default actionGoods;

shop/src/reducers/index.js

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

shop/src/reducers/reducerCat.js

@@ -25,7 +25,7 @@ import {gql} from "./index"
 
 const actionCatalogCard = () => {
     return async  dispatch => {
-        await dispatch(actionPromise("data", gql(`
+        await dispatch(actionPromise("categories", gql(`
             query categories {
                 CategoryFind(query:"[{}]") {
                 _id name 

shop/src/reducers/underCat.js

@@ -1,13 +0,0 @@
-const getGQL = url => 
-    (query, variables={}) => 
-        fetch(url, 
-            {method: 'POST', 
-                headers: {
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json',
-                  ...(localStorage.authToken ? {Authorization: `Bearer ${localStorage.authToken}`} : {})
-                },
-                body: JSON.stringify({query,variables})})
-        .then(res => res.json())
-
-const gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql");