✨make environment variable-based switch for /mobile route

ghalestrilo · ghalestrilo · commit 7dc10ab68246 · 2020-06-12T16:09:30.000-03:00
diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { Link } from 'react-router';
+
+import Editor from '../components/Editor';
 import { prop, remSize } from '../../../theme';
 
 const background = prop('Button.default.background');
@@ -34,10 +37,13 @@ Screen.propTypes = {
 export default () => (
   <Screen>
     <Header><h1>Mobile View</h1></Header>
+
+
     <h3>
       <br />This page is under construction.
-      <br /><a href="/?ignoremobile" >Click here</a> to return to the regular editor
+      <br /><a href="/">Click here</a> to return to the regular editor
     </h3>
+
     <Footer><h1>Bottom Bar</h1></Footer>
   </Screen>
 );
diff --git a/client/routes.jsx b/client/routes.jsx
@@ -1,8 +1,8 @@
 import { Route, IndexRoute } from 'react-router';
 import React from 'react';
 import App from './modules/App/App';
-import IDEViewScreen from './modules/IDE/pages/IDEView';
-import IDEViewMobileScreen from './modules/IDE/pages/IDEViewMobile';
+import IDEView from './modules/IDE/pages/IDEView';
+import IDEViewMobile from './modules/IDE/pages/IDEViewMobile';
 import FullView from './modules/IDE/pages/FullView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
@@ -25,11 +25,12 @@ const onRouteChange = (store) => {
   store.dispatch(stopSketch());
 };
 
-const ignoreMobile = () => window.location.search.substring(1).includes('ignoremobile');
-
-const isMobile = () => window.innerWidth <= 760;
-const IDEView = isMobile() && !ignoreMobile() ? IDEViewMobileScreen : IDEViewScreen;
+// TODO: Investigate using react-router for this switch
+// const ignoreMobile = () => window.location.search.substring(1).includes('ignoremobile');
+// const isMobile = () => window.innerWidth <= 760;
+// const IDEView = isMobile() && !ignoreMobile() ? IDEViewMobileScreen : IDEViewScreen;
 
+// How to use URL as a prop?
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
     <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
@@ -55,6 +56,7 @@ const routes = store => (
     <Route path="/:username/collections/create" component={DashboardView} />
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
+    <Route path="/mobile" component={IDEViewMobile} />
 
   </Route>
 );
diff --git a/client/theme.js b/client/theme.js
@@ -111,11 +111,8 @@ export default {
         foreground: grays.light,
         background: grays.dark,
         border: grays.middleDark,
-
       },
     },
-
-
   },
   [Theme.contrast]: {
     colors,
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
@@ -114,9 +114,11 @@ router.get('/about', (req, res) => {
   res.send(renderIndex());
 });
 
-router.get('/feedback', (req, res) => {
-  res.send(renderIndex());
-});
+if (process.env.MOBILE_ENABLED) {
+  router.get('/mobile', (req, res) => {
+    res.send(renderIndex());
+  });
+}
 
 router.get('/:username/collections/create', (req, res) => {
   userExists(req.params.username, (exists) => {
diff --git a/server/views/index.js b/server/views/index.js
@@ -32,6 +32,7 @@ export function renderIndex() {
         window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
         window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
         window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
+        window.process.env.MOBILE_ENABLED = ${process.env.MOBILE_ENABLED ? `${process.env.MOBILE_ENABLED}` : undefined};
       </script>
     </head>
     <body>
