id on page

shop/src/components/MainImg.js

@@ -15,26 +15,32 @@ const Main = ({className = "MainImg" }) => {
             <Switch>
                 <aside>
 
-                    <Route path = "/catalog/" component={Catalog}/>
-                </aside>
-                <content>
+                    <Route path = "/catalog/" component={Catalog} />
 
-                        {/* <Route path = "/" component = {Main} exact/> */}
-                        <Route path="/about" component = {About}/>
-                        <Route path = "/post" component = {Post}/>
-                        <Route path = "/contacts" component = {Contacts}/>
-                        <Route component = { NotFound } exact/>
+                </aside>
+            </Switch>
+            <Switch>
+            <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="/about" component = {About} exact/>
+                <Route path = "/post" component = {Post} exact/>
+                <Route path = "/contacts" component = {Contacts} />
+                {/* <Route component = { NotFound } /> */}
 
-                </content>
+            </content>
             </Switch>
+
         </div>
     )
   }
-  
-//   const Main = () => <div>Я тут кароче самый главный страниц</div>
+  const Id = ({name = "Idishnic"} )=> {
+   return(<div>{name}</div>) }
+  const MainMag = () => <div>Я тут кароче самый главный страниц</div>
   const About = () => <div>Мы крутой магазин, бла-бла</div>
   const NotFound = () => <div>Да пошел ты!</div>
-  
+  const MainCatalog = () => <div>Chose</div>
   const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
   const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
   

shop/src/reducers/actionPromise.js

@@ -0,0 +1,23 @@
+const actionPromise = (name, promise) => {
+ 
+    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})
+
+
+    return async dispatch => {
+        dispatch(actionPending())
+        let payload
+        try {
+            payload = await promise
+            dispatch(actionResolved(payload))
+        }
+        catch (e){
+            dispatch(actionRejected(e))
+        }
+        return payload;
+    }
+}
+
+
+export default actionPromise;

shop/src/reducers/gql.js

@@ -0,0 +1,15 @@
+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");
+
+export default gql;

shop/src/reducers/index.js

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

shop/src/reducers/reducerCat.js

@@ -2,6 +2,7 @@
 import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
+import {actionPromise} from "./index"
 
 
 ///reducer, где набор экшн.типов + функции.(если - то)
@@ -15,40 +16,12 @@ import thunk from 'redux-thunk';
 //параметры - то, что получаем(?). Засунуть внутрь функции(єкшн) в которой диспатч.
 
 
-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())
-
-export const actionPromise = (name, promise) => {
- 
-    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})
-
-
-    return async dispatch => {
-        dispatch(actionPending())
-        let payload
-        try {
-            payload = await promise
-            dispatch(actionResolved(payload))
-        }
-        catch (e){
-            dispatch(actionRejected(e))
-        }
-        return payload;
-    }
-}
 
-const gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql");
+import {gql} from "./index"
+
+
+
+
 
 const actionCatalogCard = () => {
     return async  dispatch => {

shop/src/reducers/underCat.js

@@ -0,0 +1,13 @@
+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");