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