mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Finished component to allow metadata to be edited on existing short URLs
This commit is contained in:
parent
80a8e0b55c
commit
d44a4b260e
6 changed files with 62 additions and 50 deletions
|
@ -1,11 +1,14 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input } from 'reactstrap';
|
||||
import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
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';
|
||||
import { formatIsoDate } from '../../utils/utils';
|
||||
|
||||
const propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
|
@ -13,8 +16,6 @@ const propTypes = {
|
|||
shortUrl: shortUrlType.isRequired,
|
||||
shortUrlMeta: shortUrlEditMetaType,
|
||||
editShortUrlMeta: PropTypes.func,
|
||||
shortUrlMetaEdited: PropTypes.func,
|
||||
resetShortUrlMeta: PropTypes.func,
|
||||
};
|
||||
|
||||
const dateOrUndefined = (shortUrl, dateName) => {
|
||||
|
@ -24,21 +25,29 @@ const dateOrUndefined = (shortUrl, dateName) => {
|
|||
};
|
||||
|
||||
const EditMetaModal = (
|
||||
{ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, shortUrlMetaEdited, resetShortUrlMeta }
|
||||
{ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta }
|
||||
) => {
|
||||
const { saving, error } = editShortUrlMeta;
|
||||
const { saving, error } = shortUrlMeta;
|
||||
const url = shortUrl && (shortUrl.shortUrl || '');
|
||||
const validSince = dateOrUndefined(shortUrl, 'validSince');
|
||||
const validUntil = dateOrUndefined(shortUrl, 'validUntil');
|
||||
|
||||
console.log(shortUrlMeta, shortUrlMetaEdited, resetShortUrlMeta, useEffect, useState);
|
||||
const [ validSince, setValidSince ] = useState(dateOrUndefined(shortUrl, 'validSince'));
|
||||
const [ validUntil, setValidUntil ] = useState(dateOrUndefined(shortUrl, 'validUntil'));
|
||||
const [ maxVisits, setMaxVisits ] = useState(shortUrl && shortUrl.meta && shortUrl.meta.maxVisits);
|
||||
const doEdit = () => editShortUrlMeta(shortUrl.shortCode, {
|
||||
maxVisits: maxVisits && parseInt(maxVisits),
|
||||
validSince: validSince && formatIsoDate(validSince),
|
||||
validUntil: validUntil && formatIsoDate(validUntil),
|
||||
}).then(toggle);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} toggle={toggle} centered>
|
||||
<ModalHeader toggle={toggle}>
|
||||
Edit metadata for <ExternalLink href={url} />
|
||||
<FontAwesomeIcon icon={infoIcon} id="metaTitleInfo" /> Edit metadata for <ExternalLink href={url} />
|
||||
<UncontrolledTooltip target="metaTitleInfo" placement="bottom">
|
||||
<p>Using these metadata properties, you can limit when and how many times your short URL can be visited.</p>
|
||||
<p>If any of the params is not met, the URL will behave as if it was an invalid short URL.</p>
|
||||
</UncontrolledTooltip>
|
||||
</ModalHeader>
|
||||
<form>
|
||||
<form onSubmit={(e) => e.preventDefault() || doEdit()}>
|
||||
<ModalBody>
|
||||
<FormGroup>
|
||||
<DateInput
|
||||
|
@ -46,6 +55,7 @@ const EditMetaModal = (
|
|||
selected={validSince}
|
||||
maxDate={validUntil}
|
||||
isClearable
|
||||
onChange={setValidSince}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
|
@ -54,10 +64,17 @@ const EditMetaModal = (
|
|||
selected={validUntil}
|
||||
minDate={validSince}
|
||||
isClearable
|
||||
onChange={setValidUntil}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup className="mb-0">
|
||||
<Input type="number" placeholder="Maximum number of visits allowed" />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Maximum number of visits allowed"
|
||||
min={1}
|
||||
value={maxVisits || ''}
|
||||
onChange={(e) => setMaxVisits(e.target.value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
{error && (
|
||||
<div className="p-2 mt-2 bg-danger text-white text-center">
|
||||
|
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
import { UncontrolledTooltip } from 'reactstrap';
|
||||
import { shortUrlMetaType } from '../reducers/shortUrlsList';
|
||||
import { shortUrlMetaType } from '../reducers/shortUrlMeta';
|
||||
import './ShortUrlVisitsCount.scss';
|
||||
|
||||
const propTypes = {
|
||||
|
|
|
@ -1,15 +1,18 @@
|
|||
import { createAction, handleActions } from 'redux-actions';
|
||||
import { handleActions } from 'redux-actions';
|
||||
import PropTypes from 'prop-types';
|
||||
import { shortUrlMetaType } from './shortUrlsList';
|
||||
|
||||
/* eslint-disable padding-line-between-statements */
|
||||
export const EDIT_SHORT_URL_META_START = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META_START';
|
||||
export const EDIT_SHORT_URL_META_ERROR = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META_ERROR';
|
||||
export const EDIT_SHORT_URL_META = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META';
|
||||
export const RESET_EDIT_SHORT_URL_META = 'shlink/shortUrlMeta/RESET_EDIT_SHORT_URL_META';
|
||||
export const SHORT_URL_META_EDITED = 'shlink/shortUrlMeta/SHORT_URL_META_EDITED';
|
||||
/* eslint-enable padding-line-between-statements */
|
||||
|
||||
export const shortUrlMetaType = PropTypes.shape({
|
||||
validSince: PropTypes.string,
|
||||
validUntil: PropTypes.string,
|
||||
maxVisits: PropTypes.number,
|
||||
});
|
||||
|
||||
export const shortUrlEditMetaType = PropTypes.shape({
|
||||
shortCode: PropTypes.string,
|
||||
meta: shortUrlMetaType.isRequired,
|
||||
|
@ -27,8 +30,7 @@ const initialState = {
|
|||
export default handleActions({
|
||||
[EDIT_SHORT_URL_META_START]: (state) => ({ ...state, saving: true, error: false }),
|
||||
[EDIT_SHORT_URL_META_ERROR]: (state) => ({ ...state, saving: false, error: true }),
|
||||
[EDIT_SHORT_URL_META]: (state, { shortCode, meta }) => ({ shortCode, meta, saving: false, error: false }),
|
||||
[RESET_EDIT_SHORT_URL_META]: () => initialState,
|
||||
[SHORT_URL_META_EDITED]: (state, { shortCode, meta }) => ({ shortCode, meta, saving: false, error: false }),
|
||||
}, initialState);
|
||||
|
||||
export const editShortUrlMeta = (buildShlinkApiClient) => (shortCode, meta) => async (dispatch, getState) => {
|
||||
|
@ -37,16 +39,10 @@ export const editShortUrlMeta = (buildShlinkApiClient) => (shortCode, meta) => a
|
|||
|
||||
try {
|
||||
await updateShortUrlMeta(shortCode, meta);
|
||||
dispatch({ shortCode, meta, type: EDIT_SHORT_URL_META });
|
||||
dispatch({ shortCode, meta, type: SHORT_URL_META_EDITED });
|
||||
} catch (e) {
|
||||
dispatch({ type: EDIT_SHORT_URL_META_ERROR });
|
||||
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
export const resetShortUrlMeta = createAction(RESET_EDIT_SHORT_URL_META);
|
||||
|
||||
export const shortUrlMetaEdited = (shortCode, meta) => ({
|
||||
meta,
|
||||
shortCode,
|
||||
type: SHORT_URL_META_EDITED,
|
||||
});
|
||||
|
|
|
@ -3,6 +3,7 @@ import { assoc, assocPath, propEq, reject } from 'ramda';
|
|||
import PropTypes from 'prop-types';
|
||||
import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
|
||||
import { SHORT_URL_DELETED } from './shortUrlDeletion';
|
||||
import { SHORT_URL_META_EDITED, shortUrlMetaType } from './shortUrlMeta';
|
||||
|
||||
/* eslint-disable padding-line-between-statements */
|
||||
export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
|
||||
|
@ -10,12 +11,6 @@ export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR
|
|||
export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
|
||||
/* eslint-enable padding-line-between-statements */
|
||||
|
||||
export const shortUrlMetaType = PropTypes.shape({
|
||||
validSince: PropTypes.string,
|
||||
validUntil: PropTypes.string,
|
||||
maxVisits: PropTypes.number,
|
||||
});
|
||||
|
||||
export const shortUrlType = PropTypes.shape({
|
||||
shortCode: PropTypes.string,
|
||||
shortUrl: PropTypes.string,
|
||||
|
@ -31,23 +26,25 @@ const initialState = {
|
|||
error: false,
|
||||
};
|
||||
|
||||
const setPropFromActionOnMatchingShortUrl = (prop) => (state, { shortCode, [prop]: propValue }) => assocPath(
|
||||
[ 'shortUrls', 'data' ],
|
||||
state.shortUrls.data.map(
|
||||
(shortUrl) => shortUrl.shortCode === shortCode ? assoc(prop, propValue, shortUrl) : shortUrl
|
||||
),
|
||||
state
|
||||
);
|
||||
|
||||
export default handleActions({
|
||||
[LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
|
||||
[LIST_SHORT_URLS]: (state, { shortUrls }) => ({ loading: false, error: false, shortUrls }),
|
||||
[LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true, shortUrls: {} }),
|
||||
[SHORT_URL_TAGS_EDITED]: (state, action) => { // eslint-disable-line object-shorthand
|
||||
const { data } = state.shortUrls;
|
||||
|
||||
return assocPath([ 'shortUrls', 'data' ], data.map((shortUrl) =>
|
||||
shortUrl.shortCode === action.shortCode
|
||||
? assoc('tags', action.tags, shortUrl)
|
||||
: shortUrl), state);
|
||||
},
|
||||
[SHORT_URL_DELETED]: (state, action) => assocPath(
|
||||
[SHORT_URL_DELETED]: (state, { shortCode }) => assocPath(
|
||||
[ 'shortUrls', 'data' ],
|
||||
reject(propEq('shortCode', action.shortCode), state.shortUrls.data),
|
||||
reject(propEq('shortCode', shortCode), state.shortUrls.data),
|
||||
state,
|
||||
),
|
||||
[SHORT_URL_TAGS_EDITED]: setPropFromActionOnMatchingShortUrl('tags'),
|
||||
[SHORT_URL_META_EDITED]: setPropFromActionOnMatchingShortUrl('meta'),
|
||||
}, initialState);
|
||||
|
||||
export const listShortUrls = (buildShlinkApiClient) => (params = {}) => async (dispatch, getState) => {
|
||||
|
|
|
@ -8,13 +8,14 @@ import ShortUrlsRowMenu from '../helpers/ShortUrlsRowMenu';
|
|||
import CreateShortUrl from '../CreateShortUrl';
|
||||
import DeleteShortUrlModal from '../helpers/DeleteShortUrlModal';
|
||||
import EditTagsModal from '../helpers/EditTagsModal';
|
||||
import EditMetaModal from '../helpers/EditMetaModal';
|
||||
import CreateShortUrlResult from '../helpers/CreateShortUrlResult';
|
||||
import { listShortUrls } from '../reducers/shortUrlsList';
|
||||
import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation';
|
||||
import { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted } from '../reducers/shortUrlDeletion';
|
||||
import { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited } from '../reducers/shortUrlTags';
|
||||
import { editShortUrlMeta } from '../reducers/shortUrlMeta';
|
||||
import { resetShortUrlParams } from '../reducers/shortUrlsListParams';
|
||||
import EditMetaModal from '../helpers/EditMetaModal';
|
||||
|
||||
const provideServices = (bottle, connect) => {
|
||||
// Components
|
||||
|
@ -56,10 +57,7 @@ const provideServices = (bottle, connect) => {
|
|||
));
|
||||
|
||||
bottle.serviceFactory('EditMetaModal', () => EditMetaModal);
|
||||
bottle.decorator('EditMetaModal', connect(
|
||||
[ 'shortUrlMeta' ],
|
||||
[ 'editShortUrlMeta', 'shortUrlMetaEdited', 'resetShortUrlMeta' ]
|
||||
));
|
||||
bottle.decorator('EditMetaModal', connect([ 'shortUrlMeta' ], [ 'editShortUrlMeta' ]));
|
||||
|
||||
// Actions
|
||||
bottle.serviceFactory('editShortUrlTags', editShortUrlTags, 'buildShlinkApiClient');
|
||||
|
@ -75,6 +73,8 @@ const provideServices = (bottle, connect) => {
|
|||
bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'buildShlinkApiClient');
|
||||
bottle.serviceFactory('resetDeleteShortUrl', () => resetDeleteShortUrl);
|
||||
bottle.serviceFactory('shortUrlDeleted', () => shortUrlDeleted);
|
||||
|
||||
bottle.serviceFactory('editShortUrlMeta', editShortUrlMeta, 'buildShlinkApiClient');
|
||||
};
|
||||
|
||||
export default provideServices;
|
||||
|
|
|
@ -70,3 +70,5 @@ export const versionIsValidSemVer = (version) => {
|
|||
};
|
||||
|
||||
export const formatDate = (format = 'YYYY-MM-DD') => (date) => date && date.format ? date.format(format) : date;
|
||||
|
||||
export const formatIsoDate = (date) => date && date.format ? date.format() : date;
|
||||
|
|
Loading…
Reference in a new issue