burger-online

1
import React from 'react'
2
import {useSelector} from 'react-redux'
3
import {Navigate, useLocation} from 'react-router-dom'
4
import Preloader from '../components/UI/preloader/preloader'
5
import {userStore} from '../redux/user/slice'
6

7
type TProtectedProps = {
8
  onlyUnAuth?: boolean
9
  element: JSX.Element
10
}
11

12
const Protected: React.FC<TProtectedProps> = ({onlyUnAuth = false, element}) => {
13
  const {isAuthChecked, user} = useSelector(userStore)
14

15
  const location = useLocation()
16

17
  if (!isAuthChecked) {
18
    return <Preloader />
19
  }
20

21
  if (onlyUnAuth && user) {
22
    const {from}: {from: {pathname: string}} = location.state || {from: {pathname: '/'}}
23
    return <Navigate to={from.pathname} />
24
  }
25

26
  if (!onlyUnAuth && !user) {
27
    return <Navigate to='/login' state={{from: {pathname: location}}} />
28
  }
29
  return element
30
}
31

32
export const OnlyAuth = Protected
33
export const OnlyUnAuth: React.FC<TProtectedProps> = ({element}) => (
34
  <Protected onlyUnAuth={true} element={element} />
35
)
36