Ott 862 code splitting (#312)

* refactor: MatchPopup render place

* refactor: Combobox removed withArrow props

* fix: fetch user favorites on render

* feat: lazy loading

src/features/App/AuthenticatedApp.tsx

@@ -1,3 +1,5 @@
+import { lazy } from 'react'
+
 import {
   Route,
   Redirect,
@@ -9,19 +11,19 @@ import { PAGES } from 'config'
 
 import { useLexicsConfig } from 'features/LexicsStore'
 
-import { HomePage } from 'features/HomePage'
-import { TeamPage } from 'features/TeamPage'
-import { MatchPage } from 'features/MatchPage'
-import { PlayerPage } from 'features/PlayerPage'
-import { TournamentPage } from 'features/TournamentPage'
 import { ExtendedSearchStore, ExtendedSearchPage } from 'features/ExtendedSearchPage'
-import { UserAccount } from 'features/UserAccount'
-
 import { MatchSwitchesStore } from 'features/MatchSwitches'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
-import { MatchPopupStore } from 'features/MatchPopup'
+import { MatchPopup, MatchPopupStore } from 'features/MatchPopup'
 import { BuyMatchPopup, BuyMatchPopupStore } from 'features/BuyMatchPopup'
 
+const HomePage = lazy(() => import('features/HomePage'))
+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 UserAccount = lazy(() => import('features/UserAccount'))
+
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
 
@@ -31,6 +33,7 @@ export const AuthenticatedApp = () => {
         <ExtendedSearchStore>
           <MatchPopupStore>
             <BuyMatchPopupStore>
+              <MatchPopup />
               <BuyMatchPopup />
 
               {/* в Switch как прямой children можно рендерить только Route или Redirect */}

src/features/App/UnauthenticatedApp.tsx

@@ -1,3 +1,5 @@
+import { lazy } from 'react'
+
 import {
   Route,
   Redirect,
@@ -10,11 +12,12 @@ import { PAGES } from 'config'
 import { publicLexics } from 'config/lexics/public'
 
 import { useLexicsConfig } from 'features/LexicsStore'
-import { Login } from 'features/Login'
-import { Register } from 'features/Register'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { HeaderStyled, HeaderGroup } from 'features/ProfileHeader/styled'
 
+const Login = lazy(() => import('features/Login'))
+const Register = lazy(() => import('features/Register'))
+
 const Main = styled.main`
   width: 100%;
 `

src/features/App/index.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { Router } from 'react-router-dom'
 
 import { history } from 'config'
@@ -14,15 +15,9 @@ import { UnauthenticatedApp } from './UnauthenticatedApp'
 const Main = () => {
   const { token } = useAuthStore()
 
-  return (
-    <Background>
-      {
-        token
-          ? <AuthenticatedApp />
-          : <UnauthenticatedApp />
-      }
-    </Background>
-  )
+  return token
+    ? <AuthenticatedApp />
+    : <UnauthenticatedApp />
 }
 
 export const App = () => (
@@ -30,7 +25,11 @@ export const App = () => (
     <Theme>
       <GlobalStyles />
       <GlobalStores>
-        <Main />
+        <Background>
+          <Suspense fallback={null}>
+            <Main />
+          </Suspense>
+        </Background>
       </GlobalStores>
     </Theme>
   </Router>

src/features/Combobox/index.tsx

@@ -35,7 +35,6 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     labelWidth,
     maxLength,
     title,
-    withArrow,
     withError,
   } = props
 
@@ -81,12 +80,10 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
             isUserAccountPage={isUserAccountPage}
           />
         </Label>
-        {withArrow && (
-          <Arrow
-            isExpanded={isOpen}
-            toggle={toggle}
-          />
-        )}
+        <Arrow
+          isExpanded={isOpen}
+          toggle={toggle}
+        />
         {isOpen && !isEmpty(options) && (
           <OutsideClick onClick={onOutsideClick}>
             <PopOver

src/features/Combobox/types.tsx

@@ -27,6 +27,5 @@ export type Props<T> = Pick<InputHTMLAttributes<HTMLInputElement>, (
   onSelect?: (option: T | null) => void,
   options: Array<T>,
   value?: string,
-  withArrow?: boolean,
   withError?: boolean,
 }

src/features/HomePage/index.tsx

@@ -15,7 +15,6 @@ import {
 import { SportFilterWrapper } from 'features/ProfileHeader/styled'
 import { MainWrapper } from 'features/MainWrapper'
 import { UserFavorites } from 'features/UserFavorites'
-import { MatchPopup } from 'features/MatchPopup'
 
 import { useHomePage } from './hooks'
 import { Header } from './components/Header'
@@ -25,7 +24,6 @@ const Home = () => {
   const { fetchMatches } = useHomePage()
   return (
     <MainWrapper>
-      <MatchPopup />
       <MediaQuery maxDevice='tablet'>
         <HeaderMobile />
         <HeaderMobileMidle>
@@ -55,8 +53,10 @@ const Home = () => {
   )
 }
 
-export const HomePage = () => (
+const HomePage = () => (
   <HeaderFiltersStore>
     <Home />
   </HeaderFiltersStore>
 )
+
+export default HomePage

src/features/Login/index.tsx

@@ -67,8 +67,10 @@ const LoginForm = () => {
   )
 }
 
-export const Login = () => (
+const Login = () => (
   <FormStore>
     <LoginForm />
   </FormStore>
 )
+
+export default Login

src/features/MatchPage/index.tsx

@@ -18,7 +18,7 @@ import {
 import { useMatchPage } from './hooks/useMatchPage'
 import { usePlayerProgressReporter } from './hooks/usePlayerProgressReporter'
 
-export const MatchPage = () => {
+const MatchPage = () => {
   const profile = useMatchProfile()
   const {
     chapters,
@@ -74,3 +74,5 @@ export const MatchPage = () => {
     </MainWrapper>
   )
 }
+
+export default MatchPage

src/features/PlayerPage/index.tsx

@@ -6,12 +6,11 @@ import { Matches } from 'features/Matches'
 import { UserFavorites } from 'features/UserFavorites'
 import { MainWrapper } from 'features/MainWrapper'
 import { MediaQuery } from 'features/MediaQuery'
-import { MatchPopup } from 'features/MatchPopup'
 
 import { usePlayerPage } from './hooks'
 import { Content } from './styled'
 
-export const PlayerPage = () => {
+const PlayerPage = () => {
   const {
     fetchMatches,
     infoItems,
@@ -20,7 +19,6 @@ export const PlayerPage = () => {
 
   return (
     <MainWrapper>
-      <MatchPopup />
       <MediaQuery minDevice='laptop'>
         <UserFavorites />
       </MediaQuery>
@@ -36,3 +34,5 @@ export const PlayerPage = () => {
     </MainWrapper>
   )
 }
+
+export default PlayerPage

src/features/Register/index.tsx

@@ -11,7 +11,7 @@ import { CardStep } from './components/CardStep'
 import { SubscriptionStep } from './components/SubscriptionsStep'
 import { RegistrationSuccessful } from './components/RegistrationSuccessful'
 
-export const Register = () => {
+const Register = () => {
   const isCardStep = useRouteMatch(`${PAGES.register}/card`)?.isExact || false
   const isSubsStep = useRouteMatch(`${PAGES.register}/subscriptions`)?.isExact || false
   return (
@@ -32,3 +32,5 @@ export const Register = () => {
     </CustomCenterBlock>
   )
 }
+
+export default Register

src/features/TeamPage/index.tsx

@@ -6,12 +6,11 @@ import { Matches } from 'features/Matches'
 import { UserFavorites } from 'features/UserFavorites'
 import { MainWrapper } from 'features/MainWrapper'
 import { MediaQuery } from 'features/MediaQuery'
-import { MatchPopup } from 'features/MatchPopup'
 
 import { useTeamPage } from './hooks'
 import { Content } from './styled'
 
-export const TeamPage = () => {
+const TeamPage = () => {
   const {
     fetchMatches,
     infoItems,
@@ -20,7 +19,6 @@ export const TeamPage = () => {
 
   return (
     <MainWrapper>
-      <MatchPopup />
       <MediaQuery minDevice='laptop'>
         <UserFavorites />
       </MediaQuery>
@@ -36,3 +34,5 @@ export const TeamPage = () => {
     </MainWrapper>
   )
 }
+
+export default TeamPage

src/features/TournamentPage/index.tsx

@@ -6,12 +6,11 @@ import { Matches } from 'features/Matches'
 import { MainWrapper } from 'features/MainWrapper'
 import { UserFavorites } from 'features/UserFavorites'
 import { MediaQuery } from 'features/MediaQuery'
-import { MatchPopup } from 'features/MatchPopup'
 
 import { useTournamentPage } from './hooks'
 import { Content } from './styled'
 
-export const TournamentPage = () => {
+const TournamentPage = () => {
   const {
     fetchMatches,
     infoItems,
@@ -20,7 +19,6 @@ export const TournamentPage = () => {
 
   return (
     <MainWrapper>
-      <MatchPopup />
       <MediaQuery minDevice='laptop'>
         <UserFavorites />
       </MediaQuery>
@@ -36,3 +34,5 @@ export const TournamentPage = () => {
     </MainWrapper>
   )
 }
+
+export default TournamentPage

src/features/UserAccount/components/PagePersonalInfo/index.tsx

@@ -93,7 +93,6 @@ export const PagePersonalInfo = () => {
         onChange={updateFormValue(country)}
         options={countries}
         onSelect={onCountrySelect}
-        withArrow
         withError={false}
       />
       <Input
@@ -113,7 +112,6 @@ export const PagePersonalInfo = () => {
         options={cities}
         onSelect={onCitySelect}
         maxLength={500}
-        withArrow
         withError={false}
       />
       <Input

src/features/UserAccount/index.tsx

@@ -20,7 +20,7 @@ import {
   StyledLink,
 } from './styled'
 
-export const UserAccount = () => {
+const UserAccount = () => {
   useLexicsConfig(userAccountLexics)
 
   return (
@@ -65,3 +65,5 @@ export const UserAccount = () => {
     </UserAccountWrapper>
   )
 }
+
+export default UserAccount

src/features/UserFavorites/hooks/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import type { UserFavorites } from 'requests'
 import { modifyUserFavorites, getUserFavorites } from 'requests'
@@ -16,7 +16,7 @@ export const useUserFavorites = () => {
     open,
   } = useToggle()
 
-  useEffect(() => {
+  const fetchFavorites = useCallback(() => {
     getUserFavorites().then(setUserFavorites)
   }, [])
 
@@ -27,6 +27,7 @@ export const useUserFavorites = () => {
   return {
     addRemoveFavorite,
     close,
+    fetchFavorites,
     isOpen,
     open,
     userFavorites,

src/features/UserFavorites/index.tsx

@@ -1,5 +1,6 @@
 import type { MouseEvent, FocusEvent } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+
 import { Link } from 'react-router-dom'
 
 import map from 'lodash/map'
@@ -30,12 +31,15 @@ export const UserFavorites = () => {
   const {
     addRemoveFavorite,
     close,
+    fetchFavorites,
     isOpen,
     userFavorites,
   } = useUserFavoritesStore()
 
   const [position, setPosition] = useState<number | null>(null)
 
+  useEffect(fetchFavorites, [fetchFavorites])
+
   const getPosition = (event: MouseEvent<HTMLDivElement> | FocusEvent<HTMLDivElement>) => {
     if (event.currentTarget) {
       setPosition(event.currentTarget.getBoundingClientRect().top)