Migrate out of react-responsive to @mantine/hooks (#2972)

* Replace media query hooks to use Mantine's version * Migrate MediaQuery element to useMediaQuery hook * Remove react-responsive from dependencies * Add new desktop breakpoint check * Use useResponsive instead of using useMediaQuery directly * Remove unnecessary operator * Add undefined check for useMediaQuery --------- Co-authored-by: sayomaki <[email protected]>
source-academy · May 12, 2024 · f8f495e · f8f495e
1 parent 4b63863
commit f8f495e
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -80,7 +80,6 @@
     "react-papaparse": "^4.0.2",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.1.1",
-    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.14.1",
     "react-select": "^5.7.3",
     "react-simple-keyboard": "^3.6.27",
@@ -123,7 +122,6 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.2.6",
     "@types/react-redux": "^7.1.24",
-    "@types/react-responsive": "^8.0.5",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.7",

diff --git a/src/commons/mobileWorkspace/MobileWorkspace.tsx b/src/commons/mobileWorkspace/MobileWorkspace.tsx
@@ -1,9 +1,9 @@
 import { FocusStyleManager } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { useMediaQuery } from '@mantine/hooks';
 import { Ace } from 'ace-builds';
 import React, { useCallback, useEffect, useState } from 'react';
 import { DraggableEvent } from 'react-draggable';
-import { useMediaQuery } from 'react-responsive';
 
 import ControlBar from '../controlBar/ControlBar';
 import EditorContainer, { EditorContainerProps } from '../editor/EditorContainer';
@@ -29,7 +29,7 @@ export type MobileWorkspaceProps = {
 
 const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   const isAndroid = /Android/.test(navigator.userAgent);
-  const isPortrait = useMediaQuery({ orientation: 'portrait' });
+  const isPortrait = useMediaQuery('(orientation: portrait)');
   const [draggableReplPosition, setDraggableReplPosition] = useState({ x: 0, y: 0 });
 
   // For disabling draggable Repl when in stepper tab

diff --git a/src/commons/repl/ReplInput.tsx b/src/commons/repl/ReplInput.tsx
@@ -5,10 +5,10 @@ import { Chapter, Variant } from 'js-slang/dist/types';
 import React from 'react';
 import AceEditor from 'react-ace';
 import ReactAce from 'react-ace/lib/ace';
-import MediaQuery from 'react-responsive';
 
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
 import { getModeString, selectMode } from '../utils/AceHelper';
+import { useResponsive } from '../utils/Hooks';
 // source mode and chapter imported in Editor.tsx
 
 export type ReplInputProps = DispatchProps & StateProps & OwnProps;
@@ -40,6 +40,8 @@ export const ReplInput: React.FC<ReplInputProps> = props => {
   const replInput = React.useRef<ReactAce>(null);
   const replInputBottom = React.useRef<HTMLDivElement>(null);
 
+  const { isDesktopBreakpoint } = useResponsive();
+
   const execBrowseHistoryDown: () => void = props.handleBrowseHistoryDown;
   const execBrowseHistoryUp: () => void = props.handleBrowseHistoryUp;
   const execEvaluate = () => {
@@ -138,9 +140,7 @@ export const ReplInput: React.FC<ReplInputProps> = props => {
         ref={replInput}
       />
       <div className={classNames(Classes.BUTTON_GROUP, Classes.DARK)}>{replButtons()}</div>
-      <MediaQuery minWidth={769}>
-        <div ref={replInputBottom} />
-      </MediaQuery>
+      {isDesktopBreakpoint && <div ref={replInputBottom} />}
     </>
   );
 };
diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
@@ -1,10 +1,10 @@
+import { useMediaQuery } from '@mantine/hooks';
 import React, { RefObject } from 'react';
 import {
   TypedUseSelectorHook,
   // eslint-disable-next-line no-restricted-imports
   useSelector
 } from 'react-redux';
-import { useMediaQuery } from 'react-responsive';
 
 import { OverallState } from '../application/ApplicationTypes';
 import { Tokens } from '../application/types/SessionTypes';
@@ -118,8 +118,11 @@ export const useDimensions = (ref: RefObject<HTMLElement>): [width: number, heig
  * or desktop as defined by the constants file.
  */
 export const useResponsive = () => {
-  const isMobileBreakpoint = useMediaQuery({ maxWidth: Constants.mobileBreakpoint });
-  return { isMobileBreakpoint };
+  const isMobileBreakpoint = useMediaQuery(`(max-width: ${Constants.mobileBreakpoint}px)`);
+  return {
+    isMobileBreakpoint: isMobileBreakpoint,
+    isDesktopBreakpoint: isMobileBreakpoint === undefined ? undefined : !isMobileBreakpoint
+  };
 };
 
 /**

diff --git a/yarn.lock b/yarn.lock
@@ -3159,13 +3159,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-responsive@^8.0.5":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.8.tgz#e351be7cc4d03bc476075839922bb5f9a3094e76"
-  integrity sha512-HDUZtoeFRHrShCGaND23HmXAB9evOOTjkghd2wAasLkuorYYitm5A1XLeKkhXKZppcMBxqB/8V4Snl6hRUTA8g==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-router-dom@^5.3.3":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
@@ -5240,11 +5233,6 @@ css-loader@^6.5.1:
     postcss-value-parser "^4.2.0"
     semver "^7.3.8"
 
-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-minimizer-webpack-plugin@^3.2.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f"
@@ -7723,11 +7711,6 @@ husky@^9.0.0:
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
   integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
 
-hyphenate-style-name@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
 i18next-browser-languagedetector@^7.2.1:
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.1.tgz#1968196d437b4c8db847410c7c33554f6c448f6f"
@@ -9344,13 +9327,6 @@ [email protected]:
   dependencies:
     tmpl "1.0.5"
 
-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"
-
 mdast-util-from-markdown@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz#52f14815ec291ed061f2922fd14d6689c810cb88"
@@ -11174,7 +11150,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.7, 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:
+prop-types@^15.5.7, prop-types@^15.6.0, 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==
@@ -11554,16 +11530,6 @@ react-resize-detector@^8.0.4:
   dependencies:
     lodash "^4.17.21"
 
-react-responsive@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.0.tgz#657c7a90823cd565f43aa5918bd8eb0cd2c91c91"
-  integrity sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==
-  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.14.1:
   version "6.22.3"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691"
@@ -12414,11 +12380,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-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==
-
 shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"