create product page

src/App.js

@@ -15,6 +15,7 @@ import ProfilePage from "./pages/ProfilePage";
 import CatalogPage from "./pages/CatalogPage";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
+import ProductPage from "./pages/ProductPage";
 
 const history = createHistory();
 
@@ -26,6 +27,7 @@ function App() {
               <Switch>
                   <Route path="/" component={MainPage} exact/>
                   <Route path="/catalog" component={CatalogPage} />
+                  <Route path="/good" component={ProductPage} />
                   <Route path="/about-us" component={AboutUsPage} />
                   <Route path="/our-team" component={OurTeamPage} />
                   <Route path="/faq" component={FAQPage} />

src/actions/ActionGoodFind.js

@@ -0,0 +1,11 @@
+const {actionPromise} = require("../reducers/PromiseReducer");
+const {gql} = require("./PathDB");
+
+export const actionGoodFindOne = (_id) =>
+    actionPromise('goodFindOne', gql(`query goodFindOne($q :String){
+            GoodFindOne(query:  $q){
+                _id name price createdAt description images{
+                    _id url
+                }
+            }
+    }`, { q: JSON.stringify([{ _id }]) }))

src/components/Header.jsx

@@ -10,18 +10,13 @@ import '../scss/Header.scss';
 import {actionAuthLogout} from "../reducers/AuthReducer";
 import {connect} from "react-redux";
 import {actionUserRemove} from "../reducers/UserReducer";
-import {actionFullUserFindOne} from "../actions/ActionUserFind";
 import {backURL} from "../actions/PathDB";
 import userDefault from "../img/header/userDefault.png"
 
 const pages = ['catalog', 'about us', 'our team', 'faq', 'contact']
 const settingsDefaultUserAuth = ['Profile', 'Logout']
 
-const Header = ({user={}, createUser}) => {
-    if (localStorage.authToken && localStorage.userId && Object.keys(user).length === 0){
-        createUser(localStorage.userId)
-    }
-
+const Header = ({user={}}) => {
     const [anchorElNav, setAnchorElNav] = useState(null);
     const [anchorElUser, setAnchorElUser] = useState(null);
 
@@ -253,5 +248,5 @@ const Header = ({user={}, createUser}) => {
         </AppBar>
     );
 };
-const CHeader = connect(state => ({user: state.user}), {createUser: actionFullUserFindOne})(Header)
+const CHeader = connect(state => ({user: state.user}))(Header)
 export default CHeader;

src/pages/CatalogPage.jsx

@@ -105,7 +105,7 @@ const GoodCard = ({good:{_id, name, description, price, images}={}, wishlist={},
         <Grid xs={12} lg={4} item margin='20px 0'>
             <Card sx={{ maxWidth: 345, height: '100%', display: 'flex', flexDirection: 'column', margin: 'auto 20px'}}>
                 <CardActionArea sx={{padding: '0', flexGrow: '1', position: 'relative'}}>
-                    <Link to='/' style={{position: 'relative', textDecoration: 'none'}}>
+                    <Link  to={`/good/${_id}`} style={{position: 'relative', textDecoration: 'none'}}>
                         <CardMedia sx={{marginBottom: '20px', marginTop: '20px'}}
                             component="img"
                             height="230"

src/pages/ProductPage.jsx

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

src/reducers/CombineReducers.js

@@ -5,12 +5,13 @@ import {CartReducer} from "./CartReducer";
 import {UserReducer} from "./UserReducer";
 import {CategoryReducer} from "./CategoryReducer";
 import {WishListReducer} from "./WishListReducer";
+import {localStoredReducer} from "./LocalStoredReducer";
 
 export const rootReducer = combineReducers({
     auth: AuthReducer,
     promise: PromiseReducer,
-    cart: CartReducer,
+    cart: localStoredReducer(CartReducer, 'cart'),
     user: UserReducer,
     category: CategoryReducer,
-    wishlist: WishListReducer
+    wishlist: localStoredReducer(WishListReducer, 'wishlist'),
 })

src/reducers/LocalStoredReducer.js

@@ -0,0 +1,16 @@
+export const localStoredReducer = (reducer, localStorageName) =>
+    (state, action) => {
+        if (!state) {
+            if (localStorage[localStorageName]){
+                return JSON.parse(localStorage[localStorageName])
+            }
+            else {
+                return reducer(state, action)
+            }
+        }
+        else {
+            let newState = reducer(state, action)
+            localStorage.setItem(localStorageName, JSON.stringify(newState))
+            return newState
+        }
+    }

src/reducers/index.js

@@ -1,6 +1,11 @@
 import {applyMiddleware, createStore} from "redux";
 import thunk from "redux-thunk";
 import {rootReducer} from "./CombineReducers";
+import {actionFullUserFindOne} from "../actions/ActionUserFind";
 
 export const store = createStore(rootReducer, applyMiddleware(thunk))
+
+if (localStorage.authToken && localStorage.userId){
+    store.dispatch(actionFullUserFindOne(localStorage.userId))
+}
 store.subscribe(() => console.log(store.getState()))