{"version":3,"file":"app.e797052762fff2e83697.js","mappings":";;;;;;;;;;;;;;;;;AAyHA","sources":["webpack:///./components/App.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useIdleTimer } from 'react-idle-timer';\nimport { useDispatch } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { StylesProvider } from '@mui/styles';\nimport { QueryClientProvider } from '@tanstack/react-query';\nimport { createGlobalStyle } from 'styled-components';\n\nimport 'src/utils/chartWrap';\nimport './index.css';\n\nimport { Toast } from 'src/components/atoms';\nimport { Authenticator } from 'src/components/organisms';\nimport {\n  IDLE_DEBOUNCE_TIME_SECONDS, IDLE_SYNC_TABS_TIME_SECONDS, JWT_STORAGE_TOKEN, PATHS, USER_IDLE_TIMEOUT_MINUTES,\n} from 'src/constants';\nimport GlobalRoutes from 'src/containers/GlobalRoutes';\nimport { MainContainer } from 'src/containers/MainContainer';\nimport { useTypedSelector } from 'src/hooks';\nimport { AuthenticationActions } from 'src/store/actions';\nimport { queryClient } from 'src/utils/reactQueryConfig';\n\nimport { CustomToastsContainer } from './molecules/CustomToasts/CustomToastsContainer';\n\nconst GlobalStyle = createGlobalStyle`\n  html, body{\n    margin: 0;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    font-family: \"Akkurat\", \"Helvetica\", \"Arial\", sans-serif;\n  }\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    width: 7px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    background-color: rgba(0,0,0,.5);\n    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);\n  }\n`;\n\nconst App = () => {\n  const { permissions } = useTypedSelector(({ user }) => user);\n\n  const dispatch = useDispatch();\n  const history = useHistory();\n\n  const handleOnIdle = () => {\n    const queryCache = queryClient.getQueryCache();\n    queryCache.clear();\n    queryClient.clear();\n    queryClient.invalidateQueries();\n\n    // This checks below will make sure we don't keep dispatching the log out action.\n    const token = localStorage.getItem(JWT_STORAGE_TOKEN);\n    if (token) localStorage.setItem(JWT_STORAGE_TOKEN, '');\n\n    if (permissions && permissions.length > 0) {\n      dispatch(AuthenticationActions.signOut());\n    }\n\n    history.push(PATHS.ROOT);\n\n\n    setTimeout(() => {\n      window.location.reload();\n    }, 1000);\n  };\n\n  const { isIdle } = useIdleTimer({\n    onIdle: handleOnIdle,\n    timeout: USER_IDLE_TIMEOUT_MINUTES,\n    debounce: IDLE_DEBOUNCE_TIME_SECONDS,\n    syncTimers: IDLE_SYNC_TABS_TIME_SECONDS,\n    crossTab: true,\n  });\n\n  // useEffect to handle when the token changed\n  useEffect(() => {\n    const handleStorageEvent = (event: StorageEvent) => {\n      if (event.key === JWT_STORAGE_TOKEN) {\n        // When the token is removed from local storage\n        // the system should run the log out action for all tabs\n        if (event.oldValue && !event.newValue?.length) {\n          handleOnIdle();\n        }\n\n        // When the token is added to local storage\n        // the system should refresh the page for all tabs\n        if (event.newValue && !event.oldValue?.length) {\n          setTimeout(() => {\n            window.location.reload();\n          }, 1000);\n        }\n      }\n    };\n\n    window.addEventListener('storage', handleStorageEvent);\n\n    return function cleanup() {\n      window.removeEventListener('storage', handleStorageEvent);\n    };\n  }, []);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <StylesProvider injectFirst>\n        <Toast />\n        <CustomToastsContainer />\n        <Authenticator>\n          <GlobalRoutes />\n          <MainContainer />\n          <GlobalStyle />\n        </Authenticator>\n      </StylesProvider>\n    </QueryClientProvider>\n  );\n};\n\nexport default App;\n"],"names":[],"sourceRoot":""}