mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Converted MenuLayout into a functional component with hooks

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-05 09:08:50 +01:00
parent bc8905ee7f
commit 397a183f65
1 changed files with 59 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
src/common/MenuLayout.js
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import { Swipeable } from 'react-swipeable'; import { Swipeable } from 'react-swipeable';
import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons'; import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
@ -10,107 +10,76 @@ import MutedMessage from '../utils/MutedMessage';
import NotFound from './NotFound'; import NotFound from './NotFound';
import './MenuLayout.scss'; import './MenuLayout.scss';
const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) => const propTypes = {
class MenuLayout extends React.Component { match: PropTypes.object,
static propTypes = { selectServer: PropTypes.func,
match: PropTypes.object, location: PropTypes.object,
selectServer: PropTypes.func, selectedServer: serverType,
location: PropTypes.object, };
selectedServer: serverType,
};
state = { showSideBar: false }; const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) => {
const MenuLayoutComp = ({ match, location, selectedServer, selectServer }) => {
const [ showSideBar, setShowSidebar ] = useState(false);
componentDidMount() { useEffect(() => {
const { match, selectServer } = this.props;
const { params: { serverId } } = match; const { params: { serverId } } = match;
selectServer(serverId); selectServer(serverId);
}, []);
useEffect(() => setShowSidebar(false), [ location ]);
if (!selectedServer) {
return <MutedMessage loading />;
} }
componentDidUpdate(prevProps) { const { params: { serverId } } = match;
const { location } = this.props; const burgerClasses = classNames('menu-layout__burger-icon', {
'menu-layout__burger-icon--active': showSideBar,
// Hide sidebar when location changes });
if (location !== prevProps.location) { const swipeMenuIfNoModalExists = (showSideBar) => () => {
this.setState({ showSideBar: false }); if (document.querySelector('.modal')) {
} return;
}
render() {
const { selectedServer, match } = this.props;
if (!selectedServer) {
return <MutedMessage loading />;
} }
const { params: { serverId } } = match; setShowSidebar(showSideBar);
const burgerClasses = classNames('menu-layout__burger-icon', { };
'menu-layout__burger-icon--active': this.state.showSideBar,
});
const swipeMenuIfNoModalExists = (showSideBar) => () => {
if (document.querySelector('.modal')) {
return;
}
this.setState({ showSideBar }); return (
}; <React.Fragment>
<FontAwesomeIcon
icon={burgerIcon}
className={burgerClasses}
onClick={() => setShowSidebar(!showSideBar)}
/>
return ( <Swipeable
<React.Fragment> delta={40}
<FontAwesomeIcon className="menu-layout__swipeable"
icon={burgerIcon} onSwipedLeft={swipeMenuIfNoModalExists(false)}
className={burgerClasses} onSwipedRight={swipeMenuIfNoModalExists(true)}
onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))} >
/> <div className="row menu-layout__swipeable-inner">
<AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={showSideBar} />
<Swipeable <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => setShowSidebar(false)}>
delta={40} <Switch>
className="menu-layout__swipeable" <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
onSwipedLeft={swipeMenuIfNoModalExists(false)} <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
onSwipedRight={swipeMenuIfNoModalExists(true)} <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
> <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
<div className="row menu-layout__swipeable-inner"> <Route
<AsideMenu render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
className="col-lg-2 col-md-3" />
selectedServer={selectedServer} </Switch>
showOnMobile={this.state.showSideBar}
/>
<div
className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
onClick={() => this.setState({ showSideBar: false })}
>
<Switch>
<Route
exact
path="/server/:serverId/list-short-urls/:page"
component={ShortUrls}
/>
<Route
exact
path="/server/:serverId/create-short-url"
component={CreateShortUrl}
/>
<Route
exact
path="/server/:serverId/short-code/:shortCode/visits"
component={ShortUrlVisits}
/>
<Route
exact
path="/server/:serverId/manage-tags"
component={TagsList}
/>
<Route
render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
/>
</Switch>
</div>
</div> </div>
</Swipeable> </div>
</React.Fragment> </Swipeable>
); </React.Fragment>
} );
}; };
MenuLayoutComp.propTypes = propTypes;
return MenuLayoutComp;
};
export default MenuLayout; export default MenuLayout;