Ott 577 replace react responsive lib (#229)

* refactor(577): added useMediaQuery and removed react-responsive lib

* feat(577): added MediaQuery component

* refactor(577): replaced useMediaQuery hook usage to MediaQuery component

* refactor(577): simplified useMediaQuery arg type

package.json

@@ -20,7 +20,6 @@
     "react": "^16.13.1",
     "react-datepicker": "^3.1.3",
     "react-dom": "^16.13.1",
-    "react-responsive": "^8.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.1",

src/config/devices.tsx

@@ -5,3 +5,6 @@ export const devices = {
   mobile: '(max-width: 640px)',
   tablet: '(max-width: 1024px)',
 }
+
+export type MediaQueryConfig = typeof devices
+export type Devices = keyof MediaQueryConfig

src/features/ExtendedSearchPage/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 
-import { devices } from 'config'
-
-import { useMediaQuery } from 'features/MediaQuery'
+import { MediaQuery } from 'features/MediaQuery'
 import { UserFavorites } from 'features/UserFavorites'
 import { MainWrapper } from 'features/MainWrapper'
 
@@ -17,15 +15,16 @@ export { ExtendedSearchStore } from './store'
 
 export const ExtendedSearchPage = () => {
   const { searchItems } = useExtendedSearchStore()
-  const isMobile = useMediaQuery({ query: devices.tablet })
   return (
     <MainWrapper>
-      {!isMobile && <UserFavorites />}
-      {
-        isMobile
-          ? <MobileHeader />
-          : <DesktopHeader />
-      }
+      <MediaQuery minDevice='laptop'>
+        <DesktopHeader />
+        <UserFavorites />
+      </MediaQuery>
+
+      <MediaQuery maxDevice='tablet'>
+        <MobileHeader />
+      </MediaQuery>
       <Main>
         <Results results={searchItems} />
       </Main>

src/features/HomePage/index.tsx

@@ -1,8 +1,6 @@
-import React, { Fragment } from 'react'
-import { useMediaQuery } from 'react-responsive'
-
-import { devices } from 'config'
+import React from 'react'
 
+import { MediaQuery } from 'features/MediaQuery'
 import { HeaderMobile } from 'features/HeaderMobile'
 import { Matches } from 'features/Matches'
 import {
@@ -25,39 +23,34 @@ import { Header } from './components/Header'
 import { Content } from './styled'
 
 const Home = () => {
-  const isMobile = useMediaQuery({ query: devices.tablet })
   const { fetchMatches } = useHomePage()
   return (
     <MainWrapper>
-      {
-        isMobile
-          ? <HeaderMobile />
-          : <Header />
-      }
-      {
-        isMobile && (
-          <Fragment>
+      <MediaQuery maxDevice='tablet'>
+        <HeaderMobile />
         <HeaderMobileMidle>
           <DateFilter />
         </HeaderMobileMidle>
         <HeaderMobileBottom>
           <MatchStatusFilter />
         </HeaderMobileBottom>
-          </Fragment>
-        )
-      }
-      {!isMobile && <UserFavorites />}
+      </MediaQuery>
+
+      <MediaQuery minDevice='laptop'>
+        <Header />
+        <UserFavorites />
+      </MediaQuery>
+
       <Content>
         <Matches fetch={fetchMatches} />
       </Content>
-      {
-        isMobile && (
+
+      <MediaQuery maxDevice='tablet'>
         <SportFilterWrapper>
           <SportTypeFilter />
           <TournamentFilter />
         </SportFilterWrapper>
-        )
-      }
+      </MediaQuery>
     </MainWrapper>
   )
 }

src/features/MatchPage/index.tsx

@@ -2,14 +2,12 @@ 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 { MediaQuery } from 'features/MediaQuery'
 
 import { MatchProfileCard } from './MatchProfileCard'
 import { usePlayerProgressReporter } from './hooks/usePlayerProgressReporter'
@@ -27,14 +25,14 @@ 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 (
     <MainWrapper>
-      {!isMobile && <UserFavorites />}
+      <MediaQuery minDevice='laptop'>
+        <UserFavorites />
+      </MediaQuery>
       <ProfileHeader />
       <Wrapper>
         <MatchProfileCard profile={profile} />

src/features/MediaQuery/helpers.tsx

@@ -0,0 +1,16 @@
+import type { MediaQueryConfig, Devices } from 'config'
+import { devices as maxDevices } from 'config'
+
+const minDevices: MediaQueryConfig = {
+  desktop: '(min-width: 1281px)',
+  laptop: '(min-width: 1025px)',
+  large: '(min-width: 1900px)',
+  mobile: '(min-width: 0px)',
+  tablet: '(min-width: 641px)',
+}
+
+export const getQuery = (maxDevice?: Devices, minDevice?: Devices) => {
+  if (maxDevice) return maxDevices[maxDevice]
+  if (minDevice) return minDevices[minDevice]
+  return ''
+}

src/features/MediaQuery/hooks.tsx

@@ -0,0 +1,23 @@
+import {
+  useEffect,
+  useState,
+  useMemo,
+} from 'react'
+
+export const useMediaQuery = (query: string) => {
+  const mediaQuery = useMemo(() => matchMedia(query), [query])
+  const [queryMatches, setQueryMatches] = useState(mediaQuery.matches)
+
+  useEffect(() => {
+    const listener = (event: MediaQueryListEvent) => {
+      setQueryMatches(event.matches)
+    }
+    mediaQuery.addEventListener('change', listener)
+
+    return () => {
+      mediaQuery.removeEventListener('change', listener)
+    }
+  }, [mediaQuery])
+
+  return queryMatches
+}

src/features/MediaQuery/index.tsx

@@ -1 +1,37 @@
-export * from 'react-responsive'
+import type { ReactNode } from 'react'
+import React, { Fragment } from 'react'
+
+import type { Devices } from 'config'
+
+import { getQuery } from './helpers'
+import { useMediaQuery } from './hooks'
+
+export * from './hooks'
+
+type Props = {
+  children: ReactNode,
+
+  /** работает так же, как медиа запрос (max-width: width) */
+  maxDevice?: Devices,
+
+  /** работает так же, как медиа запрос (min-width: width) */
+  minDevice?: Devices,
+}
+
+export const MediaQuery = ({
+  children,
+  maxDevice,
+  minDevice,
+}: Props) => {
+  const query = getQuery(maxDevice, minDevice)
+  const queryMatches = useMediaQuery(query)
+  return (
+    <Fragment>
+      {
+        queryMatches
+          ? children
+          : null
+      }
+    </Fragment>
+  )
+}

src/features/PlayerPage/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-import { ProfileTypes, devices } from 'config'
+import { ProfileTypes } 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 { MediaQuery } from 'features/MediaQuery'
 
 import { usePlayerPage } from './hooks'
 import { Content } from './styled'
@@ -18,11 +18,12 @@ export const PlayerPage = () => {
     infoItems,
     titleObj,
   } = usePlayerPage()
-  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
     <MainWrapper>
-      {!isMobile && <UserFavorites />}
+      <MediaQuery minDevice='laptop'>
+        <UserFavorites />
+      </MediaQuery>
       <ProfileHeader />
       <Content>
         <ProfileCard

src/features/ProfileHeader/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 
-import { devices, PAGES } from 'config'
+import { PAGES } from 'config'
 
 import { Menu } from 'features/Menu'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { ScoreSwitch, AvailableMatchesSwitch } from 'features/MatchSwitches'
 import { Search } from 'features/Search'
 import { HeaderMobile } from 'features/HeaderMobile'
-import { useMediaQuery } from 'features/MediaQuery'
+import { MediaQuery } from 'features/MediaQuery'
 
 import {
   HeaderStyled,
@@ -18,13 +18,15 @@ import {
 } from './styled'
 
 export const ProfileHeader = () => {
-  const isMobile = useMediaQuery({ query: devices.tablet })
   const isMatchPage = useRouteMatch(`/:sportName${PAGES.match}`)
 
   return (
-    isMobile
-      ? <HeaderMobile />
-      : (
+    <Fragment>
+      <MediaQuery maxDevice='tablet'>
+        <HeaderMobile />
+      </MediaQuery>
+
+      <MediaQuery minDevice='laptop'>
         <HeaderStyled>
           <HeaderGroup>
             <SearchWrapper>
@@ -41,6 +43,7 @@ export const ProfileHeader = () => {
             <LanguageSelect />
           </HeaderGroup>
         </HeaderStyled>
-      )
+      </MediaQuery>
+    </Fragment>
   )
 }

src/features/TeamPage/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-import { ProfileTypes, devices } from 'config'
+import { ProfileTypes } 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 { MediaQuery } from 'features/MediaQuery'
 
 import { useTeamPage } from './hooks'
 import { Content } from './styled'
@@ -18,11 +18,12 @@ export const TeamPage = () => {
     infoItems,
     titleObj,
   } = useTeamPage()
-  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
     <MainWrapper>
-      {!isMobile && <UserFavorites />}
+      <MediaQuery minDevice='laptop'>
+        <UserFavorites />
+      </MediaQuery>
       <ProfileHeader />
       <Content>
         <ProfileCard

src/features/TournamentPage/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-import { ProfileTypes, devices } from 'config'
+import { ProfileTypes } 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 { MediaQuery } from 'features/MediaQuery'
 
 import { useTournamentPage } from './hooks'
 import { Content } from './styled'
@@ -18,11 +18,12 @@ export const TournamentPage = () => {
     infoItems,
     titleObj,
   } = useTournamentPage()
-  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
     <MainWrapper>
-      {!isMobile && <UserFavorites />}
+      <MediaQuery minDevice='laptop'>
+        <UserFavorites />
+      </MediaQuery>
       <ProfileHeader />
       <Content>
         <ProfileCard