p5.js-web-editor/client/modules/Mobile/MobileDashboardView.jsx
2020-07-31 10:21:26 -03:00

131 lines
3.9 KiB
JavaScript

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';
import Header from '../../components/mobile/Header';
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';
import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
import Button from '../../common/Button';
const EXAMPLE_USERNAME = 'p5';
const FooterTab = styled(Link)`
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
padding: ${remSize(16)};
width: 100%;
display: flex;
`;
const Subheader = styled.div`
display: flex;
flex-direction: row;
* { border-radius: 0px; }
.searchbar {
display: flex;
width: 100%;
}
.searchbar__input { width: 100%; }
`;
const SubheaderButton = styled(Button)`
border-radius: 0px !important;
`;
const FooterTabSwitcher = styled.div`
display: flex;
h3 { text-align: center; width: 100%; }
`;
const Panels = {
sketches: SketchList,
collections: CollectionList,
assets: AssetList
};
const CreatePathname = {
sketches: '/mobile',
collections: '/mobile/:username/collections/create',
};
const getPanel = (pathname) => {
const pathparts = pathname ? pathname.split('/') : [];
const matches = Object.keys(Panels).map(part => part.toLowerCase()).filter(part => pathparts.includes(part));
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 && <Component {...props} />))(Panels[name]);
const MobileDashboard = ({ params, location }) => {
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 (
<Screen fullscreen key={pathname}>
<Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
</Header>
<Content slimheader>
<Subheader>
{isOwner(user, params) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
{panel === Tabs[0] && <SketchSearchbar />}
{panel === Tabs[1] && <CollectionSearchbar />}
</Subheader>
{renderPanel(panel, { username, key: pathname })}
</Content>
<Footer>
{!isExamples &&
<FooterTabSwitcher>
{Tabs.map(tab => (
<FooterTab
key={`tab-${tab}`}
selected={tab === panel}
to={pathname.replace(panel, tab)}
>
<h3>{(isExamples && tab === 'Sketches') ? 'Examples' : tab}</h3>
</FooterTab>))
}
</FooterTabSwitcher>
}
</Footer>
</Screen>);
};
MobileDashboard.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string.isRequired
}).isRequired,
params: PropTypes.shape({
username: PropTypes.string.isRequired
})
};
MobileDashboard.defaultProps = { params: {} };
export default withRouter(MobileDashboard);