Created modal to edit the loing URL behind a short URL

src/short-urls/helpers/EditMetaModal.js

@@ -26,9 +26,7 @@ const dateOrUndefined = (shortUrl, dateName) => {
   return date && moment(date);
 };
 
-const EditMetaModal = (
-  { isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, resetShortUrlMeta }
-) => {
+const EditMetaModal = ({ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, resetShortUrlMeta }) => {
   const { saving, error } = shortUrlMeta;
   const url = shortUrl && (shortUrl.shortUrl || '');
   const [ validSince, setValidSince ] = useState(dateOrUndefined(shortUrl, 'validSince'));

src/short-urls/helpers/EditShortUrlModal.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
+import { ExternalLink } from 'react-external-link';
+import { pipe } from 'ramda';
+import { shortUrlType } from '../reducers/shortUrlsList';
+import { ShortUrlEditionType } from '../reducers/shortUrlEdition';
+import { hasValue } from '../../utils/utils';
+
+const propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  shortUrl: shortUrlType.isRequired,
+  shortUrlEdition: ShortUrlEditionType,
+  editShortUrl: PropTypes.func,
+  resetShortUrlEdition: PropTypes.func,
+};
+
+const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShortUrl, resetShortUrlEdition }) => {
+  const { saving, error } = shortUrlEdition;
+  const url = shortUrl && (shortUrl.shortUrl || '');
+  const [ longUrl, setLongUrl ] = useState(shortUrl.longUrl);
+
+  const close = pipe(resetShortUrlEdition, toggle);
+  const doEdit = () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(close);
+
+  return (
+    <Modal isOpen={isOpen} toggle={close} centered>
+      <ModalHeader toggle={close}>
+        Edit long URL for <ExternalLink href={url} />
+      </ModalHeader>
+      <form onSubmit={(e) => e.preventDefault() || doEdit()}>
+        <ModalBody>
+          <FormGroup className="mb-0">
+            <Input
+              type="url"
+              required
+              placeholder="Long URL"
+              value={longUrl}
+              onChange={(e) => setLongUrl(e.target.value)}
+            />
+          </FormGroup>
+          {error && (
+            <div className="p-2 mt-2 bg-danger text-white text-center">
+              Something went wrong while saving the long URL :(
+            </div>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" onClick={close}>Cancel</Button>
+          <Button color="primary" disabled={saving || !hasValue(longUrl)}>{saving ? 'Saving...' : 'Save'}</Button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};
+
+EditShortUrlModal.propTypes = propTypes;
+
+export default EditShortUrlModal;

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -6,6 +6,7 @@ import {
   faQrcode as qrIcon,
   faMinusCircle as deleteIcon,
   faEdit as editIcon,
+  faLink as linkIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
@@ -21,6 +22,7 @@ const ShortUrlsRowMenu = (
   DeleteShortUrlModal,
   EditTagsModal,
   EditMetaModal,
+  EditShortUrlModal,
   ForServerVersion
 ) => class ShortUrlsRowMenu extends React.Component {
   static propTypes = {
@@ -35,6 +37,7 @@ const ShortUrlsRowMenu = (
     isTagsModalOpen: false,
     isMetaModalOpen: false,
     isDeleteModalOpen: false,
+    isEditModalOpen: false,
   };
   toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
 
@@ -47,6 +50,7 @@ const ShortUrlsRowMenu = (
     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}>
@@ -70,6 +74,13 @@ const ShortUrlsRowMenu = (
             <EditMetaModal shortUrl={shortUrl} isOpen={this.state.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} />
+          </ForServerVersion>
+
           <DropdownItem onClick={toggleQrCode}>
             <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
           </DropdownItem>