@licklist/design 0.78.7 → 0.78.8

package/src/auth/AccessDenied/AccessDenied.tsx

@@ -1,20 +1,21 @@
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import { FaLock } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
 
 export const AccessDenied = () => {
   const { t } = useTranslation('App')
   const user = useUser()
+  const navigate = useNavigate()
 
   const onGoToHomepage = () => {
-    RouteService.redirectTo('/')
+    navigate('/')
   }
 
   const logOutHandler = () => {
     user.logout()
-    RouteService.redirectTo('/')
+    navigate('/')
   }
 
   return (

package/src/auth/Authorizer.tsx

@@ -1,10 +1,10 @@
 import { ReactNode, useEffect, useState, useCallback } from 'react'
-import { matchPath } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { ROUTES, MATCH_ROUTE_PATTERNS } from '@licklist/core/dist/Config'
 import useAuthApi from '@licklist/plugins/dist/hooks/Api/useAuthApi'
 import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { BlockLoader } from '../static/loader/BlockLoader'
 
 export interface AuthorizerProps {
@@ -17,6 +17,8 @@ function Authorizer(props: AuthorizerProps) {
   const user = useUser()
   const { useProfile } = useAuthApi()
 
+  const { pathname } = useLocation()
+
   // This will re-fetch user's profile
   const profile = useProfile()
 
@@ -26,13 +28,15 @@ function Authorizer(props: AuthorizerProps) {
     () =>
       Object.values(MATCH_ROUTE_PATTERNS)
         .map((pathUrlPattern) =>
-          matchPath<{ url: string }>(
+          matchPath(
+            {
+              path: pathUrlPattern,
+            },
             RouteService.getCurrentPage(),
-            pathUrlPattern,
           ),
         )
         .filter(Boolean)
-        .map((matched) => matched.url),
+        .map((matched) => matched.pathname),
     [],
   )
 
@@ -61,7 +65,7 @@ function Authorizer(props: AuthorizerProps) {
         ROUTES.FORGOT_PASSWORD,
         ROUTES.SSO_LOGIN,
         ...matchedPathPatternUrls(),
-      ].includes(RouteService.getCurrentPage())
+      ].includes(pathname)
     ) {
       setIsValidated(() => true)
       return
@@ -80,6 +84,7 @@ function Authorizer(props: AuthorizerProps) {
     profile.isError,
     profile.isLoading,
     profile.isFetching,
+    pathname,
   ])
 
   if (profile.isFetching || profile.isLoading || !isValidated)

package/src/auth/ChangePassword/ChangePasswordComponent.tsx

@@ -2,16 +2,14 @@ import { useContext, useEffect, useState } from 'react'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { ApiServiceError } from '@licklist/core/dist/Api/ApiService'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
 import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { UserChangePasswordRequest } from '@licklist/plugins/dist/types/Request/UserChangePasswordRequest'
 import { ROUTES } from '@licklist/core/dist/Config'
 import { ChangePasswordFormComponent } from './ChangePasswordFormComponent'
-import { Router } from '../Router'
 import FormCard from '../../static/FormCard'
 import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 
@@ -22,6 +20,7 @@ function ChangePasswordComponent() {
   const { search } = useLocation()
   const email = new URLSearchParams(search).get('email')
   const token = new URLSearchParams(search).get('token')
+  const navigate = useNavigate()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
@@ -33,7 +32,7 @@ function ChangePasswordComponent() {
       message: error.response?.data?.message,
     })
 
-    RouteService.redirectTo(ROUTES.FORGOT_PASSWORD)
+    navigate(ROUTES.FORGOT_PASSWORD)
   }
 
   const changePassword = async (resetRequest: UserChangePasswordRequest) =>
@@ -51,39 +50,35 @@ function ChangePasswordComponent() {
       message: t('Notification:passwordChangedSuccessfully'),
     })
 
-    RouteService.redirectTo(ROUTES.LOGIN_PAGE)
+    navigate(ROUTES.LOGIN_PAGE)
   }
 
   useEffect(() => {
     if (!email && !token) {
-      RouteService.redirectTo(ROUTES.LOGIN_PAGE)
+      navigate(ROUTES.LOGIN_PAGE)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (
-    <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
-          <>
-            <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
-            <h3 className='text-center'>{t('User:forEmail', { email })}</h3>
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
+        <h3 className='text-center'>{t('User:forEmail', { email })}</h3>
 
-            <FormCard>
-              <ChangePasswordFormComponent
-                isLoading={isLoading}
-                setIsLoading={setIsLoading}
-                onSubmit={handleOnSubmit}
-                email={email}
-                token={token}
-              />
+        <FormCard>
+          <ChangePasswordFormComponent
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            onSubmit={handleOnSubmit}
+            email={email}
+            token={token}
+          />
 
-              <LoaderIndicator isLoaded={!isLoading} />
-            </FormCard>
-          </>
-        </Col>
-      </Row>
-    </Router>
+          <LoaderIndicator isLoaded={!isLoading} />
+        </FormCard>
+      </Col>
+    </Row>
   )
 }
 

package/src/auth/Layout/AuthNavComponent.tsx

@@ -1,13 +1,12 @@
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import StyledButton from '../../static/StyledButton'
-import { Router } from '../Router'
 
 function AuthNavComponent() {
   const { t } = useTranslation('User')
 
   return (
-    <Router>
+    <>
       {/* TODO fix issue react router types
         @ts-expect-error */}
       <Link to='/login'>
@@ -26,7 +25,7 @@ function AuthNavComponent() {
           {t('register')}
         </StyledButton>
       </Link>
-    </Router>
+    </>
   )
 }
 

package/src/auth/Layout/UserNavDropDown.tsx

@@ -1,24 +1,23 @@
 import Dropdown from 'react-bootstrap/Dropdown'
 import { useTranslation } from 'react-i18next'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
+import { useNavigate } from 'react-router-dom'
 
 function UserNavDropDown() {
   const { t } = useTranslation('App')
   const user = useUser()
+  const navigate = useNavigate()
 
   const onLogoutHandler = () => {
     user.logout()
 
-    RouteService.redirectTo('/')
+    navigate('/')
   }
 
   return (
-    <>
-      <Dropdown.Item eventKey='1' onClick={onLogoutHandler}>
-        {t('logout')}
-      </Dropdown.Item>
-    </>
+    <Dropdown.Item eventKey='1' onClick={onLogoutHandler}>
+      {t('logout')}
+    </Dropdown.Item>
   )
 }
 

package/src/auth/Login/LoginComponent.tsx

@@ -2,20 +2,18 @@ import { useContext, useEffect, useState } from 'react'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
 import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import useInvite from '@licklist/plugins/dist/context/user/hooks/useInvite'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { UserLoginRequest } from '@licklist/plugins/dist/types/Request/UserLoginRequest'
 import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
 import { SocialFormComponent } from '../Social/SocialFormComponent'
 import { LoginFormComponent } from './LoginFormComponent'
-import { Router } from '../Router'
 import FormCard from '../../static/FormCard'
 import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 import Logo from '../../logo/Logo'
@@ -37,6 +35,8 @@ const LoginComponent = ({
   const user = useUser()
   const invite = useInvite()
 
+  const navigate = useNavigate()
+
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
   const userApiService = useUserApi(request)
@@ -87,7 +87,7 @@ const LoginComponent = ({
       message: t('Notification:loggedSuccessfully'),
     })
 
-    RouteService.redirectTo('/')
+    navigate('/', { replace: true })
   }
 
   useEffect(() => {
@@ -95,55 +95,51 @@ const LoginComponent = ({
       return
     }
 
-    RouteService.redirectTo('/')
+    navigate('/')
   }, [user.profile, auth.secrets])
 
   return (
-    <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
-          <>
-            <h1 className='text-center'>{t('User:loginTitle')}</h1>
-
-            <div className='login d-flex pb-4 justify-content-center'>
-              <Logo logo={<BookeditLogoSvg />} />
-            </div>
-
-            {!hideSignUpLink && (
-              <h6 className='text-center'>
-                <Trans t={t} i18nKey='loginPromo'>
-                  {/* TODO fix issue react router types
-        @ts-expect-error */}
-                  Don&apos;t have account? <Link to='/register'>Sign up</Link>.
-                </Trans>
-              </h6>
-            )}
-
-            <FormCard>
-              {showSocialLinks && (
-                <>
-                  <SocialFormComponent
-                    isLoading={isLoading}
-                    setIsLoading={setIsLoading}
-                  />
-
-                  <hr className='mb-2' />
-                </>
-              )}
-
-              <LoginFormComponent
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('User:loginTitle')}</h1>
+
+        <div className='login d-flex pb-4 justify-content-center'>
+          <Logo logo={<BookeditLogoSvg />} />
+        </div>
+
+        {!hideSignUpLink && (
+          <h6 className='text-center'>
+            <Trans t={t} i18nKey='loginPromo'>
+              {/* TODO fix issue react router types
+               @ts-expect-error */}
+              Don&apos;t have account? <Link to='/register'>Sign up</Link>.
+            </Trans>
+          </h6>
+        )}
+
+        <FormCard>
+          {showSocialLinks && (
+            <>
+              <SocialFormComponent
                 isLoading={isLoading}
                 setIsLoading={setIsLoading}
-                onSubmit={handleOnSubmit}
-                invitation={invite.invitation}
               />
 
-              <LoaderIndicator isLoaded={!isLoading} />
-            </FormCard>
-          </>
-        </Col>
-      </Row>
-    </Router>
+              <hr className='mb-2' />
+            </>
+          )}
+
+          <LoginFormComponent
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            onSubmit={handleOnSubmit}
+            invitation={invite.invitation}
+          />
+
+          <LoaderIndicator isLoaded={!isLoading} />
+        </FormCard>
+      </Col>
+    </Row>
   )
 }
 

package/src/auth/Logout/Logout.stories.tsx

@@ -1,31 +1,29 @@
 import { useEffect } from 'react'
-import { Route, Switch, MemoryRouter } from 'react-router-dom'
+import { Route, MemoryRouter, useNavigate, Routes } from 'react-router-dom'
 import { Meta, Story } from '@storybook/react'
 import UserProvider from '@licklist/plugins/dist/context/user/providers/UserProvider'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
-import { Logout } from './Logout'
 import { Button } from 'react-bootstrap'
+import { Logout } from './Logout'
 
 export default {
   title: 'Auth/Logout',
 } as Meta
 
 export const LogoutComponent: Story = () => (
-  <>
-    <UserProvider>
-      <MemoryRouter initialIndex={0} initialEntries={['/', '/logout']}>
-        <Switch>
-          <Route path='/' exact component={LoggedPage} />
-          <Route path='/logout' component={LogoutWrapper} />
-        </Switch>
-      </MemoryRouter>
-    </UserProvider>
-  </>
+  <UserProvider>
+    <MemoryRouter initialIndex={0} initialEntries={['/', '/logout']}>
+      <Routes>
+        <Route path='/' element={LoggedPage} />
+        <Route path='/logout' element={LogoutWrapper} />
+      </Routes>
+    </MemoryRouter>
+  </UserProvider>
 )
 
 function LoggedPage() {
   const user = useUser()
+  const navigate = useNavigate()
 
   useEffect(() => {
     user.login({
@@ -43,7 +41,7 @@ function LoggedPage() {
   }, [])
 
   const redirectToLogout = () => {
-    RouteService.redirectTo('/logout')
+    navigate('/logout')
   }
 
   return (

package/src/auth/Logout/Logout.tsx

@@ -1,15 +1,16 @@
 import { useEffect } from 'react'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import { useNavigate } from 'react-router-dom'
 import { BlockLoader } from '../../static'
 
 export const Logout = () => {
   const user = useUser()
+  const navigate = useNavigate()
 
   useEffect(() => {
     user.logout()
-    RouteService.redirectTo('/')
-  }, [user])
+    navigate('/')
+  }, [navigate, user])
 
   return <BlockLoader />
 }

package/src/auth/Register/RegisterComponent.tsx

@@ -1,9 +1,8 @@
 import { useContext, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { Row, Col } from 'react-bootstrap'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
@@ -13,10 +12,8 @@ import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
 import { UserRegisterRequest } from '@licklist/plugins/dist/types/Request/UserRegisterRequest'
 import { ErrorHandlerFn } from '@licklist/core/dist/Api/ApiService'
-
 import { RegisterFormComponent } from './RegisterFormComponent'
 import { SocialFormComponent } from '../Social/SocialFormComponent'
-import { Router } from '../Router'
 import FormCard from '../../static/FormCard'
 import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 
@@ -33,6 +30,7 @@ function RegisterComponent({
   const auth = useAuth()
   const user = useUser()
   const invite = useInvite()
+  const navigate = useNavigate()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [serverErrors, setServerErrors] = useState(null)
@@ -92,51 +90,47 @@ function RegisterComponent({
       message: t('Notification:registeredSuccessfully'),
     })
 
-    RouteService.redirectTo('/')
+    navigate('/')
   }
 
   return (
-    <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
-          <>
-            <h1 className='text-center'>{t('registerTitle')}</h1>
-
-            <h6 className='text-center'>
-              <Trans t={t} i18nKey='registerPromo'>
-                Fill out the form below to sign up for {{ name: t('bookedit') }}
-                {/* TODO fix issue react router types
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('registerTitle')}</h1>
+
+        <h6 className='text-center'>
+          <Trans t={t} i18nKey='registerPromo'>
+            Fill out the form below to sign up for {{ name: t('bookedit') }}
+            {/* TODO fix issue react router types
         @ts-expect-error */}
-                . Already signed up? Then just <Link to='/login'>Log in</Link>.
-              </Trans>
-            </h6>
-
-            <FormCard>
-              {showSocialLinks && (
-                <>
-                  <SocialFormComponent
-                    isLoading={isLoading}
-                    setIsLoading={setIsLoading}
-                  />
-
-                  <hr className='mb-2' />
-                </>
-              )}
-
-              <RegisterFormComponent
+            . Already signed up? Then just <Link to='/login'>Log in</Link>.
+          </Trans>
+        </h6>
+
+        <FormCard>
+          {showSocialLinks && (
+            <>
+              <SocialFormComponent
                 isLoading={isLoading}
                 setIsLoading={setIsLoading}
-                onSubmit={handleOnSubmit}
-                invitation={invite.invitation}
-                serverErrors={serverErrors}
               />
 
-              <LoaderIndicator isLoaded={!isLoading} />
-            </FormCard>
-          </>
-        </Col>
-      </Row>
-    </Router>
+              <hr className='mb-2' />
+            </>
+          )}
+
+          <RegisterFormComponent
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            onSubmit={handleOnSubmit}
+            invitation={invite.invitation}
+            serverErrors={serverErrors}
+          />
+
+          <LoaderIndicator isLoaded={!isLoading} />
+        </FormCard>
+      </Col>
+    </Row>
   )
 }
 

package/src/auth/ResetPassword/ResetPasswordComponent.tsx

@@ -6,11 +6,10 @@ import { ApiServiceError } from '@licklist/core/dist/Api/ApiService'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
 import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { UserResetPasswordRequest } from '@licklist/plugins/dist/types/Request/UserResetPasswordRequest'
 import { ROUTES } from '@licklist/core/dist/Config'
+import { useNavigate } from 'react-router-dom'
 import { ResetPasswordFormComponent } from './ResetPasswordFormComponent'
-import { Router } from '../Router'
 import FormCard from '../../static/FormCard'
 import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 
@@ -18,6 +17,7 @@ function ResetPasswordComponent() {
   const { t } = useTranslation(['Notification', 'User', 'App'])
   const request = useContext(RequestContext)
   const notification = useNotification()
+  const navigate = useNavigate()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
@@ -45,29 +45,25 @@ function ResetPasswordComponent() {
       message: t('Notification:passwordResetedSuccessfully'),
     })
 
-    RouteService.redirectTo(ROUTES.LOGIN_PAGE)
+    navigate(ROUTES.LOGIN_PAGE)
   }
 
   return (
-    <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
-          <>
-            <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
 
-            <FormCard>
-              <ResetPasswordFormComponent
-                isLoading={isLoading}
-                setIsLoading={setIsLoading}
-                onSubmit={handleOnSubmit}
-              />
+        <FormCard>
+          <ResetPasswordFormComponent
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            onSubmit={handleOnSubmit}
+          />
 
-              <LoaderIndicator isLoaded={!isLoading} />
-            </FormCard>
-          </>
-        </Col>
-      </Row>
-    </Router>
+          <LoaderIndicator isLoaded={!isLoading} />
+        </FormCard>
+      </Col>
+    </Row>
   )
 }
 

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -6,11 +6,10 @@ import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import useQuery from '@licklist/plugins/dist/hooks/Query/useQuery'
 import useSocialApi from '@licklist/plugins/dist/hooks/Api/useSocialApi'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
 import { useTranslation } from 'react-i18next'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import FormCard from '../../static/FormCard'
@@ -23,12 +22,13 @@ interface Params {
 function SocialCallbackComponent() {
   const { t } = useTranslation(['Notification'])
   const [isProcessed, setIsProcessed] = useState<boolean>(false)
-  const { provider } = useParams<Params>()
+  const { provider } = useParams<Readonly<Params>>()
   const query = useQuery()
   const request = useContext(RequestContext)
   const notification = useNotification()
   const auth = useAuth()
   const user = useUser()
+  const navigate = useNavigate()
 
   const socialApiService = useSocialApi(request)
   const userApiService = useUserApi(request)
@@ -78,7 +78,7 @@ function SocialCallbackComponent() {
       })
 
       // Redirect user in case of successful results
-      RouteService.redirectTo('/')
+      navigate('/')
     }
 
     const getSocialProvider = () => socialApiService.getSocialProvider(provider)