🚧 improve routing for mobile examples screen

client/modules/App/App.jsx

@@ -34,7 +34,8 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* FIXME: remove false */}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/pages/MobileIDEView.jsx

@@ -48,7 +48,7 @@ const NavItem = styled.li`
 
 const headerNavOptions = [
   { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
-  { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
+  { icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
   { icon: PreferencesIcon, title: 'Original Editor', href: '/', },
 ];
 

client/modules/Mobile/MobileDashboard.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { withRouter } from 'react-router';
+
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
@@ -42,15 +44,20 @@ const FooterTabSwitcher = styled.div`
 `;
 
 const Panels = {
-  Sketches: props => <SketchList {...props} />,
-  Collections: props => <CollectionList {...props} />,
-  Assets: props => <AssetList {...props} />
+  Sketches: SketchList,
+  Collections: CollectionList,
+  Assets: AssetList
 };
 
-const MobileDashboard = ({ username }) => {
+const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
+
+
+const MobileDashboard = ({ params }) => {
   const Tabs = Object.keys(Panels);
   const [selected, selectTab] = useState(Tabs[0]);
 
+  // const username = 'p5';
+  const { username } = params;
   const isExamples = username === EXAMPLE_USERNAME;
 
   return (
@@ -64,7 +71,7 @@ const MobileDashboard = ({ username }) => {
         <Subheader>
           <SketchSearchbar />
         </Subheader>
-        {Panels[selected] && Panels[selected]({ username })}
+        {renderPanel(selected, { username })}
       </Content>
 
       <Footer>
@@ -85,8 +92,12 @@ const MobileDashboard = ({ username }) => {
     </Screen>);
 };
 
-MobileDashboard.propTypes = { username: PropTypes.string };
-MobileDashboard.defaultProps = { username: '' };
+MobileDashboard.propTypes = {
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired
+  })
+};
+MobileDashboard.defaultProps = { params: {} };
 
 
-export default MobileDashboard;
+export default withRouter(MobileDashboard);

client/routes.jsx

@@ -58,10 +58,13 @@ const routes = store => (
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
 
-    <Route path="/mobile" component={MobileIDEView} />
+    <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
+
+    <Route path="/mobile/:username/sketches" component={MobileDashboard} />
     <Route path="/mobile/preview" component={MobileSketchView} />
     <Route path="/mobile/preferences" component={MobilePreferences} />
-    <Route path="/mobile/examples" component={() => <MobileDashboard username="p5" />} />
+    <Route path="/mobile" component={MobileIDEView} />
+
   </Route>
 );
 

server/routes/server.routes.js

@@ -114,16 +114,6 @@ router.get('/about', (req, res) => {
   res.send(renderIndex());
 });
 
-if (process.env.MOBILE_ENABLED) {
-  router.get('/mobile', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/preview', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/preferences', (req, res) => res.send(renderIndex()));
-
-  router.get('/mobile/examples', (req, res) => res.send(renderIndex()));
-}
-
 router.get('/:username/collections/create', (req, res) => {
   userExists(req.params.username, (exists) => {
     const isLoggedInUser = req.user && req.user.username === req.params.username;
@@ -152,4 +142,26 @@ router.get('/:username/collections', (req, res) => {
   ));
 });
 
+
+// Mobile Routes
+if (process.env.MOBILE_ENABLED) {
+  router.get('/mobile', (req, res) => res.send(renderIndex()));
+
+  router.get('/mobile/preview', (req, res) => res.send(renderIndex()));
+
+  router.get('/mobile/preferences', (req, res) => res.send(renderIndex()));
+
+  router.get('/mobile/:username/sketches', (req, res) => {
+    userExists(req.params.username, exists => (
+      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+    ));
+  });
+
+  router.get('/mobile/:username/sketches/:project_id', (req, res) => {
+    projectForUserExists(req.params.username, req.params.project_id, exists => (
+      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+    ));
+  });
+}
+
 export default router;