burger-online

1
import {CurrencyIcon, FormattedDate} from '@ya.praktikum/react-developer-burger-ui-components'
2
import React from 'react'
3
import {useSelector} from 'react-redux'
4
import {useParams} from 'react-router-dom'
5
import {useAppDispatch, useOrder} from '../../hooks'
6
import ErrorPage from '../../pages/error-page'
7
import {fetchByClickingOnTheCardOrder} from '../../redux/constructor/actions'
8
import {constructorStore} from '../../redux/constructor/slice'
9
import {
10
  feedOrdersConnect as connect,
11
  feedOrdersDisconnect as disconnect,
12
} from '../../redux/feed-orders/actions'
13
import {TCorrectCardInfo, TIngredient} from '../../types'
14
import {WS_ORDERS_ALL_URL} from '../../utils/constants'
15
import Preloader from '../UI/preloader/preloader'
16
import OrderComposition from '../order-composition/order-composition'
17
import styles from './order-modal.module.css'
18

19
const OrderModal = () => {
20
  const dispatch = useAppDispatch()
21
  const {number} = useParams()
22
  const {order, statusOrder} = useSelector(constructorStore)
23

24
  const correctCardInfo = useOrder(order.ingredients) as TCorrectCardInfo
25

26
  const correctCardInfoAddCount: TIngredient[] = React.useMemo(() => {
27
    const uniqueIngredientMap = new Map()
28

29
    if (typeof correctCardInfo.items === 'object') {
30
      for (const ingredient of correctCardInfo.items) {
31
        const ingredientString = JSON.stringify(ingredient)
32

33
        if (uniqueIngredientMap.has(ingredientString)) {
34
          const existingIngredient = uniqueIngredientMap.get(ingredientString)
35
          existingIngredient.count += 1
36
        } else {
37
          uniqueIngredientMap.set(ingredientString, {...ingredient, count: 1})
38
        }
39
      }
40
    }
41
    return Array.from(uniqueIngredientMap.values())
42
  }, [correctCardInfo])
43

44
  React.useEffect(() => {
45
    number && dispatch(fetchByClickingOnTheCardOrder(number))
46
    dispatch(connect(WS_ORDERS_ALL_URL))
47
    return () => {
48
      dispatch(disconnect())
49
    }
50
  }, [number, dispatch])
51

52
  if (statusOrder === 'LOADING')
53
    return (
54
      <div className={styles.order}>
55
        <Preloader />
56
      </div>
57
    )
58
  if (statusOrder === 'ERROR') return <ErrorPage />
59
  return (
60
    <div className={styles.order}>
61
      <span className={`text_type_digits-default ${styles.orderNumber}`}>#{order?.number}</span>
62
      <h3 className={`text text_type_main-medium ${styles.orderTitle}`}>{order?.name}</h3>
63
      <p
64
        className={`text text_type_main-default ${
65
          order.status === 'done'
66
            ? 'text_color_success'
67
            : order.status === 'cancelled'
68
            ? 'text_color_error'
69
            : ''
70
        } ${styles.orderStatus}`}
71
      >
72
        {order?.status === 'done' ? 'Выполнен' : order.status === 'cancelled' ? 'Отменен' : 'Готовится'}
73
      </p>
74
      <h3 className={`text text_type_main-medium ${styles.titleListText}`}>Состав:</h3>
75
      <div className={`custom-scroll ${styles.list}`}>
76
        {correctCardInfoAddCount.map((item, i) => (
77
          <OrderComposition key={i} {...item} />
78
        ))}
79
      </div>
80

81
      <div className={styles.orderDate}>
82
        {order && (
83
          <FormattedDate
84
            className='text text_type_main-default text_color_inactive'
85
            date={new Date(order.updatedAt)}
86
          />
87
        )}
88
        <span className={`text_type_digits-default ${styles.orderFullPrice}`}>
89
          {correctCardInfo?.totalPrice} <CurrencyIcon type='primary' />
90
        </span>
91
      </div>
92
    </div>
93
  )
94
}
95

96
export default OrderModal
97