burger-online

1
import React from 'react'
2
import {useSelector} from 'react-redux'
3
import CardLoader from '../../components/UI/card-loader/card-loader'
4
import OrderCard from '../../components/order-card/order-card'
5
import {useAppDispatch} from '../../hooks'
6
import {
7
  profileOrderConnect as connect,
8
  profileOrderDisconnect as disconnect,
9
} from '../../redux/profile-orders/actions'
10
import {profileOrderStore} from '../../redux/profile-orders/reducer'
11
import {fetchCheckUser} from '../../redux/user/actions'
12
import {WS_ORDERS_URL, wsStatus} from '../../utils/constants'
13
import ErrorPage from '../error-page'
14
import styles from './profile-orders.module.css'
15

16
const ProfileOrders = () => {
17
  const dispatch = useAppDispatch()
18
  const {orders, wsStatusOrders, connectingError} = useSelector(profileOrderStore)
19
  const token = localStorage.getItem('access-token')?.replace('Bearer ', '')
20

21
  React.useEffect(() => {
22
    if (token) {
23
      dispatch(connect(`${WS_ORDERS_URL}?token=${token}`))
24
    } else {
25
      dispatch(fetchCheckUser())
26
    }
27
    return () => {
28
      dispatch(disconnect())
29
    }
30
  }, [dispatch, token])
31

32
  if (connectingError) return <ErrorPage />
33
  return (
34
    <div className={`custom-scroll ${styles.content}`}>
35
      {wsStatusOrders === wsStatus.connecting ? (
36
        [...Array(5)].map((_, i) => (
37
          <div key={i}>
38
            <CardLoader />
39
          </div>
40
        ))
41
      ) : !orders?.length ? (
42
        <div>
43
          <h1 style={{textAlign: 'center'}} className='text_type_main-large'>
44
            История заказов пуста
45
          </h1>
46
        </div>
47
      ) : (
48
        [...orders]?.reverse().map(order => <OrderCard key={order._id} {...order} />)
49
      )}
50
    </div>
51
  )
52
}
53

54
export default ProfileOrders
55