diff --git a/client/utils/responsive.jsx b/client/utils/responsive.jsx index 89f20fe8..97b14621 100644 --- a/client/utils/responsive.jsx +++ b/client/utils/responsive.jsx @@ -1,20 +1,24 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import MediaQuery from 'react-responsive'; import ResponsiveForm from '../modules/User/components/ResponsiveForm'; export const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true); - /** createMobileFirst: Receives the store, and creates a function that chooses between two components, * aimed at mobile and desktop resolutions, respectively. * The created function returns a Component (props => jsx) */ -export const createMobileFirst = store => (MobileComponent, Fallback) => props => ( - - {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled())) - ? - : )} - ); +export const createMobileFirst = store => (MobileComponent, Fallback) => (props) => { + const { forceDesktop } = useSelector(state => state.editorAccessibility); + return ( + + {matches => ((matches || (store && forceDesktop) || (!mobileEnabled())) + ? + : )} + + ); +}; export const responsiveForm = DesktopComponent => props => (