App.tsx

import React, { useEffect } from 'react'
import { HashRouter } from 'react-router-dom'
import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'

import Routes from 'components/Routes/Routes'
import Navbar from 'components/Navbar/Navbar'
import SplashRoot from 'components/Splash/SplashRoot'
import SplashScreen from 'components/Splash/SplashScreen'
import SplashScreenError from 'components/Splash/SplashScreenError'
import WelcomeModal from 'components/Onboarding/WelcomeModal'
import MatomoTracker from 'utils/matomoTracker'
import EnvironmentService from 'services/environment.service'

interface AppProps {
  tracker: MatomoTracker
}

export const App = ({ tracker }: AppProps) => {
  const { onboarding } = useSelector((state: AppStore) => state.ecolyo.profile)
  const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global)
  const isDev = new EnvironmentService().isLocal()

  useEffect(() => {
    if (tracker && !isDev) {
      if (termsStatus.accepted) {
        tracker.connectToHistory()
      }
      return () => {
        tracker.disconnectFromHistory()
      }
    }
  }, [termsStatus.accepted, tracker, isDev])

  return (
    <HashRouter {...history}>
      <Layout>
        <SplashRoot
          splashComponent={SplashScreen}
          splashErrorComponent={SplashScreenError}
        >
          {termsStatus.accepted && (
            <>
              <WelcomeModal open={!onboarding.isWelcomeSeen} />
              <Navbar />
            </>
          )}
          <Main>
            <Content className="app-content">
              <Routes termsStatus={termsStatus} />
            </Content>
          </Main>
        </SplashRoot>
      </Layout>
    </HashRouter>
  )
}

export default App