r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

♻️ move responsive helper methods to utils/responsive.jsx

Browse source
This commit is contained in:
ghalestrilo 2020-08-21 17:09:20 -03:00
parent d17ce3ccc2
commit a2736e2423
2 changed files with 24 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
client/routes.jsx
View file

@ -1,7 +1,5 @@
import { Route, IndexRoute } from 'react-router'; import { Route, IndexRoute } from 'react-router';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import MediaQuery from 'react-responsive';
import App from './modules/App/App'; import App from './modules/App/App';
import IDEView from './modules/IDE/pages/IDEView'; import IDEView from './modules/IDE/pages/IDEView';
@ -22,31 +20,12 @@ import MobileDashboardView from './modules/Mobile/MobileDashboardView';
import { getUser } from './modules/User/actions'; import { getUser } from './modules/User/actions';
import { stopSketch } from './modules/IDE/actions/ide'; import { stopSketch } from './modules/IDE/actions/ide';
import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth'; import { userIsAuthenticated, userIsNotAuthenticated, userIsAuthorized } from './utils/auth';
import ResponsiveForm from './modules/User/components/ResponsiveForm'; import { createMobileFirst, responsiveForm } from './utils/responsive';
const checkAuth = (store) => { const checkAuth = (store) => {
store.dispatch(getUser()); 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 => (
<MediaQuery minDeviceWidth={770}>
{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 // TODO: This short-circuit seems unnecessary - using the mobile <Switch /> navigator (future) should prevent this from being called
const onRouteChange = (store) => { const onRouteChange = (store) => {
const path = window.location.pathname; const path = window.location.pathname;

23
client/utils/responsive.jsx Normal file
View file

@ -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 => (
<MediaQuery minDeviceWidth={770}>
{matches => ((matches || (store && store.getState().editorAccessibility.forceDesktop) || (!mobileEnabled()))
? <Fallback {...props} />
: <MobileComponent {...props} />)}
</MediaQuery>);
export const responsiveForm = DesktopComponent => props => (
<ResponsiveForm>
<DesktopComponent {...props} />
</ResponsiveForm>
);