diff --git a/CHANGELOG.md b/CHANGELOG.md index d5657b36..ea61fce7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), * [#413](https://github.com/shlinkio/shlink-web-client/issues/413) Fixed edit short URL form reflecting outdated info after navigating back from other section. * [#412](https://github.com/shlinkio/shlink-web-client/issues/412) Ensured new visits coming from mercure hub are prepended and not appended, to keep proper sorting. * [#417](https://github.com/shlinkio/shlink-web-client/issues/417) Fixed link spanning out of QR code modal. +* [#411](https://github.com/shlinkio/shlink-web-client/issues/411) Added missing feedback when editing a short URL to know if everything went right. ## [3.1.0] - 2021-03-29 diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx index cc97427f..68d28125 100644 --- a/src/short-urls/CreateShortUrl.tsx +++ b/src/short-urls/CreateShortUrl.tsx @@ -49,7 +49,11 @@ const CreateShortUrl = (ShortUrlForm: FC, CreateShortUrlResul saving={shortUrlCreationResult.saving} selectedServer={selectedServer} mode={basicMode ? 'create-basic' : 'create'} - onSave={createShortUrl} + onSave={async (data: ShortUrlData) => { + resetCreateShortUrl(); + + return createShortUrl(data); + }} /> ) => ({ () => getInitialState(shortUrl, shortUrlCreationSettings), [ shortUrl, shortUrlCreationSettings ], ); + const [ savingSucceeded,, isSuccessful, isNotSuccessful ] = useToggle(); useEffect(() => { getShortUrlDetail(params.shortCode, domain); @@ -79,8 +81,6 @@ export const EditShortUrl = (ShortUrlForm: FC) => ({ ); } - const title = Edit ; - return ( <>
@@ -89,7 +89,9 @@ export const EditShortUrl = (ShortUrlForm: FC) => ({ - {title} + + Edit + @@ -99,13 +101,23 @@ export const EditShortUrl = (ShortUrlForm: FC) => ({ saving={saving} selectedServer={selectedServer} mode="edit" - onSave={async (shortUrlData) => shortUrl && editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)} + onSave={async (shortUrlData) => { + if (!shortUrl) { + return; + } + + isNotSuccessful(); + editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData) + .then(isSuccessful) + .catch(isNotSuccessful); + }} /> {savingError && ( )} + {savingSucceeded && Short URL properly edited.} ); };