some changes

hw18-react-store/src/App.js

@@ -4,7 +4,7 @@ import './App.scss';
 import thunk from 'redux-thunk';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import {Provider, connect} from 'react-redux';
-import { Link, Route, Router } from 'react-router-dom';
+import { Link, Route, Router, Switch, Redirect } from 'react-router-dom';
 import createHistory from 'history/createBrowserHistory'
 
 const actionPending  = name => ({type: 'PROMISE', status: 'PENDING', name})
@@ -204,7 +204,9 @@ const Logo = () =>
     </Link>
 
 const Header = () =>
-    <header><Logo /></header>
+    <header>
+        <Logo />
+    </header>
 
 const Navbar = () =>
     <nav className='Navbar'>
@@ -213,8 +215,7 @@ const Navbar = () =>
 
 const CategoryListItem = ({_id, name}) =>
     <li className='CatLink'>
-        {/* <a href={`#/category/${_id}`}>{name}</a> */}
-        <Link to="/category/${_id}">{name}</Link>
+        <Link to={`/category/:${_id}`}>{name}</Link>
     </li>
 
 const CategoryList = ({cats}) =>
@@ -237,14 +238,6 @@ const GoodCard = ({good:{_id, name, price, images}, onAdd}) =>
 
 const CGoodCard = connect(null, {onAdd: actionCartAdd})(GoodCard)
 
-const Category = ({cat:{name, goods=[]}={}}) => 
-    <div className='Category'>
-        <h1>{name}</h1>
-        <ul>{goods.map(good => <CGoodCard good={good} />)}</ul>
-    </div>
-
-const CCategory = connect(state => ({cat:state.promise.catById?.payload || {}}))(Category)
-
 const Koshik = ({cart}) => {
     let goodsInCart = cart
     let allGoodsInCart = 0
@@ -261,6 +254,17 @@ const Koshik = ({cart}) => {
 
 const CKoshik = connect(({cart}) => ({cart}))(Koshik)
 
+const Category = ({cat:{name, goods=[]}={}}) => 
+<div className='Category'>
+    <h1>{name}</h1>
+    <ul>
+        {(goods || []).map(good => <CGoodCard good={good} />)}
+    </ul>
+</div>
+
+const CCategory = connect(state => ({cat:state.promise.catById?.payload || {}}))
+                              (Category)
+
 const CartItem = ({cart:{_id, name, price, images}, count: {count}, onChange, onRemove}) => {
     console.log('good', _id)
     return(
@@ -319,31 +323,38 @@ const CLoginForm = connect(null, {onLogin: actionFullLogin})(LoginForm)
 
 const PageMain = () => <h1>MAIN PAGE</h1>
 
-const PageCategory = ({match: {params: {_id}}}) => {
+const PageCategory = ({match: {params: {_id}}, getData}) => {
     useEffect(() => {
         getData(_id)
+        console.log('get', getData(_id).payload)
     },[_id])
-
     return (
         <>
-            <pre>{_id}</pre>
+            <h1>{_id}</h1>
             <CCategory />
         </>
     )
+
 }
 
 const CPageCategory = connect(null, {getData: actionCatById})(PageCategory)
 
+const Page404 = () => <h1> 404 </h1>
+
 const Main = () =>
     <main>
         <Aside />
         <Content>
-            <Route path="/" component={PageMain} exact/>
-            <Route path="/cathegory:_id" component={CPageCategory}/>
-            {/* <CCategory /> */}
-            {/* <LoginForm onLogin={(l, p) => actionFullLogin(l, p)}/> */}
-            {/* <CLoginForm /> */}
-            {/* <CCart /> */}
+            <Switch>
+                <Redirect from='/main' to='/' />
+                <Route path="/" component={PageMain} exact/>
+                <Route path="/category/:_id" component={CPageCategory}/>
+                <Route path="*" component={Page404} />
+                {/* <CCategory /> */}
+                {/* <LoginForm onLogin={(l, p) => actionFullLogin(l, p)}/> */}
+                {/* <CLoginForm /> */}
+                {/* <CCart /> */}
+            </Switch>
         </Content>
     </main>
 
@@ -361,13 +372,13 @@ function App() {
     return (
         <Router history={history}>
             <Provider store={store}>
-            <div className="App">
-                <Header />
-                <Navbar />
-                <Main />
-                <Footer />
-            </div>
-        </Provider>
+                <div className="App">
+                    <Header />
+                    <Navbar />
+                    <Main />
+                    <Footer />
+                </div>
+            </Provider>
         </Router>
     );
 }