Исправление ошибки отображения фотографий (front)

.gitlab-ci.yml

@@ -7,7 +7,7 @@ stages:
   - deploy front
   - deploy back
 
-stop-job:
+deploy-back-job:
   stage: deploy back
   only:
     - back_release
@@ -20,3 +20,15 @@ stop-job:
     - echo "Запуск докер контейнера"
     - docker run --name my-bar --restart=always -p 8091:8080 -d my-bar
     - echo "Деплой завершен"
+
+deploy-front-job:
+  stage: deploy front
+  only:
+    - release_front
+  image: node:22.12
+  script:
+    - cd front
+    - npm install
+    - npm run build
+    - cp -r build /app
+    - echo "Деплой завершен"

front/package.json

@@ -41,7 +41,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "CI=false && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

front/src/app/pages/cocktails/CocktailMenuBarPage.js

@@ -24,9 +24,7 @@ export function CocktailMenuBarPage() {
     const [findString, setFindString] = useState("");
     const [loading, setLoading] = useState(true);
     const [cocktails, setCocktails] = useState([]);
-    const [openModal, setOpenModal] = useState(false);
-    const [selected, setSelected] = useState(null);
-    const {setCocktail, openCocktail, state, getOpenCocktail} = useSelect();
+    const {setCocktail, state} = useSelect();
 
     useEffect(() => {
         api().get(`${requests.cocktails.menu}?all=true`)
@@ -41,13 +39,10 @@ export function CocktailMenuBarPage() {
 
     const handleOpenModal = (row) => {
         setCocktail(row);
-        openCocktail();
-        // setSelected(row)
-        // setOpenModal(true);
     }
     const changeHandler = (row, value) => {
         const newState = cocktails.map((r) => {
-            if(r.id !== row.id) {
+            if (r.id !== row.id) {
                 return r;
             }
             return {
@@ -121,11 +116,7 @@ export function CocktailMenuBarPage() {
             {/*Загрузчик*/}
             <Loading loading={loading}/>
             {/*Модальное окно информации об ингредиенте*/}
-            <CocktailInfoModal open={state.openCocktail} row={state.cocktail}
-                               closeHandler={() => {
-                                   setSelected(null);
-                                   setOpenModal(false);
-                               }}/>
+            <CocktailInfoModal row={state.cocktail}/>
         </Box>
     )
 }

front/src/app/pages/cocktails/CocktailsPageContent.js

@@ -14,59 +14,9 @@ import {useUser} from "../../../hooks/useUser";
 import {blue} from "@mui/material/colors";
 import UpIcon from "@mui/icons-material/KeyboardArrowUp";
 import {sortList} from "../../../components/cocktails/sortingList";
-import {getComparator} from "../../../components/core/getComparator";
 import Button from "@mui/material/Button";
-import Paper from "@mui/material/Paper";
-import CheckMarks from "../../../components/cocktails/CheckMarks";
 import {useSelect} from "../../../hooks/useSelect";
 
-const filterList = (rows, filter, allowIngredients) => {
-    let regExp = new RegExp("(.*?)" + filter.search + "(.*?)", "i");
-    const sortingObj = sortList.find((s) => s.name === filter.sorting);
-    const sortingValues = sortingObj.id.split("|");
-    return rows
-        .filter((row) => {
-            const nameReg = row.name.split(" ").map((n) => n.match(regExp) !== null).includes(true);
-            const ingredientReg = row.components
-                .split(", ")
-                .map((r) => r.match(regExp) !== null)
-                .includes(true);
-            return nameReg || ingredientReg;
-        })
-        .filter((row) => filter.onlyFavourite ? row.rating.favourite : true)
-        .filter((row) => filter.glass.length === 0 || filter.glass.includes(row.glass))
-        .filter((row) => filter.category.length === 0 || filter.category.includes(row.category))
-        .filter((row) => filter.alcohol.length === 0 || filter.alcohol.includes(row.alcoholic))
-        .filter((row) => {
-            if (filter.tags.length === 0) {
-                return true;
-            }
-
-            if (row.tags.length === 0) {
-                return false;
-            }
-            return row.tags.split(",").find((tag) => filter.tags.includes(tag))
-        })
-        .filter((row) => {
-            if (filter.iCount.length === 0) {
-                return true;
-            }
-            const arr = row.components.split(", ");
-            const count = arr.filter((n) => !allowIngredients.includes(n)).length;
-            const filt = filter.ingredient.length === 0 || arr.filter((n) => filter.ingredient.includes(n)).length > 0;
-
-            return filter.iCount === count && filt;
-        })
-        .filter((row) => {
-            if (filter.inMenu === "") {
-                return row;
-            }
-            const filterValue = filter.inMenu === "Есть в меню";
-            return filterValue === row.inMenu;
-        })
-        .sort(getComparator(sortingValues[1], sortingValues[0], "name"))
-}
-
 const emptyFilter = {
     search: "",
     hidden: true,
@@ -87,7 +37,7 @@ const CocktailsPageContent = ({all}) => {
     const [allowIngredients, setAllowIngredients] = useState([])
     const [rows, setRows] = useState([]);
     const [filter, setFilter] = useState(emptyFilter)
-    const [chips, setChips] = useState([])
+    // const [chips, setChips] = useState([])
     const [page, setPage] = useState(-1);
     const [load, setLoad] = useState(false);
     const [isEnd, setIsEnd] = useState(false);
@@ -112,7 +62,7 @@ const CocktailsPageContent = ({all}) => {
         api().post(requests.cocktails.menu, request)
             .then((r) => {
                 if (r.data.length === 0) {
-                    if(isNew) {
+                    if (isNew) {
                         setRows([]);
                     }
                     setIsEnd(true);
@@ -140,6 +90,7 @@ const CocktailsPageContent = ({all}) => {
         }
         window.addEventListener('scroll', handleScroll);
         return () => window.removeEventListener('scroll', handleScroll);
+        // eslint-disable-next-line
     }, [loading]);
     useEffect(() => {
         api().get(requests.bar.ingredientSimple)
@@ -153,6 +104,7 @@ const CocktailsPageContent = ({all}) => {
     }, [])
     useEffect(() => {
         loading();
+        // eslint-disable-next-line
     }, [filter])
     useEffect(() => {
         if (!all) {
@@ -165,7 +117,8 @@ const CocktailsPageContent = ({all}) => {
             .filter((nhc) => nhc.length === 1)
             .map((fc) => fc[0])
             .forEach((i) => ingredients.add(i))
-        setChips(Array.from(ingredients).sort(getComparator()));
+        // setChips(Array.from(ingredients).sort(getComparator()));
+        // eslint-disable-next-line
     }, [rows, allowIngredients])
 
     const renderSkeleton = () => {

front/src/components/Ingredients/IngredientInfoModal.js

@@ -26,6 +26,7 @@ export function IngredientInfoModal({ingredient}) {
         api().get(requests.cocktails.byIngredient + ingredient.id)
             .then((r) => setCocktails(r.data))
             .catch(() => createError())
+        // eslint-disable-next-line
     }, [ingredient]);
 
     if (!ingredient) {

front/src/components/cocktails/Cocktail.js

@@ -63,7 +63,7 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
                         alt={row.name}
                         height="300"
 
-                        image={`${row.image}/preview`}
+                        image={row.image.includes("thecocktaildb") ? (row.image + "/preview") : row.image}
                     />
                     {renderFavouriteBadge(handleFavourite, row)}
                     {renderRating(handleChangeRating, row)}

front/src/components/cocktails/CocktailInfoModal.js

@@ -112,7 +112,7 @@ export function CocktailInfoModal({row}) {
             </DialogTitle>
             <DialogContent>
                 <CardMedia
-                    image={`${cocktail.image}/preview`}
+                    image={cocktail.image.includes("thecocktaildb") ? (cocktail.image + "/preview") : cocktail.image}
                     sx={{
                         loading: "eager",
                         borderRadius: 2