Se agrega redux ara control de menue, token y estadop del perfil de usuario

package.json

@@ -11,9 +11,12 @@
     "@types/node": "^16.11.56",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",

src/App.tsx

@@ -1,32 +1,21 @@
 import 'bootstrap/dist/css/bootstrap.min.css'
 import { BrowserRouter, Link, Navigate, Outlet, Route, Routes } from 'react-router-dom'
 import './App.css'
-import DSAuth from '../src/Services/Auth/Auth.Services'
 import { Login } from './Components/Login/Login'
 import { RptViajesPendientes } from './Components/Reportes/RptViajesPendientes'
 import { Home } from './Components/Home/Home'
-import { Protected } from './Components/Home/Protected/Protected'
 import { useEffect } from 'react'
-import ProtectedRoute, { ProtectedRouteProps } from './Components/ProtectedRoute/ProtectedRoute'
+import { useSelector } from 'react-redux'
+import { RootState } from './store/store'
+import Navbar from './Components/Navbar/Navbar'
+import { Logout } from './Components/Logout/Logout'
 
 function App() {
-  const Userlogued = (): boolean => {
-    DSAuth.Validate()
-      .then((response) => {
-        console.log('Crednciales validas')
-        return true
-      })
-      .catch((e: Error) => {
-        console.log('Credenciales apocrifas')
-        return false
-      })
-    return false
-  }
+  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
 
   useEffect(() => {
-    Userlogued()
     console.log('Entro al proceso de router')
-  }, [])
+  }, [UserLogued])
 
   function PageNotFound() {
     return (
@@ -40,20 +29,21 @@ function App() {
     if (!auth) {
       return <Navigate to={redirectPath} replace />
     }
-
     return <Outlet />
   }
 
   return (
     <div className='App'>
       <BrowserRouter>
-        <Link to='login'>login</Link>
+        <Navbar />
+        {/*         <Link to='login'>login</Link>
         <br /> 
-        <Link to='RptViajesPendientes'>Reporte de viajes</Link>
+        {UserLogued ? <Link to='RptViajesPendientes'>Reporte de viajes</Link> : null}*/}
         <Routes>
           <Route path='/' element={<Home />}></Route>
           <Route path='login' element={<Login />}></Route>
-          <Route element={<ProtectedRoute auth={Userlogued()} />}>
+          <Route path='logout' element={<Logout />}></Route>
+          <Route element={<ProtectedRoute auth={UserLogued} />}>
             <Route path='RptViajesPendientes' element={<RptViajesPendientes />} />
           </Route>
           <Route path='*' element={<PageNotFound />} />
@@ -64,8 +54,3 @@ function App() {
 }
 
 export default App
-
-/* export default App
-function useSessionContext(): [any, any] {
-  throw new Error('Function not implemented.')
-} */

src/Components/Home/Home.tsx

@@ -6,7 +6,7 @@ interface IProps {}
 export const Home: FC<IProps> = (props) => {
   return (
     <div>
-      <h1>This is the Guest Layout Page</h1>
+      <h1>This is the Alpha Omega Logistics landing page</h1>
       <Outlet />
     </div>
   )

src/Components/Login/Login.tsx

@@ -2,11 +2,17 @@ import { FC, useEffect, useState } from 'react'
 import { Navigate, useNavigate } from 'react-router-dom'
 import IAuth from '../../Interfaces/Auth/IAuth'
 import DSAuth from '../../Services/Auth/Auth.Services'
+import { useDispatch, useSelector } from 'react-redux'
+import { MenuItemsSlice, populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
+import { UserProfileSlice, populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
+import { RootState } from '../../store/store'
 
 interface IProps {}
 
 export const Login: FC<IProps> = (props) => {
+  const MenuItems = useSelector((state: RootState) => state.MenuItems.MenuItems)
   const navigate = useNavigate()
+  const dispatch = useDispatch()
   const [Usuario, setUsuario] = useState('')
   const [Contrasena, setContrasena] = useState('')
   const [token, setToken] = useState<string>(
@@ -22,6 +28,8 @@ export const Login: FC<IProps> = (props) => {
       .then((response) => {
         localStorage.setItem('token', response.data.token)
         setToken(response.data.token)
+        dispatch(populateMenuItems(response.data.menu))
+        dispatch(populateUserProfile(response.data.token))
         window.location.href = 'http://localhost:3000/login'
       })
       .catch((e: Error) => {
@@ -33,6 +41,7 @@ export const Login: FC<IProps> = (props) => {
     if (token.length > 10) {
       DSAuth.Validate()
         .then((response) => {
+          dispatch(populateUserProfile(token))
           navigate('../RptViajesPendientes', { replace: true })
         })
         .catch((e: Error) => {
@@ -45,13 +54,8 @@ export const Login: FC<IProps> = (props) => {
     ValidateToken()
   }, [])
 
-  useEffect(() => {
-    ValidateToken()
-  }, [])
-
   return (
     <div>
-      {token && <Navigate to='RptViajesPendientes' replace={true} />}
       <div className='Auth-form-container'>
         <form className='Auth-form'>
           <div className='Auth-form-content'>

src/Components/Logout/Logout.tsx

@@ -0,0 +1,44 @@
+import React, { FC, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
+import DSAuth from '../../Services/Auth/Auth.Services'
+
+interface IProps {}
+
+export const Logout: FC<IProps> = (props) => {
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
+  const [token, setToken] = useState<string>(
+    (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
+  )
+
+  useEffect(() => {
+    localStorage.removeItem('token')
+    localStorage.setItem('token', '')
+    dispatch(populateUserProfile(''))
+    //alert('debe regresar al login')
+    window.location.href = 'http://localhost:3000/login'
+  }, [])
+
+  const ValidateToken = () => {
+    if (token.length > 10) {
+      DSAuth.Validate()
+        .then((response) => {
+          dispatch(populateUserProfile(''))
+          window.location.href = 'http://localhost:3000/login'
+        })
+        .catch((e: Error) => {
+          console.log('Debe de salir al login')
+          window.location.href = 'http://localhost:3000/login'
+        })
+    }
+  }
+
+  useEffect(() => {
+    ValidateToken()
+    console.log(token)
+  }, [token])
+
+  return <div>Logout</div>
+}

src/Components/Navbar/Navbar.tsx

@@ -0,0 +1,28 @@
+import { Container, Navbar } from 'react-bootstrap'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { RootState } from '../../store/store'
+
+function AOLNavbar() {
+  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
+  const User = useSelector((state: RootState) => state.UserProfile.UserProfile.User)
+
+  return (
+    <Navbar bg='light'>
+      <Container>
+        <Navbar.Brand href='#home'>AOL</Navbar.Brand>
+        <Navbar.Toggle />
+        <Navbar.Collapse className='justify-content-end'>
+          {UserLogued ? (
+            <Navbar.Text>
+              Usuario: {User} - <Link to='logout'>logout</Link>
+            </Navbar.Text>
+          ) : (
+            <Link to='login'>login</Link>
+          )}
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  )
+}
+export default AOLNavbar

src/Components/Reportes/RptViajesPendientes.tsx

@@ -1,7 +1,34 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { useDispatch } from 'react-redux'
+import DSAuth from '../../Services/Auth/Auth.Services'
+import { UserProfileSlice, populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
 
 interface IProps {}
 
 export const RptViajesPendientes: FC<IProps> = (props) => {
+  const navigate = useNavigate()
+  const [token, setToken] = useState<string>(
+    (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
+  )
+  const dispatch = useDispatch()
+
+  const ValidateToken = () => {
+    if (token.length > 10) {
+      DSAuth.Validate()
+        .then((response) => {
+          dispatch(populateUserProfile(token))
+        })
+        .catch((e: Error) => {
+          navigate('login', { replace: true })
+        })
+    }
+  }
+
+  useEffect(() => {
+    ValidateToken()
+    console.log(token)
+  }, [token])
+
   return <div>RptViajesPendientes</div>
 }

src/Interfaces/Auth/IjwtStructure.ts

@@ -0,0 +1,9 @@
+export default interface IjwtStructure {
+    sub: string;
+    jti: string;
+    iat: string;
+    UserId: number;
+    Usuario: string;
+    Departamento: string;
+    UserType: number,
+}

src/store/features/Auth/MenuItemsSlice.ts

@@ -8,34 +8,11 @@ export const MenuItemsSlice = createSlice({
   initialState: initialState,
   reducers: {
     populateMenuItems : (state, action: PayloadAction<IMenu[]>) => {
-      state.MenuItems = []
+      state.MenuItems = [{ id:0, descripcion:'', padreId:0, posicion:0, url:''}]
       state.MenuItems.push(... action.payload)
     },
-    addMenuItems : (state, action: PayloadAction<IMenu>) => {
-      var Existe = state.MenuItems.find(function(item) {
-        return item.id === action.payload.id;
-      });
-     if (!Existe) state.MenuItems.push(action.payload)
-    },
-    updateMenuItems : (state, action: PayloadAction<IMenu>) => {
-      const i = state.MenuItems.findIndex(_element => _element.id === action.payload.id);
-      if (i > -1) state.MenuItems[i] = action.payload;
-      else state.MenuItems.push(action.payload);
-
-    },
-    deleteMenuItems : (state, action: PayloadAction<number>) => {
-      const newArr = state.MenuItems.filter(data => data.id != action.payload);
-      state.MenuItems=newArr
-    },
-    InitMenuItems : (state, action: PayloadAction<number>) => {
-      state.MenuItems.splice(0,state.MenuItems.length-1)
-    },
   },
 })
 
-export const { addMenuItems, 
-  populateMenuItems, 
-  updateMenuItems, 
-  deleteMenuItems,
-  InitMenuItems } = MenuItemsSlice.actions;
+export const { populateMenuItems } = MenuItemsSlice.actions;
 export default MenuItemsSlice.reducer;

src/store/features/Auth/UserProfileSlice.ts

@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import IjwtStructure from '../../../Interfaces/Auth/IjwtStructure'
+import jwt_decode from 'jwt-decode'
+//import IMenu from '../../../Interfaces/Auth/IMenu';
+const UserProfile = { token:'', logueado: false, User:'', IDUser: '', Department: '', UserType: ''  }
+const initialState = { UserProfile }
+
+export const UserProfileSlice = createSlice({
+  name: 'UserProfile',
+  initialState: initialState,
+  reducers: {
+    populateUserProfile : (state, action: PayloadAction<string>) => {
+      state.UserProfile.token = action.payload
+      var values: IjwtStructure = jwt_decode(action.payload)
+      state.UserProfile.User = JSON.stringify(values.Usuario).replaceAll('"','')
+      state.UserProfile.IDUser = JSON.stringify(values.UserId).replaceAll('"','')
+      state.UserProfile.Department = JSON.stringify(values.Departamento).replaceAll('"','')
+      state.UserProfile.UserType = JSON.stringify(values.UserType).replaceAll('"','')
+      state.UserProfile.logueado = true
+    },
+    setStatus : (state, action: PayloadAction<boolean>) => {
+      state.UserProfile.logueado = action.payload
+    },
+  },
+})
+
+export const { populateUserProfile, setStatus } = UserProfileSlice.actions;
+export default UserProfileSlice.reducer;

src/store/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/store/store.ts

@@ -1,12 +1,14 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { MenuItemsSlice } from './features/Auth/MenuItemsSlice'
-
+import { UserProfileSlice } from './features/Auth/UserProfileSlice'
 
 export const store = configureStore({
   reducer: {
-   // MenuItemsSlice: MenuItemsSlice
+    MenuItems: MenuItemsSlice.reducer,
+    UserProfile: UserProfileSlice.reducer
   }
 })
 
 export type RootState = ReturnType<typeof store.getState>
 export type AppDispatch = typeof store.dispatch
+export default store

yarn.lock

@@ -1035,7 +1035,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -1548,6 +1548,18 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.11.5":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
+"@react-aria/ssr@^3.2.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.3.0.tgz#25e81daf0c7a270a4a891159d8d984578e4512d8"
+  integrity sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
 "@reduxjs/toolkit@^1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.5.tgz#c14bece03ee08be88467f22dc0ecf9cf875527cd"
@@ -1558,6 +1570,28 @@
     redux-thunk "^2.4.1"
     reselect "^4.1.5"
 
+"@restart/hooks@^0.4.6", "@restart/hooks@^0.4.7":
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.7.tgz#d79ca6472c01ce04389fc73d4a79af1b5e33cd39"
+  integrity sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==
+  dependencies:
+    dequal "^2.0.2"
+
+"@restart/ui@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.3.1.tgz#ae16be26128cc205efb7e0bf93d1f34deb1fe116"
+  integrity sha512-MYvMs2eeZTHu2dBJHOXKx72vxzEZeWbZx2z1QjeXq62iYjpjIyukBC2ZEy8x+sb9Gl0AiOiHkPXrl1wn95aOGQ==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@popperjs/core" "^2.11.5"
+    "@react-aria/ssr" "^3.2.0"
+    "@restart/hooks" "^0.4.7"
+    "@types/warning" "^3.0.0"
+    dequal "^2.0.2"
+    dom-helpers "^5.2.0"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -1912,7 +1946,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -2029,7 +2063,24 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.0.17":
+"@types/react-redux@^7.1.24":
+  version "7.1.24"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
+  integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react-transition-group@^4.4.4":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@>=16.9.11", "@types/react@^18.0.17":
   version "18.0.17"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.17.tgz#4583d9c322d67efe4b39a935d223edcc7050ccf4"
   integrity sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==
@@ -2099,6 +2150,11 @@
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==
+
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -3054,6 +3110,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^5.2.2:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.1.tgz#d0610b0b90d125196a2894d35366f734e5d7aa32"
@@ -3573,6 +3634,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
+dequal@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -3670,6 +3736,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -4960,6 +5034,13 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -5834,6 +5915,11 @@ jsonpointer@^5.0.0:
     array-includes "^3.1.5"
     object.assign "^4.1.3"
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -5963,7 +6049,7 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7162,7 +7248,15 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types-extra@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
+  integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
+  dependencies:
+    react-is "^16.3.2"
+    warning "^4.0.0"
+
+prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7257,6 +7351,24 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-bootstrap@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.5.0.tgz#e25e649e37f080d38eeb92ad5b4ed562a1d7de62"
+  integrity sha512-j/aLR+okzbYk61TM3eDOU1NqOqnUdwyVrF+ojoCRUxPdzc2R0xXvqyRsjSoyRoCo7n82Fs/LWjPCin/QJNdwvA==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@restart/hooks" "^0.4.6"
+    "@restart/ui" "^1.3.1"
+    "@types/react-transition-group" "^4.4.4"
+    classnames "^2.3.1"
+    dom-helpers "^5.2.1"
+    invariant "^2.2.4"
+    prop-types "^15.8.1"
+    prop-types-extra "^1.1.0"
+    react-transition-group "^4.4.2"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -7300,7 +7412,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7315,6 +7427,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-redux@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.2.tgz#bc2a304bb21e79c6808e3e47c50fe1caf62f7aad"
@@ -7402,6 +7519,16 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-transition-group@^4.4.2:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -7465,7 +7592,7 @@ redux-thunk@^2.4.1:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
   integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
-redux@^4.1.2:
+redux@^4.0.0, redux@^4.1.2:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
   integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
@@ -8473,6 +8600,16 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -8626,6 +8763,13 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
+warning@^4.0.0, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"