ЯсноПонятно24

код не работает где ошибка import { useState, useRef, useEffect, FC } from 'react'; import { useInView } from 'react-intersection-observer'; import { useSelector, useDispatch } from 'react-redux'; import { TTabMode } from '@utils-types'; import { BurgerIngredientsUI } from '../ui/burger-ingredients'; import { getIngredients } from '../../services/slices/ingredientSlice'; export const BurgerIngredients: FC = () => { /** TODO: взять переменные из стора */ const burgerIngredients = useSelector(getIngredients); const buns = burgerIngredients.filter((burgerIngredient) => burgerIngredient.type === 'bun'); const mains = burgerIngredients.filter((burgerIngredient) => burgerIngredient.type === 'main'); const sauces = burgerIngredients.filter((burgerIngredient) => burgerIngredient.type === 'sauce'); // const buns = []; // const mains = []; // const sauces = []; const [currentTab, setCurrentTab] = useState<TTabMode>('bun'); const titleBunRef = useRef<HTMLHeadingElement>(null); const titleMainRef = useRef<HTMLHeadingElement>(null); const titleSaucesRef = useRef<HTMLHeadingElement>(null); const [bunsRef, inViewBuns] = useInView({ threshold: 0 }); const [mainsRef, inViewFilling] = useInView({ threshold: 0 }); const [saucesRef, inViewSauces] = useInView({ threshold: 0 }); useEffect(() => { if (inViewBuns) { setCurrentTab('bun'); } else if (inViewSauces) { setCurrentTab('sauce'); } else if (inViewFilling) { setCurrentTab('main'); } }, [inViewBuns, inViewFilling, inViewSauces]); const onTabClick = (tab: string) => { setCurrentTab(tab as TTabMode); if (tab === 'bun') titleBunRef.current?.scrollIntoView({ behavior: 'smooth' }); if (tab === 'main') titleMainRef.current?.scrollIntoView({ behavior: 'smooth' }); if (tab === 'sauce') titleSaucesRef.current?.scrollIntoView({ behavior: 'smooth' }); }; // return null; return ( <BurgerIngredientsUI currentTab={currentTab} buns={buns} mains={mains} sauces={sauces} titleBunRef={titleBunRef} titleMainRef={titleMainRef} titleSaucesRef={titleSaucesRef} bunsRef={bunsRef} mainsRef={mainsRef} saucesRef={saucesRef} onTabClick={onTabClick} /> ); }; import { createSlice, createAsyncThunk, PayloadAction, nanoid } from '@reduxjs/toolkit'; import { TIngredient } from '@utils-types'; import { getIngredientsApi } from '../../utils/burger-api'; type TIngredientState = { ingredients: TIngredient[]; loading: boolean; error?: string | null } const initialState: TIngredientState = { ingredients: [], loading: false, error: '' } export const fetchIngredients = createAsyncThunk<TIngredient[]>( 'ingredients/fetchIngredients', async () => { const response = await getIngredientsApi(); return response; } ); const ingredientSlice = createSlice({ name: 'burgerIngredients', initialState, reducers: {}, selectors: { getIngredients: (state) => state.ingredients, }, extraReducers: (builder) => { builder .addCase(fetchIngredients.pending, (state) => { state.loading = true; }) .addCase(fetchIngredients.fulfilled, (state, action: PayloadAction<TIngredient[]>) => { state.ingredients = action.payload; state.loading = false; }) .addCase(fetchIngredients.rejected, (state) => { state.error = 'Ошибка при получении данных'; state.loading = false; }); } }); export const ingredientSliceReducer = ingredientSlice.reducer; export const {getIngredients} = ingredientSlice.selectors;