fix(ott-418): deleted filters (#132)

* fix(ott-418): deleted filters

* fix(ott-418): added mobile version

src/features/App/AuthenticatedApp.tsx

@@ -3,7 +3,6 @@ import {
   Route,
   Redirect,
   Switch,
-  useRouteMatch,
 } from 'react-router-dom'
 
 import { indexLexics } from 'config/lexics/indexLexics'
@@ -22,19 +21,15 @@ import { Header } from 'features/Header'
 import { MainWrapper } from 'features/MainWrapper'
 import {
   HeaderFiltersStore,
-  SportTypeFilter,
-  TournamentFilter,
 } from 'features/HeaderFilters'
 import { UserFavorites } from 'features/UserFavorites'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
 import { useMediaQuery } from 'features/MediaQuery'
 import { HeaderMobile } from 'features/HeaderMobile'
-import { BottomMenuWrapper } from 'features/HeaderMobile/styled'
 
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
   const isMobile = useMediaQuery({ query: devices.tablet })
-  const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact
 
   return (
     <ScoreStore>
@@ -83,16 +78,6 @@ export const AuthenticatedApp = () => {
               <Route path={`/:sportName${PAGES.match}/:pageId`}>
                 <MatchPage />
               </Route>
-              {
-                isMobile && !isMatch
-                  ? (
-                    <BottomMenuWrapper>
-                      <SportTypeFilter />
-                      <TournamentFilter />
-                    </BottomMenuWrapper>
-                  )
-                  : null
-              }
             </MainWrapper>
           </UserFavoritesStore>
         </HeaderFiltersStore>

src/features/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { useRouteMatch } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 
 import { Menu } from 'features/Menu'
 import { Search } from 'features/Search'
@@ -22,21 +22,14 @@ import {
   MenuWrapper,
 } from './styled'
 
-export const Header = () => {
+export const Header = () => (
-  const isOnHome = useRouteMatch(PAGES.home)?.isExact
-  const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact
-  return (
   <Wrapper>
+    <Switch>
+      <Route path={PAGES.home} exact>
         <MenuWrapper>
           <Menu />
-        {!isOnHome && <HomeButtonLink to={PAGES.home} />}
         </MenuWrapper>
-      {isMatch
+
-        ? (
-          <Search />
-        )
-        : (
-          <Fragment>
         <SearchWrapper>
           <Search />
         </SearchWrapper>
@@ -49,14 +42,21 @@ export const Header = () => {
           <MatchStatusFilter />
         </FilterWrapper>
 
-            {isOnHome && (
         <SportFilterWrapper>
           <SportTypeFilter />
           <TournamentFilter />
         </SportFilterWrapper>
-            )}
+      </Route>
+
+      <Fragment>
+        <MenuWrapper>
+          <Menu />
+          <HomeButtonLink to={PAGES.home} />
+        </MenuWrapper>
+        <SearchWrapper>
+          <Search />
+        </SearchWrapper>
       </Fragment>
-        )}
+    </Switch>
   </Wrapper>
 )
-}

src/features/HeaderMobile/index.tsx

@@ -1,5 +1,5 @@
-import React, { Fragment } from 'react'
+import React from 'react'
-import { useRouteMatch } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 
 import { ToggleScore } from 'features/ToggleScore'
 import { Logo } from 'features/Logo'
@@ -14,21 +14,16 @@ import { PAGES } from 'config'
 import {
   HeaderMobileWrapper,
   HeaderMobileTop,
+  HeaderMobileOnlyTop,
   HeaderMobileMidle,
   HeaderMobileBottom,
   HeaderIconsWrapper,
   IconFavWrapper,
 } from './styled'
 
-export const HeaderMobile = () => {
+export const HeaderMobile = () => (
-  const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact
+  <Switch>
-
+    <Route path={PAGES.home} exact>
-  return (
-    <Fragment>
-      {
-        isMatch
-          ? null
-          : (
       <HeaderMobileWrapper>
         <HeaderMobileTop>
           <ToggleScore />
@@ -46,8 +41,16 @@ export const HeaderMobile = () => {
           <MatchStatusFilter />
         </HeaderMobileBottom>
       </HeaderMobileWrapper>
+    </Route>
+
+    <HeaderMobileOnlyTop>
+      <ToggleScore />
+      <Logo width={52} height={12} />
+      <HeaderIconsWrapper>
+        <IconFavWrapper />
+        <Search />
+        <Menu />
+      </HeaderIconsWrapper>
+    </HeaderMobileOnlyTop>
+  </Switch>
 )
-      }
-    </Fragment>
-  )
-}

src/features/HeaderMobile/styled.tsx

@@ -16,6 +16,10 @@ export const HeaderMobileTop = styled.div`
   justify-content: space-between;
   padding: 12px 18px;
 `
+export const HeaderMobileOnlyTop = styled(HeaderMobileTop)`
+  margin-bottom: 25px;
+`
+
 export const HeaderMobileMidle = styled.div`
   width: 100%;
   height: 44px;