refactor: created custom hook for isMobile check

open-craft · Jul 19, 2021 · fdeccc5 · fdeccc5
1 parent e80bd4a
commit fdeccc5
Show file tree

Hide file tree

Showing 8 changed files with 6,987 additions and 2,069 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/CourseAuthoringPage.test.jsx b/src/CourseAuthoringPage.test.jsx
@@ -10,7 +10,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import initializeStore from './store';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import PagesAndResources from './pages-and-resources/PagesAndResources';
-import executeThunk from './utils';
+import { executeThunk } from './utils';
 import { fetchCourseApps } from './pages-and-resources/data/thunks';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';

diff --git a/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx b/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx
@@ -8,7 +8,6 @@ import {
 import { Formik } from 'formik';
 import { useDispatch, useSelector } from 'react-redux';
 import * as Yup from 'yup';
-import { useMediaQuery } from 'react-responsive';
 import { RequestStatus } from '../../data/constants';
 import FormSwitchGroup from '../../generic/FormSwitchGroup';
 import { useModel } from '../../generic/model-store';
@@ -18,6 +17,7 @@ import { updateSavingStatus } from '../data/slice';
 import AppConfigFormDivider from '../discussions/app-config-form/apps/shared/AppConfigFormDivider';
 import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
 import messages from './messages';
+import { useIsMobile } from '../../utils';
 
 function AppSettingsForm({ formikProps, children }) {
   return children && (
@@ -65,7 +65,7 @@ function AppSettingsModal({
   const appInfo = useModel('courseApps', appId);
   const dispatch = useDispatch();
   const submitButtonState = updateSettingsRequestStatus === RequestStatus.IN_PROGRESS ? 'pending' : 'default';
-  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 768px)' });
+  const isTabletOrMobile = useIsMobile();
   const modalVariant = isTabletOrMobile ? 'dark' : 'default';
 
   useEffect(() => {

diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx b/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx
@@ -9,7 +9,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { getAppsUrl } from '../../../data/api';
 import { fetchApps } from '../../../data/thunks';
 import initializeStore from '../../../../../store';
-import executeThunk from '../../../../../utils';
+import { executeThunk } from '../../../../../utils';
 import {
   legacyApiResponse,
 } from '../../../factories/mockApiResponses';

diff --git a/...urces/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.test.jsx b/...urces/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.test.jsx
@@ -18,7 +18,7 @@ import DiscussionTopics from './DiscussionTopics';
 import initializeStore from '../../../../../../store';
 import { getAppsUrl } from '../../../../data/api';
 import { fetchApps } from '../../../../data/thunks';
-import executeThunk from '../../../../../../utils';
+import { executeThunk } from '../../../../../../utils';
 import { legacyApiResponse } from '../../../../factories/mockApiResponses';
 import LegacyConfigFormProvider from '../../legacy/LegacyConfigFormProvider';
 

diff --git a/src/pages-and-resources/discussions/app-list/AppList.test.jsx b/src/pages-and-resources/discussions/app-list/AppList.test.jsx
@@ -13,7 +13,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import initializeStore from '../../../store';
-import executeThunk from '../../../utils';
+import { executeThunk } from '../../../utils';
 import { getAppsUrl } from '../data/api';
 import { fetchApps } from '../data/thunks';
 import { emptyAppApiResponse, legacyApiResponse, piazzaApiResponse } from '../factories/mockApiResponses';

diff --git a/src/pages-and-resources/discussions/data/redux.test.js b/src/pages-and-resources/discussions/data/redux.test.js
@@ -10,7 +10,7 @@ import {
 import { fetchApps, saveAppConfig } from './thunks';
 import { LOADED } from '../../../data/slice';
 import { legacyApiResponse, piazzaApiResponse } from '../factories/mockApiResponses';
-import executeThunk from '../../../utils';
+import { executeThunk } from '../../../utils';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const pagesAndResourcesPath = `/course/${courseId}/pages-and-resources`;

diff --git a/src/utils.js b/src/utils.js
@@ -1,6 +1,10 @@
-const executeThunk = async (thunk, dispatch, getState) => {
+import { useMediaQuery } from 'react-responsive';
+
+export const executeThunk = async (thunk, dispatch, getState) => {
   await thunk(dispatch, getState);
   await new Promise(setImmediate);
 };
 
-export default executeThunk;
+export function useIsMobile() {
+  return useMediaQuery({ query: '(max-width: 768px)' });
+}