update header and footer + create catalog page

.idea/inspectionProfiles/Project_Default.xml

@@ -2,6 +2,17 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="2">
+            <item index="0" class="java.lang.String" itemvalue="src" />
+            <item index="1" class="java.lang.String" itemvalue="alt" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>

src/App.js

@@ -12,6 +12,9 @@ import {Provider} from "react-redux";
 import MyAccountPage from "./pages/MyAccountPage";
 import {store} from "./reducers";
 import ProfilePage from "./pages/ProfilePage";
+import CatalogPage from "./pages/CatalogPage";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
 
 const history = createHistory();
 
@@ -19,8 +22,10 @@ function App() {
   return (
       <Router history={history}>
           <Provider store={store}>
+              <Header/>
               <Switch>
                   <Route path="/" component={MainPage} exact/>
+                  <Route path="/catalog" component={CatalogPage} />
                   <Route path="/about-us" component={AboutUsPage} />
                   <Route path="/our-team" component={OurTeamPage} />
                   <Route path="/faq" component={FAQPage} />
@@ -30,6 +35,7 @@ function App() {
                   <Route path="/profile" component={ProfilePage} />
                   <Route path="*" component={Page404} />
               </Switch>
+              <Footer/>
           </Provider>
       </Router>
   )

src/actions/ActionCategory.js

@@ -0,0 +1,49 @@
+import {actionPromise} from "../reducers/PromiseReducer";
+import {gql} from "./PathDB";
+import {actionCategoryChange, actionCategoryCreate} from "../reducers/CategoryReducer";
+
+export const actionRootCats = () => {
+    return actionPromise('rootCats', gql(`query rootCats{
+          CategoryFind(query: "[{\\"parent\\": null}]"){
+            _id
+            name
+            subCategories{
+              _id,
+              name,
+              subCategories{
+                _id,
+                name
+              }
+            }
+          }
+        }`)
+    )
+}
+
+export const actionFullRootCats = () =>
+    async dispatch => {
+        let value = await dispatch(actionRootCats())
+        if (value){
+            dispatch(actionCategoryCreate(value))
+        }
+    }
+
+const actionCatById = (_id) => {
+    return actionPromise('catById', gql(`query catById($q: String){
+            CategoryFindOne(query: $q){
+                _id goods {
+                    _id name description price images {
+                        url
+                    }
+                }
+            }
+        }`, {q: JSON.stringify([{_id}])}))
+}
+
+export const actionFullCatById = (_id) =>
+    async dispatch => {
+        let value = await dispatch(actionCatById(_id))
+        if (value){
+            dispatch(actionCategoryChange(value))
+        }
+    }

src/actions/ActionLogin.js

@@ -1,4 +1,3 @@
-import {actionUserCreate} from "../reducers/UserReducer";
 import {actionFullUserFindOne} from "./ActionUserFind";
 
 const {actionAuthLogin} = require("../reducers/AuthReducer");

src/components/Header.jsx

@@ -11,10 +11,11 @@ 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 settingsAdmin = ['Profile', 'Dashboard', 'Logout']
 
 const Header = ({user={}, createUser}) => {
     if (localStorage.authToken && localStorage.userId && Object.keys(user).length === 0){
@@ -57,7 +58,7 @@ const Header = ({user={}, createUser}) => {
             </Button>
         )
     }
-    const IconItems = ({size="large", color='default', valueWishList=0, valueBasket=0}) => {
+    const IconItems = ({cart={}, size="large", color='default', valueWishList=0}) => {
         return (
             <>
                 <Link to='/search'>
@@ -88,7 +89,9 @@ const Header = ({user={}, createUser}) => {
                     <IconButton size={size} aria-label="basket" color={color}>
                         <Badge
                                 color="success"
-                                badgeContent={valueBasket}
+                                badgeContent={+Object.entries(cart).reduce((a, b) => {
+                                    return a + b[1].count
+                                }, 0)}
                                 anchorOrigin={{
                                     vertical: 'bottom',
                                     horizontal: 'right',
@@ -101,6 +104,8 @@ const Header = ({user={}, createUser}) => {
             </>
         )
     }
+    const CIconItems = connect(state => ({cart: state.cart}))(IconItems)
+
     const ItemAuth = ({link, text}) => {
         return (
             <Link style={{textDecoration: 'none', color: '#000'}} to={`/${link}`}>
@@ -116,13 +121,16 @@ const Header = ({user={}, createUser}) => {
                 !localStorage.authToken ?
                     <Link style={{textDecoration: 'none'}} to={'/my-account'}>
                         <IconButton sx={{ p: 0 }}>
-                            <Avatar alt="User" src="/static/images/avatar/2.jpg" />
+                            <Avatar alt="User" src={userDefault} />
                         </IconButton>
                     </Link> :
                     <>
                         <Tooltip title="Open settings">
                             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                                <Avatar alt="User" src="/static/images/avatar/2.jpg" />
+                                {auth.avatar === null ?
+                                    <Avatar alt="User" src={userDefault}/> :
+                                    <Avatar alt="User" src={user?.avatar?.url && backURL + '/' + user?.avatar?.url}/>
+                                }
                             </IconButton>
                         </Tooltip>
                         <Menu
@@ -214,7 +222,7 @@ const Header = ({user={}, createUser}) => {
                                 </MenuItem>
                             ))}
                             <MenuItem onClick={handleCloseNavMenu}>
-                                <IconItems size={'large'} color={'inherit'}/>
+                                <CIconItems size={'large'} color={'inherit'} />
                             </MenuItem>
                         </Menu>
                     </Box>
@@ -235,7 +243,7 @@ const Header = ({user={}, createUser}) => {
                     </Box>
 
                     <Box className='Header__Icons' sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
-                        <IconItems size={'large'}/>
+                        <CIconItems size={'large'} />
                     </Box>
                     <Box sx={{ flexGrow: 0 }}>
                         <CUserIcon/>

src/pages/404Page.jsx

@@ -1,7 +1,5 @@
-import Header from "../components/Header";
-import Footer from "../components/Footer";
 import Breadcrumbs from "../components/Breadcrumbs";
-import imgUrl from "../img/not found/1.png"
+import imgUrl from "../img/not-found/1.png"
 import {Box, Container, Typography, useMediaQuery} from "@mui/material";
 
 const Page404 = () => {
@@ -9,8 +7,7 @@ const Page404 = () => {
     const matches2 = useMediaQuery('(max-width:450px)');
     return (
         <>
-            <Header/>
-            <Breadcrumbs links={['404 page']} title={'PAGE NOT FOUND'}/>
+            <Breadcrumbs links={['404 page']} title={'PAGE NOT FOUND'} />
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="lg">
                     <Box sx={{
@@ -44,7 +41,6 @@ const Page404 = () => {
                     </Box>
                 </Container>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/AboutUsPage.jsx

@@ -1,9 +1,7 @@
-import Footer from "../components/Footer";
-import Header from "../components/Header";
 import Breadcrumb from "../components/Breadcrumbs";
 import {Box, Container, Grid, Typography, useMediaQuery} from "@mui/material";
 import Title from "../components/Title";
-import image1 from "../img/about us/1.jpg";
+import image1 from "../img/about-us/1.jpg";
 import SavingsIcon from '@mui/icons-material/Savings';
 import AlarmIcon from '@mui/icons-material/Alarm';
 import AutoGraphIcon from '@mui/icons-material/AutoGraph';
@@ -53,8 +51,7 @@ const AboutUsPage = () => {
     const matches = useMediaQuery('(max-width:768px)');
     return (
         <>
-            <Header/>
-            <Breadcrumb links={['about us']}/>
+            <Breadcrumb links={['about-us']} />
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="lg">
                     <Title subtitle={'OUR'} title={'MISSION'} />
@@ -97,7 +94,6 @@ const AboutUsPage = () => {
                     </Container>
                 </Box>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/CatalogPage.jsx

@@ -0,0 +1,251 @@
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import Breadcrumb from "../components/Breadcrumbs";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary, Box, Button,
+    Card, CardActionArea, CardActions, CardContent, CardMedia,
+    Container, Divider,
+    Grid,
+    Typography,
+    useMediaQuery
+} from "@mui/material";
+import {connect} from "react-redux";
+import {actionFullCatById, actionFullRootCats} from "../actions/ActionCategory";
+import Link from "react-router-dom/es/Link";
+import Page404 from "./404Page";
+import Route from "react-router-dom/es/Route";
+import Switch from "react-router-dom/es/Switch";
+import {useEffect, useState} from "react";
+import {backURL} from "../actions/PathDB";
+import {actionCartAdd} from "../reducers/CartReducer";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import {Pagination} from "@mui/material";
+
+
+const CategoryItem = ({object: {_id, name, subCategories}={}}) => {
+    const [expanded, setExpanded] = useState(false);
+
+    const handleChange = (panel) => (event, isExpanded) => {
+        setExpanded(isExpanded ? panel : false);
+    };
+
+    return (
+        <>
+            {subCategories === null || !subCategories ?
+                <li>
+                    <Link style={{textDecoration: 'none'}} to={`/catalog/category/${_id}`}>
+                        <Typography
+                            variant='body1'
+                            color='#616161'
+                            marginBottom='10px'
+                        >
+                            {name}
+                        </Typography>
+                    </Link>
+                </li>
+                :
+                <li>
+                    <Accordion style={{border: 'none', borderRadius: '0',marginTop: '-10px', boxShadow: 'none'}} expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+                        <AccordionSummary
+                            sx={{padding: '0'}}
+                            expandIcon={<ExpandMoreIcon />}
+                            aria-controls="panel1bh-content"
+                            id="panel1bh-header"
+                        >
+                            <Link style={{textDecoration: 'none'}} to={`/catalog/category/${_id}`}>
+                                <Typography
+                                    variant='body1'
+                                    color='#616161'
+                                    padding='0'
+                                >
+                                    {name}
+                                </Typography>
+                            </Link>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <ul style={{listStyle: 'none', padding: '0 0 0 10px', marginBottom: '10px'}}>
+                                {subCategories && Object.values(subCategories).map(item =>
+                                    <CategoryItem object={item}/>
+                                )}
+                            </ul>
+                        </AccordionDetails>
+                    </Accordion>
+                </li>
+            }
+        </>
+    )
+}
+const CategoryAside = ({category}) => {
+    return (
+        <Grid sx={{backgroundColor: '#fff', padding: '30px'}} xs={12} lg={3}>
+            <Typography
+                variant='h6'
+                letterSpacing='3px'
+                lineHeight='1.3em'
+                marginBottom='20px'
+            >
+                PRODUCT CATEGORIES
+            </Typography>
+            <ul style={{listStyle: 'none', padding: '0'}}>
+                {category && Object.values(category).map(item =>
+                    <CategoryItem object={item}/>
+                )}
+            </ul>
+        </Grid>
+    )
+}
+
+const GoodCard = ({good:{_id, name, description, price, images}={}, onCartAdd}) => {
+    return (
+        <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'}}>
+                        <CardMedia sx={{marginBottom: '20px', marginTop: '20px'}}
+                            component="img"
+                            height="230"
+                            image={`${backURL}/${images[0].url}`}
+                            alt="Good title image"
+                        />
+                        <CardContent sx={{display: 'flex', flexDirection: 'column', height: '180px', justifyContent: 'space-between'}}>
+                            <Typography
+                                textAlign='center'
+                                fontFamily='sarif'
+                                letterSpacing='2px'
+                                marginBottom='20px'
+                                fontSize='19px'
+                                sx={{textTransform: 'uppercase', flexGrow: '1'}}
+                                color='#000'
+                            >
+                               {name}
+                            </Typography>
+                            <Typography textAlign='center' variant="body2" color='#616161' marginBottom='20px' sx={{ flexGrow: '0'}}>
+                                {description.length > 60 ?
+                                    'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' :
+                                    description
+                                }
+                            </Typography>
+                            <Typography textAlign='center' variant="h5" color="#000" sx={{ flexGrow: '0'}}>
+                                $ {parseFloat(price).toFixed(2)}
+                            </Typography>
+                        </CardContent>
+                    </Link>
+                </CardActionArea>
+                <CardActions sx={{flexGrow: '0', justifyContent: 'space-between'}}>
+                    <Button onClick={() => onCartAdd({_id, name, price, images})} size="small" color="primary">
+                        <AddShoppingCartIcon />
+                    </Button>
+                    <Button onClick={() => console.log('nice')} size="small" color="primary">
+                        <FavoriteBorderIcon />
+                    </Button>
+                </CardActions>
+            </Card>
+        </Grid>
+    )
+}
+const CGoodCard = connect(null, {onCartAdd: actionCartAdd})(GoodCard)
+
+const Goods = ({_id='5dc49f4d5df9d670df48cc64', category={}}) => {
+    // const itemsPerPage = 6
+    // const [page, setPage] = useState(1)
+    // const [count, setCount] = useState(1)
+    // const handleChange = (event, value) => {
+    //     setPage(value);
+    // }
+   return (
+       <>
+           {(Object.values(category) || []).map(item => {
+               if (item['_id'] === _id) {
+                   if(!item.goods || item['goods'] === null) {
+                       return <div>not info</div>
+                   }
+                   if (item.goods) {
+                       // setCount(item['goods'].length / itemsPerPage)
+                       return (item['goods'] || []).map((good, index) => <CGoodCard key={index} good={good}/>)
+                   }
+               }
+               else if(item['subCategories'] !== null) {
+                   return (item['subCategories'] || []).map(subItem => {
+                       if (subItem['_id'] === _id) {
+                           if(subItem['goods'] === null) return <div>not info</div>
+                           // setCount(subItem['goods'].length / itemsPerPage)
+                           return (subItem['goods'] || []).map(good => <CGoodCard good={good}/>)
+                       }
+                       else if(subItem['subCategories'] !== null) {
+                           return (subItem['subCategories'] || []).map(subSubItem => {
+                               if (subSubItem['_id'] === _id) {
+                                   if(subSubItem['goods'] === null) return <div>not info</div>
+                                   // setCount(subSubItem['goods'].length / itemsPerPage)
+                                   return (subSubItem['goods'] || []).map(good => <CGoodCard good={good}/>)
+                               }
+                           })
+                       }
+                   })
+               }
+           })}
+           {/*<Divider />*/}
+           {/*<Box display='flex' justifyContent='center' width='100%'>*/}
+           {/*    <Pagination*/}
+           {/*        count={count}*/}
+           {/*        page={page}*/}
+           {/*        onChange={handleChange}*/}
+           {/*        defaultPage={1}*/}
+           {/*        color="primary"*/}
+           {/*        size="large"*/}
+           {/*        showFirstButton*/}
+           {/*        showLastButton*/}
+           {/*    />*/}
+           {/*</Box>*/}
+       </>
+   )
+}
+const CGoods = connect(state => ({category: state.category}))(Goods)
+
+const BlockGood = ({match:{params:{_id}}, getData}) => {
+    useEffect(() => {
+        getData(_id)
+    },[_id, getData])
+    return(
+        <Grid container justifyContent='space-between'>
+            <CGoods _id={_id} />
+        </Grid>
+    )
+}
+export const CBlockGood= connect(null, {getData: actionFullCatById})(BlockGood)
+
+const Products = () => {
+    return (
+        <Grid xs={12} lg={9}>
+            <Switch>
+                <Route path="/catalog/category/:_id" component={CBlockGood} />
+                <Route path="*" component={Page404} />
+            </Switch>
+        </Grid>
+    )
+}
+
+const CatalogPage = ({category={}, actionRootCat}) => {
+    const matches = useMediaQuery('(max-width:899px)')
+    if(Object.entries(category).length === 0) actionRootCat()
+
+    return (
+        <>
+            <Breadcrumb links={['catalog']}/>
+            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
+                <Container maxWidth="lg">
+                    <Grid container justifyContent='space-between'>
+                        <CategoryAside category={category}/>
+                        <Products/>
+                    </Grid>
+                </Container>
+            </main>
+        </>
+    )
+}
+const CCatalogPage = connect(state => ({category: state.category}), {actionRootCat: actionFullRootCats})(CatalogPage)
+
+export default CCatalogPage

src/pages/ContactPage.jsx

@@ -4,9 +4,7 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import Header from "../components/Header";
 import Breadcrumbs from "../components/Breadcrumbs";
-import Footer from "../components/Footer";
 import {useState} from "react";
 import {Container, Grid, useMediaQuery} from "@mui/material";
 import FacebookIcon from "@mui/icons-material/Facebook";
@@ -179,7 +177,6 @@ const Contact = ({address=defaultAddress}) => {
     };
     return (
         <>
-            <Header/>
             <Breadcrumbs links={['contact']}/>
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="lg">
@@ -215,7 +212,6 @@ const Contact = ({address=defaultAddress}) => {
                     </Box>
                 </Container>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/FAQPage.jsx

@@ -1,5 +1,3 @@
-import Header from "../components/Header";
-import Footer from "../components/Footer";
 import Breadcrumbs from "../components/Breadcrumbs";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {Accordion, AccordionDetails, AccordionSummary, Container, Typography, useMediaQuery} from "@mui/material";
@@ -49,7 +47,6 @@ const FAQPage = () => {
     const matches = useMediaQuery('(max-width:768px)');
     return (
         <>
-            <Header/>
             <Breadcrumbs links={['faq']}/>
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="lg">
@@ -75,7 +72,6 @@ const FAQPage = () => {
                     />
                 </Container>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/MainPage.jsx

@@ -1,17 +1,13 @@
-import Header from "../components/Header";
-import Footer from "../components/Footer";
 
 const MainPage = () => {
     return (
         <>
-            <Header/>
             <main>
                 <article>
                     Main page
                     <br/><br/><br/><br/><br/><br/><br/><br/>
                 </article>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/MyAccountPage.jsx

@@ -1,5 +1,3 @@
-import Header from "../components/Header";
-import Footer from "../components/Footer";
 import Breadcrumb from "../components/Breadcrumbs";
 import {
     Box,
@@ -100,7 +98,6 @@ const MyAccountPage = ({auth, promise, user, onLogin, onRegister}) => {
 
     return (
         <>
-            <Header/>
             <Breadcrumb links={['my account']}/>
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="sm">
@@ -145,7 +142,6 @@ const MyAccountPage = ({auth, promise, user, onLogin, onRegister}) => {
                     }
                 </Container>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/OurTeamPage.jsx

@@ -1,6 +1,4 @@
-import Footer from "../components/Footer";
 import Breadcrumb from "../components/Breadcrumbs";
-import Header from "../components/Header";
 import {Box, Container, Grid, Typography, useMediaQuery} from "@mui/material";
 import FacebookIcon from "@mui/icons-material/Facebook";
 import InstagramIcon from "@mui/icons-material/Instagram";
@@ -170,7 +168,6 @@ const OurTeamPage = ({specialist=defaultTeam}) => {
     const matches = useMediaQuery('(max-width:768px)');
     return (
         <>
-            <Header/>
             <Breadcrumb links={['our team']}/>
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="lg">
@@ -179,7 +176,6 @@ const OurTeamPage = ({specialist=defaultTeam}) => {
                     </Grid>
                 </Container>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/PrivacyPolicyPage.jsx

@@ -1,5 +1,3 @@
-import Header from "../components/Header";
-import Footer from "../components/Footer";
 import Breadcrumbs from "../components/Breadcrumbs";
 import {Box, Container, Link, Typography, useMediaQuery} from "@mui/material";
 
@@ -56,7 +54,6 @@ const PrivacyPolicy = () => {
     const matches = useMediaQuery('(max-width:768px)');
     return (
         <>
-            <Header/>
             <Breadcrumbs links={['privacy policy']}/>
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="lg">
@@ -117,7 +114,6 @@ const PrivacyPolicy = () => {
                     </Box>
                 </Container>
             </main>
-            <Footer/>
         </>
     )
 }

src/pages/ProfilePage.jsx

@@ -1,18 +1,17 @@
-import Header from "../components/Header";
-import Footer from "../components/Footer";
 import Breadcrumb from "../components/Breadcrumbs";
 import {connect} from "react-redux";
-import {Box, Button, Container, Grid, TextField, Typography, useMediaQuery} from "@mui/material";
+import {Avatar, Box, Button, Container, Grid, TextField, Typography, useMediaQuery} from "@mui/material";
 import Redirect from "react-router-dom/es/Redirect";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
-import {useRef, useState} from "react";
+import {useState} from "react";
 import PropTypes from "prop-types";
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import CancelIcon from '@mui/icons-material/Cancel';
 import SendAndArchiveIcon from '@mui/icons-material/SendAndArchive';
 import {actionAuthLogout} from "../reducers/AuthReducer";
 import {actionUserRemove} from "../reducers/UserReducer";
+import {backURL} from "../actions/PathDB";
 
 function TabPanel(props) {
     const { children, value, index, ...other } = props;
@@ -76,7 +75,7 @@ const FormUpload = ({user, time, setStatus}) => {
                 <TextField sx={{color: '#000'}} label={'Login'} variant="outlined" value={user?.login}/>
                 <TextField sx={{color: '#000'}} label={'Nick'} variant="outlined" value={user?.nick} />
                 <Button variant="contained" component="Avatar">Choose a new avatar<input type="file" hidden/></Button>
-                <ItemTabsAccountDefault title={'Status account'} content={user?.acl[1]}/>
+                <ItemTabsAccountDefault title={'Status account'} content={user?.acl[2] || user?.acl[1]}/>
                 <ItemTabsAccountDefault title={'Account creation date'} content={time}/>
                 <Grid item xs={12} md={4} display='flex' justifyContent={'center'} alignItems={'center'}>
                     <Button
@@ -102,7 +101,6 @@ const FormUpload = ({user, time, setStatus}) => {
         </form>
     )
 }
-
 const AccountDetails = ({user, time}) => {
     const [status, setStatus] = useState(false)
 
@@ -111,11 +109,12 @@ const AccountDetails = ({user, time}) => {
             <Grid container spacing={2} justifyContent={'space-between'} alignItems={'center'} textAlign={'center'}>
                 <ItemTabsAccountDefault title={'Login'} content={user?.login}/>
                 <ItemTabsAccountDefault title={'Nick'} content={user?.nick}/>
-                <ItemTabsAccountDefault title={'Status account'} content={user?.acl[1]}/>
+                <ItemTabsAccountDefault title={'Status account'} content={user?.acl[2] || user?.acl[1]}/>
                 <ItemTabsAccountDefault title={'Account creation date'} content={time}/>
                 <ItemTabsAccountDefault title={'Avatar'}
                                  content={
-                                     (user?.avatar && <img src={user?.avatar} alt={'User avatar'}/>) || 'Not installed'
+                                     // eslint-disable-next-line no-mixed-operators
+                                     (user?.avatar?.url && <Avatar style={{margin: '0 auto'}} alt="User" src={backURL + '/' + user?.avatar?.url}/> || 'Not installed')
                                  }
                 />
                 <Grid item xs={12} md={4}>
@@ -137,7 +136,6 @@ const AccountDetails = ({user, time}) => {
     )
 }
 
-
 const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
     const matches = useMediaQuery('(max-width:899px)')
     const matches2 = useMediaQuery('(max-width:768px)')
@@ -163,7 +161,6 @@ const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
     return (
         Object.keys(user).length === 0 ? <Redirect to={'/my-account'}/> :
             <>
-                <Header/>
                 <Breadcrumb links={['Profile']}/>
                 <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                     <Container maxWidth="lg">
@@ -206,7 +203,6 @@ const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
                         </Box>
                     </Container>
                 </main>
-                <Footer/>
             </>
     )
 }

src/reducers/CartReducer.js

@@ -38,7 +38,7 @@ export const CartReducer = (state = {}, { type, good = {}, count = 1 }) => {
     return state
 }
 
-const actionCartAdd = (good, count=1) => ({type: "CART_ADD", good, count});
-const actionCardChange = (good, count) => ({type: 'CART_CHANGE', good, count})
-const actionCardRemove = (good) => ({type: 'CART_REMOVE', good})
-const actionCardClear = () => ({type: 'CART_CLEAR'})
+export const actionCartAdd = (good, count=1) => ({type: "CART_ADD", good, count});
+export const actionCardChange = (good, count) => ({type: 'CART_CHANGE', good, count})
+export const actionCardRemove = (good) => ({type: 'CART_REMOVE', good})
+export const actionCardClear = () => ({type: 'CART_CLEAR'})

src/reducers/CategoryReducer.js

@@ -0,0 +1,48 @@
+export const CategoryReducer = (state={}, { type, value={} }) => {
+    if (type === 'CATEGORY_CREATE') {
+        if (Object.entries(value).length !== 0) {
+            return {
+                ...state,
+                ...value
+            }
+        }
+        else
+            return state
+    }
+    if (type === 'CATEGORY_CHANGE') {
+        if (Object.entries(value).length !== 0) {
+            for (const item of Object.entries(state)) {
+                if(item[1]['_id'] === value['_id']){
+                    item[1]['goods'] = value['goods']
+                }
+                else if(item[1]['subCategories'] !== null){
+                    for (const itemSub of Object.entries(item[1]['subCategories'])) {
+                        if(itemSub[1]['_id'] === value['_id']){
+                            itemSub[1]['goods'] = value['goods']
+                        }
+                        else if(itemSub[1]['subCategories'] !== null){
+                            for (const itemSubSub of Object.entries(itemSub[1]['subCategories'])) {
+                                if(itemSubSub[1]['_id'] === value['_id']){
+                                    itemSubSub[1]['goods'] = value['goods']
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return {
+                ...state
+            }
+        }
+        else
+            return state
+    }
+    if (type === 'CATEGORY_REMOVE') {
+        return {}
+    }
+    return state
+}
+
+export const actionCategoryCreate = value => ({ type: 'CATEGORY_CREATE', value })
+export const actionCategoryChange = value => ({ type: 'CATEGORY_CHANGE', value })
+export const actionCategoryRemove = () => ({ type: 'CATEGORY_REMOVE' })

src/reducers/CombineReducers.js

@@ -3,10 +3,12 @@ import {AuthReducer} from "./AuthReducer";
 import {PromiseReducer} from "./PromiseReducer";
 import {CartReducer} from "./CartReducer";
 import {UserReducer} from "./UserReducer";
+import {CategoryReducer} from "./CategoryReducer";
 
 export const rootReducer = combineReducers({
     auth: AuthReducer,
     promise: PromiseReducer,
     cart: CartReducer,
-    user: UserReducer
+    user: UserReducer,
+    category: CategoryReducer
 })