From ddc95fa48882cca6c2a86e091d84d7f4ab4f6132 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 19 Aug 2020 17:48:09 -0300 Subject: [PATCH 01/15] :construction: switch index page manually --- client/routes.jsx | 31 +++++++++++++++++++++++++++++-- package-lock.json | 32 ++++++++++++++++++++++++++++++-- package.json | 1 + 3 files changed, 60 insertions(+), 4 deletions(-) diff --git a/client/routes.jsx b/client/routes.jsx index a9d5632c..b2cffc89 100644 --- a/client/routes.jsx +++ b/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 => ( +// +// +// {matches => (matches +// ? props.component(props) +// : props.fallback(props))} +// +// ); + +// 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 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 => ( { onRouteChange(store); }}> - + ( + + {matches => (matches + ? + : )} + )} + /> + @@ -58,10 +85,10 @@ const routes = store => ( + - diff --git a/package-lock.json b/package-lock.json index 8abec584..cf191511 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" }, "shallowequal": { "version": "1.1.0", diff --git a/package.json b/package.json index 01f558f9..3d1d85af 100644 --- a/package.json +++ b/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", From 26336a24a85bd4bd44c8804760d85d28e63c8cff Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 19 Aug 2020 17:53:51 -0300 Subject: [PATCH 02/15] :construction: change mobile breakpoint to 800px --- client/routes.jsx | 30 +++++++----------------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/client/routes.jsx b/client/routes.jsx index b2cffc89..ae1876d4 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -27,20 +27,12 @@ const checkAuth = (store) => { store.dispatch(getUser()); }; -// const MobileFirstRoute = props => ( -// -// -// {matches => (matches -// ? props.component(props) -// : props.fallback(props))} -// -// ); - -// MobileFirstRoute.propTypes = { -// path: PropTypes.string.isRequired, -// component: PropTypes.any.isRequired, // eslint-disable-line -// fallback: PropTypes.any.isRequired // eslint-disable-line -// }; +const mobileFirst = (MobileComponent, Fallback) => props => ( + + {matches => (matches + ? + : )} + ); // TODO: This short-circuit seems unnecessary - using the mobile navigator (future) should prevent this from being called const onRouteChange = (store) => { @@ -52,15 +44,7 @@ const onRouteChange = (store) => { const routes = store => ( { onRouteChange(store); }}> - ( - - {matches => (matches - ? - : )} - )} - /> + From 21fce873df3acf48ead48d9585dec471dd11ae77 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 19 Aug 2020 18:13:05 -0300 Subject: [PATCH 03/15] :construction: update routes.jsx to include mobile routes --- client/routes.jsx | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/client/routes.jsx b/client/routes.jsx index ae1876d4..28880c76 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -37,7 +37,7 @@ const mobileFirst = (MobileComponent, Fallback) => 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; - if (path.includes('/mobile/preview')) return; + if (path.includes('preview')) return; store.dispatch(stopSketch()); }; @@ -57,28 +57,24 @@ const routes = store => ( - - - - - - - - + + + + + + + + + + + - - - - - - - - - - + {/* Mobile-only Routes */} + + ); From 904e87333c1b7ff13140c5fce9310ea5c0c367f8 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 19 Aug 2020 18:20:47 -0300 Subject: [PATCH 04/15] :construction: update mobile links not to include /mobile --- client/modules/IDE/pages/MobileIDEView.jsx | 12 ++++++------ client/modules/Mobile/MobileDashboardView.jsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index a1ab0ea7..62d155e1 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -66,14 +66,14 @@ const NavItem = styled.li` const getNavOptions = (username = undefined) => (username ? [ - { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, - { icon: PreferencesIcon, title: 'My Stuff', href: `/mobile/${username}/sketches` }, - { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' }, + { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, + { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` }, + { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' }, { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, ] : [ - { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, - { icon: PreferencesIcon, title: 'Examples', href: '/mobile/p5/sketches' }, + { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, + { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' }, { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, ] ); @@ -137,7 +137,7 @@ const MobileIDEView = (props) => {
  • - { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" /> + { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
    • diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index 270faee7..499ece8c 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -138,8 +138,8 @@ const Panels = { const navOptions = username => [ - { title: 'Create Sketch', href: '/mobile' }, - { title: 'Create Collection', href: `/mobile/${username}/collections/create` } + { title: 'Create Sketch', href: '/' }, + { title: 'Create Collection', href: `/${username}/collections/create` } ]; From fc48a5a86c0887f3576206c5a5f3794e3fbda647 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 19 Aug 2020 18:30:11 -0300 Subject: [PATCH 05/15] :construction: update mobile links not to include /mobile --- client/modules/IDE/components/SketchList.jsx | 2 -- client/modules/Mobile/MobileDashboardView.jsx | 2 +- client/modules/Mobile/MobilePreferences.jsx | 2 +- client/modules/Mobile/MobileSketchView.jsx | 2 +- 4 files changed, 3 insertions(+), 5 deletions(-) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index d5f9d71d..35b8a1a4 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -262,8 +262,6 @@ class SketchListRowBase extends React.Component { url = `/${username}/sketches/${slugify(sketch.name, '_')}`; } - if (this.props.mobile) url = `/mobile${url}`; - const name = ( diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index 499ece8c..0fd7cfe4 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -185,7 +185,7 @@ const MobileDashboard = ({ params, location }) => { - + diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index c7991c2f..69ad737b 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -69,7 +69,7 @@ const MobilePreferences = () => {
    - +
    diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index 4d31c172..a4238fec 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -39,7 +39,7 @@ const MobileSketchView = () => { return (
    } + leftButton={} title={projectName} /> From 6e1724ae0450b8b6e116076e0c4ba19d59076aa7 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 19 Aug 2020 18:38:33 -0300 Subject: [PATCH 06/15] :construction: update mobile breakpoint to 770 --- client/routes.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/routes.jsx b/client/routes.jsx index 28880c76..bf6f7f15 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -28,7 +28,7 @@ const checkAuth = (store) => { }; const mobileFirst = (MobileComponent, Fallback) => props => ( - + {matches => (matches ? : )} From 19ffdd49d26e0023eec0bce45fb13d5cbfe863db Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 20 Aug 2020 15:59:05 -0300 Subject: [PATCH 07/15] :construction: create editorAccessibility.forceDesktop state prop --- client/components/Dropdown.jsx | 3 ++- client/modules/IDE/pages/MobileIDEView.jsx | 10 ++++++---- client/modules/IDE/reducers/editorAccessibility.js | 5 ++++- client/routes.jsx | 4 ++-- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index 48bed0cb..40237a52 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -80,7 +80,8 @@ Dropdown.propTypes = { items: PropTypes.arrayOf(PropTypes.shape({ action: PropTypes.func, icon: PropTypes.func, - href: PropTypes.string + href: PropTypes.string, + title: PropTypes.string })), }; diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 62d155e1..85c26c35 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -63,13 +63,13 @@ const NavItem = styled.li` position: relative; `; -const getNavOptions = (username = undefined) => +const getNavOptions = (username = undefined, toggleForceDesktop = () => {}) => (username ? [ { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, { icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` }, { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' }, - { icon: PreferencesIcon, title: 'Original Editor', href: '/', }, + { icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, }, ] : [ { icon: PreferencesIcon, title: 'Preferences', href: '/preferences', }, @@ -84,7 +84,8 @@ const MobileIDEView = (props) => { selectedFile, updateFileContent, files, user, params, closeEditorOptions, showEditorOptions, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, - showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges + showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges, + toggleForceDesktop } = props; const [tmController, setTmController] = useState(null); // eslint-disable-line @@ -110,7 +111,7 @@ const MobileIDEView = (props) => { // Screen Modals const [toggleNavDropdown, NavDropDown] = useAsModal(); @@ -287,6 +288,7 @@ MobileIDEView.propTypes = { showRuntimeErrorWarning: PropTypes.func.isRequired, hideRuntimeErrorWarning: PropTypes.func.isRequired, + toggleForceDesktop: PropTypes.func.isRequired, user: PropTypes.shape({ authenticated: PropTypes.bool.isRequired, diff --git a/client/modules/IDE/reducers/editorAccessibility.js b/client/modules/IDE/reducers/editorAccessibility.js index d86dbede..d10fe667 100644 --- a/client/modules/IDE/reducers/editorAccessibility.js +++ b/client/modules/IDE/reducers/editorAccessibility.js @@ -1,7 +1,8 @@ import * as ActionTypes from '../../../constants'; const initialState = { - lintMessages: [] + lintMessages: [], + forceDesktop: false }; let messageId = 0; @@ -16,6 +17,8 @@ const editorAccessibility = (state = initialState, action) => { }); case ActionTypes.CLEAR_LINT_MESSAGE: return Object.assign({}, state, { lintMessages: [] }); + case ActionTypes.TOGGLE_FORCE_DESKTOP: + return { ...state, forceDesktop: !state.forceDesktop }; default: return state; } diff --git a/client/routes.jsx b/client/routes.jsx index bf6f7f15..e25fbc06 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -27,9 +27,9 @@ const checkAuth = (store) => { store.dispatch(getUser()); }; -const mobileFirst = (MobileComponent, Fallback) => props => ( +const mobileFirst = (MobileComponent, Fallback, store) => props => ( - {matches => (matches + {matches => ((matches && (!store || store.getState().editorAccessibility.forceDesktop)) ? : )} ); From cc32ee1484b244f9055c518259b2f3facfb88c6b Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 20 Aug 2020 18:42:56 -0300 Subject: [PATCH 08/15] :construction: remove console.log TODO: fix TOGGLE_FORCE_DESKTOP not getting caught by reducer --- client/modules/IDE/reducers/editorAccessibility.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/reducers/editorAccessibility.js b/client/modules/IDE/reducers/editorAccessibility.js index 325fe54c..73d6cd75 100644 --- a/client/modules/IDE/reducers/editorAccessibility.js +++ b/client/modules/IDE/reducers/editorAccessibility.js @@ -7,7 +7,6 @@ const initialState = { let messageId = 0; const editorAccessibility = (state = initialState, action) => { - console.log('accessbility'); switch (action.type) { case ActionTypes.UPDATE_LINT_MESSAGE: messageId += 1; From d17ce3ccc28a537ef6a528b8736dcae5aeed2461 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 17:03:04 -0300 Subject: [PATCH 09/15] :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 - ? ( - - {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; From a2736e2423de34d919666c2623e97d7e57744798 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 17:09:20 -0300 Subject: [PATCH 10/15] :recycle: move responsive helper methods to utils/responsive.jsx --- client/routes.jsx | 23 +---------------------- client/utils/responsive.jsx | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 22 deletions(-) create mode 100644 client/utils/responsive.jsx diff --git a/client/routes.jsx b/client/routes.jsx index ada29bd8..5eeed0a4 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -1,7 +1,5 @@ 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'; @@ -22,31 +20,12 @@ 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'; +import { createMobileFirst, responsiveForm } from './utils/responsive'; const checkAuth = (store) => { store.dispatch(getUser()); }; -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) || (!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; diff --git a/client/utils/responsive.jsx b/client/utils/responsive.jsx new file mode 100644 index 00000000..d611e393 --- /dev/null +++ b/client/utils/responsive.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import MediaQuery from 'react-responsive'; +import ResponsiveForm from '../modules/User/components/ResponsiveForm'; + +export 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) + */ +export const createMobileFirst = store => (MobileComponent, Fallback) => props => ( + + {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled())) + ? + : )} + ); + +export const responsiveForm = DesktopComponent => props => ( + + + +); From 28d54bdfb59b3eb01da448a971a7d9332c8c4d01 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 17:11:34 -0300 Subject: [PATCH 11/15] :recycle: change responsive logic from minDeviceWidth to minWidth --- client/utils/responsive.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/utils/responsive.jsx b/client/utils/responsive.jsx index d611e393..89f20fe8 100644 --- a/client/utils/responsive.jsx +++ b/client/utils/responsive.jsx @@ -10,7 +10,7 @@ export const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true); * The created function returns a Component (props => jsx) */ export const createMobileFirst = store => (MobileComponent, Fallback) => props => ( - + {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled())) ? : )} From 36670f72fd9571f03507ad30c5e1f325bd1155c9 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 18:01:01 -0300 Subject: [PATCH 12/15] :bug: fix toggleForceDesktop dispatch not being caught by reducer --- client/constants.js | 1 + client/modules/IDE/pages/MobileIDEView.jsx | 1 + 2 files changed, 2 insertions(+) diff --git a/client/constants.js b/client/constants.js index a23badd8..0a5188a1 100644 --- a/client/constants.js +++ b/client/constants.js @@ -62,6 +62,7 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE'; export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE'; export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE'; +export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP'; export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME'; export const DELETE_FILE = 'DELETE_FILE'; diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index bf151656..842cd8c7 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -132,6 +132,7 @@ const MobileIDEView = (props) => { subtitle={selectedFile.name} > + Date: Fri, 21 Aug 2020 18:07:41 -0300 Subject: [PATCH 13/15] :sparkles: make forceDesktop work --- client/utils/responsive.jsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/client/utils/responsive.jsx b/client/utils/responsive.jsx index 89f20fe8..97b14621 100644 --- a/client/utils/responsive.jsx +++ b/client/utils/responsive.jsx @@ -1,20 +1,24 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import MediaQuery from 'react-responsive'; import ResponsiveForm from '../modules/User/components/ResponsiveForm'; export 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) */ -export const createMobileFirst = store => (MobileComponent, Fallback) => props => ( - - {matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled())) - ? - : )} - ); +export const createMobileFirst = store => (MobileComponent, Fallback) => (props) => { + const { forceDesktop } = useSelector(state => state.editorAccessibility); + return ( + + {matches => ((matches || (store && forceDesktop) || (!mobileEnabled())) + ? + : )} + + ); +}; export const responsiveForm = DesktopComponent => props => ( From 8d9f94f9c989a67f5e7ef78f72e43911f4f98715 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 18:10:17 -0300 Subject: [PATCH 14/15] :recycle: cleanup routes.jsx --- client/routes.jsx | 66 +++++++++++++++++-------------------- client/utils/responsive.jsx | 8 ++--- 2 files changed, 33 insertions(+), 41 deletions(-) diff --git a/client/routes.jsx b/client/routes.jsx index 5eeed0a4..15f631e4 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -20,7 +20,7 @@ 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 { createMobileFirst, responsiveForm } from './utils/responsive'; +import { mobileFirst, responsiveForm } from './utils/responsive'; const checkAuth = (store) => { store.dispatch(getUser()); @@ -34,45 +34,41 @@ const onRouteChange = (store) => { store.dispatch(stopSketch()); }; -const routes = (store) => { - const mobileFirst = createMobileFirst(store); +const routes = store => ( + { onRouteChange(store); }}> + - return ( - { onRouteChange(store); }}> - + + + + + + + + - - - - - - - - + + + + + - - - - - + + - - + + + + - - - - + {/* Mobile-only Routes */} + + - {/* Mobile-only Routes */} - - - - - ); -}; + +); export default routes; diff --git a/client/utils/responsive.jsx b/client/utils/responsive.jsx index 97b14621..05b0d84e 100644 --- a/client/utils/responsive.jsx +++ b/client/utils/responsive.jsx @@ -5,15 +5,11 @@ import ResponsiveForm from '../modules/User/components/ResponsiveForm'; export 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) - */ -export const createMobileFirst = store => (MobileComponent, Fallback) => (props) => { +export const mobileFirst = (MobileComponent, Fallback) => (props) => { const { forceDesktop } = useSelector(state => state.editorAccessibility); return ( - {matches => ((matches || (store && forceDesktop) || (!mobileEnabled())) + {matches => ((matches || forceDesktop || (!mobileEnabled())) ? : )} From e88ee4e5957fb173e5e180b02ae5e0430071d0b4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 21 Aug 2020 18:22:40 -0300 Subject: [PATCH 15/15] :recycle: remove /mobile endpoints from server --- server/server.js | 4 ---- server/views/index.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/server/server.js b/server/server.js index c9794925..d82aa6d8 100644 --- a/server/server.js +++ b/server/server.js @@ -132,10 +132,6 @@ app.get( // isomorphic rendering app.use('/', serverRoutes); -if (process.env.MOBILE_ENABLED) { - app.use('/mobile', serverRoutes); -} - app.use(assetRoutes); app.use('/', embedRoutes); diff --git a/server/views/index.js b/server/views/index.js index 6aca8975..ecc269c0 100644 --- a/server/views/index.js +++ b/server/views/index.js @@ -33,7 +33,7 @@ export function renderIndex() { 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}; - window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true :false}; + window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false};