App.tsx

import Navbar from 'components/Navbar/Navbar'
import AppRoutes from 'components/Routes/Routes'
import SplashRoot from 'components/Splash/SplashRoot'
import WelcomeModal from 'components/WelcomeModal/WelcomeModal'
import CozyDevtools from 'cozy-client/dist/devtools'
import { useWebviewIntent } from 'cozy-intent'
import { Layout } from 'cozy-ui/transpiled/react/Layout'
import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import MatomoTracker from 'utils/matomoTracker'
import usePageTitle from './Hooks/usePageTitle'
import SkipLink from './SkipLink/SkipLink'

interface AppProps {
  tracker: undefined | MatomoTracker
}

export const App = ({ tracker }: AppProps) => {
  usePageTitle()
  const location = useLocation()
  const {
    global: { termsStatus },
    profile: { onboarding },
  } = useAppSelector(state => state.ecolyo)
  const webviewIntent = useWebviewIntent()

  useEffect(() => {
    tracker?.track(location)
  }, [tracker, location])

  useEffect(() => {
    webviewIntent?.call('setFlagshipUI', {
      bottomBackground: '#32343d',
      bottomTheme: 'light',
      topBackground: '#1b1c22',
      topTheme: 'light',
    })
  }, [webviewIntent])

  return (
    <>
      <SkipLink />
      <Layout>
        <>
          <SplashRoot>
            {termsStatus.accepted && (
              <>
                <WelcomeModal open={!onboarding.isWelcomeSeen} />
                <Navbar />
              </>
            )}
            <main id="app-content" className="app-content" tabIndex={-1}>
              <AppRoutes termsStatus={termsStatus} />
            </main>
          </SplashRoot>
          {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
        </>
      </Layout>
    </>
  )
}

export default App