App.tsx

import Navbar from 'components/Navbar/Navbar'
import WelcomeModal from 'components/Onboarding/WelcomeModal'
import AppRoutes from 'components/Routes/Routes'
import SplashRoot from 'components/Splash/SplashRoot'
import { Content, Layout, Main } from 'cozy-ui/transpiled/react/Layout'
import React, { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'
import { AppStore } from 'store'
import MatomoTracker from 'utils/matomoTracker'

interface AppProps {
  tracker: undefined | MatomoTracker
}

export const App = ({ tracker }: AppProps) => {
  const location = useLocation()
  const { onboarding } = useSelector((state: AppStore) => state.ecolyo.profile)
  const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global)

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

  return (
    <Layout>
      <SplashRoot>
        {termsStatus.accepted && (
          <>
            <WelcomeModal open={!onboarding.isWelcomeSeen} />
            <Navbar />
          </>
        )}
        <Main>
          <Content className="app-content">
            <AppRoutes termsStatus={termsStatus} />
          </Content>
        </Main>
      </SplashRoot>
    </Layout>
  )
}

export default App