categoriesLinks

shop/src/App.js

@@ -2,11 +2,10 @@
 import './App.css';
 import Layout from "./components/layout.js";
 import {Provider, connect} from 'react-redux';
-import {Header, Footer, actionCatalogCard, MainImg} from "./components/index"
+import {Header, Footer, actionCatalogCard, Main} from "./components/index"
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import Catalog from "./components/catalog"
-import BigCatalog2 from "./components/bigCat"
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
 
@@ -36,7 +35,7 @@ function App() {
           
           <Header/>
           
-          <MainImg/>
+          <Main/>
 
           <Footer/>
         </Router>

shop/src/components/MainImg.js

@@ -9,25 +9,29 @@ import store from "../reducers"
 import Catalog from "./catalog"
 
   
-const MainImg = ({className = "MainImg" }) => {
+const Main = ({className = "MainImg" }) => {
     return (
         <div className = {className}>
-            <aside></aside>
-            <content>
-                <Switch>
-                    <Route path = "/" component = {Main} exact/>
-                    <Route path = "/catalog" component={Catalog}/>
-                    <Route path="/about" component = {About}/>
-                    <Route path = "/post" component = {Post}/>
-                    <Route path = "/contacts" component = {Contacts}/>
-                    <Route component = { NotFound } exact/>
-                </Switch>
-            </content>
+            <Switch>
+                <aside>
+
+                    <Route path = "/catalog/" component={Catalog}/>
+                </aside>
+                <content>
+
+                        {/* <Route path = "/" component = {Main} exact/> */}
+                        <Route path="/about" component = {About}/>
+                        <Route path = "/post" component = {Post}/>
+                        <Route path = "/contacts" component = {Contacts}/>
+                        <Route component = { NotFound } exact/>
+
+                </content>
+            </Switch>
         </div>
     )
   }
   
-  const Main = () => <div>Я тут кароче самый главный страниц</div>
+//   const Main = () => <div>Я тут кароче самый главный страниц</div>
   const About = () => <div>Мы крутой магазин, бла-бла</div>
   const NotFound = () => <div>Да пошел ты!</div>
   
@@ -35,4 +39,4 @@ const MainImg = ({className = "MainImg" }) => {
   const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
   
 
-export default MainImg;
+export default Main;

shop/src/components/about.js

@@ -1,2 +0,0 @@
-
-export default About;

shop/src/components/bigCat.js

@@ -1,26 +0,0 @@
-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

@@ -1,25 +1,22 @@
 import {Provider, connect} from 'react-redux';
-import {Header, Footer, MainImg} from "./index"
+import {useEffect } from 'react'
+import {Header, Footer, MainImg, Links} from "./index"
 import thunk from 'redux-thunk';
 import { bindActionCreators } from 'redux';
 import actionCatalogCard from './../reducers/reducerCat';
 
 
 
+
 const Catalog = ({state, categories = [], getData = () => console.log("no")}) => {
-    console.log(state);
-    console.log(categories);
+    useEffect(() => categories.length == 0 && getData(), []);
+    console.log(categories)
     return(
         <>
         <ul className = "catalog">
-            Работаю
+            {categories.map(category => <Links url = {`/catalog/` + category._id} text = {category.name}></Links>)}
         </ul>
-        <h1>{categories.length}</h1>
-
-     <button onClick={() => {
-     
-     getData()}}>mazafaca</button>
-     </>
+        </>
   )}
 
 const getCategories = state => {

shop/src/components/header.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import {Footer} from "./index"
+import {Footer, Links} 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';
@@ -7,13 +7,7 @@ import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 
 
-const Links = ({url, text}) => {
-    return (
-        <li>
-            <Link className = "links" to={url}>{text}</Link>
-        </li>
-    )
-}
+
 
 
 

shop/src/components/index.js

@@ -4,12 +4,12 @@ import createHistory from "history/createBrowserHistory";
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import Header from "./header";
 import Footer from "./footer";
-import MainImg from "./MainImg";
+import Main from "./MainImg";
 import actionCatalogCard from "../reducers/reducerCat";
-//import {store} from "../App";
+import Links from "./links"
 
 
-export {Header,Footer, actionCatalogCard, MainImg};
+export {Header,Footer, actionCatalogCard, Main, Links};
 
 
 

shop/src/components/links.js

@@ -0,0 +1,12 @@
+import {Provider, connect} from 'react-redux';
+import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
+
+const Links = ({url, text, className = "links"}) => {
+    return (
+        <li>
+            <Link className = {className} to={url}>{text}</Link>
+        </li>
+    )
+}
+
+export default Links;