CatalogPage.jsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import {Container, Grid, useMediaQuery} from "@mui/material";
  2. import {useEffect} from "react";
  3. import Breadcrumb from "../../components/Breadcrumbs";
  4. import {connect} from "react-redux";
  5. import {actionFullAllCategory, actionFullRootCats} from "../../actions/ActionCategory";
  6. import {CategoryAside} from "./CategoryAside";
  7. import {Products} from "./Goods";
  8. const CatalogPage = ({category={}, actionRootCat}) => {
  9. const matches = useMediaQuery('(max-width:899px)')
  10. useEffect(() => {
  11. if(category && Object.entries(category).length === 0) actionRootCat()
  12. }, [category])
  13. return (
  14. <>
  15. <Breadcrumb links={['catalog']}/>
  16. <main
  17. style={{
  18. backgroundColor: "#f3f3f3",
  19. padding: matches ? "20px 0" : "50px 0",
  20. minHeight: '300px'
  21. }}
  22. >
  23. <Container maxWidth="lg">
  24. <Grid container justifyContent='space-between'>
  25. {category &&
  26. Object.entries(category).length > 0 &&
  27. <CategoryAside category={category}/>
  28. }
  29. <Products />
  30. </Grid>
  31. </Container>
  32. </main>
  33. </>
  34. )
  35. }
  36. export const CCatalogPage = connect(state => ({category: state.category}),
  37. {actionRootCat: actionFullRootCats})(CatalogPage)