spa_instat_tv/src/features/App/AuthenticatedApp.tsx

import { lazy } from 'react'

import {
  Route,
  Redirect,
  Switch,
} from 'react-router-dom'

import { RecoilRoot } from 'recoil'

import { indexLexics } from 'config/lexics/indexLexics'
import { isProduction } from 'config/env'
import { PAGES } from 'config/pages'
import { client } from 'config/clients'

import { StripeElements } from 'features/StripeElements'

import { useLexicsConfig } from 'features/LexicsStore'

import { ExtendedSearchStore } from 'features/ExtendedSearchPage'
import { MatchSwitchesStore } from 'features/MatchSwitches'
import { UserFavoritesStore } from 'features/UserFavorites/store'
import { MatchPopup, MatchPopupStore } from 'features/MatchPopup'
import { BuyMatchPopup, BuyMatchPopupStore } from 'features/BuyMatchPopup'
import { PreferencesPopup, PreferencesPopupStore } from 'features/PreferencesPopup'
import { TournamentsPopup } from 'features/TournamentsPopup'
import { TournamentPopupStore } from 'features/TournamentsPopup/store'
import { CardsStore } from 'features/CardsStore'
import { NoNetworkPopup, NoNetworkPopupStore } from 'features/NoNetworkPopup'

const HomePage = lazy(() => import('features/HomePage'))
const UserAccount = lazy(() => import('features/UserAccount'))
const TeamPage = lazy(() => import('features/TeamPage'))
const MatchPage = lazy(() => import('features/MatchPage'))
const PlayerPage = lazy(() => import('features/PlayerPage'))
const TournamentPage = lazy(() => import('features/TournamentPage'))
const SystemSettings = lazy(() => import('features/SystemSettings'))
const HighlightsPage = lazy(() => import('pages/HighlightsPage'))

export const AuthenticatedApp = () => {
  useLexicsConfig(indexLexics)
  return (
    <StripeElements>
      <CardsStore>
        <MatchSwitchesStore>
          <UserFavoritesStore>
            <ExtendedSearchStore>
              <PreferencesPopupStore>
                <TournamentPopupStore>
                  <MatchPopupStore>
                    <BuyMatchPopupStore>
                      <NoNetworkPopupStore>
                        <MatchPopup />
                        <BuyMatchPopup />
                        { client.name === 'facr' ? <TournamentsPopup /> : <PreferencesPopup /> }
                        <NoNetworkPopup />

                        {/* в Switch как прямой children
                        можно рендерить только Route или Redirect */}
                        <Switch>
                          <Route path={PAGES.useraccount}>
                            <UserAccount />
                          </Route>
                          <Route exact path={PAGES.home}>
                            <HomePage />
                          </Route>
                          <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
                            <TournamentPage />
                          </Route>
                          <Route path={`/:sportName${PAGES.team}/:pageId`}>
                            <TeamPage />
                          </Route>
                          <Route path={`/:sportName${PAGES.player}/:pageId`}>
                            <PlayerPage />
                          </Route>
                          <Route path={`/:sportName${PAGES.match}/:pageId`}>
                            <MatchPage />
                          </Route>
                          <Route path={`${PAGES.highlights}`}>
                            <RecoilRoot>
                              <HighlightsPage />
                            </RecoilRoot>
                          </Route>
                          <Redirect to={PAGES.home} />
                        </Switch>
                        {!isProduction && <SystemSettings />}
                      </NoNetworkPopupStore>
                    </BuyMatchPopupStore>
                  </MatchPopupStore>
                </TournamentPopupStore>
              </PreferencesPopupStore>
            </ExtendedSearchStore>
          </UserFavoritesStore>
        </MatchSwitchesStore>
      </CardsStore>
    </StripeElements>
  )
}