burger-online

1
import React from 'react'
2
import {useSelector} from 'react-redux'
3
import {ingredientsStore} from '../../redux/ingredients/slice'
4
import {isBun, isMain, isSauce} from '../../utils/constants'
5
import IngredientsLoader from '../UI/ingredients-loader/ingredients-loader'
6
import Categories from '../categories/categories'
7
import TabList from '../tab-list/tab-list'
8
import styles from './burger-ingredients.module.css'
9

10
const BurgerIngredients = () => {
11
  const {status, items} = useSelector(ingredientsStore)
12

13
  const sortedCategories = React.useMemo(() => {
14
    return [
15
      {id: 1, title: 'Булки', items: items.filter(item => item.type === isBun)},
16
      {id: 2, title: 'Соусы', items: items.filter(item => item.type === isSauce)},
17
      {id: 3, title: 'Начинки', items: items.filter(item => item.type === isMain)},
18
    ]
19
  }, [items])
20

21
  return (
22
    <section className={`content ${styles.content}`}>
23
      <TabList />
24

25
      <div className={`custom-scroll ${styles.scroll}`}>
26
        {sortedCategories.map(category =>
27
          status === 'LOADING' ? (
28
            [...Array(2)].map((_, i) => <IngredientsLoader key={i} />)
29
          ) : (
30
            <Categories key={category.id} {...category} />
31
          )
32
        )}
33
      </div>
34
    </section>
35
  )
36
}
37

38
export default BurgerIngredients
39