shop roles route + good list in category

src/App.js

@@ -1,4 +1,4 @@
-import React, {useState }  from 'react';
+import React, {useState, useEffect }  from 'react';
 import logo from './logo.svg';
 import './App.css';
 import {Provider, connect}   from 'react-redux';
@@ -8,29 +8,14 @@ import store from './reducers'
 import {Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 
-import {actionCategories, actionLogin} from './actions'
+import {actionCategories, actionLogin, actionCategory} from './actions'
 
 
 const history = createHistory()
 
-const Post = ({post}) =>
-<div>
-    <h2>{post.title}</h2>
-    <p>{post.text}</p>
-</div>
-
-const PostFeed = ({posts=[]}) =>
-<div>
-    {posts && posts.map(p => <Post post={p}/>)}
-</div>
-
-const CPostFeed = connect(s => ({posts:s.promise.posts && 
-                                       s.promise.posts.payload && 
-                                       s.promise.posts.payload.getPosts}))(PostFeed)
-
 const PageMain = () =>
 <>
-    <CPostFeed />
+    <h1>Главная магазина</h1>
 </>
 
 const LoginForm = ({onLogin}) => {
@@ -51,7 +36,7 @@ store.dispatch(actionCategories())
 
 const CategoryMenuItem = ({category:{_id, name}={_id: 'NOID', name: "NO CATEGORY"}}) =>
 <li>
-    <a href={`/category/${_id}`}>{name}</a>
+    <Link to={`/category/${_id}`}>{name}</Link>
 </li>
 
 const CategoryMenu = ({categories=
@@ -61,7 +46,7 @@ const CategoryMenu = ({categories=
       { "_id": "5dc458985df9d670df48cc47", "name": "Smartphones" },
     ]
 }) =>
-<aside>
+<aside style={{float: 'left'}}>
     <ul>
         {categories && 
             categories.map(category => <CategoryMenuItem category={category}/>)}
@@ -72,15 +57,63 @@ const CCategoryMenu = connect(state => ({categories: state.promise.categories &&
                                                      state.promise.categories.payload && 
                                                      state.promise.categories.payload.CategoryFind}))(CategoryMenu)
 
+const defaultGoods = [
+        {
+          "_id": "5dcaac1fe87d153c543bcef4",
+          "name": "Гречневая лапша с овощами и курицей"
+        },
+        {
+          "_id": "5dcabb776d09c45440d14cf0",
+          "name": "Пшеничная лапша с овощами и курицей"
+        },
+        {
+          "_id": "5dcabc636d09c45440d14cf1",
+          "name": "Пшеничная лапша с овощами и свининой"
+        }]
+
+const GoodCard = ({_id, name}) =>
+<li>
+    <h2>{name}</h2>
+</li>
+
+const GoodList = ({goods=defaultGoods}) =>
+<ul>
+    {goods && goods.map(good => <GoodCard key={good._id} {...good}/>)}
+</ul>
+
+const CGoodList = connect(
+state => ({goods: state.promise.category && 
+             state.promise.category.payload && 
+             state.promise.category.payload.CategoryFindOne && 
+             state.promise.category.payload.CategoryFindOne.goods})
+)(GoodList)
+
+
+const PageCategory = ({match:{params:{_id}}, getData}) => {
+    useEffect(() => (getData(_id), undefined), [_id])
+    return (
+        <>
+            <h1>КАТЕГОРИЯ {_id}</h1>
+            <CGoodList />
+        </>
+    )
+}
+
+const CPageCategory = connect(null, {getData: actionCategory})(PageCategory)
+
+
+
+
 export default () => {
     return (
         <Provider store={store}>
-            <CategoryMenu />
-            <CCategoryMenu />
-        { /* <CLoginForm />
             <Router history={history}>
-                <Route path="/" component={PageMain} />
-            </Router> */ }
+                <CCategoryMenu/>
+                <main>
+                    <Route path='/' component={PageMain} exact />
+                    <Route path='/category/:_id' component={CPageCategory} exact />
+                </main>
+            </Router>
         </Provider>
     )
 }

src/actions/index.js

@@ -46,6 +46,18 @@ export const actionCategories = () => {
 }
 
 
+export const actionCategory = (_id) => {
+    return actionPromise('category', gql.request(
+                    `query cat($query:String){
+                      CategoryFindOne(query:$query){
+                        _id name goods{
+                            _id name
+                        }
+                      }
+                    }`, {query: JSON.stringify([{_id}])}))
+}
+
+
 export const actionLogin = (login,password) => 
     async dispatch => {
         console.log(login, password)