✨ add files tab

Author: ghalestrilo

client/components/mobile/Explorer.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Sidebar from './Sidebar';
+import ConnectedFileNode from '../../modules/IDE/components/FileNode';
+
+
+const Explorer = ({ id, canEdit }) => (
+  <Sidebar title="Files">
+    <ConnectedFileNode id={id} canEdit={canEdit} />
+  </Sidebar>
+);
+
+Explorer.propTypes = {
+  id: PropTypes.number.isRequired,
+  canEdit: PropTypes.bool
+};
+Explorer.defaultProps = {
+  canEdit: false
+};
+
+export default Explorer;

client/components/Sidebar.jsx renamed to client/components/mobile/Sidebar.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import styled from 'styled-components';
-import { remSize, prop, common } from '../theme';
-import Header from './mobile/Header';
-import IconButton from './mobile/IconButton';
-import { ExitIcon } from '../common/icons';
+import { remSize, prop, common } from '../../theme';
+import Header from './Header';
+import IconButton from './IconButton';
+import { ExitIcon } from '../../common/icons';
 
 
 const SidebarWrapper = styled.div`
@@ -20,23 +20,26 @@ const SidebarWrapper = styled.div`
   box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
 `;
 
-const Sidebar = ({ title, onPressClose }) => (
+const Sidebar = ({ title, onPressClose, children }) => (
   <SidebarWrapper>
     {title &&
     <Header slim title={title} fixed={false}>
       <IconButton onPress={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
     </Header>}
+    {children}
   </SidebarWrapper>
 );
 
 Sidebar.propTypes = {
   title: PropTypes.string,
-  onPressClose: PropTypes.func.isRequired,
+  onPressClose: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
 };
 
 Sidebar.defaultProps = {
   title: null,
-  // onPressClose: PropTypes.func.isRequired,
+  children: [],
+  onPressClose: () => {}
 };
 
 

client/modules/IDE/pages/MobileIDEView.jsx

@@ -27,18 +27,36 @@ import Header from '../../../components/mobile/Header';
 import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
+import MobileExplorer from '../../../components/mobile/Explorer';
 import Console from '../components/Console';
 import { remSize } from '../../../theme';
 // import OverlayManager from '../../../components/OverlayManager';
 import ActionStrip from '../../../components/mobile/ActionStrip';
 import useAsModal from '../../../components/useAsModal';
 import { PreferencesIcon } from '../../../common/icons';
 import Dropdown from '../../../components/Dropdown';
-import Sidebar from '../../../components/Sidebar';
+import Sidebar from '../../../components/mobile/Sidebar';
+
+
+const getRootFile = files => files && files.filter(file => file.name === 'root')[0];
+const getRootFileID = files => (root => root && root.id)(getRootFile(files));
 
 const isUserOwner = ({ project, user }) =>
   project.owner && project.owner.id === user.id;
 
+
+// const userCanEditProject = (props) => {
+//   let canEdit;
+//   if (!props.owner) {
+//     canEdit = true;
+//   } else if (props.user.authenticated && props.owner.id === props.user.id) {
+//     canEdit = true;
+//   } else {
+//     canEdit = false;
+//   }
+//   return canEdit;
+// };
+
 const Expander = styled.div`
   height: ${props => (props.expanded ? remSize(160) : remSize(27))};
 `;
@@ -75,6 +93,7 @@ const MobileIDEView = (props) => {
 
   const { username } = user;
 
+
   // Force state reset
   useEffect(clearPersistedState, []);
   useEffect(stopSketch, []);
@@ -91,14 +110,13 @@ const MobileIDEView = (props) => {
     setCurrentProjectID(params.project_id);
   }, [params, project, username]);
 
+  // Screen Modals
   const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
     items={getNatOptions(username)}
     align="right"
   />);
 
-  const [toggleExplorer, Explorer] = useAsModal(<Sidebar
-    title="Files"
-  />, true);
+  const [toggleExplorer, Explorer] = useAsModal(<MobileExplorer id={getRootFileID(files)} canEdit={false} />, true);
 
   // toggle sidebar starting opened
   useEffect(toggleExplorer, []);