fix(#479): redirect to home when no route matched (#225)

src/features/App/AuthenticatedApp.tsx

@@ -6,69 +6,55 @@ import {
 } from 'react-router-dom'
 
 import { indexLexics } from 'config/lexics/indexLexics'
-import { useLexicsConfig } from 'features/LexicsStore'
 import { PAGES } from 'config'
-import { devices } from 'config/devices'
+
+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 { MainWrapper } from 'features/MainWrapper'
+import { UserAccountForm } from 'features/UserAccount'
 
-import { UserFavorites } from 'features/UserFavorites'
+import { MatchSwitchesStore } from 'features/MatchSwitches'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
-import { useMediaQuery } from 'features/MediaQuery'
-import { FormStore } from 'features/FormStore'
 
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
-  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
     <MatchSwitchesStore>
-      <Switch>
-        <Route path={PAGES.useraccount}>
-          <UserAccountForm />
-        </Route>
-        <UserFavoritesStore>
-          <ExtendedSearchStore>
-            <MainWrapper>
-              {!isMobile && <UserFavorites />}
-              <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.extendedSearch}>
-                <ExtendedSearchPage />
-              </Route>
-            </MainWrapper>
-          </ExtendedSearchStore>
-        </UserFavoritesStore>
-        <Redirect to={PAGES.home} />
-      </Switch>
+      <UserFavoritesStore>
+        <ExtendedSearchStore>
+          {/* в Switch как прямой children можно рендерить только Route или Redirect */}
+          <Switch>
+            <Route path={PAGES.useraccount}>
+              <UserAccountForm />
+            </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.extendedSearch}>
+              <ExtendedSearchPage />
+            </Route>
+            <Redirect to={PAGES.home} />
+          </Switch>
+        </ExtendedSearchStore>
+      </UserFavoritesStore>
     </MatchSwitchesStore>
   )
 }
-
-export const UserAccountForm = () => (
-  <FormStore>
-    <UserAccount />
-  </FormStore>
-)

src/features/ExtendedSearchPage/index.tsx

@@ -3,6 +3,7 @@ import React, { Fragment } from 'react'
 import { devices } from 'config'
 
 import { useMediaQuery } from 'features/MediaQuery'
+import { UserFavorites } from 'features/UserFavorites'
 
 import { MobileHeader } from './components/MobileHeader'
 import { DesktopHeader } from './components/DesktopHeader'
@@ -18,6 +19,7 @@ export const ExtendedSearchPage = () => {
   const isMobile = useMediaQuery({ query: devices.tablet })
   return (
     <Fragment>
+      {!isMobile && <UserFavorites />}
       {
         isMobile
           ? <MobileHeader />

src/features/HomePage/index.tsx

@@ -17,6 +17,8 @@ import {
   HeaderMobileBottom,
 } from 'features/HeaderMobile/styled'
 import { SportFilterWrapper } from 'features/ProfileHeader/styled'
+import { MainWrapper } from 'features/MainWrapper'
+import { UserFavorites } from 'features/UserFavorites'
 
 import { useHomePage } from './hooks'
 import { Header } from './components/Header'
@@ -26,7 +28,7 @@ const Home = () => {
   const isMobile = useMediaQuery({ query: devices.tablet })
   const { fetchMatches } = useHomePage()
   return (
-    <Fragment>
+    <MainWrapper>
       {
         isMobile
           ? <HeaderMobile />
@@ -44,6 +46,7 @@ const Home = () => {
           </Fragment>
         )
       }
+      {!isMobile && <UserFavorites />}
       <Content>
         <Matches fetch={fetchMatches} />
       </Content>
@@ -55,7 +58,7 @@ const Home = () => {
           </SportFilterWrapper>
         )
       }
-    </Fragment>
+    </MainWrapper>
   )
 }
 

src/features/MatchPage/index.tsx

@@ -1,16 +1,21 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 
+import { devices } from 'config'
+
 import { StreamPlayer } from 'features/StreamPlayer'
 import { MultiSourcePlayer } from 'features/MultiSourcePlayer'
 import { ProfileHeader } from 'features/ProfileHeader'
+import { MainWrapper } from 'features/MainWrapper'
+import { UserFavorites } from 'features/UserFavorites'
+import { useMediaQuery } from 'features/MediaQuery'
 
 import { MatchProfileCard } from './MatchProfileCard'
 import { usePlayerProgressReporter } from './hooks/usePlayerProgressReporter'
 import { useMatchProfile } from './hooks/useMatchProfile'
 import { useVideoData } from './hooks/useVideoData'
-import { MainWrapper, Container } from './styled'
+import { MainWrapper as Wrapper, Container } from './styled'
 
 export const MatchPage = () => {
   const profile = useMatchProfile()
@@ -22,13 +27,16 @@ export const MatchPage = () => {
   } = useVideoData()
   const { onPlayerProgressChange, onPlayingChange } = usePlayerProgressReporter()
 
+  const isMobile = useMediaQuery({ query: devices.tablet })
+
   const isLiveMatch = Boolean(url) && !isLastPlayPositionFetching
   const isFinishedMatch = !isEmpty(videos) && !isLastPlayPositionFetching
 
   return (
-    <Fragment>
+    <MainWrapper>
+      {!isMobile && <UserFavorites />}
       <ProfileHeader />
-      <MainWrapper>
+      <Wrapper>
         <MatchProfileCard profile={profile} />
         <Container>
           {
@@ -52,7 +60,7 @@ export const MatchPage = () => {
             )
           }
         </Container>
-      </MainWrapper>
-    </Fragment>
+      </Wrapper>
+    </MainWrapper>
   )
 }

src/features/PlayerPage/index.tsx

@@ -1,10 +1,13 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
-import { ProfileTypes } from 'config'
+import { ProfileTypes, devices } from 'config'
 
 import { ProfileHeader } from 'features/ProfileHeader'
 import { ProfileCard } from 'features/ProfileCard'
 import { Matches } from 'features/Matches'
+import { UserFavorites } from 'features/UserFavorites'
+import { MainWrapper } from 'features/MainWrapper'
+import { useMediaQuery } from 'features/MediaQuery'
 
 import { usePlayerPage } from './hooks'
 import { Content } from './styled'
@@ -15,9 +18,11 @@ export const PlayerPage = () => {
     infoItems,
     titleObj,
   } = usePlayerPage()
+  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
-    <Fragment>
+    <MainWrapper>
+      {!isMobile && <UserFavorites />}
       <ProfileHeader />
       <Content>
         <ProfileCard
@@ -27,6 +32,6 @@ export const PlayerPage = () => {
         />
         <Matches fetch={fetchMatches} />
       </Content>
-    </Fragment>
+    </MainWrapper>
   )
 }

src/features/TeamPage/index.tsx

@@ -1,10 +1,13 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
-import { ProfileTypes } from 'config'
+import { ProfileTypes, devices } from 'config'
 
 import { ProfileHeader } from 'features/ProfileHeader'
 import { ProfileCard } from 'features/ProfileCard'
 import { Matches } from 'features/Matches'
+import { UserFavorites } from 'features/UserFavorites'
+import { MainWrapper } from 'features/MainWrapper'
+import { useMediaQuery } from 'features/MediaQuery'
 
 import { useTeamPage } from './hooks'
 import { Content } from './styled'
@@ -15,9 +18,11 @@ export const TeamPage = () => {
     infoItems,
     titleObj,
   } = useTeamPage()
+  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
-    <Fragment>
+    <MainWrapper>
+      {!isMobile && <UserFavorites />}
       <ProfileHeader />
       <Content>
         <ProfileCard
@@ -27,6 +32,6 @@ export const TeamPage = () => {
         />
         <Matches fetch={fetchMatches} />
       </Content>
-    </Fragment>
+    </MainWrapper>
   )
 }

src/features/TournamentPage/index.tsx

@@ -1,10 +1,13 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
-import { ProfileTypes } from 'config'
+import { ProfileTypes, devices } from 'config'
 
 import { ProfileHeader } from 'features/ProfileHeader'
 import { ProfileCard } from 'features/ProfileCard'
 import { Matches } from 'features/Matches'
+import { MainWrapper } from 'features/MainWrapper'
+import { UserFavorites } from 'features/UserFavorites'
+import { useMediaQuery } from 'features/MediaQuery'
 
 import { useTournamentPage } from './hooks'
 import { Content } from './styled'
@@ -15,9 +18,11 @@ export const TournamentPage = () => {
     infoItems,
     titleObj,
   } = useTournamentPage()
+  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
-    <Fragment>
+    <MainWrapper>
+      {!isMobile && <UserFavorites />}
       <ProfileHeader />
       <Content>
         <ProfileCard
@@ -27,6 +32,6 @@ export const TournamentPage = () => {
         />
         <Matches fetch={fetchMatches} />
       </Content>
-    </Fragment>
+    </MainWrapper>
   )
 }

src/features/UserAccount/index.tsx

@@ -9,6 +9,7 @@ import { Form } from 'features/Login/styled'
 import { T9n } from 'features/T9n'
 import { Error } from 'features/Common/Input/styled'
 import { useLexicsConfig } from 'features/LexicsStore'
+import { FormStore } from 'features/FormStore'
 
 import { useUserInfo } from './hooks/useUserInfo'
 import { useUserSubscriptions } from './hooks/useUserSubscriptions'
@@ -32,7 +33,7 @@ import {
 
 const labelWidth = 110
 
-export const UserAccount = () => {
+const UserAccount = () => {
   useLexicsConfig(userAccountLexics)
 
   const {
@@ -215,3 +216,9 @@ export const UserAccount = () => {
     </UserAccountComponentWrapper>
   )
 }
+
+export const UserAccountForm = () => (
+  <FormStore>
+    <UserAccount />
+  </FormStore>
+)