get data

shop/src/App.js

@@ -5,34 +5,27 @@ import {Provider, connect} from 'react-redux';
 import {Header, Footer, actionCatalogCard, MainImg} from "./components/index"
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
-import store from "./reducers"
 import Catalog from "./components/catalog"
 import BigCatalog2 from "./components/bigCat"
+import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
+import thunk from 'redux-thunk';
 
 
-const MainImg2 = ({className = "MainImg"}) => {
-  return (
-      <div className = {className}>
-          <aside></aside>
-          <content>
-              <Switch>
-                  <Route path = "/" component = {Main} exact/>
-                  <Route path = "/catalog" component={BigCatalog2}/>
-                  {/* <Route path="/about" component = {About}/> */}
-                  <Route path = "/post" component = {Post}/>
-                  <Route path = "/contacts" component = {Contacts}/>
-                  <Route component = { NotFound } exact/>
-              </Switch>
-          </content>
-      </div>
-  )
-}
 
-const Main = () => <div>Я тут кароче самый главный страниц</div>
-const NotFound = () => <div>Да пошел ты!</div>
 
-const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
-const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
+function promiseReducer(state={}, action){
+  if (action.type === 'PROMISE'){
+      const { name="default", status, payload, error} = action
+      if (status){
+          return {
+              ...state, [name]: {status, payload: (status === 'PENDING' && state[name] && state[name].payload) || payload, error}
+          }
+      }
+  }
+  return state;
+}
+
+const store = createStore(combineReducers({promiseRed: promiseReducer}), compose(applyMiddleware(thunk)))
 
 
 function App() {
@@ -43,7 +36,7 @@ function App() {
           
           <Header/>
           
-          <MainImg2/>
+          <MainImg/>
 
           <Footer/>
         </Router>

shop/src/components/MainImg.js

@@ -8,23 +8,16 @@ import thunk from 'redux-thunk';
 import store from "../reducers"
 import Catalog from "./catalog"
 
-//import BigCatalog2 from "./bigCat"
-
-
-
-
-  
-const BigCatalog = connect(() => ({}), { getData: actionCatalogCard })(Catalog);
   
-  const MainImg = ({className = "MainImg" }) => {
+const MainImg = ({className = "MainImg" }) => {
     return (
         <div className = {className}>
             <aside></aside>
             <content>
                 <Switch>
                     <Route path = "/" component = {Main} exact/>
-                    <Route path = "/catalog" component={BigCatalog}/>
-                    {/* <Route path="/about" component = {About}/> */}
+                    <Route path = "/catalog" component={Catalog}/>
+                    <Route path="/about" component = {About}/>
                     <Route path = "/post" component = {Post}/>
                     <Route path = "/contacts" component = {Contacts}/>
                     <Route component = { NotFound } exact/>
@@ -35,17 +28,11 @@ const BigCatalog = connect(() => ({}), { getData: actionCatalogCard })(Catalog);
   }
   
   const Main = () => <div>Я тут кароче самый главный страниц</div>
+  const About = () => <div>Мы крутой магазин, бла-бла</div>
   const NotFound = () => <div>Да пошел ты!</div>
   
   const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
   const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
   
 
-
-
-
-
-
-
-
 export default MainImg;

shop/src/components/about.js

@@ -0,0 +1,2 @@
+
+export default About;

shop/src/components/catalog.js

@@ -1,25 +1,43 @@
 import {Provider, connect} from 'react-redux';
-import {Header, Footer, actionCatalogCard, MainImg} from "./index"
+import {Header, Footer, MainImg} from "./index"
 import thunk from 'redux-thunk';
+import { bindActionCreators } from 'redux';
+import actionCatalogCard from './../reducers/reducerCat';
 
 
 
-const Catalog = ({getData = () => console.log("no")}) => {
-    
-
+const Catalog = ({state, categories = [], getData = () => console.log("no")}) => {
+    console.log(state);
+    console.log(categories);
     return(
         <>
-    <ul className = "catalog">
-        Работаю
-    </ul>
-     <button onClick={() => { if (!getData){
-         debugger
-     }
+        <ul className = "catalog">
+            Работаю
+        </ul>
+        <h1>{categories.length}</h1>
+
+     <button onClick={() => {
      
      getData()}}>mazafaca</button>
      </>
   )}
 
-  
+const getCategories = state => {
+
+    if(state.promiseRed.data && state.promiseRed.data.payload) {
+        return state.promiseRed.data.payload.data.CategoryFind
+    }
+
+    return [];
+};
+const mapStateToProps = state => ({
+    state: state,
+    categories: getCategories(state)
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+    getData: actionCatalogCard
+}, dispatch);
+
 
-  export default Catalog;
+export default connect(mapStateToProps, mapDispatchToProps)(Catalog);

shop/src/reducers/index.js

@@ -1,23 +1,22 @@
-import {createStore, combineReducers, applyMiddleware} from 'redux';
+import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
 
 
-function promiseReducer(state={}, action){
-  if (action.type === 'PROMISE'){
-      const { name="default", status, payload, error} = action
-      if (status){
-          return {
-              ...state, [name]: {status, payload: (status === 'PENDING' && state[name] && state[name].payload) || payload, error}
-          }
-      }
-  }
-  return state;
-}
+// function promiseReducer(state={}, action){
+//   if (action.type === 'PROMISE'){
+//       const { name="default", status, payload, error} = action
+//       if (status){
+//           return {
+//               ...state, [name]: {status, payload: (status === 'PENDING' && state[name] && state[name].payload) || payload, error}
+//           }
+//       }
+//   }
+//   return state;
+// }
 
-const store = createStore(combineReducers({promise: promiseReducer}), 
-                        applyMiddleware(thunk))
+// const store = createStore(combineReducers({promise: promiseReducer}), compose(applyMiddleware(thunk)))
 
-store.subscribe(() => console.log(store.getState()))
+// store.subscribe(() => console.log(store.getState()))
 
 
-export default store;
+// export default store;

shop/src/reducers/reducerCat.js

@@ -28,7 +28,7 @@ const getGQL = url =>
         .then(res => res.json())
 
 export const actionPromise = (name, promise) => {
-    console.log(name);
+ 
     const actionPending = () => ({type: 'PROMISE', name, status: 'PENDING', payload: null, error: null})
     const actionResolved = payload => ({type: 'PROMISE', name, status: 'RESOLVED', payload, error: null})
     const actionRejected = error => ({type: 'PROMISE', name, status: 'REJECTED', payload:null, error})
@@ -48,15 +48,11 @@ export const actionPromise = (name, promise) => {
     }
 }
 
-
-
-
-
 const gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql");
 
 const actionCatalogCard = () => {
-    return  dispatch => {     
-        dispatch(actionPromise("data", gql(`
+    return async  dispatch => {
+        await dispatch(actionPromise("data", gql(`
             query categories {
                 CategoryFind(query:"[{}]") {
                 _id name