🐛 fix panels not changing

Author: ghalestrilo

client/modules/App/App.jsx

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

client/modules/IDE/actions/collections.js

@@ -17,6 +17,7 @@ export function getCollections(username) {
     } else {
       url = '/collections';
     }
+    console.log(url);
     apiClient.get(url)
       .then((response) => {
         dispatch({

client/modules/Mobile/MobileDashboardView.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { string } from 'prop-types';
 import styled from 'styled-components';
-import { withRouter } from 'react-router';
+import { withRouter, Link } from 'react-router';
 
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
@@ -17,7 +17,7 @@ import { SketchSearchbar } from '../IDE/components/Searchbar';
 
 const EXAMPLE_USERNAME = 'p5';
 
-const FooterTab = styled.div`
+const FooterTab = styled(Link)`
   background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
   padding: ${remSize(16)};
@@ -44,24 +44,32 @@ const FooterTabSwitcher = styled.div`
 `;
 
 const Panels = {
-  Sketches: SketchList,
-  Collections: CollectionList,
-  Assets: AssetList
+  sketches: SketchList,
+  collections: CollectionList,
+  assets: AssetList
 };
 
 const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
 
+const getPanel = (pathname) => {
+  const pathparts = pathname ? pathname.split('/') : [];
+  const matches = Object.keys(Panels).map(part => part.toLowerCase()).filter(part => pathparts.includes(part));
+  return matches && matches.length > 0 && matches[0];
+};
+
 
-const MobileDashboard = ({ params }) => {
+const MobileDashboard = ({ params, location }) => {
   const Tabs = Object.keys(Panels);
-  const [selected, selectTab] = useState(Tabs[0]);
 
-  // const username = 'p5';
   const { username } = params;
+  const { pathname } = location;
+
   const isExamples = username === EXAMPLE_USERNAME;
 
+  const panel = getPanel(pathname);
+
   return (
-    <Screen fullscreen>
+    <Screen fullscreen key={pathname}>
       <Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
@@ -71,19 +79,18 @@ const MobileDashboard = ({ params }) => {
         <Subheader>
           <SketchSearchbar />
         </Subheader>
-        {renderPanel(selected, { username })}
+        {renderPanel(panel, { username, key: pathname })}
       </Content>
-
       <Footer>
         {!isExamples &&
           <FooterTabSwitcher>
             {Tabs.map(tab => (
               <FooterTab
                 key={`tab-${tab}`}
-                selected={tab === selected}
-                onClick={() => selectTab(tab)}
+                selected={tab === panel}
+                to={pathname.replace(panel, tab)}
               >
-                <h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3>
+                <h3>{(isExamples && tab === 'Sketches') ? 'Examples' : tab}</h3>
               </FooterTab>))
             }
           </FooterTabSwitcher>
@@ -93,6 +100,9 @@ const MobileDashboard = ({ params }) => {
 };
 
 MobileDashboard.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired
+  }).isRequired,
   params: PropTypes.shape({
     username: PropTypes.string.isRequired
   })

client/routes.jsx

@@ -63,12 +63,11 @@ const routes = store => (
     <Route path="/mobile/preferences" component={MobilePreferences} />
     <Route path="/mobile" component={MobileIDEView} />
 
-    <Route path="/mobile/:username/sketches" component={MobileDashboardView} />
     <Route path="/mobile/:username/sketches/:project_id" component={MobileIDEView} />
     <Route path="/mobile/:username/assets" component={userIsAuthenticated(userIsAuthorized(MobileDashboardView))} />
+    <Route path="/mobile/:username/sketches" component={MobileDashboardView} />
     <Route path="/mobile/:username/collections" component={MobileDashboardView} />
     <Route path="/mobile/:username/collections/create" component={MobileDashboardView} />
-    <Route path="/mobile/:username/collections/:collection_id" component={CollectionView} />
 
   </Route>
 );

server/routes/server.routes.js

@@ -7,6 +7,8 @@ import { collectionForUserExists } from '../controllers/collection.controller';
 
 const router = new Router();
 
+const fallback404 = res => (exists => (exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))));
+
 // this is intended to be a temporary file
 // until i figure out isomorphic rendering
 
@@ -152,15 +154,11 @@ if (process.env.MOBILE_ENABLED) {
   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))
-    ));
+    userExists(req.params.username, fallback404(res));
   });
 
   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))
-    ));
+    projectForUserExists(req.params.username, req.params.project_id, fallback404(res));
   });
 
   router.get('/mobile/:username/assets', (req, res) => {
@@ -173,7 +171,7 @@ if (process.env.MOBILE_ENABLED) {
     });
   });
 
-  router.get('/:username/collections/create', (req, res) => {
+  router.get('/mobile/:username/collections/create', (req, res) => {
     userExists(req.params.username, (exists) => {
       const isLoggedInUser = req.user && req.user.username === req.params.username;
       const canAccess = exists && isLoggedInUser;
@@ -183,22 +181,17 @@ if (process.env.MOBILE_ENABLED) {
     });
   });
 
-  router.get('/:username/collections/create', (req, res) => {
-    userExists(req.params.username, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+
+  router.get('/mobile/:username/collections', (req, res) => {
+    userExists(req.params.username, fallback404(res));
   });
 
-  router.get('/:username/collections/:id', (req, res) => {
-    collectionForUserExists(req.params.username, req.params.id, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+  router.get('/mobile/:username/collections/create', (req, res) => {
+    userExists(req.params.username, fallback404(res));
   });
 
-  router.get('/:username/collections', (req, res) => {
-    userExists(req.params.username, exists => (
-      exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-    ));
+  router.get('/mobile/:username/collections/:id', (req, res) => {
+    collectionForUserExists(req.params.username, req.params.id, fallback404(res));
   });
 }