diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx
index 3743424a..669b2197 100644
--- a/src/common/MenuLayout.tsx
+++ b/src/common/MenuLayout.tsx
@@ -21,6 +21,7 @@ const MenuLayout = (
OrphanVisits: FC,
ServerError: FC,
Overview: FC,
+ EditShortUrl: FC,
) => withSelectedServer(({ location, selectedServer }) => {
const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
@@ -50,6 +51,7 @@ const MenuLayout = (
+
{addTagsVisitsRoute && }
{addOrphanVisitsRoute && }
diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts
index c18689b8..eccd43f2 100644
--- a/src/common/services/provideServices.ts
+++ b/src/common/services/provideServices.ts
@@ -37,6 +37,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
'OrphanVisits',
'ServerError',
'Overview',
+ 'EditShortUrl',
);
bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
bottle.decorator('MenuLayout', withRouter);
diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx
index 08aada4d..13a44654 100644
--- a/src/short-urls/CreateShortUrl.tsx
+++ b/src/short-urls/CreateShortUrl.tsx
@@ -1,4 +1,3 @@
-import { pipe, replace, trim } from 'ramda';
import { FC, useMemo } from 'react';
import { SelectedServer } from '../servers/data';
import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
@@ -19,8 +18,6 @@ interface CreateShortUrlConnectProps extends CreateShortUrlProps {
resetCreateShortUrl: () => void;
}
-export const normalizeTag = pipe(trim, replace(/ /g, '-'));
-
const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => ({
longUrl: '',
tags: [],
diff --git a/src/short-urls/EditShortUrl.tsx b/src/short-urls/EditShortUrl.tsx
new file mode 100644
index 00000000..f520ddce
--- /dev/null
+++ b/src/short-urls/EditShortUrl.tsx
@@ -0,0 +1,76 @@
+import { FC, useEffect } from 'react';
+import { RouteComponentProps } from 'react-router';
+import { SelectedServer } from '../servers/data';
+import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
+import { OptionalString } from '../utils/utils';
+import { parseQuery } from '../utils/helpers/query';
+import Message from '../utils/Message';
+import { Result } from '../utils/Result';
+import { ShlinkApiError } from '../api/ShlinkApiError';
+import { ShortUrlFormProps } from './ShortUrlForm';
+import { ShortUrlDetail } from './reducers/shortUrlDetail';
+import { ShortUrl, ShortUrlData } from './data';
+
+interface EditShortUrlConnectProps extends RouteComponentProps<{ shortCode: string }> {
+ settings: Settings;
+ selectedServer: SelectedServer;
+ shortUrlDetail: ShortUrlDetail;
+ getShortUrlDetail: (shortCode: string, domain: OptionalString) => void;
+}
+
+const getInitialState = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSettings): ShortUrlData => {
+ const validateUrl = settings?.validateUrls ?? false;
+
+ if (!shortUrl) {
+ return { longUrl: '', validateUrl };
+ }
+
+ return {
+ longUrl: shortUrl.longUrl,
+ tags: shortUrl.tags,
+ title: shortUrl.title ?? undefined,
+ domain: shortUrl.domain ?? undefined,
+ validSince: shortUrl.meta.validSince ?? undefined,
+ validUntil: shortUrl.meta.validUntil ?? undefined,
+ maxVisits: shortUrl.meta.maxVisits ?? undefined,
+ validateUrl,
+ };
+};
+
+export const EditShortUrl = (ShortUrlForm: FC) => ({
+ match: { params },
+ location: { search },
+ settings: { shortUrlCreation: shortUrlCreationSettings },
+ selectedServer,
+ shortUrlDetail,
+ getShortUrlDetail,
+}: EditShortUrlConnectProps) => {
+ const { loading, error, errorData, shortUrl } = shortUrlDetail;
+ const { domain } = parseQuery<{ domain?: string }>(search);
+
+ useEffect(() => {
+ getShortUrlDetail(params.shortCode, domain);
+ }, []);
+
+ if (loading) {
+ return ;
+ }
+
+ if (error) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+ Promise.resolve(console.log(shortUrlData))}
+ />
+ );
+};
diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx
index abdb969e..8030a945 100644
--- a/src/short-urls/ShortUrlForm.tsx
+++ b/src/short-urls/ShortUrlForm.tsx
@@ -1,7 +1,7 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
import { InputType } from 'reactstrap/lib/Input';
import { Button, FormGroup, Input, Row } from 'reactstrap';
-import { isEmpty } from 'ramda';
+import { isEmpty, pipe, replace, trim } from 'ramda';
import * as m from 'moment';
import DateInput, { DateInputProps } from '../utils/DateInput';
import {
@@ -18,7 +18,6 @@ import { Versions } from '../utils/helpers/version';
import { DomainSelectorProps } from '../domains/DomainSelector';
import { formatIsoDate } from '../utils/helpers/date';
import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
-import { normalizeTag } from './CreateShortUrl';
import { ShortUrlData } from './data';
import './ShortUrlForm.scss';
@@ -34,19 +33,26 @@ export interface ShortUrlFormProps {
selectedServer: SelectedServer;
}
+const normalizeTag = pipe(trim, replace(/ /g, '-'));
+
export const ShortUrlForm = (
TagsSelector: FC,
ForServerVersion: FC,
DomainSelector: FC,
): FC => ({ mode, saving, onSave, initialState, selectedServer, children }) => { // eslint-disable-line complexity
const [ shortUrlData, setShortUrlData ] = useState(initialState);
+ const isEdit = mode === 'edit';
const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) });
const reset = () => setShortUrlData(initialState);
const submit = handleEventPreventingDefault(async () => onSave({
...shortUrlData,
validSince: formatIsoDate(shortUrlData.validSince) ?? undefined,
validUntil: formatIsoDate(shortUrlData.validUntil) ?? undefined,
- }).then(reset).catch(() => {}));
+ }).then(() => !isEdit && reset()).catch(() => {}));
+
+ useEffect(() => {
+ setShortUrlData(initialState);
+ }, [ initialState ]);
const renderOptionalInput = (id: NonDateFields, placeholder: string, type: InputType = 'text', props = {}) => (
@@ -54,7 +60,7 @@ export const ShortUrlForm = (
id={id}
type={type}
placeholder={placeholder}
- value={shortUrlData[id]}
+ value={shortUrlData[id] ?? ''}
onChange={(e) => setShortUrlData({ ...shortUrlData, [id]: e.target.value })}
{...props}
/>
@@ -93,7 +99,6 @@ export const ShortUrlForm = (
const showDomainSelector = supportsListingDomains(selectedServer);
const disableShortCodeLength = !supportsSettingShortCodeLength(selectedServer);
const supportsTitle = supportsShortUrlTitle(selectedServer);
- const isEdit = mode === 'edit';
return (