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

66
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,45 +34,41 @@ const onRouteChange = (store) => {
store.dispatch(stopSketch()); store.dispatch(stopSketch());
}; };
const routes = (store) => { const routes = store => (
const mobileFirst = createMobileFirst(store); <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
return ( <Route path="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} />
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}> <Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} /> <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="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} /> <Route path="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
<Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} /> <Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
<Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} /> <Route path="/:username/sketches/:project_id" component={mobileFirst(MobileIDEView, IDEView)} />
<Route path="/verify" component={EmailVerificationView} /> <Route path="/:username/sketches/:project_id/add-to-collection" component={mobileFirst(MobileIDEView, IDEView)} />
<Route <Route path="/:username/collections" component={mobileFirst(MobileDashboardView, DashboardView)} />
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/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} /> <Route path="/:username/collections/create" component={DashboardView} />
<Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} /> <Route path="/:username/collections/:collection_id" component={CollectionView} />
<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="/:username/collections/create" component={DashboardView} /> <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
<Route path="/:username/collections/:collection_id" component={CollectionView} /> <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
<Route path="/account" component={userIsAuthenticated(AccountView)} />
<Route path="/about" component={IDEView} />
<Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} /> {/* Mobile-only Routes */}
<Route path="/assets" component={createRedirectWithUsername('/:username/assets')} /> <Route path="/preview" component={MobileSketchView} />
<Route path="/account" component={userIsAuthenticated(AccountView)} /> <Route path="/preferences" component={MobilePreferences} />
<Route path="/about" component={IDEView} />
{/* Mobile-only Routes */} </Route>
<Route path="/preview" component={MobileSketchView} /> );
<Route path="/preferences" component={MobilePreferences} />
</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>