my-bar/front/src/app/pages/cocktails/CocktailsPageContent.js

import Grid from "@mui/material/Grid";
import {useAlert} from "../../../hooks/useAlert";
import * as React from "react";
import {useCallback, useEffect, useState} from "react";
import {Cocktail} from "../../../components/cocktails/Cocktail";
import {Fab, Skeleton} from "@mui/material";
import Box from "@mui/material/Box";
import {NoResult} from "../../../components/cocktails/NoResult";
import {FilterBlock} from "../../../components/cocktails/FilterBlock";
import {CocktailInfoModal} from "../../../components/cocktails/CocktailInfoModal";
import {useUser} from "../../../hooks/useUser";
import {blue} from "@mui/material/colors";
import UpIcon from "@mui/icons-material/KeyboardArrowUp";
import {useSelect} from "../../../hooks/useSelect";
import Paper from "@mui/material/Paper";
import CheckMarks from "../../../components/cocktails/CheckMarks";
import {cocktailClient} from "../../../lib/clients/CocktailClient";

const emptyFilter = {
    search: "",
    all: false,
    hidden: true,
    onlyFavourite: false,
    glass: [],
    category: [],
    alcohol: [],
    iCount: [],
    ingredient: [],
    inMenu: "",
    sorting: "Название по возрастанию"
}

const CocktailsPageContent = () => {
    const {user} = useUser();
    const {createError, createSuccess} = useAlert();
    const [rows, setRows] = useState([]);
    const [filter, setFilter] = useState(emptyFilter)
    // const [chips, setChips] = useState([])
    const chips = [];
    const [page, setPage] = useState(-1);
    const [load, setLoad] = useState(false);
    const [isEnd, setIsEnd] = useState(false);
    const [isNew, setIsNew] = useState(true);

    const {selectCocktail, getCocktail, getOpenCocktail} = useSelect();

    const loading = useCallback(() => {
        const size = Math.floor((window.innerWidth) / 350) * 5;
        if (load || (!isNew && isEnd)) {
            return false;
        }
        cocktailClient.getMenu(setRows, setIsNew, setPage, setLoad, setIsEnd, isNew, rows, page, size, filter, createError);
        // eslint-disable-next-line
    }, [load, isEnd, page]);

    useEffect(() => {
        const handleScroll = () => {
            const {scrollTop, scrollHeight, clientHeight} = document.documentElement;
            if (scrollTop + clientHeight >= scrollHeight - 100) {
                loading();
            }
        }
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
        // eslint-disable-next-line
    }, [loading]);
    // eslint-disable-next-line
    useEffect(() => loading(), [filter])

    const renderSkeleton = () => {
        return Array.from({length: 3}, () => null)
            .map((v, index) => <Skeleton sx={{m: 2}}
                                         key={index}
                                         variant="rounded"
                                         width={350}
                                         height={690}/>);
    }
    const handleChangeRating = (row, value) => {
        const newState = rows.map((r) => {
            if (row.id === r.id) {
                let newRating = r.rating;
                newRating.rating = value
                return {
                    ...r,
                    rating: newRating
                }
            }
            return r;
        })
        cocktailClient.changeRating(row.id, newState, value, setRows, createSuccess, createError)

    }
    const handleFilterChange = (filterName, value) => {
        const newState = {
            ...filter,
            [filterName]: value
        }
        setFilter(newState)
        setIsNew(true);
        setIsEnd(false);
        setPage(-1);
    }
    const handleFavourite = (row) => {
        const value = !row.rating.favourite;
        const newState = rows.map((r) => {
            if (r.id === row.id) {
                let newRating = r.rating;
                newRating.favourite = value;
                return {
                    ...r,
                    rating: newRating
                }
            }
            return r;
        });
        cocktailClient.changeFavourite(value, row.id, newState, setRows, createSuccess, createError)
    }
    const handleFilterClear = () => {
        setFilter(emptyFilter);
        setIsNew(true);
        setIsEnd(false);
        setPage(-1);
    }

    const handleSelectCocktail = (row) => selectCocktail(row.id)
    const deleteHandle = (row) => cocktailClient.deleteCocktail(row.id, rows, setRows, createSuccess, createError)
    const hideHandler = (id) => {
        cocktailClient.hiddenCocktail(id)
            .then(() => {
                createSuccess("Коктейль скрыт успешно");
                setRows(rows.filter((r) => r.id !== id))
            }).catch(() => createError("Ошибка при попытке скрыть коктейль"))
    }

    return (
        <Box>
            {/*<Loading loading={load}/>*/}
            {/*Модальное окно информации о коктейле*/}
            <CocktailInfoModal row={getCocktail()} open={getOpenCocktail()}/>
            {/*Блок фильтров*/}
            <FilterBlock
                filter={filter}
                handleFilterChange={handleFilterChange}
                handleClearFilter={handleFilterClear}
                barmen={user.role !== 'USER'}
            />

            {
                (filter.all && filter.iCount === 1) && (
                    <Paper sx={{mt: 1}}>
                        <CheckMarks rows={chips} name={"Выбор ингредиента"} filterName={"ingredient"}
                                    filterValue={filter.ingredient}
                                    handleChange={handleFilterChange}
                                    identity
                        />
                    </Paper>
                )
            }
            <Box>
                {/*Основное содержимое*/}
                <Grid container rowSpacing={2} columnSpacing={{xs: 1, sm: 1, md: 2}} sx={{m: 1}}>
                    {rows.length > 0 && rows.map((row) => {
                        return (
                            <Cocktail key={row.id} row={row} handleFavourite={handleFavourite}
                                      handleChangeRating={handleChangeRating}
                                      handleSelect={handleSelectCocktail}
                                      deleteHandler={deleteHandle}
                                      hideHandler={hideHandler}
                            />
                        )
                    })}
                    {load && renderSkeleton()}
                    {rows.length === 0 && (<NoResult/>)}
                </Grid>
            </Box>
            <Fab sx={{
                alpha: '30%',
                position: 'sticky',
                left: 'calc(100% - 16px)',
                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>
        </Box>
    );
}

export default CocktailsPageContent;