Converted ShortUrlsRowMenu into functional component

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -13,47 +13,30 @@ import React from 'react';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { serverType } from '../../servers/prop-types';
 import { shortUrlType } from '../reducers/shortUrlsList';
+import { useToggle } from '../../utils/helpers/hooks';
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
 import VisitStatsLink from './VisitStatsLink';
 import './ShortUrlsRowMenu.scss';
 
-const ShortUrlsRowMenu = (
-  DeleteShortUrlModal,
-  EditTagsModal,
-  EditMetaModal,
-  EditShortUrlModal,
-  ForServerVersion
-) => class ShortUrlsRowMenu extends React.Component {
-  static propTypes = {
-    selectedServer: serverType,
-    shortUrl: shortUrlType,
-  };
+const propTypes = {
+  selectedServer: serverType,
+  shortUrl: shortUrlType,
+};
 
-  state = {
-    isOpen: false,
-    isQrModalOpen: false,
-    isPreviewModalOpen: false,
-    isTagsModalOpen: false,
-    isMetaModalOpen: false,
-    isDeleteModalOpen: false,
-    isEditModalOpen: false,
-  };
-  toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
-
-  render() {
-    const { shortUrl, selectedServer } = this.props;
+const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal, EditMetaModal, EditShortUrlModal, ForServerVersion) => {
+  const ShortUrlsRowMenuComp = ({ shortUrl, selectedServer }) => {
+    const [ isOpen, toggle ] = useToggle(false);
+    const [ isQrModalOpen, toggleQrCode ] = useToggle(false);
+    const [ isPreviewModalOpen, togglePreview ] = useToggle(false);
+    const [ isTagsModalOpen, toggleTags ] = useToggle(false);
+    const [ isMetaModalOpen, toggleMeta ] = useToggle(false);
+    const [ isDeleteModalOpen, toggleDelete ] = useToggle(false);
+    const [ isEditModalOpen, toggleEdit ] = useToggle(false);
     const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
-    const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
-    const toggleQrCode = toggleModal('isQrModalOpen');
-    const togglePreview = toggleModal('isPreviewModalOpen');
-    const toggleTags = toggleModal('isTagsModalOpen');
-    const toggleMeta = toggleModal('isMetaModalOpen');
-    const toggleDelete = toggleModal('isDeleteModalOpen');
-    const toggleEdit = toggleModal('isEditModalOpen');
 
     return (
-      <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen}>
+      <ButtonDropdown toggle={toggle} isOpen={isOpen}>
         <DropdownToggle size="sm" caret outline className="short-urls-row-menu__dropdown-toggle">
           &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
         </DropdownToggle>
@@ -65,32 +48,32 @@ const ShortUrlsRowMenu = (
           <DropdownItem onClick={toggleTags}>
             <FontAwesomeIcon icon={tagsIcon} fixedWidth /> Edit tags
           </DropdownItem>
-          <EditTagsModal shortUrl={shortUrl} isOpen={this.state.isTagsModalOpen} toggle={toggleTags} />
+          <EditTagsModal shortUrl={shortUrl} isOpen={isTagsModalOpen} toggle={toggleTags} />
 
           <ForServerVersion minVersion="1.18.0">
             <DropdownItem onClick={toggleMeta}>
               <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit metadata
             </DropdownItem>
-            <EditMetaModal shortUrl={shortUrl} isOpen={this.state.isMetaModalOpen} toggle={toggleMeta} />
+            <EditMetaModal shortUrl={shortUrl} isOpen={isMetaModalOpen} toggle={toggleMeta} />
           </ForServerVersion>
 
           <ForServerVersion minVersion="2.1.0">
             <DropdownItem onClick={toggleEdit}>
               <FontAwesomeIcon icon={linkIcon} fixedWidth /> Edit long URL
             </DropdownItem>
-            <EditShortUrlModal shortUrl={shortUrl} isOpen={this.state.isEditModalOpen} toggle={toggleEdit} />
+            <EditShortUrlModal shortUrl={shortUrl} isOpen={isEditModalOpen} toggle={toggleEdit} />
           </ForServerVersion>
 
           <DropdownItem onClick={toggleQrCode}>
             <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
           </DropdownItem>
-          <QrCodeModal url={completeShortUrl} isOpen={this.state.isQrModalOpen} toggle={toggleQrCode} />
+          <QrCodeModal url={completeShortUrl} isOpen={isQrModalOpen} toggle={toggleQrCode} />
 
           <ForServerVersion maxVersion="1.x">
             <DropdownItem onClick={togglePreview}>
               <FontAwesomeIcon icon={pictureIcon} fixedWidth /> Preview
             </DropdownItem>
-            <PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} />
+            <PreviewModal url={completeShortUrl} isOpen={isPreviewModalOpen} toggle={togglePreview} />
           </ForServerVersion>
 
           <DropdownItem divider />
@@ -98,11 +81,15 @@ const ShortUrlsRowMenu = (
           <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
             <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL
           </DropdownItem>
-          <DeleteShortUrlModal shortUrl={shortUrl} isOpen={this.state.isDeleteModalOpen} toggle={toggleDelete} />
+          <DeleteShortUrlModal shortUrl={shortUrl} isOpen={isDeleteModalOpen} toggle={toggleDelete} />
         </DropdownMenu>
       </ButtonDropdown>
     );
-  }
+  };
+
+  ShortUrlsRowMenuComp.propTypes = propTypes;
+
+  return ShortUrlsRowMenuComp;
 };
 
 export default ShortUrlsRowMenu;

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

@@ -63,34 +63,26 @@ describe('<ShortUrlsRowMenu />', () => {
   });
 
   describe('toggles state when toggling modal windows', () => {
-    const assert = (modalComponent, stateProp, done) => {
+    const assert = (modalComponent) => {
       const wrapper = createWrapper();
-      const modal = wrapper.find(modalComponent);
 
-      expect(wrapper.state(stateProp)).toEqual(false);
-      modal.prop('toggle')();
-      setImmediate(() => {
-        expect(wrapper.state(stateProp)).toEqual(true);
-        done();
-      });
+      expect(wrapper.find(modalComponent).prop('isOpen')).toEqual(false);
+      wrapper.find(modalComponent).prop('toggle')();
+      expect(wrapper.find(modalComponent).prop('isOpen')).toEqual(true);
     };
 
-    it('DeleteShortUrlModal', (done) => assert(DeleteShortUrlModal, 'isDeleteModalOpen', done));
-    it('EditTagsModal', (done) => assert(EditTagsModal, 'isTagsModalOpen', done));
-    it('PreviewModal', (done) => assert(PreviewModal, 'isPreviewModalOpen', done));
-    it('QrCodeModal', (done) => assert(QrCodeModal, 'isQrModalOpen', done));
-    it('EditShortUrlModal', (done) => assert(EditShortUrlModal, 'isEditModalOpen', done));
+    it('DeleteShortUrlModal', () => assert(DeleteShortUrlModal));
+    it('EditTagsModal', () => assert(EditTagsModal));
+    it('PreviewModal', () => assert(PreviewModal));
+    it('QrCodeModal', () => assert(QrCodeModal));
+    it('EditShortUrlModal', () => assert(EditShortUrlModal));
   });
 
-  it('toggles dropdown state when toggling dropdown', (done) => {
+  it('toggles dropdown state when toggling dropdown', () => {
     const wrapper = createWrapper();
-    const dropdown = wrapper.find(ButtonDropdown);
 
-    expect(wrapper.state('isOpen')).toEqual(false);
-    dropdown.prop('toggle')();
-    setImmediate(() => {
-      expect(wrapper.state('isOpen')).toEqual(true);
-      done();
-    });
+    expect(wrapper.find(ButtonDropdown).prop('isOpen')).toEqual(false);
+    wrapper.find(ButtonDropdown).prop('toggle')();
+    expect(wrapper.find(ButtonDropdown).prop('isOpen')).toEqual(true);
   });
 });