From d17ce3ccc28a537ef6a528b8736dcae5aeed2461 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 21 Aug 2020 17:03:04 -0300
Subject: [PATCH] :ok_hand: make views only responsible if MOBILE_ENABLED=true

---
 .../User/components/ResponsiveForm.jsx        | 21 +----
 client/modules/User/pages/LoginView.jsx       | 54 ++++++-------
 client/modules/User/pages/SignupView.jsx      | 45 +++++------
 client/routes.jsx                             | 81 +++++++++++--------
 4 files changed, 94 insertions(+), 107 deletions(-)

diff --git a/client/modules/User/components/ResponsiveForm.jsx b/client/modules/User/components/ResponsiveForm.jsx
index a63cfb02..45717269 100644
--- a/client/modules/User/components/ResponsiveForm.jsx
+++ b/client/modules/User/components/ResponsiveForm.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { remSize } from '../../../theme';
 
 
-const ResponsiveFormWrapper = styled.div`
+const ResponsiveForm = styled.div`
   .form-container__content {
     width: unset !important;
     padding-top: ${remSize(16)};
@@ -42,23 +42,4 @@ const ResponsiveFormWrapper = styled.div`
   }
 `;
 
-const ResponsiveForm = props =>
-  (props.mobile === true
-    ? (
-      <ResponsiveFormWrapper>
-        {props.children}
-      </ResponsiveFormWrapper>
-
-    )
-    : props.children);
-
-ResponsiveForm.propTypes = {
-  mobile: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-};
-ResponsiveForm.defaultProps = {
-  mobile: false,
-  children: []
-};
-
 export default ResponsiveForm;
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index cdd2b97f..f490f5f6 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -28,40 +28,36 @@ class LoginView extends React.Component {
   }
 
   render() {
-    const isMobile = () => (window.innerWidth < 770);
     if (this.props.user.authenticated) {
       this.gotoHomePage();
       return null;
     }
-    // TODO: mobile currently forced to true
     return (
-      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
-        <div className="login">
-          <Nav layout="dashboard" />
-          <main className="form-container">
-            <Helmet>
-              <title>{this.props.t('LoginView.Title')}</title>
-            </Helmet>
-            <div className="form-container__content">
-              <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
-              <LoginForm {...this.props} />
-              <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
-              <div className="form-container__stack">
-                <SocialAuthButton service={SocialAuthButton.services.github} />
-                <SocialAuthButton service={SocialAuthButton.services.google} />
-              </div>
-              <p className="form__navigation-options">
-                {this.props.t('LoginView.DontHaveAccount')}
-                <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
-              </p>
-              <p className="form__navigation-options">
-                {this.props.t('LoginView.ForgotPassword')}
-                <Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
-              </p>
+      <div className="login">
+        <Nav layout="dashboard" />
+        <main className="form-container">
+          <Helmet>
+            <title>{this.props.t('LoginView.Title')}</title>
+          </Helmet>
+          <div className="form-container__content">
+            <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
+            <LoginForm {...this.props} />
+            <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
+            <div className="form-container__stack">
+              <SocialAuthButton service={SocialAuthButton.services.github} />
+              <SocialAuthButton service={SocialAuthButton.services.google} />
             </div>
-          </main>
-        </div>
-      </ResponsiveForm>
+            <p className="form__navigation-options">
+              {this.props.t('LoginView.DontHaveAccount')}
+              <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
+            </p>
+            <p className="form__navigation-options">
+              {this.props.t('LoginView.ForgotPassword')}
+              <Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
+            </p>
+          </div>
+        </main>
+      </div>
     );
   }
 }
@@ -85,14 +81,12 @@ LoginView.propTypes = {
     authenticated: PropTypes.bool
   }),
   t: PropTypes.func.isRequired,
-  mobile: PropTypes.bool
 };
 
 LoginView.defaultProps = {
   user: {
     authenticated: false
   },
-  mobile: false
 };
 
 export default withTranslation()(reduxForm({
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index 4cebe88c..55ef1ae1 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -13,7 +13,6 @@ import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
 import ResponsiveForm from '../components/ResponsiveForm';
 
-const isMobile = () => (window.innerWidth < 770);
 
 class SignupView extends React.Component {
   gotoHomePage = () => {
@@ -26,29 +25,27 @@ class SignupView extends React.Component {
       return null;
     }
     return (
-      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
-        <div className="signup">
-          <Nav layout="dashboard" />
-          <main className="form-container">
-            <Helmet>
-              <title>{this.props.t('SignupView.Title')}</title>
-            </Helmet>
-            <div className="form-container__content">
-              <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
-              <SignupForm {...this.props} />
-              <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
-              <div className="form-container__stack">
-                <SocialAuthButton service={SocialAuthButton.services.github} />
-                <SocialAuthButton service={SocialAuthButton.services.google} />
-              </div>
-              <p className="form__navigation-options">
-                {this.props.t('SignupView.AlreadyHave')}
-                <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
-              </p>
+      <div className="signup">
+        <Nav layout="dashboard" />
+        <main className="form-container">
+          <Helmet>
+            <title>{this.props.t('SignupView.Title')}</title>
+          </Helmet>
+          <div className="form-container__content">
+            <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
+            <SignupForm {...this.props} />
+            <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
+            <div className="form-container__stack">
+              <SocialAuthButton service={SocialAuthButton.services.github} />
+              <SocialAuthButton service={SocialAuthButton.services.google} />
             </div>
-          </main>
-        </div>
-      </ResponsiveForm>
+            <p className="form__navigation-options">
+              {this.props.t('SignupView.AlreadyHave')}
+              <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
+            </p>
+          </div>
+        </main>
+      </div>
     );
   }
 }
@@ -116,14 +113,12 @@ SignupView.propTypes = {
     authenticated: PropTypes.bool
   }),
   t: PropTypes.func.isRequired,
-  mobile: PropTypes.bool
 };
 
 SignupView.defaultProps = {
   user: {
     authenticated: false
   },
-  mobile: false
 };
 
 export default withTranslation()(reduxForm({
diff --git a/client/routes.jsx b/client/routes.jsx
index 9e337915..ada29bd8 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -22,18 +22,31 @@ import MobileDashboardView from './modules/Mobile/MobileDashboardView';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
+import ResponsiveForm from './modules/User/components/ResponsiveForm';
 
 const checkAuth = (store) => {
   store.dispatch(getUser());
 };
 
-const mobileFirst = (MobileComponent, Fallback, store) => props => (
+const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true);
+
+/** createMobileFirst: Receives the store, and creates a function that chooses between two components,
+ * aimed at mobile and desktop resolutions, respectively.
+ * The created function returns a Component (props => jsx)
+ */
+const createMobileFirst = store => (MobileComponent, Fallback) => props => (
   <MediaQuery minDeviceWidth={770}>
-    {matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop))
+    {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled()))
       ? <Fallback {...props} />
       : <MobileComponent {...props} />)}
   </MediaQuery>);
 
+const responsiveForm = DesktopComponent => props => (
+  <ResponsiveForm>
+    <DesktopComponent {...props} />
+  </ResponsiveForm>
+);
+
 // 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;
@@ -42,41 +55,45 @@ const onRouteChange = (store) => {
   store.dispatch(stopSketch());
 };
 
-const routes = store => (
-  <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
+const routes = (store) => {
+  const mobileFirst = createMobileFirst(store);
 
-    <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
-    <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
-    <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
-    <Route path="/verify" component={EmailVerificationView} />
-    <Route
-      path="/reset-password/:reset_password_token"
-      component={NewPasswordView}
-    />
-    <Route path="/projects/:project_id" component={IDEView} />
-    <Route path="/:username/full/:project_id" component={FullView} />
-    <Route path="/full/:project_id" component={FullView} />
+  return (
+    <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
+      <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
 
-    <Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
-    <Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
-    <Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
-    <Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
-    <Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
+      <Route path="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} />
+      <Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
+      <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
+      <Route path="/verify" component={EmailVerificationView} />
+      <Route
+        path="/reset-password/:reset_password_token"
+        component={NewPasswordView}
+      />
+      <Route path="/projects/:project_id" component={IDEView} />
+      <Route path="/:username/full/:project_id" component={FullView} />
+      <Route path="/full/:project_id" component={FullView} />
 
-    <Route path="/:username/collections/create" component={DashboardView} />
-    <Route path="/:username/collections/:collection_id" component={CollectionView} />
+      <Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
+      <Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
+      <Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
+      <Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
+      <Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
 
-    <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
-    <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
-    <Route path="/account" component={userIsAuthenticated(AccountView)} />
-    <Route path="/about" component={IDEView} />
+      <Route path="/:username/collections/create" component={DashboardView} />
+      <Route path="/:username/collections/:collection_id" component={CollectionView} />
 
-    {/* Mobile-only Routes */}
-    <Route path="/preview" component={MobileSketchView} />
-    <Route path="/preferences" component={MobilePreferences} />
+      <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
+      <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
+      <Route path="/account" component={userIsAuthenticated(AccountView)} />
+      <Route path="/about" component={IDEView} />
 
-  </Route>
-);
+      {/* Mobile-only Routes */}
+      <Route path="/preview" component={MobileSketchView} />
+      <Route path="/preferences" component={MobilePreferences} />
+
+    </Route>
+  );
+};
 
 export default routes;