Fix some errors

src/frontend/src/app/App.actions.tsx

@@ -1,20 +1,32 @@
-// import { push } from 'connected-react-router'
+import { State } from 'reducers'
+
 import { history } from './App.store'
 
-export const redirect = (path: string) => (dispatch: any) => {
+export const redirect = (path: string) => (dispatch: any, getState: any) => {
+  if (path.indexOf('$resetPasswordToken') >= 0) {
+    const state: State = getState()
+    path = path.replace('$resetPasswordToken', state.auth.resetPasswordToken as string)
+  }
   dispatch(history.push(path))
 }
 
-export const SAFE_RESTORE = 'SAFE_RESTORE'
-export const safeRestore = () => (dispatch: any) => {
+export const RESET = 'RESET'
+export const reset = () => (dispatch: any) => {
+  dispatch({
+    type: RESET,
+  })
+}
+
+export const RESTORE = 'RESTORE'
+export const restore = () => (dispatch: any) => {
   dispatch({
-    type: SAFE_RESTORE,
+    type: RESTORE,
   })
 }
 
-export const RECAPTCHA_START = 'RECAPTCHA_START'
-export const recaptchaStart = () => (dispatch: any) => {
+export const RECAPTCHA_REQUEST = 'RECAPTCHA_REQUEST'
+export const recaptchaRequest = () => (dispatch: any) => {
   dispatch({
-    type: RECAPTCHA_START,
+    type: RECAPTCHA_REQUEST,
   })
 }

src/frontend/src/app/App.components/Drawer/Drawer.controller.tsx

@@ -2,14 +2,15 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation } from 'react-router-dom'
+import { State } from 'reducers'
 
 import { hideDrawer } from './Drawer.actions'
 import { DrawerView } from './Drawer.view'
 
 export const Drawer = () => {
   const dispatch = useDispatch()
-  const showing = useSelector((state: any) => state.drawer && state.drawer.showing)
-  const user = useSelector((state: any) => state && state.auth && state.auth.user)
+  const showing = useSelector((state: State) => state.drawer && state.drawer.showing)
+  const user = useSelector((state: State) => state && state.auth && state.auth.user)
   const { pathname } = useLocation()
   const history = useHistory()
 

src/frontend/src/app/App.components/Header/Header.view.tsx

@@ -1,14 +1,14 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
-import { JwtDecoded } from 'shared/user/JwtDecoded'
+import { PublicUser } from 'shared/user/PublicUser'
 
 import { Hamburger } from '../Hamburger/Hamburger.controller'
 // prettier-ignore
 import { HeaderBg, HeaderLoggedIn, HeaderLoggedOut, HeaderLogo, HeaderMenuItem, HeaderStyled } from "./Header.style";
 
 type HeaderViewProps = {
-  user?: JwtDecoded | undefined
+  user?: PublicUser
   removeAuthUserCallback: () => void
 }
 

src/frontend/src/app/App.components/LoggedOutRoute/LoggedOutRoute.controller.tsx

@@ -2,6 +2,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, useLocation } from 'react-router-dom'
+import { State } from 'reducers'
 
 type LoggedOutRouteProps = {
   children: any
@@ -10,7 +11,7 @@ type LoggedOutRouteProps = {
 }
 
 export const LoggedOutRoute = ({ children, path, exact }: LoggedOutRouteProps) => {
-  const jwt = useSelector((state: any) => state.auth.jwt)
+  const jwt = useSelector((state: State) => state.auth.jwt)
   const location = useLocation()
 
   return (

src/frontend/src/app/App.components/ProgressBar/ProgressBar.controller.tsx

@@ -1,28 +1,28 @@
 import * as React from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { State } from 'reducers'
 
 import { hideProgressBar } from './ProgressBar.actions'
 import { DONE, READY, SHOWING } from './ProgressBar.constants'
 import { ProgressBarView } from './ProgressBar.view'
-import { State } from 'reducers'
 
 export const ProgressBar = () => {
-  const progressBarLoading = useSelector((state: State) => state.auth.loading)
+  const progressBarLoading = useSelector((state: State) => state.loading)
   const [status, setStatus] = useState(READY)
   const dispatch = useDispatch()
+  let timeout = useRef<number | undefined>(undefined)
 
   useEffect(() => {
-    let timeout
     if (progressBarLoading) {
       setStatus(SHOWING)
-      timeout = setTimeout(() => {
+      timeout.current = setTimeout(() => {
         dispatch(hideProgressBar())
         setStatus(READY)
       }, 30000)
     } else {
       setStatus(DONE)
-      clearTimeout(timeout)
+      clearTimeout(timeout.current)
       setTimeout(() => setStatus(READY), 500)
     }
   }, [progressBarLoading, dispatch])

src/frontend/src/app/App.components/Toaster/Toaster.actions.tsx

@@ -1,13 +1,15 @@
+import { State } from 'reducers'
+
 export const SHOW_TOASTER = 'SHOW_TOASTER'
 export const HIDE_TOASTER = 'HIDE_TOASTER'
 
 export const showToaster = (status: string, title: string, message: string) => (dispatch: any, getState: any) => {
-  const currentToaster = getState().toaster
-  if (!currentToaster.showing) {
+  const state: State = getState()
+  if (!state.toaster.showing) {
     dispatch({
       type: SHOW_TOASTER,
       status,
-      title,
+      title: title.indexOf('jwt malformed') >= 0 ? 'Please first login!' : title,
       message,
     })
     setTimeout(() => {

src/frontend/src/app/App.controller.tsx

@@ -20,7 +20,6 @@ export const App = () => (
       <AppView />
       <Toaster />
       <ProgressBar />
-      {/* <Footer /> */}
     </AppBg>
   </ConnectedRouter>
 )

src/frontend/src/app/App.offline.tsx

@@ -1,9 +1,11 @@
 import offlineConfig from '@redux-offline/redux-offline/lib/defaults'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
 
-import { store } from '../index'
+import { Root, store } from '../index'
+import { restore } from './App.actions'
 import { showToaster } from './App.components/Toaster/Toaster.actions'
 import { ERROR } from './App.components/Toaster/Toaster.constants'
-import { safeRestore } from './App.actions'
 
 const discard = (error: any, _action: any, _retries: any) => {
   const { request, response } = error
@@ -18,16 +20,22 @@ const discard = (error: any, _action: any, _retries: any) => {
 }
 
 const persistCallback = () => {
-  store.dispatch<any>(safeRestore())
+  store.dispatch<any>(restore())
+  const rootElement = document.getElementById('root')
+  ReactDOM.render(<Root />, rootElement)
 }
 
 export const storeOfflineConfig = {
   ...offlineConfig,
   discard,
   persistCallback,
+  persistOptions: {
+    blacklist: ['router'],
+  },
 }
 
-export const reduxOfflineThunkMiddleware = (thunks: any) => (storex: any) => (next: any) => (action: any) => {
+export const reduxOfflineThunkMiddleware = () => (storex: any) => (next: any) => (action: any) => {
+  if (action && action.type === 'Offline/JS_ERROR') console.error(action.meta.error)
   const result = next(action)
 
   if (action.meta && action.meta.thunks && action.meta.thunks.length > 0) {

src/frontend/src/app/App.store.tsx

@@ -5,7 +5,6 @@ import { applyMiddleware, compose, createStore, Store } from 'redux'
 import thunk from 'redux-thunk'
 
 import { reducers, State } from '../reducers'
-import { showToaster } from './App.components/Toaster/Toaster.actions'
 import { reduxOfflineThunkMiddleware, storeOfflineConfig } from './App.offline'
 
 export const history = createBrowserHistory()
@@ -27,7 +26,7 @@ export function configureStore(preloadedState: any) {
     composeEnhancer(
       applyMiddleware(routerMiddleware(history)),
       applyMiddleware(thunk),
-      applyMiddleware(reduxOfflineThunkMiddleware({ showToaster })),
+      applyMiddleware(reduxOfflineThunkMiddleware()),
     ),
   )
 

src/frontend/src/index.tsx

@@ -1,5 +1,5 @@
+import { reset } from 'app/App.actions'
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
 import { Provider } from 'react-redux'
 import { BrowserRouter as Router } from 'react-router-dom'
@@ -14,8 +14,7 @@ import './styles/fonts.css'
 
 export const store = configureStore({})
 
-const Root = () => {
-  console.log('NODE_ENV', process.env.NODE_ENV)
+export const Root = () => {
   return (
     <GoogleReCaptchaProvider reCaptchaKey={process.env.REACT_APP_RECAPTCHA_SITE_KEY} language="en">
       <GlobalStyle />
@@ -28,17 +27,18 @@ const Root = () => {
   )
 }
 
-const rootElement = document.getElementById('root')
-ReactDOM.render(<Root />, rootElement)
+// const rootElement = document.getElementById('root')
+// ReactDOM.render(<Root />, rootElement)
 
 register({
   onSuccess: () => {
-    console.log(SW_INIT)
+    console.info(SW_INIT)
     store.dispatch({ type: SW_INIT })
   },
   onUpdate: (reg) => {
-    console.log(SW_UPDATE)
+    console.info(SW_UPDATE)
     store.dispatch({ type: SW_UPDATE, payload: reg })
+    store.dispatch<any>(reset())
     setTimeout(function () {
       window.location.reload()
     }, 100)