From 19ffdd49d26e0023eec0bce45fb13d5cbfe863db Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 20 Aug 2020 15:59:05 -0300
Subject: [PATCH] :construction: create editorAccessibility.forceDesktop state
 prop

---
 client/components/Dropdown.jsx                     |  3 ++-
 client/modules/IDE/pages/MobileIDEView.jsx         | 10 ++++++----
 client/modules/IDE/reducers/editorAccessibility.js |  5 ++++-
 client/routes.jsx                                  |  4 ++--
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 48bed0cb..40237a52 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -80,7 +80,8 @@ Dropdown.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     action: PropTypes.func,
     icon: PropTypes.func,
-    href: PropTypes.string
+    href: PropTypes.string,
+    title: PropTypes.string
   })),
 };
 
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 62d155e1..85c26c35 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -63,13 +63,13 @@ const NavItem = styled.li`
   position: relative;
 `;
 
-const getNavOptions = (username = undefined) =>
+const getNavOptions = (username = undefined, toggleForceDesktop = () => {}) =>
   (username
     ? [
       { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
       { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
       { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
-      { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
+      { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
     ]
     : [
       { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
@@ -84,7 +84,8 @@ const MobileIDEView = (props) => {
     selectedFile, updateFileContent, files, user, params,
     closeEditorOptions, showEditorOptions,
     startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
-    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges
+    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges,
+    toggleForceDesktop
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
@@ -110,7 +111,7 @@ const MobileIDEView = (props) => {
 
   // Screen Modals
   const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={getNavOptions(username)}
+    items={getNavOptions(username, toggleForceDesktop)}
     align="right"
   />);
 
@@ -287,6 +288,7 @@ MobileIDEView.propTypes = {
   showRuntimeErrorWarning: PropTypes.func.isRequired,
 
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
+  toggleForceDesktop: PropTypes.func.isRequired,
 
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
diff --git a/client/modules/IDE/reducers/editorAccessibility.js b/client/modules/IDE/reducers/editorAccessibility.js
index d86dbede..d10fe667 100644
--- a/client/modules/IDE/reducers/editorAccessibility.js
+++ b/client/modules/IDE/reducers/editorAccessibility.js
@@ -1,7 +1,8 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  lintMessages: []
+  lintMessages: [],
+  forceDesktop: false
 };
 let messageId = 0;
 
@@ -16,6 +17,8 @@ const editorAccessibility = (state = initialState, action) => {
       });
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
+    case ActionTypes.TOGGLE_FORCE_DESKTOP:
+      return { ...state, forceDesktop: !state.forceDesktop };
     default:
       return state;
   }
diff --git a/client/routes.jsx b/client/routes.jsx
index bf6f7f15..e25fbc06 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -27,9 +27,9 @@ const checkAuth = (store) => {
   store.dispatch(getUser());
 };
 
-const mobileFirst = (MobileComponent, Fallback) => props => (
+const mobileFirst = (MobileComponent, Fallback, store) => props => (
   <MediaQuery minDeviceWidth={770}>
-    {matches => (matches
+    {matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop))
       ? <Fallback {...props} />
       : <MobileComponent {...props} />)}
   </MediaQuery>);