diff --git a/client/components/mobile/Explorer.jsx b/client/components/mobile/Explorer.jsx
new file mode 100644
index 00000000..6d4965b3
--- /dev/null
+++ b/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 }) => (
+
+
+
+);
+
+Explorer.propTypes = {
+ id: PropTypes.number.isRequired,
+ canEdit: PropTypes.bool
+};
+Explorer.defaultProps = {
+ canEdit: false
+};
+
+export default Explorer;
diff --git a/client/components/Sidebar.jsx b/client/components/mobile/Sidebar.jsx
similarity index 62%
rename from client/components/Sidebar.jsx
rename to client/components/mobile/Sidebar.jsx
index 962cff36..4e2cfda9 100644
--- a/client/components/Sidebar.jsx
+++ b/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 }) => (
{title &&
}
+ {children}
);
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: () => {}
};
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 780edba0..9bad5903 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -27,6 +27,7 @@ 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';
@@ -34,11 +35,28 @@ 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();
- const [toggleExplorer, Explorer] = useAsModal(, true);
+ const [toggleExplorer, Explorer] = useAsModal(, true);
// toggle sidebar starting opened
useEffect(toggleExplorer, []);