Created new component to handle buttons displaying a dropdown menu

src/common/AsideMenu.tsx

@@ -52,29 +52,29 @@ const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
     <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
         <AsideMenuItem to={buildPath('/overview')}>
-          <FontAwesomeIcon icon={overviewIcon} />
+          <FontAwesomeIcon fixedWidth icon={overviewIcon} />
           <span className="aside-menu__item-text">Overview</span>
         </AsideMenuItem>
         <AsideMenuItem to={buildPath('/list-short-urls/1')} isActive={shortUrlsIsActive}>
-          <FontAwesomeIcon icon={listIcon} />
+          <FontAwesomeIcon fixedWidth icon={listIcon} />
           <span className="aside-menu__item-text">List short URLs</span>
         </AsideMenuItem>
         <AsideMenuItem to={buildPath('/create-short-url')}>
-          <FontAwesomeIcon icon={createIcon} flip="horizontal" />
+          <FontAwesomeIcon fixedWidth icon={createIcon} flip="horizontal" />
           <span className="aside-menu__item-text">Create short URL</span>
         </AsideMenuItem>
         <AsideMenuItem to={buildPath('/manage-tags')}>
-          <FontAwesomeIcon icon={tagsIcon} />
+          <FontAwesomeIcon fixedWidth icon={tagsIcon} />
           <span className="aside-menu__item-text">Manage tags</span>
         </AsideMenuItem>
         {addManageDomainsLink && (
           <AsideMenuItem to={buildPath('/manage-domains')}>
-            <FontAwesomeIcon icon={domainsIcon} />
+            <FontAwesomeIcon fixedWidth icon={domainsIcon} />
             <span className="aside-menu__item-text">Manage domains</span>
           </AsideMenuItem>
         )}
         <AsideMenuItem to={buildPath('/edit')} className="aside-menu__item--push">
-          <FontAwesomeIcon icon={editIcon} />
+          <FontAwesomeIcon fixedWidth icon={editIcon} />
           <span className="aside-menu__item-text">Edit this server</span>
         </AsideMenuItem>
         {isServerWithId(selectedServer) && (

src/servers/DeleteServerButton.tsx

@@ -19,7 +19,7 @@ const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>): FC<D
   return (
     <>
       <span className={className} onClick={showModal}>
-        {!children && <FontAwesomeIcon icon={deleteIcon} />}
+        {!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
         <span className={textClassName}>{children ?? 'Remove this server'}</span>
       </span>
 

src/servers/data/index.ts

@@ -40,3 +40,5 @@ export const isReachableServer = (server: SelectedServer): server is ReachableSe
 
 export const isNotFoundServer = (server: SelectedServer): server is NotFoundServer =>
   !!server?.hasOwnProperty('serverNotFound');
+
+export const getServerId = (server: SelectedServer) => isServerWithId(server) ? server.id : '';

src/short-urls/helpers/ShortUrlsRowMenu.scss

@@ -1,13 +1,5 @@
 @import '../../utils/base';
 
-.short-urls-row-menu__dropdown-toggle:after {
-  display: none !important;
-}
-
-.short-urls-row-menu__dropdown-toggle--hidden {
-  visibility: hidden;
-}
-
 .short-urls-row-menu__dropdown-item--danger.short-urls-row-menu__dropdown-item--danger {
   color: $dangerColor;
 

src/short-urls/helpers/ShortUrlsRowMenu.tsx

@@ -1,16 +1,16 @@
 import {
   faChartPie as pieChartIcon,
-  faEllipsisV as menuIcon,
   faQrcode as qrIcon,
   faMinusCircle as deleteIcon,
   faEdit as editIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
-import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { DropdownItem } from 'reactstrap';
 import { useToggle } from '../../utils/helpers/hooks';
 import { ShortUrl, ShortUrlModalProps } from '../data';
 import { SelectedServer } from '../../servers/data';
+import { DropdownBtnMenu } from '../../utils/DropdownBtnMenu';
 import ShortUrlDetailLink from './ShortUrlDetailLink';
 import './ShortUrlsRowMenu.scss';
 
@@ -29,32 +29,27 @@ const ShortUrlsRowMenu = (
   const [ isDeleteModalOpen, toggleDelete ] = useToggle();
 
   return (
-    <ButtonDropdown toggle={toggle} isOpen={isOpen}>
-      <DropdownToggle size="sm" caret outline className="short-urls-row-menu__dropdown-toggle">
-        &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
-      </DropdownToggle>
-      <DropdownMenu right>
-        <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
-          <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
-        </DropdownItem>
+    <DropdownBtnMenu toggle={toggle} isOpen={isOpen}>
+      <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
+        <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
+      </DropdownItem>
 
-        <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="edit">
-          <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit short URL
-        </DropdownItem>
+      <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="edit">
+        <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit short URL
+      </DropdownItem>
 
-        <DropdownItem onClick={toggleQrCode}>
-          <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
-        </DropdownItem>
-        <QrCodeModal shortUrl={shortUrl} isOpen={isQrModalOpen} toggle={toggleQrCode} />
+      <DropdownItem onClick={toggleQrCode}>
+        <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
+      </DropdownItem>
+      <QrCodeModal shortUrl={shortUrl} isOpen={isQrModalOpen} toggle={toggleQrCode} />
 
-        <DropdownItem divider />
+      <DropdownItem divider />
 
-        <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
-          <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL
-        </DropdownItem>
-        <DeleteShortUrlModal shortUrl={shortUrl} isOpen={isDeleteModalOpen} toggle={toggleDelete} />
-      </DropdownMenu>
-    </ButtonDropdown>
+      <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
+        <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL
+      </DropdownItem>
+      <DeleteShortUrlModal shortUrl={shortUrl} isOpen={isDeleteModalOpen} toggle={toggleDelete} />
+    </DropdownBtnMenu>
   );
 };
 

src/utils/DropdownBtnMenu.scss

@@ -0,0 +1,3 @@
+.dropdown-btn-menu__dropdown-toggle:after {
+  display: none !important;
+}

src/utils/DropdownBtnMenu.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { ButtonDropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEllipsisV as menuIcon } from '@fortawesome/free-solid-svg-icons';
+import './DropdownBtnMenu.scss';
+
+interface DropdownBtnMenuProps {
+  isOpen: boolean;
+  toggle: () => void;
+  right?: boolean;
+}
+
+export const DropdownBtnMenu: FC<DropdownBtnMenuProps> = ({ isOpen, toggle, children, right = true }) => (
+  <ButtonDropdown toggle={toggle} isOpen={isOpen}>
+    <DropdownToggle size="sm" caret outline className="dropdown-btn-menu__dropdown-toggle">
+      &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
+    </DropdownToggle>
+    <DropdownMenu right={right}>{children}</DropdownMenu>
+  </ButtonDropdown>
+);

test/short-urls/helpers/ShortUrlsRowMenu.test.tsx

@@ -1,9 +1,10 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { ButtonDropdown, DropdownItem } from 'reactstrap';
+import { DropdownItem } from 'reactstrap';
 import { Mock } from 'ts-mockery';
 import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
 import { ReachableServer } from '../../../src/servers/data';
 import { ShortUrl } from '../../../src/short-urls/data';
+import { DropdownBtnMenu } from '../../../src/utils/DropdownBtnMenu';
 
 describe('<ShortUrlsRowMenu />', () => {
   let wrapper: ShallowWrapper;
@@ -52,6 +53,6 @@ describe('<ShortUrlsRowMenu />', () => {
 
     it('DeleteShortUrlModal', () => assert(DeleteShortUrlModal));
     it('QrCodeModal', () => assert(QrCodeModal));
-    it('ShortUrlRowMenu', () => assert(ButtonDropdown));
+    it('ShortUrlRowMenu', () => assert(DropdownBtnMenu));
   });
 });