mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-24 01:48:18 +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

77
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,35 +10,23 @@ 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 {
static propTypes = {
match: PropTypes.object, match: PropTypes.object,
selectServer: PropTypes.func, selectServer: PropTypes.func,
location: PropTypes.object, location: PropTypes.object,
selectedServer: serverType, 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 ]);
componentDidUpdate(prevProps) {
const { location } = this.props;
// Hide sidebar when location changes
if (location !== prevProps.location) {
this.setState({ showSideBar: false });
}
}
render() {
const { selectedServer, match } = this.props;
if (!selectedServer) { if (!selectedServer) {
return <MutedMessage loading />; return <MutedMessage loading />;
@ -46,14 +34,14 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
const { params: { serverId } } = match; const { params: { serverId } } = match;
const burgerClasses = classNames('menu-layout__burger-icon', { const burgerClasses = classNames('menu-layout__burger-icon', {
'menu-layout__burger-icon--active': this.state.showSideBar, 'menu-layout__burger-icon--active': showSideBar,
}); });
const swipeMenuIfNoModalExists = (showSideBar) => () => { const swipeMenuIfNoModalExists = (showSideBar) => () => {
if (document.querySelector('.modal')) { if (document.querySelector('.modal')) {
return; return;
} }
this.setState({ showSideBar }); setShowSidebar(showSideBar);
}; };
return ( return (
@ -61,7 +49,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
<FontAwesomeIcon <FontAwesomeIcon
icon={burgerIcon} icon={burgerIcon}
className={burgerClasses} className={burgerClasses}
onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))} onClick={() => setShowSidebar(!showSideBar)}
/> />
<Swipeable <Swipeable
@ -71,36 +59,13 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
onSwipedRight={swipeMenuIfNoModalExists(true)} onSwipedRight={swipeMenuIfNoModalExists(true)}
> >
<div className="row menu-layout__swipeable-inner"> <div className="row menu-layout__swipeable-inner">
<AsideMenu <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={showSideBar} />
className="col-lg-2 col-md-3" <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => setShowSidebar(false)}>
selectedServer={selectedServer}
showOnMobile={this.state.showSideBar}
/>
<div
className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
onClick={() => this.setState({ showSideBar: false })}
>
<Switch> <Switch>
<Route <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
exact <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
path="/server/:serverId/list-short-urls/:page" <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
component={ShortUrls} <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
/>
<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 <Route
render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />} render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
/> />
@ -110,7 +75,11 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
</Swipeable> </Swipeable>
</React.Fragment> </React.Fragment>
); );
}
}; };
MenuLayoutComp.propTypes = propTypes;
return MenuLayoutComp;
};
export default MenuLayout; export default MenuLayout;