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

♻️ cleanup routes.jsx

Browse source
This commit is contained in:
ghalestrilo 2020-08-21 18:10:17 -03:00
parent f4d654a08f
commit 8d9f94f9c9
2 changed files with 33 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/routes.jsx
View file

@ -20,7 +20,7 @@ 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 { createMobileFirst, responsiveForm } from './utils/responsive'; import { mobileFirst, responsiveForm } from './utils/responsive';
const checkAuth = (store) => { const checkAuth = (store) => {
store.dispatch(getUser()); store.dispatch(getUser());
@ -34,10 +34,7 @@ const onRouteChange = (store) => {
store.dispatch(stopSketch()); store.dispatch(stopSketch());
}; };
const routes = (store) => { const routes = store => (
const mobileFirst = createMobileFirst(store);
return (
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}> <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} /> <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
@ -72,7 +69,6 @@ const routes = (store) => {
<Route path="/preferences" component={MobilePreferences} /> <Route path="/preferences" component={MobilePreferences} />
</Route> </Route>
); );
};
export default routes; export default routes;

8
client/utils/responsive.jsx
View file

@ -5,15 +5,11 @@ import ResponsiveForm from '../modules/User/components/ResponsiveForm';
export const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true); export const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true);
/** createMobileFirst: Receives the store, and creates a function that chooses between two components, export const mobileFirst = (MobileComponent, Fallback) => (props) => {
* aimed at mobile and desktop resolutions, respectively.
* The created function returns a Component (props => jsx)
*/
export const createMobileFirst = store => (MobileComponent, Fallback) => (props) => {
const { forceDesktop } = useSelector(state => state.editorAccessibility); const { forceDesktop } = useSelector(state => state.editorAccessibility);
return ( return (
<MediaQuery minWidth={770}> <MediaQuery minWidth={770}>
{matches => ((matches || (store && forceDesktop) || (!mobileEnabled())) {matches => ((matches || forceDesktop || (!mobileEnabled()))
? <Fallback {...props} /> ? <Fallback {...props} />
: <MobileComponent {...props} />)} : <MobileComponent {...props} />)}
</MediaQuery> </MediaQuery>