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 - ? ( - - {props.children} - - - ) - : 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 ( - -
-
); } } @@ -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 ( - -
-
); } } @@ -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 => ( - {matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop)) + {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled())) ? : )} ); +const responsiveForm = DesktopComponent => props => ( + + + +); + // TODO: This short-circuit seems unnecessary - using the mobile 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 => ( - { onRouteChange(store); }}> - +const routes = (store) => { + const mobileFirst = createMobileFirst(store); - - - - - - - - + return ( + { onRouteChange(store); }}> + - - - - - + + + + + + + + - - + + + + + - - - - + + - {/* Mobile-only Routes */} - - + + + + - -); + {/* Mobile-only Routes */} + + + + + ); +}; export default routes;