before pull

package.json

@@ -1,7 +1,7 @@
 {
   "name": "diploma",
   "version": "0.1.0",
-  "proxy":"http://localhost:8000",
+  "proxy":"https://diploma-back-django.herokuapp.com/",
   "private": true,
   "dependencies": {
     "@dnd-kit/core": "^5.0.3",

src/components/GoodsPage/index.js

@@ -23,7 +23,9 @@ const GoodsPage = ({ category = {} }) => {
             <Stack>
                 <Box className="sortOptionsWrapper">
                     <SortOptions
-                        onClick={(option) => dispatch(actionCatById({ _id: category._id, orderBy: option.value }))}
+                        onClick={(option) =>
+                            category._id && dispatch(actionCatById({ _id: category._id, orderBy: option.value }))
+                        }
                     />
                 </Box>
                 {!!subcategories.length ? (

src/components/LayoutPage/index.js

@@ -1,12 +1,13 @@
 import { Box, Grid } from '@mui/material';
 import { useEffect } from 'react';
 import { connect, useDispatch } from 'react-redux';
-import { Route, Routes, useParams } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { actionCatById } from '../../actions/actionCatById';
 import { actionGoodById } from '../../actions/actionGoodById';
 import { actionGoodsFind } from '../../actions/actionGoodsFind';
 import { AdminLayoutPage } from '../admin/AdminLayoutPage';
 import { CartPage } from '../CartPage';
+import { Error404 } from '../common/Error404';
 import { GoodList } from '../common/GoodList';
 import { CProtectedRoute, ProtectedRoute } from '../common/ProtectedRoute';
 import { GoodPage } from '../GoodPage';
@@ -20,7 +21,10 @@ import { MainPage } from '../MainPage';
 const GoodsPageContainer = () => {
     const params = useParams();
     const dispatch = useDispatch();
-    dispatch(actionCatById({ _id: params._id }));
+    if (params._id) {
+        console.log(params._id);
+        dispatch(actionCatById({ _id: params._id }));
+    }
 
     return <CGoodsPage />;
 };
@@ -45,34 +49,39 @@ const GoodsListContainer = () => {
     return <CGoodsList />;
 };
 
-export const LayoutPage = () => (
-    <Box className="LayoutPage">
-        <Header />
-        <Grid container columns={14} rows={1}>
-            <Grid xs={3} item>
-                <Aside />
+export const LayoutPage = () => {
+    const location = useLocation();
+    return (
+        <Box className="LayoutPage">
+            <Header />
+            <Grid container columns={14} rows={1}>
+                <Grid xs={location.pathname.match(/(\/categor)|(\/good)|(\/order)*/) ? 3 : 0} item>
+                    <Aside />
+                </Grid>
+                <Grid xs={location.pathname.match(/(\/categor)|(\/good)|(\/order)*/) ? 11 : 14} item>
+                    <Content>
+                        <Routes>
+                            <Route path="/" exact element={<MainPage />} />
+                            <Route path="/cart" exact element={<CartPage />} />
+                            <Route path="/search/:searchData/" element={<GoodsListContainer />} exact />
+                            <Route path="/category/:_id" element={<GoodsPageContainer />} />
+                            <Route path="/category/" element={<GoodsPageContainer />} />
+                            <Route path="/good/:_id" element={<GoodPageContainer />} />
+                            <Route
+                                path="/admin/*"
+                                exact
+                                element={
+                                    <CProtectedRoute roles={['admin']} fallback="/auth">
+                                        <AdminLayoutPage />
+                                    </CProtectedRoute>
+                                }
+                            />
+                            <Route path="*" element={<Navigate to="/404" />} />
+                        </Routes>
+                    </Content>
+                </Grid>
             </Grid>
-            <Grid xs={11} item>
-                <Content>
-                    <Routes>
-                        <Route path="/" exact element={<MainPage />} />
-                        <Route path="/cart" exact element={<CartPage />} />
-                        <Route path="/search/:searchData/" element={<GoodsListContainer />} exact />
-                        <Route path="/category/:_id" element={<GoodsPageContainer />} />
-                        <Route path="/category/" element={<GoodsPageContainer />} />
-                        <Route path="/good/:_id" element={<GoodPageContainer />} />
-                        <Route
-                            path="/admin/*"
-                            element={
-                                <CProtectedRoute roles={['admin']} fallback="/auth">
-                                    <AdminLayoutPage />
-                                </CProtectedRoute>
-                            }
-                        />
-                    </Routes>
-                </Content>
-            </Grid>
-        </Grid>
-        <Footer />
-    </Box>
-);
+            <Footer />
+        </Box>
+    );
+};

src/components/Root/index.js

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { Box } from '@mui/material';
 import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { AuthPage } from '../AuthPage';
 import { LayoutPage } from '../LayoutPage';
 import { CProtectedRoute } from '../common/ProtectedRoute';
+import { Error404 } from '../common/Error404';
 
 const Root = () => {
     const dispatch = useDispatch();
@@ -24,7 +25,9 @@ const Root = () => {
                         </CProtectedRoute>
                     }
                 />
+                <Route path="/404" element={<Error404 />} />
                 <Route path="/*" element={<LayoutPage />} />
+                <Route path="*" element={<Navigate to="/404" />} />
             </Routes>
         </Box>
     );

src/components/admin/AdminGoodPage/GoodForm.js

@@ -212,7 +212,7 @@ export const CGoodForm = connect(
         catList: state.promise.catAll?.payload || [],
         promiseStatus: state.promise.goodUpsert?.status || null,
         good: state.promise?.adminGoodById?.payload || {},
-        serverErrors: state.promise?.goodUpsert?.errors || [],
+        serverErrors: state.promise?.goodUpsert?.error || [],
     }),
     {
         onSave: (good) => actionGoodUpdate(good),

src/components/admin/AdminGoodsPage/AdminGoodListHeader.js

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 
 const AdminGoodListHeader = ({ onSortChange, sort }) => {
     const navigate = useNavigate();
-    console.log(sort);
+
     return (
         <TableRow className="AdminGoodListHeader">
             <TableCell scope="col">

src/components/admin/AdminLayoutPage/index.js

@@ -207,6 +207,7 @@ const AdminLayoutPage = () => {
                 <Route path="/orders/" element={<CAdminOrdersPageContainer />} />
                 <Route path="/order/" element={<AdminOrderPageContainer />} />
                 <Route path="/order/:_id" element={<AdminOrderPageContainer />} />
+                <Route path="*" element={<Navigate to="/404" />} />
             </Routes>
         </Box>
     );

src/components/common/Error404/index.js

@@ -0,0 +1,4 @@
+import { Box } from '@mui/material';
+import { ReactComponent as Logo404 } from '../../../images/404.svg';
+
+export const Error404 = () => <Box className="Error404" component={Logo404} />;

src/components/common/GoodCard/index.js

@@ -16,7 +16,7 @@ const GoodCard = ({ good = {} }) => {
                 />
                 <CardContent>
                     <Typography gutterBottom variant="body1" component="div" color="#1C1B1F" textAlign="left">
-                        Назва: {good.name?.length > 20 ? `${good.name.slice(0, 20)}...` : good.name}
+                        Назва: {good.name?.length > 10 ? `${good.name.slice(0, 10)}...` : good.name}
                     </Typography>
                     <Typography variant="body2" color="text.secondary" textAlign="left">
                         Ціна: {good.price}

src/components/common/SearchBar/SearchBar.js

@@ -72,9 +72,7 @@ export const SearchBar = ({
 
                 {!!inputValue ? (
                     <Button
-                        component={Link}
                         className="Link"
-                        to={`${searchLink}${inputValue}`}
                         onClick={() => {
                             setInputValue('');
                             onSearchButtonClick();

src/components/common/SortOptions/index.js

@@ -12,11 +12,13 @@ export const SortOptions = ({ onClick, options = sortOptions || [] } = {}) => {
 
     const handleSelect = (option) => {
         option && setSelectedOption(option);
+        console.log(option);
         setAnchorEl(null);
     };
 
     useEffect(() => {
         if (selectedOption) {
+            console.log(selectedOption);
             onClick(selectedOption);
         }
     }, [selectedOption]);

src/components/layout/Aside/index.js

@@ -1,6 +1,7 @@
 import { Box } from '@mui/material';
-import { Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { statusOptions } from '../../../helpers';
+import { CProtectedRoute } from '../../common/ProtectedRoute';
 import { AdminCategories } from './AdminCategories';
 
 import { CCategories } from './CCategories';
@@ -10,8 +11,17 @@ const Aside = ({ children }) => (
     <Box className="Aside">
         <Box className="body">
             <Routes>
-                <Route path="/admin/*" element={<AdminCategories />} />
+                <Route
+                    path="/admin/*"
+                    exact
+                    element={
+                        <CProtectedRoute roles={['admin']} fallback="/auth">
+                            <AdminCategories />
+                        </CProtectedRoute>
+                    }
+                />
                 <Route path="/*" element={<CCategories />} />
+                <Route path="*" element={<Navigate to="/404" />} />
             </Routes>
 
             {children}
@@ -23,7 +33,9 @@ const Aside = ({ children }) => (
                 exact
                 element={
                     <Box className="body" mt={4}>
-                        <StatusOptions options={statusOptions}></StatusOptions>
+                        <CProtectedRoute roles={['admin']} fallback="/auth">
+                            <StatusOptions options={statusOptions} />
+                        </CProtectedRoute>
                     </Box>
                 }
             />

src/index.scss

@@ -76,6 +76,10 @@
 
 
 .App{
+  & .Error404{
+    height: 99vh;
+  }
+
 
   & .Header{
     margin-bottom: 30px;
@@ -96,8 +100,11 @@
         & .SearchBarWrapper{
           flex-grow: 1;
           margin-left: 10px;
+
           & .SearchBar{
             position: relative;
+            justify-content: center;
+            padding-left: 20%;
             & .SearchBarInput{
               width: 100%;
               max-width: 500px;
@@ -167,13 +174,14 @@
   }
 
   & .Content{
-    margin-left: 25px;
+    margin-left: 50px;
     margin-right: 50px;
     min-height: 600px;
     border-radius: 5px;
     flex:1;
     border:1px solid #C9C5CA ;
 
+
     & .AdminLayoutPage{
       padding: 10px;
       padding-bottom: 400px;