- remove unused imports

src/App.js

@@ -1,8 +1,6 @@
-import logo from "./logo.svg";
 import "./App.css";
 import { Box } from "@mui/material";
 import { BrowserRouter } from "react-router-dom";
-import { Router } from "react-router-dom";
 import { Root } from "./components/Root";
 import { Provider } from "react-redux";
 import { store } from "./reducers";

src/actions/actionAboutMe.js

@@ -2,28 +2,28 @@ import { gql } from "../helpers";
 import { actionPromise } from "../reducers";
 
 export const actionAboutMe = () => async (dispatch, getState) => {
-  const {
-    auth: {
-      payload: {
-        sub: { id },
-      },
-    },
-  } = getState();
-  await dispatch(
-    actionPromise(
-      "aboutMe",
-      gql(
-        `query AboutMe($q:String){
+    const {
+        auth: {
+            payload: {
+                sub: { id },
+            },
+        },
+    } = getState();
+    await dispatch(
+        actionPromise(
+            "aboutMe",
+            gql(
+                `query AboutMe($q:String){
                         UserFindOne(query:$q){
                             _id username avatar{
                                 _id url
                             }
                         }
                     }`,
-        {
-          q: JSON.stringify([{ _id: id }]),
-        }
-      )
-    )
-  );
+                {
+                    q: JSON.stringify([{ _id: id }]),
+                }
+            )
+        )
+    );
 };

src/actions/actionCatAll.js

@@ -1,5 +1,5 @@
 import { actionPromise } from "../reducers";
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 
 export const actionCatAll =
     ({ limit = 20, skip = 0, promiseName = "catAll", orderBy = "_id" } = {}) =>
@@ -17,6 +17,9 @@ export const actionCatAll =
                             subcategories{
                                 _id name
                             }
+                            goods{
+                                _id name
+                            }
                         }
                     }`,
                     {

src/actions/actionCatById.js

@@ -1,4 +1,4 @@
-import { backendURL, mock, query, gql } from "../helpers";
+import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 

src/actions/actionCategoryDelete.js

@@ -1,4 +1,4 @@
-import { backendURL, getQuery, gql, mock, query } from "../helpers";
+import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 

src/actions/actionCategoryUpdate.js

@@ -2,6 +2,6 @@ import { actionCatAll } from "./actionCatAll";
 import { actionCategoryUpsert } from "./actionCategoryUpsert";
 
 export const actionCategoryUpdate = (category) => async (dispatch, getState) => {
-  await dispatch(actionCategoryUpsert(category));
-  await dispatch(actionCatAll());
+    await dispatch(actionCategoryUpsert(category));
+    await dispatch(actionCatAll());
 };

src/actions/actionCategoryUpsert.js

@@ -1,4 +1,4 @@
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 import { actionPromise } from "../reducers";
 
 export const actionCategoryUpsert = (category) => async (dispatch) => {

src/actions/actionCatsFind.js

@@ -1,4 +1,4 @@
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 import { actionPromise } from "../reducers";
 
 export const actionCatsFind =

src/actions/actionGoodById.js

@@ -1,8 +1,8 @@
-import { backendURL, getQuery, gql, mock, query } from '../helpers';
+import { gql } from "../helpers";
 
-import { actionPromise } from '../reducers';
+import { actionPromise } from "../reducers";
 
-export const actionGoodById = ({ _id, promiseName = 'goodById' } = {}) =>
+export const actionGoodById = ({ _id, promiseName = "goodById" } = {}) =>
     actionPromise(
         promiseName,
         gql(

src/actions/actionGoodDelete.js

@@ -1,4 +1,4 @@
-import { backendURL, getQuery, gql, mock, query } from "../helpers";
+import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 

src/actions/actionGoodUpdate.js

@@ -1,5 +1,5 @@
-import { actionGoodsAll } from './actionGoodsAll';
-import { actionGoodUpsert } from './actionGoodUpsert';
+import { actionGoodsAll } from "./actionGoodsAll";
+import { actionGoodUpsert } from "./actionGoodUpsert";
 
 export const actionGoodUpdate = (good) => async (dispatch, getState) => {
     await dispatch(actionGoodUpsert(good));

src/actions/actionGoodUpsert.js

@@ -1,8 +1,7 @@
-import { backendURL, gql } from '../helpers';
-import { actionPromise } from '../reducers';
+import { gql } from "../helpers";
+import { actionPromise } from "../reducers";
 
 export const actionGoodUpsert = (good) => async (dispatch) => {
-
     dispatch(
         actionPromise(
             "goodUpsert",

src/actions/actionGoodsAll.js

@@ -1,4 +1,4 @@
-import { backendURL, getQuery, gql } from "../helpers";
+import { gql } from "../helpers";
 import { actionPromise } from "../reducers";
 
 export const actionGoodsAll =

src/actions/actionGoodsFind.js

@@ -1,4 +1,4 @@
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 import { actionPromise } from "../reducers";
 
 export const actionGoodsFind =

src/actions/actionGoodsPopular.js

@@ -1,4 +1,4 @@
-import { backendURL, mock, query, gql } from "../helpers";
+import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 

src/actions/actionLogin.js

@@ -1,5 +1,5 @@
 import { actionPromise } from "../reducers";
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 import { actionAuthLogin } from "../reducers";
 import { actionAboutMe } from "./actionAboutMe";
 import { actionLogout } from "./actionLogout";

src/actions/actionLogout.js

@@ -2,7 +2,7 @@ import { actionCartClear, actionPromiseClear } from "../reducers";
 import { actionAuthLogout } from "../reducers";
 
 export const actionLogout = () => async (dispatch) => {
-  dispatch(actionCartClear());
-  dispatch(actionAuthLogout());
-  dispatch(actionPromiseClear("aboutMe"));
+    dispatch(actionCartClear());
+    dispatch(actionAuthLogout());
+    dispatch(actionPromiseClear("aboutMe"));
 };

src/actions/actionOrderById.js

@@ -1,4 +1,4 @@
-import { backendURL, gql, mock, query } from "../helpers";
+import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 

src/actions/actionOrderDelete.js

@@ -1,4 +1,4 @@
-import { backendURL, getQuery, gql, mock, query } from "../helpers";
+import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 

src/actions/actionOrderUpdate.js

@@ -1,4 +1,3 @@
-import { actionCartClear, actionPromiseClear } from "../reducers";
 import { actionOrdersAll } from "./actionOrdersAll";
 import { actionOrderUpsert } from "./actionOrderUpsert";
 

src/actions/actionOrderUpsert.js

@@ -1,4 +1,4 @@
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 import { actionCartClear, actionPromise } from "../reducers";
 
 export const actionOrderUpsert = (order) => async (dispatch, getState) => {

src/actions/actionOrdersAll.js

@@ -1,5 +1,5 @@
 import { actionPromise } from "../reducers";
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 
 export const actionOrdersAll =
     ({ limit = 0, skip = 0, promiseName = "adminOrdersAll", orderBy = "_id", status = 0 } = {}) =>

src/actions/actionOrdersFind.js

@@ -1,4 +1,4 @@
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 import { actionPromise } from "../reducers";
 
 export const actionOrdersFind =

src/actions/actionPageStart.js

@@ -5,16 +5,16 @@ import { actionOrders } from "./actionOrders";
 import { actionRootCats } from "./actionRootCats";
 
 export const actionPageStart = () => async (dispatch, getState) => {
-  dispatch(actionRootCats());
-  dispatch(actionCatAll());
-  dispatch(actionGoodsPopular());
+    dispatch(actionRootCats());
+    dispatch(actionCatAll());
+    dispatch(actionGoodsPopular());
 
-  const {
-    auth: { token },
-  } = getState();
+    const {
+        auth: { token },
+    } = getState();
 
-  if (token) {
-    dispatch(actionAboutMe());
-    dispatch(actionOrders());
-  }
+    if (token) {
+        dispatch(actionAboutMe());
+        dispatch(actionOrders());
+    }
 };

src/actions/actionRootCats.js

@@ -1,11 +1,11 @@
-import { backendURL, mock, query, gql } from '../helpers';
+import { gql } from "../helpers";
 
-import { actionPromise } from '../reducers';
+import { actionPromise } from "../reducers";
 
 export const actionRootCats = () => async (dispatch, getState) => {
     dispatch(
         actionPromise(
-            'rootCats',
+            "rootCats",
             gql(
                 `query rootCats($query:String) {
                 CategoryFind(query: $query){

src/actions/actionUploadFile.js

@@ -1,14 +1,14 @@
-import { backendURL } from '../helpers';
-import { actionPromise } from '../reducers';
+import { backendURL } from "../helpers";
+import { actionPromise } from "../reducers";
 
 export const actionUploadFile = (file) => {
     const fd = new FormData();
-    fd.append('photo', file);
+    fd.append("photo", file);
     return actionPromise(
-        'uploadFile',
+        "uploadFile",
         fetch(`${backendURL}/upload/`, {
-            method: 'POST',
-            headers: localStorage.authToken ? { Authorization: 'Bearer ' + localStorage.authToken } : {},
+            method: "POST",
+            headers: localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {},
             body: fd,
         })
             .then((res) => res.json())

src/actions/actionUsersAll.js

@@ -1,5 +1,5 @@
 import { actionPromise } from "../reducers";
-import { backendURL, gql } from "../helpers";
+import { gql } from "../helpers";
 
 export const actionUsersAll =
     ({ limit = 0, skip = 0, promiseName = "adminUsersAll", orderBy = "_id" } = {}) =>

src/components/AuthPage/AuthForm.js

@@ -3,11 +3,11 @@ import { actionLogin } from "../../actions/actionLogin";
 import { useState, useEffect, useContext } from "react";
 import { connect, useSelector } from "react-redux";
 import { MdVisibility, MdVisibilityOff } from "react-icons/md";
-import { Box, Button, IconButton, TextField, Stack } from "@mui/material";
+import { Box, Button, IconButton, TextField } from "@mui/material";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { UIContext } from "../UIContext";
-import { Navigate, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const signInSchema = Yup.object().shape({
     username: Yup.string().required("Обов'язкове"),

src/components/AuthPage/index.js

@@ -1,8 +1,5 @@
-import { Box, Container } from '@mui/material';
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-import { CAuthForm } from './AuthForm';
+import { Box } from "@mui/material";
+import { CAuthForm } from "./AuthForm";
 
 export const AuthPage = () => {
     return (

src/components/CartPage/CartItem.js

@@ -1,27 +1,16 @@
-import { Box, width } from '@mui/system';
-import defaultGoodImage from '../../images/default-good-image.png';
-import { IoCloseOutline } from 'react-icons/io5';
-import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';
-import { actionCartChange } from '../../reducers';
-import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { backendURL } from '../../helpers';
+import { Box } from "@mui/system";
+import defaultGoodImage from "../../images/default-good-image.png";
+import { IoCloseOutline } from "react-icons/io5";
+import { AiOutlinePlus, AiOutlineMinus } from "react-icons/ai";
+import { actionCartChange } from "../../reducers";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 
-const {
-    Typography,
-    Stack,
-    IconButton,
-    TextField,
-    ButtonGroup,
-    Button,
-    TableCell,
-    TableRow,
-    Input,
-} = require('@mui/material');
+const { Typography, Stack, IconButton, TextField, ButtonGroup, Button, TableCell, TableRow, Input } = require("@mui/material");
 
 export const CartItem = ({ order, onDeleteClick }) => {
     const { good, count = 1 } = order || {};
-    const { _id, images = [], name = '', price = 0, amount = 1 } = good;
+    const { _id, images = [], name = "", price = 0, amount = 1 } = good;
 
     const dispatch = useDispatch();
     const [countInput, setCountInput] = useState(count || 1);
@@ -45,7 +34,7 @@ export const CartItem = ({ order, onDeleteClick }) => {
             <TableCell>
                 <Box
                     component="img"
-                    src={images && images[0]?.url ? `${images ? images[0]?.url : ''}` : defaultGoodImage}
+                    src={images && images[0]?.url ? `${images ? images[0]?.url : ""}` : defaultGoodImage}
                     sx={{ width: 50 }}
                     onError={({ currentTarget }) => {
                         currentTarget.onerror = null; // prevents looping

src/components/CartPage/index.js

@@ -4,7 +4,6 @@ import { useContext, useEffect } from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { actionOrderUpdate } from "../../actions/actionOrderUpdate";
-import { actionOrderUpsert } from "../../actions/actionOrderUpsert";
 import { actionCartDelete } from "../../reducers";
 import { UIContext } from "../UIContext";
 import { CartItem } from "./CartItem";

src/components/DashboardPage/DashboardOrder/DashboardOrderGood/index.js

@@ -1,4 +1,4 @@
-import { Box, Grid, Stack, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import defaultGoodImage from "../../../../images/default-good-image.png";
 
 export const DashboardOrderGood = ({ orderGood }) => {

src/components/DashboardPage/DashboardOrder/index.js

@@ -1,4 +1,4 @@
-import { Box, Divider, Paper, Stack, Typography } from "@mui/material";
+import { Divider, Paper, Stack, Typography } from "@mui/material";
 import { statusNumber } from "../../../helpers";
 import { DashboardOrderGood } from "./DashboardOrderGood";
 

src/components/DashboardPage/index.js

@@ -1,7 +1,5 @@
 import { Stack } from "@mui/material";
-import { useEffect } from "react";
-import { connect, useDispatch } from "react-redux";
-import { actionOrders } from "../../actions/actionOrders";
+import { connect } from "react-redux";
 import { Error } from "../common/Error";
 import { DashboardOrder } from "./DashboardOrder";
 

src/components/GoodPage/index.js

@@ -1,15 +1,13 @@
-import { useEffect, useState } from 'react';
-import { CBuyButton } from '../common/BuyButton';
-import { useSelector } from 'react-redux';
-import defaultGoodImage from '../../images/default-good-image.png';
-import { Divider, Grid, Paper, Stack, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material';
-import { Box } from '@mui/system';
-import { Carousel } from 'react-responsive-carousel';
-import { backendURL } from '../../helpers';
+import { CBuyButton } from "../common/BuyButton";
+import { useSelector } from "react-redux";
+import defaultGoodImage from "../../images/default-good-image.png";
+import { Divider, Grid, Stack, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { Carousel } from "react-responsive-carousel";
 
 export const GoodPage = () => {
     const good = useSelector((state) => state.promise?.goodById?.payload || {});
-    const { _id = '', name = '', price = '', description = '', images = [] } = good || {};
+    const { _id = "", name = "", price = "", description = "", images = [] } = good || {};
     return (
         <Box className="GoodPage">
             <Grid container spacing={4} className="images">

src/components/GoodsPage/SubCategories/index.js

@@ -1,5 +1,5 @@
-import { Box, Paper } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Box, Paper } from "@mui/material";
+import { Link } from "react-router-dom";
 
 export const SubCategories = ({ categories }) => (
     <Box className="SubCategories">

src/components/GoodsPage/index.js

@@ -1,14 +1,10 @@
-import { Grid, Stack, Typography, Divider } from "@mui/material";
+import { Stack, Typography, Divider } from "@mui/material";
 import { Box } from "@mui/system";
-import { connect, useDispatch } from "react-redux";
-import { useParams, useSearchParams } from "react-router-dom";
-import { GoodCard } from "../common/GoodCard";
+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";
-import { actionCatById } from "../../actions/actionCatById";
-import { useEffect } from "react";
-import { actionCategoryGoods } from "../../actions/actionCategoryGoods";
 
 const GoodsPage = ({ category = {}, goods = [] }) => {
     const { name = "", subcategories = [] } = category || {};

src/components/MainPage/index.js

@@ -1,5 +1,4 @@
 import { Box, Stack, Typography } from "@mui/material";
-import { useEffect } from "react";
 import { useSelector } from "react-redux";
 import MainPageImage from "../../images/main-page-image.png";
 import { GoodCardSlider } from "../common/GoodCardSlider";

src/components/Root/index.js

@@ -3,7 +3,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { Box } from "@mui/material";
 import styles from "react-responsive-carousel/lib/styles/carousel.min.css";
 import { actionPageStart } from "../../actions/actionPageStart";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { AuthPage } from "../AuthPage";
 import { LayoutPage } from "../LayoutPage";

src/components/UIContext/index.js

@@ -1,19 +1,19 @@
-import { Alert, Snackbar } from '@mui/material';
-import { createContext, useState } from 'react';
+import { Alert, Snackbar } from "@mui/material";
+import { createContext, useState } from "react";
 
 export const UIContext = createContext({});
 
 export const UIContextProvider = ({ children }) => {
     const [alert, setAlert] = useState({
         show: false,
-        severity: 'info',
-        message: '',
+        severity: "info",
+        message: "",
     });
 
     const [snackbar, setSnackbar] = useState({
         show: false,
-        anchorOrigin: { horizontal: 'center', vertical: 'bottom' },
-        message: '',
+        anchorOrigin: { horizontal: "center", vertical: "bottom" },
+        message: "",
     });
     const handleAlertClose = () =>
         setAlert({
@@ -38,7 +38,7 @@ export const UIContextProvider = ({ children }) => {
                 open={snackbar.show}
                 autoHideDuration={4000}
                 onClose={handleSnackbarClose}
-                anchorOrigin={snackbar.anchorOrigin || { horizontal: 'center', vertical: 'bottom' }}
+                anchorOrigin={snackbar.anchorOrigin || { horizontal: "center", vertical: "bottom" }}
                 message={snackbar.message}
             >
                 {snackbar.children}

src/components/admin/AdminCategoriesPage/AdminCategoryItem.js

@@ -1,11 +1,11 @@
-import { Button, TableCell, TableRow } from '@mui/material';
-import { FaEdit } from 'react-icons/fa';
-import { Link } from 'react-router-dom';
+import { Button, TableCell, TableRow } from "@mui/material";
+import { Link } from "react-router-dom";
+
 const AdminCategoryItem = ({ category }) => (
     <TableRow className="AdminCategoryItem">
         <TableCell scope="row">{category._id}</TableCell>
-        <TableCell>{category.name ? category.name : '-'}</TableCell>
-        <TableCell>{category.parent?.name ? category.parent.name : '-'}</TableCell>
+        <TableCell>{category.name ? category.name : "-"}</TableCell>
+        <TableCell>{category.parent?.name ? category.parent.name : "-"}</TableCell>
         <TableCell className="edit">
             <Button component={Link} className="Link" to={`/admin/category/${category._id}/`} variant="contained">
                 Редагувати

src/components/admin/AdminCategoriesPage/AdminCategoryList.js

@@ -5,7 +5,6 @@ import { actionCatsFind } from "../../../actions/actionCatsFind";
 import { actionPromiseClear } from "../../../reducers";
 import { SearchBar, SearchResults } from "../../common/SearchBar";
 import { Box, Table, TableBody, TableHead } from "@mui/material";
-import { useEffect, useState } from "react";
 import { createSearchParams, useLocation, useNavigate, useSearchParams } from "react-router-dom";
 
 const CSearchBar = connect(null, {

src/components/admin/AdminCategoriesPage/AdminCategoryListHeader.js

@@ -1,8 +1,7 @@
-import { connect } from 'react-redux';
-import { AddButton } from '../../common/AddButton';
+import { AddButton } from "../../common/AddButton";
 
-import { TableCell, TableRow, TableSortLabel } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { TableCell, TableRow, TableSortLabel } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 const AdminCategoryListHeader = ({ sort, onSortChange }) => {
     const navigate = useNavigate();
@@ -11,27 +10,27 @@ const AdminCategoryListHeader = ({ sort, onSortChange }) => {
         <TableRow className="AdminCategoryListHeader">
             <TableCell scope="col">
                 <TableSortLabel
-                    active={sort === '_id' || sort === '-_id'}
-                    direction={sort === '_id' ? 'asc' : 'desc'}
-                    onClick={() => onSortChange(sort === '_id' ? '-_id' : '_id')}
+                    active={sort === "_id" || sort === "-_id"}
+                    direction={sort === "_id" ? "asc" : "desc"}
+                    onClick={() => onSortChange(sort === "_id" ? "-_id" : "_id")}
                 >
                     #
                 </TableSortLabel>
             </TableCell>
             <TableCell scope="col">
                 <TableSortLabel
-                    active={sort === 'name' || sort === '-name'}
-                    direction={sort === 'name' ? 'asc' : 'desc'}
-                    onClick={() => onSortChange(sort === 'name' ? '-name' : 'name')}
+                    active={sort === "name" || sort === "-name"}
+                    direction={sort === "name" ? "asc" : "desc"}
+                    onClick={() => onSortChange(sort === "name" ? "-name" : "name")}
                 >
                     Назва
                 </TableSortLabel>
             </TableCell>
             <TableCell scope="col">
                 <TableSortLabel
-                    active={sort === 'parent' || sort === '-parent'}
-                    direction={sort === 'parent' ? 'asc' : 'desc'}
-                    onClick={() => onSortChange(sort === 'parent' ? '-parent' : 'parent')}
+                    active={sort === "parent" || sort === "-parent"}
+                    direction={sort === "parent" ? "asc" : "desc"}
+                    onClick={() => onSortChange(sort === "parent" ? "-parent" : "parent")}
                 >
                     Батьківська категорія
                 </TableSortLabel>

src/components/admin/AdminCategoriesPage/index.js

@@ -1,10 +1,10 @@
-import { Box, Typography } from '@mui/material';
-import { CAdminCategoryList } from './AdminCategoryList';
+import { Box, Typography } from "@mui/material";
+import { CAdminCategoryList } from "./AdminCategoryList";
 
 export const AdminCategoriesPage = ({ orderBy }) => {
     return (
         <Box className="AdminCategoriesPage">
-            <Typography variant="h5" sx={{ marginBottom: '10px', marginTop: '10px' }}>
+            <Typography variant="h5" sx={{ marginBottom: "10px", marginTop: "10px" }}>
                 Категорії
             </Typography>
             <CAdminCategoryList orderBy={orderBy} />

src/components/admin/AdminCategoryPage/CategoryForm.js

@@ -1,13 +1,12 @@
 import { connect, useDispatch } from "react-redux";
-import React, { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext } from "react";
 import Select from "react-select";
 import { actionCategoryUpdate } from "../../../actions/actionCategoryUpdate";
-import { actionPromise, actionPromiseClear, store } from "../../../reducers";
-import { Alert, Box, Button, InputLabel, Snackbar, Stack, TextField, Typography } from "@mui/material";
+import { actionPromiseClear } from "../../../reducers";
+import { Box, Button, InputLabel, Stack, TextField } from "@mui/material";
 import { UIContext } from "../../UIContext";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { Error } from "../../common/Error";
 import { ConfirmModal } from "../../common/ConfirmModal";
 import { useNavigate } from "react-router-dom";
 import { actionCategoryDelete } from "../../../actions/actionCategoryDelete";
@@ -35,6 +34,7 @@ const CategoryForm = ({
     const [parentList, setParentList] = useState([]);
     const { setAlert } = useContext(UIContext);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [promiseTimeOut, setPromiseTimeOut] = useState(null);
     const navigate = useNavigate();
     const dispatch = useDispatch();
     const formik = useFormik({
@@ -53,9 +53,16 @@ const CategoryForm = ({
             categoryToSave.subcategories = inputSubcategories;
             onSaveClick && onSaveClick();
             onSave(categoryToSave);
+            setPromiseTimeOut(setTimeout(() => formik.setSubmitting(false), 3000));
         },
     });
 
+    useEffect(() => {
+        return () => {
+            setPromiseTimeOut(null);
+        };
+    }, []);
+
     useEffect(() => {
         formik.setFieldValue("name", category.name || "");
         setInputParent(category?.parent || null);
@@ -66,6 +73,7 @@ const CategoryForm = ({
     useEffect(() => {
         if (promiseStatus === "FULFILLED") {
             formik.setSubmitting(false);
+            setPromiseTimeOut(null);
             setAlert({
                 show: true,
                 severity: "success",
@@ -75,6 +83,7 @@ const CategoryForm = ({
         if (promiseStatus === "REJECTED") {
             const errorMessage = serverErrors.reduce((prev, curr) => prev + "\n" + curr.message, "");
             formik.setSubmitting(false);
+            setPromiseTimeOut(null);
             setAlert({
                 show: true,
                 severity: "error",
@@ -85,9 +94,11 @@ const CategoryForm = ({
 
     useEffect(() => {
         if (deletePromiseStatus === "FULFILLED") {
+            setPromiseTimeOut(null);
             navigate("/admin/categories/");
         }
         if (deletePromiseStatus === "REJECTED") {
+            setPromiseTimeOut(null);
             setAlert({
                 show: true,
                 severity: "error",
@@ -191,6 +202,7 @@ const CategoryForm = ({
                     onNO={() => setIsDeleteModalOpen(false)}
                     onYES={() => {
                         onDelete(category);
+                        setPromiseTimeOut(setTimeout(() => formik.isSubmitting(false), 3000));
                     }}
                 />
             )}

src/components/admin/AdminCategoryPage/index.js

@@ -1,12 +1,10 @@
-import { Box } from '@mui/material';
-import { connect } from 'react-redux';
-import { CCategoryForm } from './CategoryForm';
+import { Box } from "@mui/material";
+import { connect } from "react-redux";
+import { CCategoryForm } from "./CategoryForm";
 
 export const AdminCategoryPage = ({ category }) => (
     <Box className="AdminCategoryPage">
         <CCategoryForm category={category} />
     </Box>
 );
-export const CAdminCategoryPage = connect((state) => ({ category: state.promise?.adminCatById?.payload || {} }))(
-    AdminCategoryPage
-);
+export const CAdminCategoryPage = connect((state) => ({ category: state.promise?.adminCatById?.payload || {} }))(AdminCategoryPage);

src/components/admin/AdminCategoryTree/index.js

@@ -1,11 +1,11 @@
-import 'react-sortable-tree/style.css';
-import { Component, useState, useEffect } from 'react';
-import { connect } from 'react-redux';
-import SortableTree from 'react-sortable-tree';
-import { FaEdit } from 'react-icons/fa';
-import { actionCategoryUpsert } from '../../../actions/actionCategoryUpsert';
-import { CategoryEditModal } from '../CategoryEditModal';
-import { Box, Button } from '@mui/material';
+import "react-sortable-tree/style.css";
+import { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import SortableTree from "react-sortable-tree";
+import { FaEdit } from "react-icons/fa";
+import { actionCategoryUpsert } from "../../../actions/actionCategoryUpsert";
+import { CategoryEditModal } from "../CategoryEditModal";
+import { Box, Button } from "@mui/material";
 
 const bulidCategoryTree = (list) => {
     let node,
@@ -62,11 +62,7 @@ export const AdminCategoryTree = ({ categories, onDrop, onPopupOpen }) => {
 
     return (
         <Box className="CategotyTree">
-            <CategoryEditModal
-                category={selectedNode}
-                isOpen={isCategoryPopupOpen}
-                onClose={() => setIsCategoryPopupOpen(false)}
-            />
+            <CategoryEditModal category={selectedNode} isOpen={isCategoryPopupOpen} onClose={() => setIsCategoryPopupOpen(false)} />
             <SortableTree
                 isVirtualized={false}
                 treeData={treeData}
@@ -76,8 +72,7 @@ export const AdminCategoryTree = ({ categories, onDrop, onPopupOpen }) => {
                         const { _id, title: name } = node;
                         if (parentNode) {
                             let { _id, title: name } = parentNode;
-                            let subcategories =
-                                parentNode?.children?.map(({ _id, title: name }) => ({ _id, name })) || [];
+                            let subcategories = parentNode?.children?.map(({ _id, title: name }) => ({ _id, name })) || [];
                             onDrop({ _id, name, subcategories });
                         } else {
                             onDrop({ _id, name, parent: null });
@@ -101,7 +96,7 @@ export const AdminCategoryTree = ({ categories, onDrop, onPopupOpen }) => {
                             <FaEdit />
                         </Button>,
                     ],
-                    className: 'TreeNode',
+                    className: "TreeNode",
                 })}
             />
         </Box>

src/components/admin/AdminGoodPage/GoodForm.js

@@ -1,32 +1,17 @@
 import { connect, useDispatch } from "react-redux";
-import React, { useState, useEffect, useContext } from "react";
-import { actionPromise, actionPromiseClear } from "../../../reducers";
+import { useState, useEffect, useContext } from "react";
+import { actionPromiseClear } from "../../../reducers";
 import Select from "react-select";
 import { actionGoodUpdate } from "../../../actions/actionGoodUpdate";
 import { EntityEditor } from "../../common/EntityEditor";
 import { actionUploadFiles } from "../../../actions/actionUploadFiles";
 import { UIContext } from "../../UIContext";
-import {
-    Alert,
-    Box,
-    Button,
-    Chip,
-    FormControl,
-    InputLabel,
-    MenuItem,
-    OutlinedInput,
-    Snackbar,
-    Stack,
-    TextareaAutosize,
-    TextField,
-    Typography,
-} from "@mui/material";
+import { Box, Button, InputLabel, Stack, TextField } from "@mui/material";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { Error } from "../../common/Error";
 import { ConfirmModal } from "../../common/ConfirmModal";
 import { actionGoodDelete } from "../../../actions/actionGoodDelete";
-import { Navigate, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const goodSchema = Yup.object().shape({
     name: Yup.string().required("Обов'язкове"),

src/components/admin/AdminGoodPage/index.js

@@ -1,12 +1,10 @@
-import { Box } from '@mui/material';
-import { CGoodForm } from './GoodForm';
-import { connect } from 'react-redux';
+import { Box } from "@mui/material";
+import { CGoodForm } from "./GoodForm";
+import { connect } from "react-redux";
 
 export const AdminGoodPage = ({ good }) => (
     <Box className="AdminGoodPage">
         <CGoodForm good={good} />
     </Box>
 );
-export const CAdminGoodPage = connect((state) => ({ good: state.promise?.adminGoodById?.payload || {} }))(
-    AdminGoodPage
-);
+export const CAdminGoodPage = connect((state) => ({ good: state.promise?.adminGoodById?.payload || {} }))(AdminGoodPage);

src/components/admin/AdminGoodsPage/AdminGoodItem.js

@@ -1,20 +1,16 @@
-import { actionPopupOpen } from '../../../reducers';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import defaultGoodImage from '../../../images/default-good-image.png';
-import { FaEdit } from 'react-icons/fa';
-import { Box, Button, TableCell, TableRow } from '@mui/material';
-import { backendURL } from '../../../helpers';
+import { Link } from "react-router-dom";
+import defaultGoodImage from "../../../images/default-good-image.png";
+import { Box, Button, TableCell, TableRow } from "@mui/material";
 
 const AdminGoodItem = ({ good }) => (
     <TableRow className="AdminGoodItem">
         <TableCell scope="row">{good._id}</TableCell>
-        <TableCell>{good.name ? good.name : '-'}</TableCell>
+        <TableCell>{good.name ? good.name : "-"}</TableCell>
         <TableCell>
             {
                 <Box
                     component="img"
-                    src={good.images?.length ? `${good.images ? good.images[0]?.url : ''}` : defaultGoodImage}
+                    src={good.images?.length ? `${good.images ? good.images[0]?.url : ""}` : defaultGoodImage}
                     onError={({ currentTarget }) => {
                         currentTarget.onerror = null; // prevents looping
                         currentTarget.src = defaultGoodImage;
@@ -22,12 +18,10 @@ const AdminGoodItem = ({ good }) => (
                 />
             }
         </TableCell>
-        <TableCell>{good.price ? good.price : '-'}</TableCell>
-        <TableCell>{good.amount ? good.amount : '-'}</TableCell>
+        <TableCell>{good.price ? good.price : "-"}</TableCell>
+        <TableCell>{good.amount ? good.amount : "-"}</TableCell>
         <TableCell>
-            {good.categories
-                ? (good.categories || []).map((category) => <div key={category._id}>{category?.name}</div>)
-                : '-'}
+            {good.categories ? (good.categories || []).map((category) => <div key={category._id}>{category?.name}</div>) : "-"}
         </TableCell>
         <TableCell className="edit">
             <Button component={Link} className="Link" to={`/admin/good/${good._id}/`} variant="contained">

src/components/admin/AdminGoodsPage/AdminGoodList.js

@@ -1,7 +1,6 @@
 import { AdminGoodListHeader } from "./AdminGoodListHeader";
 import { AdminGoodItem } from "./AdminGoodItem";
 import { connect } from "react-redux";
-import { useEffect, useState } from "react";
 
 import { SearchBar, SearchResults } from "../../common/SearchBar";
 import { actionGoodsFind } from "../../../actions/actionGoodsFind";

src/components/admin/AdminGoodsPage/AdminGoodListHeader.js

@@ -1,8 +1,6 @@
-import { connect } from 'react-redux';
-
-import { AddButton } from '../../common/AddButton';
-import { TableCell, TableRow, TableSortLabel } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { AddButton } from "../../common/AddButton";
+import { TableCell, TableRow, TableSortLabel } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 const AdminGoodListHeader = ({ onSortChange, sort }) => {
     const navigate = useNavigate();
@@ -11,18 +9,18 @@ const AdminGoodListHeader = ({ onSortChange, sort }) => {
         <TableRow className="AdminGoodListHeader">
             <TableCell scope="col">
                 <TableSortLabel
-                    active={sort === '_id' || sort === '-_id'}
-                    direction={sort === '_id' ? 'asc' : 'desc'}
-                    onClick={() => onSortChange(sort === '_id' ? '-_id' : '_id')}
+                    active={sort === "_id" || sort === "-_id"}
+                    direction={sort === "_id" ? "asc" : "desc"}
+                    onClick={() => onSortChange(sort === "_id" ? "-_id" : "_id")}
                 >
                     #
                 </TableSortLabel>
             </TableCell>
             <TableCell scope="col">
                 <TableSortLabel
-                    active={sort === 'name' || sort === '-name'}
-                    direction={sort === 'name' ? 'asc' : 'desc'}
-                    onClick={() => onSortChange(sort === 'name' ? '-name' : 'name')}
+                    active={sort === "name" || sort === "-name"}
+                    direction={sort === "name" ? "asc" : "desc"}
+                    onClick={() => onSortChange(sort === "name" ? "-name" : "name")}
                 >
                     Назва
                 </TableSortLabel>
@@ -30,18 +28,18 @@ const AdminGoodListHeader = ({ onSortChange, sort }) => {
             <TableCell scope="col">Зображення</TableCell>
             <TableCell scope="col">
                 <TableSortLabel
-                    active={sort === 'price' || sort === '-price'}
-                    direction={sort === 'price' ? 'asc' : 'desc'}
-                    onClick={() => onSortChange(sort === 'price' ? '-price' : 'price')}
+                    active={sort === "price" || sort === "-price"}
+                    direction={sort === "price" ? "asc" : "desc"}
+                    onClick={() => onSortChange(sort === "price" ? "-price" : "price")}
                 >
                     Ціна
                 </TableSortLabel>
             </TableCell>
             <TableCell scope="col">
                 <TableSortLabel
-                    active={sort === 'amount' || sort === '-amount'}
-                    direction={sort === 'amount' ? 'asc' : 'desc'}
-                    onClick={() => onSortChange(sort === 'amount' ? '-amount' : 'amount')}
+                    active={sort === "amount" || sort === "-amount"}
+                    direction={sort === "amount" ? "asc" : "desc"}
+                    onClick={() => onSortChange(sort === "amount" ? "-amount" : "amount")}
                 >
                     Кількість
                 </TableSortLabel>
@@ -50,7 +48,7 @@ const AdminGoodListHeader = ({ onSortChange, sort }) => {
             <TableCell scope="col">
                 <AddButton
                     onClick={() => {
-                        navigate('/admin/good/');
+                        navigate("/admin/good/");
                     }}
                 />
             </TableCell>

src/components/admin/AdminGoodsPage/index.js

@@ -1,10 +1,10 @@
-import { Box, Typography } from '@mui/material';
-import { AdminGoodList, CAdminGoodList } from './AdminGoodList';
+import { Box, Typography } from "@mui/material";
+import { CAdminGoodList } from "./AdminGoodList";
 
 export const AdminGoodsPage = ({ orderBy }) => {
     return (
         <Box className="AdminGoodsPage">
-            <Typography variant="h5" sx={{ marginBottom: '10px', marginTop: '10px' }}>
+            <Typography variant="h5" sx={{ marginBottom: "10px", marginTop: "10px" }}>
                 Товари
             </Typography>
             <CAdminGoodList orderBy={orderBy} />

src/components/admin/AdminOrderPage/OrderForm.js

@@ -1,28 +1,11 @@
 import { connect, useDispatch, useSelector } from "react-redux";
-import React, { useState, useEffect, useContext } from "react";
-import { actionPromise, actionPromiseClear } from "../../../reducers";
+import { useState, useEffect, useContext } from "react";
+import { actionPromiseClear } from "../../../reducers";
 import Select from "react-select";
 import { actionOrderUpdate } from "../../../actions/actionOrderUpdate";
-import { EntityEditor } from "../../common/EntityEditor";
-import { actionUploadFiles } from "../../../actions/actionUploadFiles";
 import { UIContext } from "../../UIContext";
-import {
-    Box,
-    Button,
-    Chip,
-    FormControl,
-    Grid,
-    InputLabel,
-    MenuItem,
-    OutlinedInput,
-    Stack,
-    TextareaAutosize,
-    TextField,
-    Typography,
-} from "@mui/material";
-import { FormikProvider, useFormik } from "formik";
-import * as Yup from "yup";
-import { Error } from "../../common/Error";
+import { Box, Button, Grid, InputLabel, Stack } from "@mui/material";
+import { useFormik } from "formik";
 import { statusNumber, statusOptions } from "../../../helpers";
 import { OrderGoodsEditor } from "./OrderGoodsEditor";
 import { useNavigate } from "react-router-dom";

src/components/admin/AdminOrderPage/OrderGoodsEditor/OrderGood.js

@@ -1,5 +1,5 @@
-import { IconButton, Stack, TableCell, TableRow, Typography } from '@mui/material';
-import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';
+import { IconButton, Stack, TableCell, TableRow, Typography } from "@mui/material";
+import { AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
 
 export const OrderGood = ({ orderGood, onChange }) => {
     return (

src/components/admin/AdminOrderPage/OrderGoodsEditor/index.js

@@ -1,7 +1,6 @@
-import { Box, Table, TableBody } from '@mui/material';
-import { OrderGood } from './OrderGood';
-import Select from 'react-select';
-import { useEffect, useState } from 'react';
+import { Box, Table, TableBody } from "@mui/material";
+import { OrderGood } from "./OrderGood";
+import Select from "react-select";
 
 export const OrderGoodsEditor = ({ orderGoods = [], onChange = null, goodList = [] } = {}) => {
     const handleChange = (goods) => {

src/components/admin/AdminOrderPage/index.js

@@ -1,12 +1,10 @@
-import { Box } from '@mui/material';
-import { COrderForm } from './OrderForm';
-import { connect } from 'react-redux';
+import { Box } from "@mui/material";
+import { COrderForm } from "./OrderForm";
+import { connect } from "react-redux";
 
 export const AdminOrderPage = ({ order }) => (
     <Box className="AdminOrderPage">
         <COrderForm order={order} />
     </Box>
 );
-export const CAdminOrderPage = connect((state) => ({ order: state.promise?.adminOrderById?.payload || {} }))(
-    AdminOrderPage
-);
+export const CAdminOrderPage = connect((state) => ({ order: state.promise?.adminOrderById?.payload || {} }))(AdminOrderPage);

src/components/admin/AdminOrdersPage/AdminOrderItem.js

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 
-import { Box, Button, TableCell, TableRow, Typography } from "@mui/material";
+import { Button, TableCell, TableRow, Typography } from "@mui/material";
 import { statusNumber } from "../../../helpers";
 
 const AdminOrderItem = ({ order }) => (

src/components/admin/AdminOrdersPage/AdminOrderListHeader.js

@@ -1,5 +1,3 @@
-import { connect } from "react-redux";
-
 import { AddButton } from "../../common/AddButton";
 import { TableCell, TableRow, TableSortLabel } from "@mui/material";
 import { useNavigate } from "react-router-dom";

src/components/admin/AdminOrdersPage/index.js

@@ -1,10 +1,10 @@
-import { Box, Typography } from '@mui/material';
-import { CAdminOrderList } from './AdminOrderList';
+import { Box, Typography } from "@mui/material";
+import { CAdminOrderList } from "./AdminOrderList";
 
 export const AdminOrdersPage = ({ orderBy }) => {
     return (
         <Box className="AdminOrdersPage">
-            <Typography variant="h5" sx={{ marginBottom: '10px', marginTop: '10px' }}>
+            <Typography variant="h5" sx={{ marginBottom: "10px", marginTop: "10px" }}>
                 Замовлення
             </Typography>
             <CAdminOrderList orderBy={orderBy} />

src/components/admin/CategoryEditModal/index.js

@@ -1,18 +1,48 @@
-import { useEffect } from 'react';
-import { Modal } from '../../common/Modal';
-import { CCategoryForm } from '../AdminCategoryPage/CategoryForm';
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { actionCatById } from "../../../actions/actionCatById";
+import { actionGoodsAll } from "../../../actions/actionGoodsAll";
+import { actionPromiseClear } from "../../../reducers";
+import { Modal } from "../../common/Modal";
+import { CCategoryForm } from "../AdminCategoryPage/CategoryForm";
 
-export const CategoryEditModal = ({ isOpen = false, onClose, category, onOpen } = {}) => {
+export const CategoryEditModal = ({ isOpen = false, onClose, category: categoryToEdit, onOpen } = {}) => {
+    const dispatch = useDispatch();
+    const category = useSelector((state) => state.promise?.adminCatById?.payload || {});
+    const { _id = null } = categoryToEdit || {};
     useEffect(() => {
         if (isOpen) {
-            onOpen();
+            onOpen && onOpen();
         }
-    }, isOpen);
-    return (
+    }, [isOpen]);
+
+    const handleClose = () => {
+        onClose();
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+            dispatch(actionGoodsAll());
+            if (_id) {
+                dispatch(actionCatById({ _id, promiseName: "adminCatById" }));
+            } else {
+                dispatch(actionPromiseClear("adminCatById"));
+            }
+        }
+
+        return () => {
+            dispatch(actionPromiseClear("adminCatById"));
+            dispatch(actionPromiseClear("goodsAll"));
+        };
+    }, [isOpen, _id]);
+
+    return isOpen ? (
         <div className="NodeEditModal">
-            <Modal open={isOpen} onClose={() => onClose()}>
+            <Modal open={isOpen} onClose={handleClose}>
                 <CCategoryForm category={category} />
             </Modal>
         </div>
+    ) : (
+        false
     );
 };

src/components/common/AddButton/index.js

@@ -1,5 +1,4 @@
-import { Button } from '@mui/material';
-import { AiOutlinePlus } from 'react-icons/ai';
+import { Button } from "@mui/material";
 
 export const AddButton = ({ isDisable = false, onClick }) => (
     <Button onClick={() => onClick()} className="AddButton" disable={isDisable.toString()} variant="contained">

src/components/common/AuthModal/LoginForm.js

@@ -9,99 +9,112 @@ import * as Yup from "yup";
 import { UIContext } from "../../UIContext";
 
 const signInSchema = Yup.object().shape({
-  username: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
-  password: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
+    username: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
+    password: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
 });
 
 export const LoginForm = ({ onLogin, onRegisterButtonClick, promiseStatus, serverErrors }) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const { setAlert } = useContext(UIContext);
+    const [showPassword, setShowPassword] = useState(false);
+    const { setAlert } = useContext(UIContext);
 
-  const formik = useFormik({
-    initialValues: {
-      username: "",
-      password: "",
-      repeatPassword: "",
-    },
-    validationSchema: signInSchema,
-    validateOnChange: true,
-    onSubmit: () => {
-      onLogin(formik.values.username, formik.values.password);
-    },
-  });
+    const formik = useFormik({
+        initialValues: {
+            username: "",
+            password: "",
+            repeatPassword: "",
+        },
+        validationSchema: signInSchema,
+        validateOnChange: true,
+        onSubmit: () => {
+            onLogin(formik.values.username, formik.values.password);
+        },
+    });
 
-  useEffect(() => {
-    if (promiseStatus === "FULFILLED") {
-      formik.setSubmitting(false);
-      setAlert({
-        show: true,
-        severity: "success",
-        message: "Готово",
-      });
-    }
-    if (promiseStatus === "REJECTED") {
-      const errorMessage = serverErrors.reduce((prev, curr) => prev + "\n" + curr.message, "");
-      formik.setSubmitting(false);
-      setAlert({
-        show: true,
-        severity: "error",
-        message: errorMessage,
-      });
-    }
-  }, [promiseStatus]);
+    useEffect(() => {
+        if (promiseStatus === "FULFILLED") {
+            formik.setSubmitting(false);
+            setAlert({
+                show: true,
+                severity: "success",
+                message: "Готово",
+            });
+        }
+        if (promiseStatus === "REJECTED") {
+            const errorMessage = serverErrors.reduce((prev, curr) => prev + "\n" + curr.message, "");
+            formik.setSubmitting(false);
+            setAlert({
+                show: true,
+                severity: "error",
+                message: errorMessage,
+            });
+        }
+    }, [promiseStatus]);
 
-  return (
-    <Box className="LoginForm" display="flex" flexDirection="column" alignItems="center" component="form" onSubmit={formik.handleSubmit}>
-      <TextField
-        id="username"
-        name="username"
-        variant="standard"
-        label="Username"
-        error={formik.touched.username && Boolean(formik.errors.username)}
-        value={formik.values.username}
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        helperText={formik.touched.username && formik.errors.username}
-        fullWidth
-        sx={{ mt: 2 }}
-      />
+    return (
+        <Box
+            className="LoginForm"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            component="form"
+            onSubmit={formik.handleSubmit}
+        >
+            <TextField
+                id="username"
+                name="username"
+                variant="standard"
+                label="Username"
+                error={formik.touched.username && Boolean(formik.errors.username)}
+                value={formik.values.username}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
+                helperText={formik.touched.username && formik.errors.username}
+                fullWidth
+                sx={{ mt: 2 }}
+            />
 
-      <TextField
-        id="password"
-        name="password"
-        variant="standard"
-        label="Password"
-        type={showPassword ? "text" : "password"}
-        error={formik.touched.password && Boolean(formik.errors.password)}
-        value={formik.values.password}
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        helperText={formik.touched.password && formik.errors.password}
-        InputProps={{
-          endAdornment: (
-            <IconButton onClick={() => setShowPassword((prev) => !prev)} edge="end">
-              {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
-            </IconButton>
-          ),
-        }}
-        fullWidth
-        sx={{ mt: 2 }}
-      />
+            <TextField
+                id="password"
+                name="password"
+                variant="standard"
+                label="Password"
+                type={showPassword ? "text" : "password"}
+                error={formik.touched.password && Boolean(formik.errors.password)}
+                value={formik.values.password}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
+                helperText={formik.touched.password && formik.errors.password}
+                InputProps={{
+                    endAdornment: (
+                        <IconButton onClick={() => setShowPassword((prev) => !prev)} edge="end">
+                            {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
+                        </IconButton>
+                    ),
+                }}
+                fullWidth
+                sx={{ mt: 2 }}
+            />
 
-      <Stack direction="row" justifyContent="flex-end" sx={{ width: "100%" }}>
-        <Button variant="text" color="primary" type="submit" disabled={formik.isSubmitting || !formik.isValid} sx={{ mt: 2, mr: 1 }}>
-          Войти
-        </Button>
+            <Stack direction="row" justifyContent="flex-end" sx={{ width: "100%" }}>
+                <Button
+                    variant="text"
+                    color="primary"
+                    type="submit"
+                    disabled={formik.isSubmitting || !formik.isValid}
+                    sx={{ mt: 2, mr: 1 }}
+                >
+                    Войти
+                </Button>
 
-        <Button variant="text" onClick={onRegisterButtonClick} sx={{ mt: 2 }}>
-          Регистрация
-        </Button>
-      </Stack>
-    </Box>
-  );
+                <Button variant="text" onClick={onRegisterButtonClick} sx={{ mt: 2 }}>
+                    Регистрация
+                </Button>
+            </Stack>
+        </Box>
+    );
 };
 
 export const CLoginForm = connect(
-  (state) => ({ promiseStatus: state.promise?.login?.status || null, serverErrors: state.promise?.login?.error || [] }),
-  { onLogin: (login, password) => actionLogin(login, password) }
+    (state) => ({ promiseStatus: state.promise?.login?.status || null, serverErrors: state.promise?.login?.error || [] }),
+    { onLogin: (login, password) => actionLogin(login, password) }
 )(LoginForm);

src/components/common/AuthModal/RegisterForm.js

@@ -9,124 +9,138 @@ import { actionRegister } from "../../../actions/actionRegister";
 import { UIContext } from "../../UIContext";
 
 const signUpSchema = Yup.object().shape({
-  username: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
-  password: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
-  repeatPassword: Yup.string()
-    .min(3, "Too Short!")
-    .max(15, "Too Long!")
-    .required("Required")
-    .oneOf([Yup.ref("password")], "Your passwords do not match."),
+    username: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
+    password: Yup.string().min(3, "Too Short!").max(15, "Too Long!").required("Required"),
+    repeatPassword: Yup.string()
+        .min(3, "Too Short!")
+        .max(15, "Too Long!")
+        .required("Required")
+        .oneOf([Yup.ref("password")], "Your passwords do not match."),
 });
 
 export const RegisterForm = ({ serverErrors, promiseStatus, onRegister, onLoginButtonClick }) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const { setAlert } = useContext(UIContext);
-  const formik = useFormik({
-    initialValues: {
-      username: "",
-      password: "",
-      repeatPassword: "",
-    },
-    validationSchema: signUpSchema,
-    validateOnChange: true,
-    onSubmit: () => {
-      onRegister(formik.values.username, formik.values.password);
-    },
-  });
+    const [showPassword, setShowPassword] = useState(false);
+    const { setAlert } = useContext(UIContext);
+    const formik = useFormik({
+        initialValues: {
+            username: "",
+            password: "",
+            repeatPassword: "",
+        },
+        validationSchema: signUpSchema,
+        validateOnChange: true,
+        onSubmit: () => {
+            onRegister(formik.values.username, formik.values.password);
+        },
+    });
 
-  useEffect(() => {
-    if (promiseStatus === "FULFILLED") {
-      formik.setSubmitting(false);
-      setAlert({
-        show: true,
-        severity: "success",
-        message: "Готово",
-      });
-    }
-    if (promiseStatus === "REJECTED") {
-      const errorMessage = serverErrors.reduce((prev, curr) => prev + "\n" + curr.message, "");
-      formik.setSubmitting(false);
-      setAlert({
-        show: true,
-        severity: "error",
-        message: errorMessage,
-      });
-    }
-  }, [promiseStatus]);
+    useEffect(() => {
+        if (promiseStatus === "FULFILLED") {
+            formik.setSubmitting(false);
+            setAlert({
+                show: true,
+                severity: "success",
+                message: "Готово",
+            });
+        }
+        if (promiseStatus === "REJECTED") {
+            const errorMessage = serverErrors.reduce((prev, curr) => prev + "\n" + curr.message, "");
+            formik.setSubmitting(false);
+            setAlert({
+                show: true,
+                severity: "error",
+                message: errorMessage,
+            });
+        }
+    }, [promiseStatus]);
 
-  return (
-    <Box className="RegisterForm" display="flex" flexDirection="column" alignItems="center" component="form" onSubmit={formik.handleSubmit}>
-      <TextField
-        id="username"
-        name="username"
-        variant="standard"
-        label="Username"
-        error={formik.touched.username && Boolean(formik.errors.username)}
-        value={formik.values.username}
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        helperText={formik.touched.username && formik.errors.username}
-        fullWidth
-        sx={{ mt: 2 }}
-      />
+    return (
+        <Box
+            className="RegisterForm"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            component="form"
+            onSubmit={formik.handleSubmit}
+        >
+            <TextField
+                id="username"
+                name="username"
+                variant="standard"
+                label="Username"
+                error={formik.touched.username && Boolean(formik.errors.username)}
+                value={formik.values.username}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
+                helperText={formik.touched.username && formik.errors.username}
+                fullWidth
+                sx={{ mt: 2 }}
+            />
 
-      <TextField
-        id="password"
-        name="password"
-        variant="standard"
-        label="Password"
-        type={showPassword ? "text" : "password"}
-        error={formik.touched.password && Boolean(formik.errors.password)}
-        value={formik.values.password}
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        helperText={formik.touched.password && formik.errors.password}
-        InputProps={{
-          endAdornment: (
-            <IconButton onClick={() => setShowPassword((prev) => !prev)} edge="end">
-              {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
-            </IconButton>
-          ),
-        }}
-        fullWidth
-        sx={{ mt: 2 }}
-      />
+            <TextField
+                id="password"
+                name="password"
+                variant="standard"
+                label="Password"
+                type={showPassword ? "text" : "password"}
+                error={formik.touched.password && Boolean(formik.errors.password)}
+                value={formik.values.password}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
+                helperText={formik.touched.password && formik.errors.password}
+                InputProps={{
+                    endAdornment: (
+                        <IconButton onClick={() => setShowPassword((prev) => !prev)} edge="end">
+                            {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
+                        </IconButton>
+                    ),
+                }}
+                fullWidth
+                sx={{ mt: 2 }}
+            />
 
-      <TextField
-        id="repeatPassword"
-        name="repeatPassword"
-        variant="standard"
-        label="Repeat password"
-        type={showPassword ? "text" : "password"}
-        error={formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword)}
-        value={formik.values.repeatPassword}
-        onBlur={formik.handleBlur}
-        onChange={formik.handleChange}
-        helperText={formik.touched.repeatPassword && formik.errors.repeatPassword}
-        InputProps={{
-          endAdornment: (
-            <IconButton onClick={() => setShowPassword((prev) => !prev)} edge="end">
-              {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
-            </IconButton>
-          ),
-        }}
-        fullWidth
-        sx={{ mt: 2 }}
-      />
+            <TextField
+                id="repeatPassword"
+                name="repeatPassword"
+                variant="standard"
+                label="Repeat password"
+                type={showPassword ? "text" : "password"}
+                error={formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword)}
+                value={formik.values.repeatPassword}
+                onBlur={formik.handleBlur}
+                onChange={formik.handleChange}
+                helperText={formik.touched.repeatPassword && formik.errors.repeatPassword}
+                InputProps={{
+                    endAdornment: (
+                        <IconButton onClick={() => setShowPassword((prev) => !prev)} edge="end">
+                            {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
+                        </IconButton>
+                    ),
+                }}
+                fullWidth
+                sx={{ mt: 2 }}
+            />
 
-      <Button variant="contained" color="primary" type="submit" disabled={formik.isSubmitting || !formik.isValid} fullWidth sx={{ mt: 2 }}>
-        Зарегистрироваться
-      </Button>
-      <Button variant="text" onClick={onLoginButtonClick}>
-        <Typography>Увійти</Typography>
-      </Button>
-    </Box>
-  );
+            <Button
+                variant="contained"
+                color="primary"
+                type="submit"
+                disabled={formik.isSubmitting || !formik.isValid}
+                fullWidth
+                sx={{ mt: 2 }}
+            >
+                Зарегистрироваться
+            </Button>
+            <Button variant="text" onClick={onLoginButtonClick}>
+                <Typography>Увійти</Typography>
+            </Button>
+        </Box>
+    );
 };
 
 export const CRegisterForm = connect(
-  (state) => ({ promiseStatus: state.promise?.register?.status || null, serverErrors: state.promise?.register?.error || [] }),
-  {
-    onRegister: (login, password) => actionRegister(login, password),
-  }
+    (state) => ({ promiseStatus: state.promise?.register?.status || null, serverErrors: state.promise?.register?.error || [] }),
+    {
+        onRegister: (login, password) => actionRegister(login, password),
+    }
 )(RegisterForm);

src/components/common/AuthModal/index.js

@@ -5,20 +5,20 @@ import { CLoginForm } from "./LoginForm";
 import { CRegisterForm } from "./RegisterForm";
 
 export const AuthModal = ({ open, onClose }) => {
-  const [selectedForm, setSelectedForm] = useState("login");
-  const token = useSelector((state) => state.auth?.token || null);
+    const [selectedForm, setSelectedForm] = useState("login");
+    const token = useSelector((state) => state.auth?.token || null);
 
-  useEffect(() => {
-    token && onClose();
-  }, [token]);
+    useEffect(() => {
+        token && onClose();
+    }, [token]);
 
-  return (
-    <Modal open={open} onClose={onClose} maxWidth={400}>
-      {selectedForm === "login" ? (
-        <CLoginForm onRegisterButtonClick={() => setSelectedForm("register")} />
-      ) : selectedForm === "register" ? (
-        <CRegisterForm onLoginButtonClick={() => setSelectedForm("login")} />
-      ) : null}
-    </Modal>
-  );
+    return (
+        <Modal open={open} onClose={onClose} maxWidth={400}>
+            {selectedForm === "login" ? (
+                <CLoginForm onRegisterButtonClick={() => setSelectedForm("register")} />
+            ) : selectedForm === "register" ? (
+                <CRegisterForm onLoginButtonClick={() => setSelectedForm("login")} />
+            ) : null}
+        </Modal>
+    );
 };

src/components/common/Ava/index.js

@@ -3,6 +3,6 @@ import { useSelector } from "react-redux";
 import defaultAvatarImage from "../../../images/default-avatar-image.png";
 
 export const Ava = () => {
-  const path = useSelector((state) => state.promise.aboutMe?.payload?.avatar?.url || null);
-  return <Avatar src={path ? `${path}` : defaultAvatarImage} />;
+    const path = useSelector((state) => state.promise.aboutMe?.payload?.avatar?.url || null);
+    return <Avatar src={path ? `${path}` : defaultAvatarImage} />;
 };

src/components/common/Categories/Category.js

@@ -1,12 +1,12 @@
-import { Divider, ListItem, ListItemButton, ListItemText } from '@mui/material';
-import { Fragment } from 'react';
-import { Link } from 'react-router-dom';
+import { Divider, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { Fragment } from "react";
+import { Link } from "react-router-dom";
 
-export const Category = ({ category = {}, url = '' }) => (
+export const Category = ({ category = {}, url = "" }) => (
     <Fragment>
         <ListItem disablePadding>
             <ListItemButton component={Link} to={`${url + category._id}`}>
-                <ListItemText primary={category.name || ''} />
+                <ListItemText primary={category.name || ""} />
             </ListItemButton>
         </ListItem>
         <Divider />

src/components/common/Categories/index.js

@@ -1,8 +1,7 @@
-import { Paper, List, ListItem, ListItemButton, ListItemText, Box } from '@mui/material';
-import { useEffect } from 'react';
-import { Category } from './Category';
+import { List, Box } from "@mui/material";
+import { Category } from "./Category";
 
-const Categories = ({ categories = [], url = '/category/' }) => {
+const Categories = ({ categories = [], url = "/category/" }) => {
     return (
         <Box className="Categories">
             <List>

src/components/common/ConfirmModal/index.js

@@ -1,5 +1,5 @@
-import { Box, Button, Stack, Typography } from '@mui/material';
-import { Modal } from '../Modal';
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { Modal } from "../Modal";
 
 export const ConfirmModal = ({ open, text, onYES, onNO, onClose }) => {
     return (

src/components/common/DrawerCart/DrawerCart.js

@@ -1,25 +1,12 @@
-import { Link, Navigate, useNavigate } from 'react-router-dom';
-import { actionCartDelete } from '../../../reducers';
-import { IoMdClose } from 'react-icons/io';
+import { useNavigate } from "react-router-dom";
+import { actionCartDelete } from "../../../reducers";
+import { IoMdClose } from "react-icons/io";
 
-import {
-    List,
-    Divider,
-    ListItem,
-    Typography,
-    Button,
-    TableRow,
-    TableBody,
-    Table,
-    TableCell,
-    Stack,
-    ListItemButton,
-    IconButton,
-} from '@mui/material';
-import { useSelector, useDispatch } from 'react-redux';
-import { DrawerCartItem } from './DrawerCartItem';
-import { DrawerRight } from '../DrawerRight';
-import { Box } from '@mui/system';
+import { Divider, Typography, Button, Stack, IconButton } from "@mui/material";
+import { useSelector, useDispatch } from "react-redux";
+import { DrawerCartItem } from "./DrawerCartItem";
+import { DrawerRight } from "../DrawerRight";
+import { Box } from "@mui/system";
 
 export const DrawerCart = ({ isOpen = false, onClose = null } = {}) => {
     const cart = useSelector((state) => state.cart || {});
@@ -41,11 +28,7 @@ export const DrawerCart = ({ isOpen = false, onClose = null } = {}) => {
 
                     <Divider />
                     {Object.entries(cart).map(([_id, order]) => (
-                        <DrawerCartItem
-                            order={order}
-                            onDeleteClick={(good) => dispatch(actionCartDelete(good))}
-                            key={_id}
-                        />
+                        <DrawerCartItem order={order} onDeleteClick={(good) => dispatch(actionCartDelete(good))} key={_id} />
                     ))}
 
                     {!!Object.keys(cart).length && (
@@ -53,7 +36,7 @@ export const DrawerCart = ({ isOpen = false, onClose = null } = {}) => {
                             variant="text"
                             onClick={() => {
                                 onClose();
-                                navigate('/cart');
+                                navigate("/cart");
                             }}
                         >
                             Підтвердити

src/components/common/DrawerCart/DrawerCartItem.js

@@ -1,33 +1,12 @@
-import { Box, width } from '@mui/system';
-import { backendURL } from '../../../helpers';
-import defaultGoodImage from '../../../images/default-good-image.png';
-import { IoCloseOutline } from 'react-icons/io5';
-import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';
-import { actionCartChange } from '../../../reducers';
-import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { Box } from "@mui/system";
+import defaultGoodImage from "../../../images/default-good-image.png";
+import { IoCloseOutline } from "react-icons/io5";
 
-import {
-    ListItem,
-    Grid,
-    Typography,
-    Stack,
-    Container,
-    IconButton,
-    TextField,
-    ButtonGroup,
-    Button,
-    Input,
-    TableCell,
-    TableRow,
-    Card,
-    CardMedia,
-    CardContent,
-} from '@mui/material';
+import { Typography, IconButton, Card, CardMedia, CardContent } from "@mui/material";
 
 const DrawerCartItem = ({ order, onDeleteClick }) => {
     const {
-        good: { _id, images = [], name = '', price = 0 },
+        good: { _id, images = [], name = "", price = 0 },
     } = order || {};
 
     return (
@@ -35,13 +14,13 @@ const DrawerCartItem = ({ order, onDeleteClick }) => {
             <CardMedia
                 component="img"
                 sx={{ width: 90 }}
-                src={images && images[0]?.url ? `${images ? images[0]?.url : ''}` : defaultGoodImage}
+                src={images && images[0]?.url ? `${images ? images[0]?.url : ""}` : defaultGoodImage}
                 onError={({ currentTarget }) => {
                     currentTarget.onerror = null; // prevents looping
                     currentTarget.src = defaultGoodImage;
                 }}
             />
-            <Box sx={{ display: 'flex', width: '100%' }}>
+            <Box sx={{ display: "flex", width: "100%" }}>
                 <CardContent className="content">
                     <Typography component="div" variant="h5">
                         {name.length > 20 ? `${name.slice(0, 15)}...` : name}

src/components/common/DrawerRight/index.js

@@ -1,5 +1,5 @@
-import { Drawer } from '@mui/material';
-import ReactDOM from 'react-dom';
+import { Drawer } from "@mui/material";
+import ReactDOM from "react-dom";
 
 export const DrawerRight = ({ children, onClose = null, open } = {}) => {
     return ReactDOM.createPortal(

src/components/common/DropZone/index.js

@@ -1,7 +1,6 @@
-import { useDropzone } from 'react-dropzone';
-import { useEffect } from 'react';
-import { connect } from 'react-redux';
-import { Box } from '@mui/material';
+import { useDropzone } from "react-dropzone";
+import { useEffect } from "react";
+import { Box } from "@mui/material";
 export const DropZone = ({ onFileDrop, children }) => {
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
@@ -12,7 +11,7 @@ export const DropZone = ({ onFileDrop, children }) => {
     }, [acceptedFiles]);
 
     return (
-        <Box {...getRootProps({ className: 'Dropzone' })}>
+        <Box {...getRootProps({ className: "Dropzone" })}>
             {/* <input {...getInputProps()} /> */}
             {children}
         </Box>

src/components/common/EntityEditor/SortableItem.js

@@ -1,2 +1,2 @@
-import { SortableElement } from 'react-sortable-hoc';
+import { SortableElement } from "react-sortable-hoc";
 export const SortableItem = SortableElement(({ children }) => <div className="SortableItem">{children}</div>);

src/components/common/EntityEditor/SortableList.js

@@ -1,4 +1,4 @@
-import { SortableContainer } from 'react-sortable-hoc';
+import { SortableContainer } from "react-sortable-hoc";
 
 export const SortableList = SortableContainer(({ children }) => {
     return <div className="SortableContainer">{children}</div>;

src/components/common/EntityEditor/index.js

@@ -1,11 +1,10 @@
-import { useEffect, useState } from 'react';
-import { arrayMoveImmutable } from 'array-move';
-import { DropZone } from '../DropZone';
-import { SortableList } from './SortableList';
-import { SortableItem } from './SortableItem';
-import { Box, Button, IconButton, ImageList, ImageListItem, ImageListItemBar, Typography } from '@mui/material';
-import { MdClose } from 'react-icons/md';
-import { backendURL } from '../../../helpers';
+import { useEffect, useState } from "react";
+import { arrayMoveImmutable } from "array-move";
+import { DropZone } from "../DropZone";
+import { SortableList } from "./SortableList";
+import { SortableItem } from "./SortableItem";
+import { Box, Button, IconButton, ImageList, ImageListItem, ImageListItemBar, Typography } from "@mui/material";
+import { MdClose } from "react-icons/md";
 
 export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uploadFiles, onImagesSave }) => {
     const [state, setState] = useState(entity);
@@ -15,7 +14,7 @@ export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uplo
     }, [entity]);
 
     useEffect(() => {
-        if (uploadFiles?.status === 'FULFILLED') {
+        if (uploadFiles?.status === "FULFILLED") {
             setState({ ...state, images: [...(state.images || []), ...uploadFiles?.payload] });
         }
     }, [uploadFiles]);
@@ -46,7 +45,7 @@ export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uplo
                                     <ImageListItem key={image._id}>
                                         <ImageListItemBar
                                             sx={{
-                                                background: 'rgba(0,0,0,0.1)',
+                                                background: "rgba(0,0,0,0.1)",
                                             }}
                                             actionIcon={
                                                 <IconButton onClick={() => onItemRemove(image._id)}>
@@ -54,12 +53,7 @@ export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uplo
                                                 </IconButton>
                                             }
                                         />
-                                        <Box
-                                            component="img"
-                                            className="DropZoneImage"
-                                            src={`/${image.url}`}
-                                            loading="lazy"
-                                        />
+                                        <Box component="img" className="DropZoneImage" src={`/${image.url}`} loading="lazy" />
                                     </ImageListItem>
                                 </SortableItem>
                             )

src/components/common/Error/index.js

@@ -1,7 +1,7 @@
-const { Typography } = require('@mui/material');
+const { Typography } = require("@mui/material");
 
 const Error = ({ children }) => (
-    <Typography variant="body1" sx={{ textAlign: 'center' }} className="error">
+    <Typography variant="body1" sx={{ textAlign: "center" }} className="error">
         {children}
     </Typography>
 );

src/components/common/Error404/index.js

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
-import { ReactComponent as Logo404 } from '../../../images/404.svg';
+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

@@ -1,19 +1,15 @@
-import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Typography } from '@mui/material';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import defaultGoodImage from '../../../images/default-good-image.png';
-import { actionCartAdd } from '../../../reducers';
-import { CBuyButton } from '../BuyButton';
+import { Card, CardActionArea, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import defaultGoodImage from "../../../images/default-good-image.png";
+import { actionCartAdd } from "../../../reducers";
+import { CBuyButton } from "../BuyButton";
 
 const GoodCard = ({ good = {} }) => {
     return (
         <Card className="GoodCard">
             <CardActionArea component={Link} to={`/good/${good._id}`}>
-                <CardMedia
-                    component="img"
-                    height="200"
-                    image={`${good.images ? good.images[0]?.url : defaultGoodImage}`}
-                />
+                <CardMedia component="img" height="200" image={`${good.images ? good.images[0]?.url : defaultGoodImage}`} />
                 <CardContent>
                     <Typography gutterBottom variant="body1" component="div" color="#1C1B1F" textAlign="left">
                         Назва: {good.name?.length > 10 ? `${good.name.slice(0, 10)}...` : good.name}

src/components/common/GoodCardSlider/GoodCardSet.js

@@ -1,11 +1,11 @@
-import { Box, Stack } from '@mui/material';
-import { CGoodCard } from '../GoodCard';
+import { Box, Stack } from "@mui/material";
+import { CGoodCard } from "../GoodCard";
 
 export const GoodCardSet = ({ goods = [], num = 4 } = {}) => {
     return (
         <Stack className="GoodCardSet" direction="row">
             {(goods || []).map((good) => (
-                <Box sx={{ width: `${Math.floor(100 / (num || 1))}%`, padding: '10px' }} key={good?._id}>
+                <Box sx={{ width: `${Math.floor(100 / (num || 1))}%`, padding: "10px" }} key={good?._id}>
                     <CGoodCard good={good} buyButton={false} />
                 </Box>
             ))}

src/components/common/GoodCardSlider/GoodCardSlider.js

@@ -1,7 +1,7 @@
-import { Carousel } from 'react-responsive-carousel';
-import { GoodCardSet } from './GoodCardSet';
-import { useState, useEffect } from 'react';
-import { Box } from '@mui/material';
+import { Carousel } from "react-responsive-carousel";
+import { GoodCardSet } from "./GoodCardSet";
+import { useState, useEffect } from "react";
+import { Box } from "@mui/material";
 export const GoodCardSlider = ({ goods = [] } = {}) => {
     const [goodSets, setGoodSets] = useState([]);
     const num = 5;

src/components/common/Modal/index.js

@@ -2,14 +2,14 @@ import { Box } from "@mui/system";
 import ReactDOM from "react-dom";
 
 export const Modal = ({ children, open, onClose, maxWidth = 700 }) => {
-  return open
-    ? ReactDOM.createPortal(
-        <Box className="Modal" onClick={() => onClose && onClose()}>
-          <Box className="modalContent" onClick={(e) => e.stopPropagation()} style={{ maxWidth }}>
-            {children}
-          </Box>
-        </Box>,
-        document.body
-      )
-    : null;
+    return open
+        ? ReactDOM.createPortal(
+              <Box className="Modal" onClick={() => onClose && onClose()}>
+                  <Box className="modalContent" onClick={(e) => e.stopPropagation()} style={{ maxWidth }}>
+                      {children}
+                  </Box>
+              </Box>,
+              document.body
+          )
+        : null;
 };

src/components/common/ProtectedRoute/index.js

@@ -1,9 +1,9 @@
-import { Navigate, Route, useLocation } from 'react-router-dom';
-import { connect } from 'react-redux';
+import { Navigate, useLocation } from "react-router-dom";
+import { connect } from "react-redux";
 
-export const ProtectedRoute = ({ roles = ['anon'], children, fallback = '/', auth } = {}) => {
+export const ProtectedRoute = ({ roles = ["anon"], children, fallback = "/", auth } = {}) => {
     let location = useLocation();
-    !!auth.length || (auth = ['anon']);
+    !!auth.length || (auth = ["anon"]);
     if (!auth.filter((role) => roles.includes(role)).length) {
         return <Navigate to={fallback} state={{ from: location }} />;
     }

src/components/common/SearchBar/SearchCategoryResultItem.js

@@ -1,7 +1,7 @@
-import { Link } from 'react-router-dom';
-import { Stack, Typography } from '@mui/material';
-const SearchCategoryResultItem = ({ category, onClick, link = '' } = {}) => {
-    const { _id = null, name = '' } = category || {};
+import { Link } from "react-router-dom";
+import { Stack, Typography } from "@mui/material";
+const SearchCategoryResultItem = ({ category, onClick, link = "" } = {}) => {
+    const { _id = null, name = "" } = category || {};
 
     return (
         <Link className="Link" to={`${link}${_id}/`}>

src/components/common/SearchBar/SearchGoodResultItem.js

@@ -1,10 +1,9 @@
-import { Link } from 'react-router-dom';
-import defaultGoodImage from '../../../images/default-good-image.png';
+import { Link } from "react-router-dom";
+import defaultGoodImage from "../../../images/default-good-image.png";
 
-import { Grid, Box, Stack, Typography } from '@mui/material';
-import { backendURL } from '../../../helpers';
-const SearchGoodResultItem = ({ good, onClick, link = '' } = {}) => {
-    const { _id = 0, images = [], name = '', description = '', price = '' } = good || {};
+import { Grid, Box, Typography } from "@mui/material";
+const SearchGoodResultItem = ({ good, onClick, link = "" } = {}) => {
+    const { _id = 0, images = [], name = "", description = "", price = "" } = good || {};
 
     return (
         <Grid
@@ -30,12 +29,10 @@ const SearchGoodResultItem = ({ good, onClick, link = '' } = {}) => {
                     <Typography variant="body1" sx={{ flexGrow: 1 }}>
                         {name.length > 30 ? `${name.substring(0, 30)}...` : name}
                     </Typography>
-                    <Typography variant="body2">
-                        {description.length > 70 ? `${description.substring(0, 70)}...` : description}
-                    </Typography>
+                    <Typography variant="body2">{description.length > 70 ? `${description.substring(0, 70)}...` : description}</Typography>
                 </Box>
             </Grid>
-            <Grid item xs={3} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+            <Grid item xs={3} sx={{ display: "flex", alignItems: "center", justifyContent: "flex-end" }}>
                 <Typography variant="body1">{price} ₴</Typography>
             </Grid>
         </Grid>

src/components/common/SearchBar/SearchOrderResultItem.js

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { Box, Grid, Stack, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { statusNumber } from "../../../helpers";
 const SearchOrderResultItem = ({ order, onClick, link = "" } = {}) => {
     const { _id = null, owner = null, status = "-" } = order || {};

src/components/common/SearchBar/SearchResults.js

@@ -1,14 +1,12 @@
-import { connect } from 'react-redux';
-import { useEffect } from 'react';
-import SearchGoodResultItem from './SearchGoodResultItem';
-import { HiOutlineEmojiSad } from 'react-icons/hi';
-import SearchCategoryResultItem from './SearchCategoryResultItem';
-import { Divider, Paper, Stack, Typography } from '@mui/material';
-import { Box } from '@mui/system';
-import { Error } from '../Error';
-import SearchOrderResultItem from './SearchOrderResultItem';
+import { connect } from "react-redux";
+import SearchGoodResultItem from "./SearchGoodResultItem";
+import SearchCategoryResultItem from "./SearchCategoryResultItem";
+import { Divider, Paper, Stack } from "@mui/material";
+import { Box } from "@mui/system";
+import { Error } from "../Error";
+import SearchOrderResultItem from "./SearchOrderResultItem";
 
-export const SearchResults = ({ items, onItemClick, itemLink = '' }) => {
+export const SearchResults = ({ items, onItemClick, itemLink = "" }) => {
     return (
         <Paper className="SearchResults">
             <Stack>

src/components/common/SearchBar/index.js

@@ -1,6 +1,6 @@
-import { SearchBar, CSearchBar } from './SearchBar';
+import { SearchBar, CSearchBar } from "./SearchBar";
 
-import { SearchResults, CSearchResults } from './SearchResults';
+import { SearchResults, CSearchResults } from "./SearchResults";
 // import SearchGoodResultItem from './SearchGoodResultItem';
 
 // export { SearchBar, SearchResults, CSearchResults, SearchGoodResultItem };

src/components/layout/Aside/AdminCategories.js

@@ -1,21 +1,21 @@
-import { Categories } from '../../common/Categories';
+import { Categories } from "../../common/Categories";
 
 const adminCategories = [
     {
-        _id: 'goods/',
-        name: 'Товари',
+        _id: "goods/",
+        name: "Товари",
     },
     {
-        _id: 'categories/',
-        name: 'Категорії',
+        _id: "categories/",
+        name: "Категорії",
     },
     {
-        _id: 'orders/',
-        name: 'Замовлення',
+        _id: "orders/",
+        name: "Замовлення",
     },
     {
-        _id: 'tree/',
-        name: 'Дерево категорій',
+        _id: "tree/",
+        name: "Дерево категорій",
     },
 ];
 

src/components/layout/Aside/CCategories.js

@@ -1,5 +1,5 @@
-import { connect } from 'react-redux';
-import { Categories } from '../../common/Categories';
+import { connect } from "react-redux";
+import { Categories } from "../../common/Categories";
 
 const CCategories = connect((state) => ({
     categories: state.promise.rootCats?.payload || [],

src/components/layout/Aside/StatusOptions.js

@@ -1,5 +1,5 @@
-import { Box, Divider, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
-import { createSearchParams, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { Box, Divider, List, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { useSearchParams } from "react-router-dom";
 
 export const StatusOptions = ({ options }) => {
     const [searchParams, setSearchParams] = useSearchParams();
@@ -7,16 +7,16 @@ export const StatusOptions = ({ options }) => {
     return (
         <Box className="StatusOptions">
             <List>
-                {[{ value: 0, label: 'Всі' }, ...(options || [])].map((option) => (
+                {[{ value: 0, label: "Всі" }, ...(options || [])].map((option) => (
                     <Box key={option.value}>
                         <ListItem disablePadding>
                             <ListItemButton
                                 onClick={() => {
-                                    searchParams.set('status', option.value);
+                                    searchParams.set("status", option.value);
                                     setSearchParams(searchParams);
                                 }}
                             >
-                                <ListItemText primary={option.label || ''} />
+                                <ListItemText primary={option.label || ""} />
                             </ListItemButton>
                         </ListItem>
                         <Divider />

src/components/layout/Aside/index.js

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

src/components/layout/Content/index.js

@@ -1,4 +1,4 @@
-import { Paper, Box } from '@mui/material';
+import { Box } from "@mui/material";
 
 const Content = ({ children }) => <Box className="Content">{children}</Box>;
 

src/components/layout/Footer/index.js

@@ -1,5 +1,5 @@
-import { Container, Grid, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Container, Grid, Table, TableBody, TableCell, TableRow, Typography } from "@mui/material";
+import { Box } from "@mui/system";
 
 const Footer = () => (
     <Box className="Footer">

src/components/layout/Header/AvatarButton/index.js

@@ -2,7 +2,7 @@ import { IconButton } from "@mui/material";
 import { Ava } from "../../../common/Ava";
 
 export const AvatarButton = ({ onClick }) => (
-  <IconButton className="AvatarButton" onClick={onClick}>
-    <Ava />
-  </IconButton>
+    <IconButton className="AvatarButton" onClick={onClick}>
+        <Ava />
+    </IconButton>
 );

src/components/layout/Header/CartIcon/index.js

@@ -1,7 +1,7 @@
-import { Badge, Box, IconButton } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-import { MdOutlineShoppingCart } from 'react-icons/md';
+import { Badge, Box } from "@mui/material";
+import { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { MdOutlineShoppingCart } from "react-icons/md";
 
 export const CartIcon = ({ cart }) => {
     const [count, setCount] = useState(0);

src/components/layout/Header/LogoutIcon/index.js

@@ -1,9 +1,7 @@
-import { Badge, Box, IconButton } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { connect, useDispatch, useSelector } from 'react-redux';
-import { MdLogout, MdOutlineShoppingCart } from 'react-icons/md';
-import { useSelect } from '@mui/base';
-import { actionLogout } from '../../../../actions/actionLogout';
+import { Box, IconButton } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { MdLogout } from "react-icons/md";
+import { actionLogout } from "../../../../actions/actionLogout";
 
 export const LogoutIcon = () => {
     const dispatch = useDispatch();

src/components/layout/Header/index.js

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { createSearchParams, Link, useNavigate, useSearchParams } from "react-router-dom";
 import { ReactComponent as ShoppingLogo } from "../../../images/shopping-logo.svg";
-import { actionPromiseClear } from "../../../reducers";
 import { AuthModal } from "../../common/AuthModal";
 import { DrawerCart } from "../../common/DrawerCart/DrawerCart";
 import { CSearchBar } from "../../common/SearchBar";

src/helpers/GraphQL.js

@@ -1,9 +1,9 @@
 export const getGQL = (url) => (query, variables) =>
     fetch(url, {
-        method: 'POST',
+        method: "POST",
         headers: {
-            'Content-Type': 'application/json',
-            ...(localStorage.authToken ? { Authorization: 'Bearer ' + localStorage.authToken } : {}),
+            "Content-Type": "application/json",
+            ...(localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {}),
         },
         body: JSON.stringify({ query, variables }),
     })