From e12fd5ec0f03c7b6ab8a4f6dbb7c11a9d4e5220d Mon Sep 17 00:00:00 2001 From: John Doe Date: Sun, 9 Mar 2025 23:49:32 +0000 Subject: [PATCH] refactor: replace react-device-detect with responsive breakpoints and update media queries --- package.json | 2 +- src/assets/App.css | 4 +- src/components/Elements/Card/Card.tsx | 6 +-- src/components/Layout/AppContentLayout.tsx | 10 ++-- .../components/MarketingBanner.tsx | 4 +- src/providers/DesktopBreakpoint.tsx | 6 +++ src/providers/MobileBreakpoint.tsx | 6 +++ yarn.lock | 46 +++++++++++++------ 8 files changed, 59 insertions(+), 25 deletions(-) create mode 100644 src/providers/DesktopBreakpoint.tsx create mode 100644 src/providers/MobileBreakpoint.tsx diff --git a/package.json b/package.json index bf1e0f6c..cd4d0caf 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,13 @@ "prop-types": "^15.0.0-0", "react": "^17.0.1", "react-contexify": "^5.0.0", - "react-device-detect": "^1.17.0", "react-dom": "^17.0.1", "react-easy-sort": "^1.5.1", "react-error-boundary": "^3.1.4", "react-icons": "^5.2.1", "react-markdown": "^7.0.1", "react-modal": "^3.12.1", + "react-responsive": "^10.0.1", "react-router-dom": "^6.21.0", "react-select": "^5.0.1", "react-share": "^4.4.1", diff --git a/src/assets/App.css b/src/assets/App.css index d460729b..022f19a1 100644 --- a/src/assets/App.css +++ b/src/assets/App.css @@ -1018,7 +1018,7 @@ Producthunt item *** BREAKPOINTS *******************/ /* Extra small devices (phones, 600px and down) */ -@media (max-width: 600px) { +@media (max-width: 768px) { .bottomNavigation { display: flex; } @@ -1176,7 +1176,7 @@ Producthunt item } /* Small devices (portrait tablets and large phones, 600px and up) */ -@media only screen and (min-width: 600px) { +@media only screen and (min-width: 768px) { .floatingFilter { display: none; } diff --git a/src/components/Elements/Card/Card.tsx b/src/components/Elements/Card/Card.tsx index b6c47f0b..973c8792 100644 --- a/src/components/Elements/Card/Card.tsx +++ b/src/components/Elements/Card/Card.tsx @@ -1,11 +1,11 @@ import React, { useEffect, useState } from 'react' -import { isDesktop } from 'react-device-detect' import { SortableKnob } from 'react-easy-sort' import { BsBoxArrowInUpRight } from 'react-icons/bs' import { MdOutlineDragIndicator } from 'react-icons/md' import { ref } from 'src/config' import { AdvBanner } from 'src/features/adv' import { useRemoteConfigStore } from 'src/features/remoteConfig' +import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint' import { useUserPreferences } from 'src/stores/preferences' import { SupportedCardType } from 'src/types' @@ -59,13 +59,13 @@ export const Card = ({ return (
- {isDesktop && ( + - )} + {icon} {titleComponent || label}{' '} {link && ( diff --git a/src/components/Layout/AppContentLayout.tsx b/src/components/Layout/AppContentLayout.tsx index 5189bccf..03ffbf12 100644 --- a/src/components/Layout/AppContentLayout.tsx +++ b/src/components/Layout/AppContentLayout.tsx @@ -1,5 +1,6 @@ import { useState } from 'react' -import { isDesktop } from 'react-device-detect' +import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint' +import { MobileBreakpoint } from 'src/providers/MobileBreakpoint' import { useUserPreferences } from 'src/stores/preferences' import { BottomNavigation } from '../Elements' import { ScrollCardsNavigator } from './' @@ -14,13 +15,14 @@ export const AppContentLayout = () => { <>
- {isDesktop ? ( + - ) : ( + +
- )} +
diff --git a/src/features/MarketingBanner/components/MarketingBanner.tsx b/src/features/MarketingBanner/components/MarketingBanner.tsx index 902ff258..4f7d6001 100644 --- a/src/features/MarketingBanner/components/MarketingBanner.tsx +++ b/src/features/MarketingBanner/components/MarketingBanner.tsx @@ -1,7 +1,7 @@ import DOMPurify from 'dompurify' import jsonPath from 'jsonpath' import { useEffect, useMemo, useState } from 'react' -import { isMobile } from 'react-device-detect' +import { useMediaQuery } from 'react-responsive' import { trackMarketingCampaignClose, trackMarketingCampaignOpen, @@ -25,7 +25,7 @@ export const MarketingBanner = () => { cacheTime: 600000, }, }) - + const isMobile = useMediaQuery({ maxWidth: 767 }) const userAtttributes = useMemo(() => { return { platform: isWebOrExtensionVersion(), diff --git a/src/providers/DesktopBreakpoint.tsx b/src/providers/DesktopBreakpoint.tsx new file mode 100644 index 00000000..32b31119 --- /dev/null +++ b/src/providers/DesktopBreakpoint.tsx @@ -0,0 +1,6 @@ +import { useMediaQuery } from 'react-responsive' + +export const DesktopBreakpoint = ({ children }: { children: React.ReactNode }) => { + const isDesktop = useMediaQuery({ minWidth: 768 }) + return isDesktop ? children : null +} diff --git a/src/providers/MobileBreakpoint.tsx b/src/providers/MobileBreakpoint.tsx new file mode 100644 index 00000000..194e3d17 --- /dev/null +++ b/src/providers/MobileBreakpoint.tsx @@ -0,0 +1,6 @@ +import { useMediaQuery } from 'react-responsive' + +export const MobileBreakpoint = ({ children }: { children: React.ReactNode }) => { + const isMobile = useMediaQuery({ maxWidth: 767 }) + return isMobile ? children : null +} diff --git a/yarn.lock b/yarn.lock index b38ede3b..4c818fe4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2719,6 +2719,11 @@ crypt@0.0.2: resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b" integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow== +css-mediaquery@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0" + integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q== + css.escape@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" @@ -3545,6 +3550,11 @@ htmlparser2@^8.0.1: domutils "^3.0.1" entities "^4.4.0" +hyphenate-style-name@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436" + integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw== + ignore@^5.2.0: version "5.3.0" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78" @@ -3972,6 +3982,13 @@ lz-string@^1.4.4: resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ== +matchmediaquery@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa" + integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA== + dependencies: + css-mediaquery "^0.1.2" + md5@^2.2.1: version "2.3.0" resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f" @@ -4483,7 +4500,7 @@ pretty-format@^29.0.0, pretty-format@^29.7.0: ansi-styles "^5.0.0" react-is "^18.0.0" -prop-types@^15.0.0, prop-types@^15.0.0-0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.0.0, prop-types@^15.0.0-0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -4509,13 +4526,6 @@ react-contexify@^5.0.0: dependencies: clsx "^1.1.1" -react-device-detect@^1.17.0: - version "1.17.0" - resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.17.0.tgz#a00b4fd6880cebfab3fd8a42a79dc0290cdddca9" - integrity sha512-bBblIStwpHmoS281JFIVqeimcN3LhpoP5YKDWzxQdBIUP8S2xPvHDgizLDhUq2ScguLfVPmwfF5y268EEQR60w== - dependencies: - ua-parser-js "^0.7.24" - react-dom@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" @@ -4605,6 +4615,16 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== +react-responsive@^10.0.1: + version "10.0.1" + resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.1.tgz#293d4d2562da93409861216f0110d146c5676eb3" + integrity sha512-OM5/cRvbtUWEX8le8RCT8scA8y2OPtb0Q/IViEyCEM5FBN8lRrkUOZnu87I88A6njxDldvxG+rLBxWiA7/UM9g== + dependencies: + hyphenate-style-name "^1.0.0" + matchmediaquery "^0.4.2" + prop-types "^15.6.1" + shallow-equal "^3.1.0" + react-router-dom@^6.21.0: version "6.21.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.0.tgz#aa4c6bc046a8e8723095bc09b3c0ab2254532712" @@ -4913,6 +4933,11 @@ set-function-name@^2.0.0, set-function-name@^2.0.1: functions-have-names "^1.2.3" has-property-descriptors "^1.0.0" +shallow-equal@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec" + integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg== + side-channel@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf" @@ -5202,11 +5227,6 @@ typescript@^5.1.6: resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37" integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw== -ua-parser-js@^0.7.24: - version "0.7.37" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.37.tgz#e464e66dac2d33a7a1251d7d7a99d6157ec27832" - integrity sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA== - unbox-primitive@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"