list of items in category page now functions

hw18-react-store/src/App.js

@@ -195,7 +195,7 @@ const store = createStore(combineReducers({promise: promiseReducer,
                                             cart: cartReducer}), applyMiddleware(thunk)) 
 store.subscribe(() => console.log(store.getState()))
 store.dispatch(actionRootCats())
-store.dispatch(actionCatById('5dc458985df9d670df48cc47'))
+//store.dispatch(actionCatById('5dc458985df9d670df48cc47'))
 
 
 const Logo = () =>
@@ -211,6 +211,7 @@ const Header = () =>
 const Navbar = () =>
     <nav className='Navbar'>
         <CKoshik/>
+        <LogBtn />
     </nav>
 
 const CategoryListItem = ({_id, name}) =>
@@ -229,7 +230,9 @@ const Aside = () =>
 const GoodCard = ({good:{_id, name, price, images}, onAdd}) =>
     <li className='GoodCard'> 
         <h2>{name}</h2>
-        {images && images[0] && images[0].url && <img className='GoodImg' src={backendURL + '/' + images[0].url} />}
+        {images && images[0] && images[0].url && <img className='GoodImg' alt='img' src={backendURL + '/' + images[0].url} />}
+        <br/>
+        <button>На страницу товара</button>
         <br/>
         <strong>Цена: {price}</strong>
         <br/>
@@ -238,16 +241,20 @@ const GoodCard = ({good:{_id, name, price, images}, onAdd}) =>
 
 const CGoodCard = connect(null, {onAdd: actionCartAdd})(GoodCard)
 
+const LogBtn = () =>
+    <div className='KoshikCnt item'>
+        <Link to="/cart" style={{color:'white', textDecoration:'none'}}>Войти</Link>
+    </div>
+
 const Koshik = ({cart}) => {
     let goodsInCart = cart
     let allGoodsInCart = 0
     for (let key in goodsInCart) {
         allGoodsInCart += goodsInCart[key].count
     }
-
     return (
         <div className='KoshikCnt item'>
-            <h3>Корзина: {allGoodsInCart}</h3>
+            <Link to="/cart" style={{color:'white', textDecoration:'none'}}>Корзина: {allGoodsInCart}</Link>
         </div>
     )
 }
@@ -270,7 +277,7 @@ const CartItem = ({cart:{_id, name, price, images}, count: {count}, onChange, on
     return(
         <li className='GoodCard'> 
             <h2>{name}</h2>
-            {images && images[0] && images[0].url && <img className='GoodImg' src={backendURL + '/' + images[0].url} />}
+            {images && images[0] && images[0].url && <img className='GoodImg' alt='img' src={backendURL + '/' + images[0].url} />}
             <br/>
             <strong>Цена: {price * count}</strong>
             <br/>
@@ -300,6 +307,19 @@ const Cart = ({cart}) => {
 }
 
 const CCart = connect(state => ({cart:state.cart}))(Cart)
+
+const PageCart = ({match: {params: {_id}}, getData}) => {
+    useEffect(() => {
+        getData(_id.substring(1))
+        console.log('get', _id,typeof _id)
+    },[_id])
+    return (
+        <CCart />
+    )
+
+}
+
+const CPageCart= connect(null, {getData: actionCatById})(PageCart)
 //const CCart = connect(забрать из редакса корзину положить в пропс cart, 
                        //дать компоненту onCartChange и onCartRemove с соответствующими actionCreator)(Cart)
 
@@ -325,14 +345,11 @@ const PageMain = () => <h1>MAIN PAGE</h1>
 
 const PageCategory = ({match: {params: {_id}}, getData}) => {
     useEffect(() => {
-        getData(_id)
-        console.log('get', getData(_id).payload)
+        getData(_id.substring(1))
+        console.log('get', _id,typeof _id)
     },[_id])
     return (
-        <>
-            <h1>{_id}</h1>
-            <CCategory />
-        </>
+        <CCategory />
     )
 
 }
@@ -350,6 +367,8 @@ const Main = () =>
                 <Route path="/" component={PageMain} exact/>
                 <Route path="/category/:_id" component={CPageCategory}/>
                 <Route path="*" component={Page404} />
+                <Route path="/cart" component={Cart} />
+                
                 {/* <CCategory /> */}
                 {/* <LoginForm onLogin={(l, p) => actionFullLogin(l, p)}/> */}
                 {/* <CLoginForm /> */}
@@ -377,6 +396,7 @@ function App() {
                     <Navbar />
                     <Main />
                     <Footer />
+                    {/* <CCart /> */}
                 </div>
             </Provider>
         </Router>