burger-online

1
import React from 'react'
2
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'
3
import IngredientDetails from '../components/ingredient-details/ingredient-details'
4
import Modal from '../components/modal/modal'
5
import OrderModal from '../components/order-modal/order-modal'
6
import { OnlyAuth, OnlyUnAuth } from '../hoc/protected-route'
7
import { useAppDispatch } from '../hooks'
8
import ErrorPage from '../pages/error-page'
9
import FeedOrders from '../pages/feed-orders'
10
import ForgotPassword from '../pages/forgot-password'
11
import Home from '../pages/home'
12
import Ingredient from '../pages/ingredient'
13
import Layout from '../pages/layout'
14
import Login from '../pages/login'
15
import Order from '../pages/order'
16
import Profile from '../pages/profile'
17
import ProfileOrders from '../pages/profile-orders'
18
import ProfileUser from '../pages/profile-user'
19
import Register from '../pages/register'
20
import ResetPassword from '../pages/reset-password'
21
import { fetchIngredients } from '../redux/ingredients/actions'
22
import { fetchCheckUser } from '../redux/user/actions'
23

24
function App() {
25
  const navigate = useNavigate()
26
  const dispatch = useAppDispatch()
27
  const location = useLocation()
28
  const background = location.state && location.state.background
29

30
  React.useEffect(() => {
31
    dispatch(fetchCheckUser())
32
    dispatch(fetchIngredients())
33
  }, [dispatch])
34

35
  const handleCLoseModal = () => {
36
    navigate(-1)
37
  }
38
  const ingredientModal = (
39
    <Modal onClose={handleCLoseModal}>
40
      <IngredientDetails />
41
    </Modal>
42
  )
43
  const orderModal = (
44
    <Modal onClose={handleCLoseModal}>
45
      <OrderModal />
46
    </Modal>
47
  )
48

49
  return (
50
    <>
51
      <Routes location={background || location}>
52
        <Route path='/' element={<Layout />}>
53
          <Route index element={<Home />} />
54
          <Route path='/ingredients/:id' element={<Ingredient />} />
55
          <Route path='/feed' element={<FeedOrders />} />
56
          <Route path='/feed/:number' element={<Order />} />
57
          <Route path='/profile' element={<OnlyAuth element={<Profile />} />}>
58
            <Route index element={<OnlyAuth element={<ProfileUser />} />} />
59
            <Route path='/profile/order' element={<OnlyAuth element={<ProfileOrders />} />} />
60
          </Route>
61
          <Route path='/profile/order/:number' element={<OnlyAuth element={<Order />} />} />
62
          <Route path='/register' element={<OnlyUnAuth element={<Register />} />} />
63
          <Route path='/login' element={<OnlyUnAuth element={<Login />} />} />
64
          <Route path='/forgot-password' element={<OnlyUnAuth element={<ForgotPassword />} />} />
65
          <Route path='/reset-password' element={<OnlyUnAuth element={<ResetPassword />} />} />
66
          <Route path='/*' element={<ErrorPage />} />
67
        </Route>
68
      </Routes>
69
      {background && (
70
        <Routes>
71
          <Route path='/feed/:number' element={orderModal} />
72
          <Route path='/profile/order/:number' element={orderModal} />
73
          <Route path='/ingredients/:id' element={ingredientModal} />
74
        </Routes>
75
      )}
76
    </>
77
  )
78
}
79

80
export default App
81

82
/* 
83
const router = createBrowserRouter([
84
  {
85
    path: '/',
86
    element: <Layout />,
87
    errorElement: <ErrorPage />,
88
    children: [
89
      {
90
        path: 'ingredients',
91
        element: <ProtectedRoute element={<Home />} />,
92
        children: [
93
          {
94
            path: '/ingredients/:id',
95
            element: <ProtectedRoute element={ingredientModal} />
96
          }
97
        ]
98
      },
99
      {
100
        path: 'profile',
101
        element: <ProtectedRoute element={<Profile />} />
102
      },
103
      {
104
        path: 'login',
105
        element: <Login />
106
      },
107
      {
108
        path: 'register',
109
        element: <Register />
110
      },
111
      {
112
        path: 'forgot-password',
113
        element: <ForgotPassword />
114
      },
115
      {
116
        path: 'reset-password',
117
        element: <ResetPassword />
118
      }
119
    ]
120
  }
121
])
122
*/
123