From 57ee6f0b8b21e4d9c583cfb9044bea994188bd9c Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 28 Jul 2020 11:33:38 -0300
Subject: [PATCH] :construction: mount List components

---
 client/modules/App/App.jsx                  |  3 +-
 client/modules/Mobile/MobileExamples.jsx    | 43 +++++++++++++++++----
 client/modules/Mobile/MobileSketchView.jsx  |  6 +--
 client/modules/Mobile/MobileViewContent.jsx |  9 +++++
 4 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 client/modules/Mobile/MobileViewContent.jsx

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..346ea411 100644
--- a/client/modules/App/App.jsx
+++ b/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>
     );
diff --git a/client/modules/Mobile/MobileExamples.jsx b/client/modules/Mobile/MobileExamples.jsx
index 38edfd9f..0ecbae27 100644
--- a/client/modules/Mobile/MobileExamples.jsx
+++ b/client/modules/Mobile/MobileExamples.jsx
@@ -7,9 +7,13 @@ import IconButton from '../../components/mobile/IconButton';
 import { ExitIcon } from '../../common/icons';
 import Footer from '../../components/mobile/Footer';
 import { prop, remSize } from '../../theme';
+import SketchList from '../IDE/components/SketchList';
+import CollectionList from '../IDE/components/CollectionList';
+import AssetList from '../IDE/components/AssetList';
+import Content from './MobileViewContent';
 
 const FooterTab = styled.div`
-  background: ${props => prop(`MobilePanel.default.${props.selected ? 'background' : 'foreground'}`)};
+  background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
   padding: ${remSize(16)};
   width: 100%;
@@ -19,24 +23,49 @@ const FooterTab = styled.div`
 const FooterTabContainer = styled.div`
   display: flex;
   
-  h3 { text-align: center; width: 100%;}
+  h3 { text-align: center; width: 100%; }
 `;
 
+// switch (tabKey) {
+//   case TabKey.assets:
+//     return <AssetList key={username} username={username} />;
+//   case TabKey.collections:
+//     return <CollectionList key={username} username={username} />;
+//   case TabKey.sketches:
+//   default:
+//     return <SketchList key={username} username={username} />;
+// }
+
+const Panels = {
+  Sketches: () => <SketchList />,
+  Collections: () => <CollectionList />,
+  Assets: () => <AssetList />
+};
 
 const MobileExamples = () => {
-  const tabs = ['Sketches', 'Collections', 'Assets'];
-  const [selected, selectTab] = useState(tabs[0]);
+  // const tabs = ['Sketches', 'Collections', 'Assets'];
+  const Tabs = Object.keys(Panels);
+  const [selected, selectTab] = useState(Tabs[0]);
   return (
     <Screen fullscreen>
       <Header inverted title="My Stuff">
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
+
+      <Content>
+        {Panels[selected] && Panels[selected]()}
+      </Content>
+
+
       <Footer>
         <FooterTabContainer>
-
-          {tabs.map(tab => (
-            <FooterTab selected={tab === selected} onClick={() => selectTab(tab)}>
+          {Tabs.map(tab => (
+            <FooterTab
+              key={`tab-${tab}`}
+              selected={tab === selected}
+              onClick={() => selectTab(tab)}
+            >
               <h3>{tab}</h3>
             </FooterTab>))
           }
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index da4e9829..9e24d159 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -19,11 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files';
 import { ExitIcon } from '../../common/icons';
 import { remSize } from '../../theme';
 import Footer from '../../components/mobile/Footer';
-
-const Content = styled.div`
-  z-index: 0;
-  margin-top: ${remSize(68)};
-`;
+import Content from './MobileViewContent';
 
 const MobileSketchView = (props) => {
   const { files, ide, preferences } = useSelector(state => state);
diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
new file mode 100644
index 00000000..5e8a5c48
--- /dev/null
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
+
+
+export default styled.div`
+  z-index: 0;
+  margin-top: ${remSize(68)};
+`;