From ab7718e3350fdfe656b0244b2a1b543be375af8e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 5 Mar 2020 10:03:38 +0100
Subject: [PATCH] Removed duplicated code from AsideMenu by creating an
 AsideMenuItem helper component

---
 src/common/AsideMenu.js | 50 +++++++++++++++++------------------------
 1 file changed, 20 insertions(+), 30 deletions(-)

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