123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import { Stack, Typography, Divider } from "@mui/material";
- import { Box } from "@mui/system";
- import { connect } from "react-redux";
- import { useSearchParams } from "react-router-dom";
- import { GoodList } from "../common/GoodList";
- import { SubCategories } from "./SubCategories";
- import { SortOptions } from "../common/SortOptions";
- const GoodsPage = ({ category = {}, goods = [] }) => {
- const { name = "", subcategories = [] } = category || {};
- const [searchParams, setSearchParams] = useSearchParams();
- return (
- <Box className="GoodsPage">
- <Box>
- <Typography variant="h5" textAlign="center">
- {name}
- </Typography>
- </Box>
- {name && <Divider className="Divider" />}
- <Stack>
- <Box className="sortOptionsWrapper">
- <SortOptions
- defaultOption={searchParams.get("orderBy", "createdAt")}
- onClick={(option) => {
- searchParams.set("orderBy", option.value);
- setSearchParams(searchParams);
- }}
- />
- </Box>
- {!!subcategories.length ? (
- <Box>
- <Typography variant="h6" color="#79747E" textAlign="left">
- Категорії
- </Typography>
- <SubCategories categories={subcategories} />
- </Box>
- ) : null}
- {!!goods.length ? (
- <Box>
- <Typography paddingBottom={1} variant="h6" color="#79747E" textAlign="left">
- Товари
- </Typography>
- <GoodList goods={goods} />
- </Box>
- ) : null}
- </Stack>
- </Box>
- );
- };
- const CGoodsPage = connect((state) => ({ category: state?.promise?.catById?.payload || {}, goods: state?.feed?.payload || [] }))(GoodsPage);
- export { GoodsPage, CGoodsPage };
|