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,41 +22,41 @@ import {
   MenuWrapper,
 } from './styled'
 
-export const Header = () => {
-  const isOnHome = useRouteMatch(PAGES.home)?.isExact
-  const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact
-  return (
-    <Wrapper>
-      <MenuWrapper>
-        <Menu />
-        {!isOnHome && <HomeButtonLink to={PAGES.home} />}
-      </MenuWrapper>
-      {isMatch
-        ? (
+export const Header = () => (
+  <Wrapper>
+    <Switch>
+      <Route path={PAGES.home} exact>
+        <MenuWrapper>
+          <Menu />
+        </MenuWrapper>
+
+        <SearchWrapper>
+          <Search />
+        </SearchWrapper>
+
+        <FilterWrapper>
+          <DateFilter />
+        </FilterWrapper>
+
+        <FilterWrapper>
+          <MatchStatusFilter />
+        </FilterWrapper>
+
+        <SportFilterWrapper>
+          <SportTypeFilter />
+          <TournamentFilter />
+        </SportFilterWrapper>
+      </Route>
+
+      <Fragment>
+        <MenuWrapper>
+          <Menu />
+          <HomeButtonLink to={PAGES.home} />
+        </MenuWrapper>
+        <SearchWrapper>
           <Search />
-        )
-        : (
-          <Fragment>
-            <SearchWrapper>
-              <Search />
-            </SearchWrapper>
-
-            <FilterWrapper>
-              <DateFilter />
-            </FilterWrapper>
-
-            <FilterWrapper>
-              <MatchStatusFilter />
-            </FilterWrapper>
-
-            {isOnHome && (
-              <SportFilterWrapper>
-                <SportTypeFilter />
-                <TournamentFilter />
-              </SportFilterWrapper>
-            )}
-          </Fragment>
-        )}
-    </Wrapper>
-  )
-}
+        </SearchWrapper>
+      </Fragment>
+    </Switch>
+  </Wrapper>
+)

src/features/HeaderMobile/index.tsx

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

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;