diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index b548ffe9..13677363 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -88,7 +88,10 @@ const MobileIDEView = (props) => {
];
- const [triggerNavDropdown, NavDropDown] = useAsModal();
+ const [triggerNavDropdown, NavDropDown] = useAsModal();
return (
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 3e9dd269..eda502d4 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import PropTypes, { string } from 'prop-types';
+import React from 'react';
+import PropTypes from 'prop-types';
import styled from 'styled-components';
+import { useSelector } from 'react-redux';
import { withRouter, Link } from 'react-router';
import Screen from '../../components/mobile/MobileScreen';
@@ -14,6 +15,7 @@ import CollectionList from '../IDE/components/CollectionList';
import AssetList from '../IDE/components/AssetList';
import Content from './MobileViewContent';
import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
+import Button from '../../common/Button';
const EXAMPLE_USERNAME = 'p5';
@@ -26,16 +28,21 @@ const FooterTab = styled(Link)`
`;
const Subheader = styled.div`
+ display: flex;
+ flex-direction: row;
+ * { border-radius: 0px; }
.searchbar {
display: flex;
- * {
- border-radius: 0px;
- }
+ width: 100%;
}
.searchbar__input { width: 100%; }
`;
+const SubheaderButton = styled(Button)`
+ border-radius: 0px !important;
+`;
+
const FooterTabSwitcher = styled.div`
display: flex;
@@ -49,7 +56,11 @@ const Panels = {
assets: AssetList
};
-const renderPanel = (name, props) => (Component => (Component && ))(Panels[name]);
+const CreatePathname = {
+ sketches: '/mobile',
+ collections: '/mobile/:username/collections/create',
+};
+
const getPanel = (pathname) => {
const pathparts = pathname ? pathname.split('/') : [];
@@ -57,15 +68,19 @@ const getPanel = (pathname) => {
return matches && matches.length > 0 && matches[0];
};
+const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').replace(':username', username);
+
+const isOwner = (user, params) => user && params && user.username === params.username;
+
+const renderPanel = (name, props) => (Component => (Component && ))(Panels[name]);
const MobileDashboard = ({ params, location }) => {
- const Tabs = Object.keys(Panels);
-
+ const user = useSelector(state => state.user);
const { username } = params;
const { pathname } = location;
+ const Tabs = Object.keys(Panels);
const isExamples = username === EXAMPLE_USERNAME;
-
const panel = getPanel(pathname);
return (
@@ -77,6 +92,7 @@ const MobileDashboard = ({ params, location }) => {
+ {isOwner(user, params) && new}
{panel === Tabs[0] && }
{panel === Tabs[1] && }
@@ -100,6 +116,7 @@ const MobileDashboard = ({ params, location }) => {
);
};
+
MobileDashboard.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string.isRequired