app vs mainimg

shop/src/App.js

@@ -1,40 +1,52 @@
 
 import './App.css';
 import Layout from "./components/layout.js";
-import MainImg from "./components/layout";
 import {Provider, connect} from 'react-redux';
-import {Header, Footer, catalogCard} from "./components/index"
+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 {createStore, combineReducers, applyMiddleware} 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;
+import store from "./reducers"
+import Catalog from "./components/catalog"
+import BigCatalog2 from "./components/bigCat"
+
+
+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>
+  )
 }
 
-export const store = createStore(combineReducers({promise: promiseReducer}), 
-                        applyMiddleware(thunk))
+const Main = () => <div>Я тут кароче самый главный страниц</div>
+const NotFound = () => <div>Да пошел ты!</div>
+
+const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
+const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
+
 
 function App() {
   return (
     <>
       <Provider store={store}>
-      <Router history = {createHistory}>
-        <Header/>
-                  
-        <MainImg/>
+        <Router history = {createHistory}>
+          
+          <Header/>
+          
+          <MainImg2/>
 
-        <Footer/>
-      </Router>
+          <Footer/>
+        </Router>
       </Provider>
     </>
   );

shop/src/components/MainImg.js

@@ -1,56 +1,22 @@
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
-import About from "./about"
-import {Footer, catalogCard} from "./index"
+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"
 
-const gql = "http://shop-roles.asmer.fs.a-level.com.ua/graphql";
+//import BigCatalog2 from "./bigCat"
 
 
 
-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 Li = ({name}) => {
-    return(
-        <li>{name}</li>
-    )
-}
-
-
-
-
-const Catalog = ({getCat = () => console.log("no today")}) => {
-
-
-    return(
-        <>
-    <ul className = "catalog">
-        Работаю
-    </ul>
-     <button onClick={() => { if (!getCat){
-         debugger
-     }
-     console.log(getCat)
-         getCat()}}>mazafaca</button>
-     </>
-)}
-
-const BigCatalog = connect(() => ({}), { getCat: catalogCard })(Catalog);
-
-const MainImg = ({className = "MainImg"}) => {
+  
+const BigCatalog = connect(() => ({}), { getData: actionCatalogCard })(Catalog);
+  
+  const MainImg = ({className = "MainImg" }) => {
     return (
         <div className = {className}>
             <aside></aside>
@@ -58,7 +24,7 @@ const MainImg = ({className = "MainImg"}) => {
                 <Switch>
                     <Route path = "/" component = {Main} exact/>
                     <Route path = "/catalog" component={BigCatalog}/>
-                    <Route path="/about" component = {About}/>
+                    {/* <Route path="/about" component = {About}/> */}
                     <Route path = "/post" component = {Post}/>
                     <Route path = "/contacts" component = {Contacts}/>
                     <Route component = { NotFound } exact/>
@@ -66,12 +32,19 @@ const MainImg = ({className = "MainImg"}) => {
             </content>
         </div>
     )
-}
-const Main = () => <div>Я тут кароче самый главный страниц</div>
-const NotFound = () => <div>Да пошел ты!</div>
+  }
+  
+  const Main = () => <div>Я тут кароче самый главный страниц</div>
+  const NotFound = () => <div>Да пошел ты!</div>
+  
+  const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
+  const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
+  
+
+
+
+
 
-const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
-const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
 
 
 

shop/src/components/about.js

@@ -1,2 +0,0 @@
-const About = () => <div className = "About">Тут буде текст о том какой крутой этот магазин</div>
-export default About;

shop/src/components/bigCat.js

@@ -0,0 +1,26 @@
+import {Provider, connect} from 'react-redux';
+import {Header, Footer, actionCatalogCard, MainImg} from "./index"
+import thunk from 'redux-thunk';
+import Catalog from "./catalog"
+
+
+
+// const Catalog = ({getData = () => console.log("no")}) => {
+    
+
+//     return(
+//         <>
+//     <ul className = "catalog">
+//         Работаю
+//     </ul>
+//      <button onClick={() => { if (!getData){
+//          debugger
+//      }
+//      console.log(getData)
+//      getData()}}>mazafaca</button>
+//      </>
+//   )}
+
+  const BigCatalog2 = connect(() => ({}), { getData: actionCatalogCard })(Catalog);
+
+  export default BigCatalog2;

shop/src/components/catalog.js

@@ -0,0 +1,25 @@
+import {Provider, connect} from 'react-redux';
+import {Header, Footer, actionCatalogCard, MainImg} from "./index"
+import thunk from 'redux-thunk';
+
+
+
+const Catalog = ({getData = () => console.log("no")}) => {
+    
+
+    return(
+        <>
+    <ul className = "catalog">
+        Работаю
+    </ul>
+     <button onClick={() => { if (!getData){
+         debugger
+     }
+     
+     getData()}}>mazafaca</button>
+     </>
+  )}
+
+  
+
+  export default Catalog;

shop/src/components/header.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import {Footer, catalogCard} from "./index"
+import {Footer} from "./index"
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import {Provider, connect} from 'react-redux';

shop/src/components/index.js

@@ -5,11 +5,11 @@ import {createStore, combineReducers, applyMiddleware} from 'redux';
 import Header from "./header";
 import Footer from "./footer";
 import MainImg from "./MainImg";
-import catalogCard from "../reducers/reducerCat";
+import actionCatalogCard from "../reducers/reducerCat";
 //import {store} from "../App";
 
 
-export {Header,Footer, MainImg, catalogCard};
+export {Header,Footer, actionCatalogCard, MainImg};
 
 
 

shop/src/components/layout.js

@@ -12,11 +12,6 @@ const Layout =({}) =>{
     return(
         <>
 
-                <Header/>
-                
-                <MainImg/>
-
-                <Footer/>
 
         </>
     )

shop/src/reducers/index.js

@@ -1,3 +1,23 @@
-import catalogCard from "./reducerCat";
+import {createStore, combineReducers, applyMiddleware} from 'redux';
+import thunk from 'redux-thunk';
 
-export {catalogCard};
+
+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))
+
+store.subscribe(() => console.log(store.getState()))
+
+
+export default store;

shop/src/reducers/reducerCat.js

@@ -1,6 +1,7 @@
+
+import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
-import {Provider, connect} from 'react-redux';
 
 
 ///reducer, где набор экшн.типов + функции.(если - то)
@@ -47,29 +48,15 @@ export const actionPromise = (name, promise) => {
     }
 }
 
-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 gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql");
 
-const catalogCard = () => {
-    console.log(1);
-    return async dispatch => {
-        
-        let categories = await dispatch(actionPromise("data", gql(`
+const actionCatalogCard = () => {
+    return  dispatch => {     
+        dispatch(actionPromise("data", gql(`
             query categories {
                 CategoryFind(query:"[{}]") {
                 _id name 
@@ -81,15 +68,13 @@ const catalogCard = () => {
                         originalFileName
                     }
                 }
-            }`, )))
-        
-        console.log(categories);
+            }`, )))    
     }
 }
 
 
 
-store.subscribe(() => console.log(store.getState()))
+
 
 // function catalogReducer(state = {}, action) {
 //     if (action.type = "FIRSTVISIT") {
@@ -100,5 +85,5 @@ store.subscribe(() => console.log(store.getState()))
 
 //const store = createStore(reducer, {});
 
-export default catalogCard;
+export default actionCatalogCard;