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

Removed duplicated code from AsideMenu by creating an AsideMenuItem helper component

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-05 10:03:38 +01:00
parent 451c77d47f
commit ab7718e335
1 changed files with 20 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/common/AsideMenu.js
View file

@ -3,14 +3,21 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react'; import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classNames from 'classnames';
import { serverType } from '../servers/prop-types'; import { serverType } from '../servers/prop-types';
import './AsideMenu.scss'; import './AsideMenu.scss';
const defaultProps = { const AsideMenuItem = ({ children, to, ...rest }) => (
className: '', <NavLink className="aside-menu__item" activeClassName="aside-menu__item--selected" to={to} {...rest}>
showOnMobile: false, {children}
</NavLink>
);
AsideMenuItem.propTypes = {
children: PropTypes.node.isRequired,
to: PropTypes.string.isRequired,
}; };
const propTypes = { const propTypes = {
selectedServer: serverType, selectedServer: serverType,
className: PropTypes.string, className: PropTypes.string,
@ -20,51 +27,34 @@ const propTypes = {
const AsideMenu = (DeleteServerButton) => { const AsideMenu = (DeleteServerButton) => {
const AsideMenu = ({ selectedServer, className, showOnMobile }) => { const AsideMenu = ({ selectedServer, className, showOnMobile }) => {
const serverId = selectedServer ? selectedServer.id : ''; const serverId = selectedServer ? selectedServer.id : '';
const asideClass = classnames('aside-menu', className, { const asideClass = classNames('aside-menu', className, {
'aside-menu--hidden': !showOnMobile, 'aside-menu--hidden': !showOnMobile,
}); });
const shortUrlsIsActive = (match, location) => location.pathname.match('/list-short-urls'); const shortUrlsIsActive = (match, location) => location.pathname.match('/list-short-urls');
const buildPath = (suffix) => `/server/${serverId}${suffix}`;
return ( return (
<aside className={asideClass}> <aside className={asideClass}>
<nav className="nav flex-column aside-menu__nav"> <nav className="nav flex-column aside-menu__nav">
<NavLink <AsideMenuItem to={buildPath('/list-short-urls/1')} isActive={shortUrlsIsActive}>
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/list-short-urls/1`}
isActive={shortUrlsIsActive}
>
<FontAwesomeIcon icon={listIcon} /> <FontAwesomeIcon icon={listIcon} />
<span className="aside-menu__item-text">List short URLs</span> <span className="aside-menu__item-text">List short URLs</span>
</NavLink> </AsideMenuItem>
<NavLink <AsideMenuItem to={buildPath('/create-short-url')}>
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/create-short-url`}
>
<FontAwesomeIcon icon={createIcon} flip="horizontal" /> <FontAwesomeIcon icon={createIcon} flip="horizontal" />
<span className="aside-menu__item-text">Create short URL</span> <span className="aside-menu__item-text">Create short URL</span>
</NavLink> </AsideMenuItem>
<AsideMenuItem to={buildPath('/manage-tags')}>
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/manage-tags`}
>
<FontAwesomeIcon icon={tagsIcon} /> <FontAwesomeIcon icon={tagsIcon} />
<span className="aside-menu__item-text">Manage tags</span> <span className="aside-menu__item-text">Manage tags</span>
</NavLink> </AsideMenuItem>
<DeleteServerButton <DeleteServerButton className="aside-menu__item aside-menu__item--danger" server={selectedServer} />
className="aside-menu__item aside-menu__item--danger"
server={selectedServer}
/>
</nav> </nav>
</aside> </aside>
); );
}; };
AsideMenu.defaultProps = defaultProps;
AsideMenu.propTypes = propTypes; AsideMenu.propTypes = propTypes;
return AsideMenu; return AsideMenu;