From f4d654a08f2bbb9d1da6042c6aad3f9cc4e5765d Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 21 Aug 2020 18:07:41 -0300
Subject: [PATCH] :sparkles: make forceDesktop work

---
 client/utils/responsive.jsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

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 => (
-  <MediaQuery minWidth={770}>
-    {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled()))
-      ? <Fallback {...props} />
-      : <MobileComponent {...props} />)}
-  </MediaQuery>);
+export const createMobileFirst = store => (MobileComponent, Fallback) => (props) => {
+  const { forceDesktop } = useSelector(state => state.editorAccessibility);
+  return (
+    <MediaQuery minWidth={770}>
+      {matches => ((matches || (store && forceDesktop) || (!mobileEnabled()))
+        ? <Fallback {...props} />
+        : <MobileComponent {...props} />)}
+    </MediaQuery>
+  );
+};
 
 export const responsiveForm = DesktopComponent => props => (
   <ResponsiveForm>