burger-online

1
import {Counter, CurrencyIcon} from '@ya.praktikum/react-developer-burger-ui-components'
2
import React from 'react'
3
import {useDrag} from 'react-dnd'
4
import {useSelector} from 'react-redux'
5
import {Link, useLocation} from 'react-router-dom'
6
import {constructorStore} from '../../redux/constructor/slice'
7
import {TIngredient} from '../../types'
8
import styles from './category-ingredients.module.css'
9

10
const CategoryIngredients: React.FC<{element: TIngredient}> = ({element}) => {
11
  const {bun, addedIngredients} = useSelector(constructorStore)
12
  const location = useLocation()
13

14
  const countIngredient = React.useMemo(() => {
15
    return addedIngredients.filter((item: TIngredient) => item.name === element.name).length
16
  }, [addedIngredients, element.name])
17

18
  const [{isDrag}, dragRef] = useDrag({
19
    type: 'ingredient',
20
    item: element,
21
    collect: monitor => ({
22
      isDrag: monitor.isDragging(),
23
    }),
24
  })
25

26
  const classesAnimation = isDrag ? [styles.ingredient, styles.indicator] : [styles.ingredient]
27
  return (
28
    <Link to={`/ingredients/${element._id}`} state={{background: location}} className={styles.link}>
29
      <figure ref={dragRef} className={classesAnimation.join(' ')} draggable={false}>
30
        {countIngredient > 0 && <Counter count={countIngredient} size='default' extraClass='m-1' />}
31
        {bun.name === element.name && <Counter count={1} size='default' extraClass='m-1' />}
32

33
        <img loading='lazy' src={element.image} alt={element.name} />
34

35
        <figcaption className={styles.figcaption}>
36
          <div className={styles.info}>
37
            <span className='text_type_digits-default'>{element.price}</span>
38
            <CurrencyIcon type='primary' />
39
          </div>
40
          <h4 className='text text_type_main-default'>{element.name}</h4>
41
        </figcaption>
42
      </figure>
43
    </Link>
44
  )
45
}
46

47
export default CategoryIngredients
48