my-bar/front/src/app/pages/ingredients/IngredientsPage.js

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Toolbar from "@mui/material/Toolbar";
import Paper from "@mui/material/Paper";
import {Fab, FormControl, InputAdornment, InputLabel, OutlinedInput, Tabs} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import * as React from "react";
import {useEffect, useMemo, useState} from "react";
import {Loading} from "../../../components/core/Loading";
import {requests} from "../../../requests";
import {useAlert} from "../../../hooks/useAlert";
import {IngredientInfoModal} from "../../../components/Ingredients/IngredientInfoModal";
import {api} from "../../../lib/clients/api";
import Tab from "@mui/material/Tab";
import {a11yProps} from "../../../components/core/tabProps";
import {CustomTabPanel} from "../../../components/core/TabPanel";
import {IngredientList} from "../../../components/Ingredients/IngredientList";
import {blue} from "@mui/material/colors";
import UpIcon from "@mui/icons-material/KeyboardArrowUp";
import {useSelect} from "../../../hooks/useSelect";

export function IngredientsPage() {
    const [value, setValue] = React.useState(0);
    const handleChange = (event, newValue) => setValue(newValue);
    const [loading, setLoading] = useState(true);
    const [findString, setFindString] = useState("");
    const [ingredients, setIngredients] = useState([]);
    const {getIngredient, selectIngredient} = useSelect();
    const {createError, createSuccess} = useAlert();

    useEffect(() => {
        api().get(requests.bar.ingredientList)
            .then((r) => {
                setIngredients(r.data)
                setLoading(false);
            })
            .catch(() => {
                createError("Ошибка получения списка ингредиентов");
                setLoading(false);
            })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const visibleIngredients = useMemo(() => {
        if (findString.length === 0) {
            return ingredients;
        }
        const reg = new RegExp("(.*?)" + findString + "(.*?)", "i");
        return ingredients.filter((ingredient) => ingredient.name.match(reg) !== null);
    }, [findString, ingredients]);
    const ingredientsToAdd = visibleIngredients.filter((ingredient) => !ingredient.have);
    const ingredientsInBar = visibleIngredients.filter((ingredient) => ingredient.have);

    const changeHandler = (row, value) => {
        const newState = ingredients.map((ingredient) => {
            if (ingredient.id === row.id) {
                return {
                    ...ingredient,
                    have: value
                }
            } else {
                return ingredient;
            }
        })
        const url = `${requests.bar.ingredient}?id=${row.id}`;
        const request = value ? api().put(url) : api().delete(url);
        request
            .then(() => {
                setIngredients(newState);
            })
            .catch(() => {
                createError("Ошибка изменения ингредиента");
            });
    }
    const handleOpenModal = (i) => {
        selectIngredient(i)
    }
    const handleDelete = (id) => {
        const newState = ingredients.filter((ingredient) => ingredient.id !== id);
        setIngredients(newState)

        api().delete(`${requests.bar.ingredient}/${id}`)
            .then((r) => createSuccess("Ингредиент удален"))
            .catch(() => createError("Ошибка удаления ингредиента. Перезагрузите страницу"))
    }

    return (
        <Box>
            {/*Заголовок*/}
            <Toolbar>
                <Typography variant="h6" component="div" sx={{flexGrow: 1}}>Ингредиенты бара</Typography>
            </Toolbar>
            {/*Поиск*/}
            <Paper elevation={6} sx={{my: 2}}>
                <FormControl sx={{m: 1, width: 'calc(100% - 20px'}}>
                    <InputLabel htmlFor="outlined-adornment-amount">Поиск</InputLabel>
                    <OutlinedInput
                        onChange={(e) => setFindString(e.target.value)}
                        label="With normal TextField"
                        startAdornment={
                            <InputAdornment position="start">
                                <IconButton edge="end">
                                    <SearchIcon/>
                                </IconButton>
                            </InputAdornment>
                        }
                    />
                </FormControl>
            </Paper>
            {/*Рабочее поле ингредиентов*/}
            <Box>
                <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
                    <Tab label="В баре" {...a11yProps(0)} />
                    <Tab label="Список" {...a11yProps(1)} />
                </Tabs>
            </Box>
            <Box>
                <CustomTabPanel value={value} index={0}>
                    <IngredientList rows={ingredientsInBar} value={false} changeHandler={changeHandler}
                                    infoHandler={handleOpenModal}/>
                </CustomTabPanel>
                <CustomTabPanel value={value} index={1}>
                    <IngredientList rows={ingredientsToAdd} value={true} changeHandler={changeHandler}
                                    infoHandler={handleOpenModal}/>
                </CustomTabPanel>
            </Box>
            <Fab sx={{
                alpha: '30%',
                position: 'sticky',
                bottom: '16px',
                color: 'common.white',
                bgcolor: blue[600],
                '&:hover': {
                    bgcolor: blue[600],
                },
            }}
                 onClick={() => window.window.scrollTo(0, 0)}
                 aria-label='Expand'
                 color='inherit'>
                <UpIcon/>
            </Fab>
            {/*Загрузчик*/}
            <Loading loading={loading}/>
            {/*Модальное окно информации об ингредиенте*/}
            <IngredientInfoModal ingredient={getIngredient()} handleDelete={handleDelete}/>
        </Box>
    )
}