🚧 switch index page manually

client/routes.jsx

@@ -1,5 +1,8 @@
 import { Route, IndexRoute } from 'react-router';
 import React from 'react';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+
 import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
 import MobileIDEView from './modules/IDE/pages/MobileIDEView';
@@ -24,6 +27,21 @@ const checkAuth = (store) => {
   store.dispatch(getUser());
 };
 
+// const MobileFirstRoute = props => (
+//   <Route path={props.path} {...props}>
+//     <MediaQuery minDeviceWidth={1224}>
+//       {matches => (matches
+//         ? props.component(props)
+//         : props.fallback(props))}
+//     </MediaQuery>
+//   </Route>);
+
+// MobileFirstRoute.propTypes = {
+//   path: PropTypes.string.isRequired,
+//   component: PropTypes.any.isRequired, // eslint-disable-line
+//   fallback: PropTypes.any.isRequired // eslint-disable-line
+// };
+
 // TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
 const onRouteChange = (store) => {
   const path = window.location.pathname;
@@ -34,7 +52,16 @@ const onRouteChange = (store) => {
 
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-    <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
+    <IndexRoute
+      onEnter={checkAuth(store)}
+      component={props => (
+        <MediaQuery minDeviceWidth={1224}>
+          {matches => (matches
+            ? <IDEView {...props} />
+            : <MobileIDEView {...props} />)}
+        </MediaQuery>)}
+    />
+
     <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
     <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
     <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
@@ -58,10 +85,10 @@ const routes = store => (
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
 
+    <Route path="/mobile" component={MobileIDEView} />
 
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
-    <Route path="/mobile" component={MobileIDEView} />
 
     <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
     <Route path="/mobile/:username/assets" component={userIsAuthenticated(userIsAuthorized(MobileDashboardView))} />

package-lock.json

@@ -13124,6 +13124,11 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -19020,6 +19025,11 @@
         }
       }
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "i18next": {
       "version": "19.5.4",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.5.4.tgz",
@@ -25866,6 +25876,14 @@
         "unquote": "^1.1.0"
       }
     },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -32233,6 +32251,17 @@
         }
       }
     },
+    "react-responsive": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.1.0.tgz",
+      "integrity": "sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
+      }
+    },
     "react-router": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-3.2.5.tgz",
@@ -34519,8 +34548,7 @@
     "shallow-equal": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-      "dev": true
     },
     "shallowequal": {
       "version": "1.1.0",

package.json

@@ -201,6 +201,7 @@
     "react-hot-loader": "^4.12.19",
     "react-i18next": "^11.5.0",
     "react-redux": "^7.2.0",
+    "react-responsive": "^8.1.0",
     "react-router": "^3.2.5",
     "react-split-pane": "^0.1.89",
     "react-tabs": "^2.3.1",