MainLayout.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import loadable from '@loadable/component'
  2. import { FC, useEffect, useRef, useState } from 'react'
  3. import { Route, Routes, useLocation, useNavigationType } from 'react-router-dom'
  4. import { StudioLoading } from '@/components/_loaders/StudioLoading'
  5. import { CookiePopover } from '@/components/_overlays/CookiePopover'
  6. import { atlasConfig } from '@/config'
  7. import { BASE_PATHS, absoluteRoutes } from '@/config/routes'
  8. import { transitions } from '@/styles'
  9. import { RoutingState } from '@/types/routing'
  10. import { isBrowserOutdated } from '@/utils/browser'
  11. import { SentryLogger } from '@/utils/logs'
  12. import { AppLogo } from './components/AppLogo'
  13. import { TopbarBase } from './components/_navigation/TopbarBase'
  14. import { useConfirmationModal } from './providers/confirmationModal'
  15. import { useOverlayManager } from './providers/overlayManager'
  16. import { LegalLayout } from './views/legal/LegalLayout'
  17. import { ViewerLayout } from './views/viewer/ViewerLayout'
  18. history.scrollRestoration = 'manual'
  19. const ROUTING_ANIMATION_OFFSET = 100
  20. const LoadableStudioLayout = loadable(() => import('./views/studio/StudioLayout'), {
  21. fallback: (
  22. <>
  23. <TopbarBase
  24. fullLogoNode={<AppLogo variant="studio" height={32} width={undefined} />}
  25. logoLinkUrl={absoluteRoutes.studio.index()}
  26. />
  27. <StudioLoading />
  28. </>
  29. ),
  30. })
  31. const LoadablePlaygroundLayout = loadable(() => import('./views/playground/PlaygroundLayout'), {
  32. fallback: <h1>Loading Playground...</h1>,
  33. })
  34. export const MainLayout: FC = () => {
  35. const scrollPosition = useRef<number>(0)
  36. const location = useLocation()
  37. const navigationType = useNavigationType()
  38. const [cachedLocation, setCachedLocation] = useState(location)
  39. const locationState = location.state as RoutingState
  40. const [openDialog, closeDialog] = useConfirmationModal({
  41. title: 'Outdated browser detected',
  42. description:
  43. 'It seems the browser version you are using is not fully supported by Joystream. Some of the features may be broken or not accessible. For the best experience, please upgrade your browser to the latest version.',
  44. type: 'warning',
  45. primaryButton: {
  46. text: 'Click here to see instructions',
  47. onClick: () => window.open('https://www.whatismybrowser.com/guides/how-to-update-your-browser/auto'),
  48. },
  49. onExitClick: () => closeDialog(),
  50. })
  51. useEffect(() => {
  52. if (!atlasConfig.analytics.sentry?.dsn) {
  53. return
  54. }
  55. const stopReplay = async () => await SentryLogger.replay?.stop()
  56. if (location.pathname === absoluteRoutes.viewer.ypp()) {
  57. if (SentryLogger.initialized && !SentryLogger.replay?.getReplayId()) {
  58. SentryLogger.replay?.start()
  59. }
  60. } else {
  61. if (SentryLogger.replay?.getReplayId()) {
  62. stopReplay()
  63. }
  64. }
  65. }, [location.pathname])
  66. const { clearOverlays } = useOverlayManager()
  67. useEffect(() => {
  68. if (isBrowserOutdated) {
  69. openDialog()
  70. }
  71. }, [openDialog])
  72. useEffect(() => {
  73. if (location.pathname === cachedLocation.pathname) {
  74. return
  75. }
  76. clearOverlays()
  77. setCachedLocation(location)
  78. if (locationState?.overlaidLocation?.pathname === location.pathname) {
  79. // if exiting routing overlay, skip scroll to top
  80. return
  81. }
  82. if (navigationType !== 'POP') {
  83. scrollPosition.current = window.scrollY
  84. }
  85. // delay scroll to allow transition to finish first
  86. setTimeout(() => {
  87. window.scrollTo(0, navigationType !== 'POP' ? 0 : scrollPosition.current)
  88. }, parseInt(transitions.timings.routing) + ROUTING_ANIMATION_OFFSET)
  89. }, [location, cachedLocation, locationState, navigationType, clearOverlays])
  90. return (
  91. <>
  92. <CookiePopover />
  93. <Routes>
  94. <Route path={BASE_PATHS.viewer + '/*'} element={<ViewerLayout />} />
  95. <Route path={BASE_PATHS.legal + '/*'} element={<LegalLayout />} />
  96. <Route path={BASE_PATHS.studio + '/*'} element={<LoadableStudioLayout />} />
  97. <Route path={BASE_PATHS.playground + '/*'} element={<LoadablePlaygroundLayout />} />
  98. </Routes>
  99. </>
  100. )
  101. }