FinalProject/src/pages/ProductPage.jsx

import {useEffect} from "react";
import {connect} from "react-redux";
import {Typography} from "@mui/material";
import {actionGoodFindOne} from "../actions/ActionGoodFind";
import Switch from "react-router-dom/es/Switch";
import Route from "react-router-dom/es/Route";
import Page404 from "./404Page";
import Breadcrumb from "../components/Breadcrumbs";

const Goods = ({good:{_id, name, description, price, images}={}}) => {
    return (
        <>
            <Typography>{_id}</Typography>
            <Typography>{name}</Typography>
            <Typography>{description}</Typography>
            <Typography>{price}</Typography>

        </>
    )
}
const CGoods = connect(state => ({good: state.promise['goodFindOne']?.payload}))(Goods)

const BlockProduct = ({match:{params:{_id}}, getData}) => {
    useEffect(() => {
        getData(_id)
    },[_id, getData])

    return(
        <>
            <Breadcrumb links={['good']}/>
            <CGoods key={_id} />
        </>
    )
}

const CBlockProduct = connect(null, {getData: actionGoodFindOne})(BlockProduct)


const ProductPage = () => {
    return (
        <Switch>
            <Route path="/good/:_id" component={CBlockProduct} />
            <Route path="*" component={Page404} />
        </Switch>
    )
}

export default ProductPage