Created component to edit short URLs meta

src/short-urls/helpers/EditMetaModal.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input } from 'reactstrap';
+import { ExternalLink } from 'react-external-link';
+import moment from 'moment';
+import { shortUrlType } from '../reducers/shortUrlsList';
+import { shortUrlEditMetaType } from '../reducers/shortUrlMeta';
+import DateInput from '../../utils/DateInput';
+
+const propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  shortUrl: shortUrlType.isRequired,
+  shortUrlMeta: shortUrlEditMetaType,
+  editShortUrlMeta: PropTypes.func,
+  shortUrlMetaEdited: PropTypes.func,
+  resetShortUrlMeta: PropTypes.func,
+};
+
+const dateOrUndefined = (shortUrl, dateName) => {
+  const date = shortUrl && shortUrl.meta && shortUrl.meta[dateName];
+
+  return date && moment(date);
+};
+
+const EditMetaModal = (
+  { isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, shortUrlMetaEdited, resetShortUrlMeta }
+) => {
+  const { saving, error } = editShortUrlMeta;
+  const url = shortUrl && (shortUrl.shortUrl || '');
+  const validSince = dateOrUndefined(shortUrl, 'validSince');
+  const validUntil = dateOrUndefined(shortUrl, 'validUntil');
+
+  console.log(shortUrlMeta, shortUrlMetaEdited, resetShortUrlMeta, useEffect, useState);
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered>
+      <ModalHeader toggle={toggle}>
+        Edit metadata for <ExternalLink href={url} />
+      </ModalHeader>
+      <form>
+        <ModalBody>
+          <FormGroup>
+            <DateInput
+              placeholderText="Enabled since..."
+              selected={validSince}
+              maxDate={validUntil}
+              isClearable
+            />
+          </FormGroup>
+          <FormGroup>
+            <DateInput
+              placeholderText="Enabled until..."
+              selected={validUntil}
+              minDate={validSince}
+              isClearable
+            />
+          </FormGroup>
+          <FormGroup className="mb-0">
+            <Input type="number" placeholder="Maximum number of visits allowed" />
+          </FormGroup>
+          {error && (
+            <div className="p-2 mt-2 bg-danger text-white text-center">
+              Something went wrong while saving the metadata :(
+            </div>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-link" type="button" onClick={toggle}>Cancel</button>
+          <button className="btn btn-primary" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};
+
+EditMetaModal.propTypes = propTypes;
+
+export default EditMetaModal;

src/short-urls/helpers/EditTagsModal.js

@@ -9,7 +9,6 @@ const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Compon
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     toggle: PropTypes.func.isRequired,
-    url: PropTypes.string.isRequired,
     shortUrl: shortUrlType.isRequired,
     shortUrlTags: shortUrlTagsType,
     editShortUrlTags: PropTypes.func,
@@ -51,12 +50,13 @@ const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Compon
   }
 
   render() {
-    const { isOpen, toggle, url, shortUrlTags } = this.props;
+    const { isOpen, toggle, shortUrl, shortUrlTags } = this.props;
+    const url = shortUrl && (shortUrl.shortUrl || '');
 
     return (
       <Modal isOpen={isOpen} toggle={toggle} centered onClosed={() => this.refreshShortUrls()}>
         <ModalHeader toggle={toggle}>
-          Edit tags for <ExternalLink href={url}>{url}</ExternalLink>
+          Edit tags for <ExternalLink href={url} />
         </ModalHeader>
         <ModalBody>
           <TagsSelector tags={this.state.tags} onChange={(tags) => this.setState({ tags })} />

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -21,8 +21,11 @@ import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
 import './ShortUrlsRowMenu.scss';
 
-// FIXME Replace with typescript: (DeleteShortUrlModal component, EditTagsModal component)
-const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrlsRowMenu extends React.Component {
+const ShortUrlsRowMenu = (
+  DeleteShortUrlModal,
+  EditTagsModal,
+  EditMetaModal
+) => class ShortUrlsRowMenu extends React.Component {
   static propTypes = {
     onCopyToClipboard: PropTypes.func,
     selectedServer: serverType,
@@ -64,16 +67,12 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
           <DropdownItem onClick={toggleTags}>
             <FontAwesomeIcon icon={tagsIcon} fixedWidth /> Edit tags
           </DropdownItem>
-          <EditTagsModal
-            url={completeShortUrl}
-            shortUrl={shortUrl}
-            isOpen={this.state.isTagsModalOpen}
-            toggle={toggleTags}
-          />
+          <EditTagsModal shortUrl={shortUrl} isOpen={this.state.isTagsModalOpen} toggle={toggleTags} />
 
           <DropdownItem onClick={toggleMeta}>
             <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit metadata
           </DropdownItem>
+          <EditMetaModal shortUrl={shortUrl} isOpen={this.state.isMetaModalOpen} toggle={toggleMeta} />
 
           <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
             <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL