App.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react'
import { HashRouter } from 'react-router-dom'
import { createBrowserHistory } from 'history'
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'

export const history = createBrowserHistory()

export const App = () => {
  const { onboarding, isProfileEcogestureCompleted } = useSelector(
    (state: AppStore) => state.ecolyo.profile
  )
  const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global)

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

export default App