burger-online

1
import React from 'react'
2
import {useAppDispatch} from '../../hooks'
3
import {getCurrentTab} from '../../redux/ingredients/slice'
4
import {isBun, isHeaders, isMain, isSauce, tabBun, tabMain, tabSauce} from '../../utils/constants'
5
import CategoryIngredients from '../category-ingredients/category-ingredients'
6
import styles from './categories.module.css'
7
import {TCategories} from './types'
8

9
const Categories: React.FC<TCategories> = ({title, items}) => {
10
  const dispatch = useAppDispatch()
11

12
  const targetRef = React.useRef<HTMLDivElement>(null)
13
  React.useEffect(() => {
14
    const observer = new IntersectionObserver(callBack, {threshold: 0.5})
15

16
    function callBack(entries: IntersectionObserverEntry[]) {
17
      entries.forEach((entry: IntersectionObserverEntry) => {
18
        if (entry.isIntersecting) {
19
          if (entry.target.id === isBun) dispatch(getCurrentTab(tabBun))
20
          if (entry.target.id === isSauce) dispatch(getCurrentTab(tabSauce))
21
          if (entry.target.id === isMain) dispatch(getCurrentTab(tabMain))
22
        }
23
      })
24
    }
25

26
    const currentTarget = targetRef.current
27
    if (currentTarget) observer.observe(currentTarget)
28

29
    return () => {
30
      currentTarget && observer.unobserve(currentTarget)
31
    }
32
  }, [targetRef, dispatch])
33

34
  return (
35
    <div
36
      ref={targetRef}
37
      id={`${isHeaders[title as keyof typeof isHeaders]}`}
38
      className={`categories ${styles.items}`}
39
    >
40
      <h2 className='text text_type_main-medium'>{title}</h2>
41
      {items.map(item => (
42
        <CategoryIngredients element={item} key={item._id} />
43
      ))}
44
    </div>
45
  )
46
}
47

48
export default Categories
49