♻️ cleanup routes.jsx

Author: ghalestrilo

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 => (
+  <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
+    <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
 
-  return (
-    <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-      <IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
+    <Route path="/login" component={userIsNotAuthenticated(mobileFirst(responsiveForm(LoginView), LoginView))} />
+    <Route path="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
+    <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="/signup" component={userIsNotAuthenticated(mobileFirst(responsiveForm(SignupView), SignupView))} />
-      <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="/:username/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
+    <Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
+    <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/assets" component={userIsAuthenticated(userIsAuthorized(mobileFirst(MobileDashboardView, DashboardView)))} />
-      <Route path="/:username/sketches" component={mobileFirst(MobileDashboardView, DashboardView)} />
-      <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="/:username/collections/:collection_id" component={CollectionView} />
 
-      <Route path="/:username/collections/create" component={DashboardView} />
-      <Route path="/:username/collections/:collection_id" component={CollectionView} />
+    <Route path="/sketches" component={createRedirectWithUsername('/:username/sketches')} />
+    <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')} />
-      <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
-      <Route path="/account" component={userIsAuthenticated(AccountView)} />
-      <Route path="/about" component={IDEView} />
+    {/* Mobile-only Routes */}
+    <Route path="/preview" component={MobileSketchView} />
+    <Route path="/preferences" component={MobilePreferences} />
 
-      {/* Mobile-only Routes */}
-      <Route path="/preview" component={MobileSketchView} />
-      <Route path="/preferences" component={MobilePreferences} />
-
-    </Route>
-  );
-};
+  </Route>
+);
 
 export default routes;

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 (
     <MediaQuery minWidth={770}>
-      {matches => ((matches || (store && forceDesktop) || (!mobileEnabled()))
+      {matches => ((matches || forceDesktop || (!mobileEnabled()))
         ? <Fallback {...props} />
         : <MobileComponent {...props} />)}
     </MediaQuery>