🚧 create editorAccessibility.forceDesktop state prop

Author: ghalestrilo

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
   })),
 };
 

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,

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;
   }

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>);