+ backgroundURL

src/components/CartPage/CartItem.js

@@ -5,6 +5,7 @@ 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';
 
 const {
     Typography,
@@ -44,7 +45,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 ? `${backendURL}${images ? images[0]?.url : ''}` : defaultGoodImage}
                     sx={{ width: 50 }}
                 />
             </TableCell>

src/components/GoodPage/index.js

@@ -5,6 +5,7 @@ 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';
 
 export const GoodPage = () => {
     const good = useSelector((state) => state.promise?.goodById?.payload || {});
@@ -15,7 +16,7 @@ export const GoodPage = () => {
                 <Grid item xs={12} md={4}>
                     <Carousel showIndicators={false} showStatus={false} showArrows={true}>
                         {(good.images || [{ url: defaultGoodImage }]).map((image) => (
-                            <img src={image?.url ? `${image?.url}` : defaultGoodImage} />
+                            <img src={image?.url ? `${backendURL}${image?.url}` : defaultGoodImage} />
                         ))}
                     </Carousel>
                 </Grid>

src/components/admin/AdminGoodsPage/AdminGoodItem.js

@@ -4,6 +4,7 @@ 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';
 
 const AdminGoodItem = ({ good }) => (
     <TableRow className="AdminGoodItem">
@@ -13,7 +14,11 @@ const AdminGoodItem = ({ good }) => (
             {
                 <Box
                     component="img"
-                    src={good.images?.length ? `${good.images ? good.images[0]?.url : ''}` : defaultGoodImage}
+                    src={
+                        good.images?.length
+                            ? `${backendURL}${good.images ? good.images[0]?.url : ''}`
+                            : defaultGoodImage
+                    }
                 />
             }
         </TableCell>

src/components/common/DrawerCart/DrawerCartItem.js

@@ -35,7 +35,7 @@ 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 ? `${backendURL}${images ? images[0]?.url : ''}` : defaultGoodImage}
             />
             <Box sx={{ display: 'flex', width: '100%' }}>
                 <CardContent className="content">
@@ -57,55 +57,3 @@ const DrawerCartItem = ({ order, onDeleteClick }) => {
 };
 
 export { DrawerCartItem };
-
-{
-    /* <TableRow className="DrawerCartItem">
-<TableCell>
-    <Box
-        component="img"
-        src={images && images[0]?.url ? `/${images ? images[0]?.url : ''}` : defaultGoodImage}
-        sx={{ width: 50 }}
-    />
-</TableCell>
-<TableCell>
-    <Box sx={{ flexGrow: 1 }}>
-        <Typography variant="h5">{name}</Typography>
-        <Typography variant="body1">{price}</Typography>
-    </Box>
-</TableCell>
-<TableCell>
-    <Stack justifyContent="center" direction="row" alignItems="center">
-        <IconButton onClick={() => handleChange(countInput - 1)}>
-            <AiOutlineMinus />
-        </IconButton>
-        <Input
-            value={countInput}
-            onChange={(e) => handleChange(+e.target.value)}
-            size="small"
-            sx={{
-                width: 70,
-                resize: {
-                    fontSize: 10,
-                },
-                px: 3,
-            }}
-        />
-        <IconButton onClick={() => handleChange(countInput + 1)}>
-            <AiOutlinePlus />
-        </IconButton>
-    </Stack>
-</TableCell>
-<TableCell>
-    <Stack justifyContent="center">
-        <Typography variant="body1" textAlign="center">
-            x{count}
-        </Typography>
-    </Stack>
-</TableCell>
-<TableCell>
-    <IconButton onClick={() => onDeleteClick({ _id, images, name, price })}>
-        <IoCloseOutline />
-    </IconButton>
-</TableCell>
-</TableRow> */
-}

src/components/common/EntityEditor/index.js

@@ -5,6 +5,7 @@ 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';
 
 export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uploadFiles, onImagesSave }) => {
     const [state, setState] = useState(entity);
@@ -58,7 +59,7 @@ export const EntityEditor = ({ entity = { images: [] }, onSave, onFileDrop, uplo
                                         <Box
                                             component="img"
                                             className="DropZoneImage"
-                                            src={`${image.url}`}
+                                            src={`${backendURL}${image.url}`}
                                             loading="lazy"
                                         />
                                     </ImageListItem>

src/components/common/SearchBar/SearchGoodResultItem.js

@@ -2,6 +2,7 @@ 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 || {};
 
@@ -15,7 +16,7 @@ const SearchGoodResultItem = ({ good, onClick, link = '' } = {}) => {
             spacing={1}
         >
             <Grid item xs={3}>
-                <Box component="img" src={images ? images[0]?.url : defaultGoodImage} />
+                <Box component="img" src={images ? `${backendURL}${images[0]?.url}` : defaultGoodImage} />
             </Grid>
             <Grid item xs={6}>
                 <Box sx={{ p: 1 }}>

src/helpers/index.js

@@ -3,4 +3,5 @@ import { mock } from './mock';
 import { delay } from './delay';
 import { statusNumber, statusOptions } from './orderStatus';
 
+export const backendURL = 'https://diploma-back-django.herokuapp.com/';
 export { jwtDecode, mock, delay, statusNumber, statusOptions };