From feb8f69b46c0c95e3db5e82dbde6ae641627f836 Mon Sep 17 00:00:00 2001 From: Mirlan Date: Fri, 27 Nov 2020 11:46:28 +0600 Subject: [PATCH] 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 | 1 - src/config/devices.tsx | 3 ++ src/features/ExtendedSearchPage/index.tsx | 19 ++++---- src/features/HomePage/index.tsx | 55 ++++++++++------------- src/features/MatchPage/index.tsx | 10 ++--- src/features/MediaQuery/helpers.tsx | 16 +++++++ src/features/MediaQuery/hooks.tsx | 23 ++++++++++ src/features/MediaQuery/index.tsx | 38 +++++++++++++++- src/features/PlayerPage/index.tsx | 9 ++-- src/features/ProfileHeader/index.tsx | 19 ++++---- src/features/TeamPage/index.tsx | 9 ++-- src/features/TournamentPage/index.tsx | 9 ++-- 12 files changed, 142 insertions(+), 69 deletions(-) create mode 100644 src/features/MediaQuery/helpers.tsx create mode 100644 src/features/MediaQuery/hooks.tsx diff --git a/package.json b/package.json index 0685208e..3f39b8a8 100644 --- a/package.json +++ b/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", diff --git a/src/config/devices.tsx b/src/config/devices.tsx index 04ebc94c..b1dd72ee 100644 --- a/src/config/devices.tsx +++ b/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 diff --git a/src/features/ExtendedSearchPage/index.tsx b/src/features/ExtendedSearchPage/index.tsx index c0ea5369..a236dcf4 100644 --- a/src/features/ExtendedSearchPage/index.tsx +++ b/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 ( - {!isMobile && } - { - isMobile - ? - : - } + + + + + + + +
diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index 4c05781c..641e74c3 100644 --- a/src/features/HomePage/index.tsx +++ b/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 ( - { - isMobile - ? - :
- } - { - isMobile && ( - - - - - - - - - ) - } - {!isMobile && } + + + + + + + + + + + +
+ + + - { - isMobile && ( - - - - - ) - } + + + + + + + ) } diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index 1b5040e4..228904ab 100644 --- a/src/features/MatchPage/index.tsx +++ b/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 ( - {!isMobile && } + + + diff --git a/src/features/MediaQuery/helpers.tsx b/src/features/MediaQuery/helpers.tsx new file mode 100644 index 00000000..c9e402b9 --- /dev/null +++ b/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 '' +} diff --git a/src/features/MediaQuery/hooks.tsx b/src/features/MediaQuery/hooks.tsx new file mode 100644 index 00000000..3318c3bc --- /dev/null +++ b/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 +} diff --git a/src/features/MediaQuery/index.tsx b/src/features/MediaQuery/index.tsx index c688ccfc..cf438df2 100644 --- a/src/features/MediaQuery/index.tsx +++ b/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 ( + + { + queryMatches + ? children + : null + } + + ) +} diff --git a/src/features/PlayerPage/index.tsx b/src/features/PlayerPage/index.tsx index a28462c1..42e6084b 100644 --- a/src/features/PlayerPage/index.tsx +++ b/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 ( - {!isMobile && } + + + { - const isMobile = useMediaQuery({ query: devices.tablet }) const isMatchPage = useRouteMatch(`/:sportName${PAGES.match}`) return ( - isMobile - ? - : ( + + + + + + @@ -41,6 +43,7 @@ export const ProfileHeader = () => { - ) + + ) } diff --git a/src/features/TeamPage/index.tsx b/src/features/TeamPage/index.tsx index a118ef8c..34d22eea 100644 --- a/src/features/TeamPage/index.tsx +++ b/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 ( - {!isMobile && } + + + { infoItems, titleObj, } = useTournamentPage() - const isMobile = useMediaQuery({ query: devices.tablet }) return ( - {!isMobile && } + + +