From 7dc10ab682468f894a4c3a571bc158b38b680237 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 12 Jun 2020 16:09:30 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8make=20environment=20variable-based=20?=
 =?UTF-8?q?switch=20for=20/mobile=20route?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/modules/IDE/pages/IDEViewMobile.jsx |  8 +++++++-
 client/routes.jsx                          | 14 ++++++++------
 client/theme.js                            |  3 ---
 server/routes/server.routes.js             |  8 +++++---
 server/views/index.js                      |  1 +
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
index fcb39f99..1e3fb820 100644
--- 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
index 9502857f..5f4f9b8b 100644
--- 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
index 4b61d77c..5215dd99 100644
--- 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
index ddec0c22..bec91b17 100644
--- 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
index 52b98985..ef88aec6 100644
--- 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>