Merge pull request #419 from acelaya-forks/feature/edit-feedback

Feature/edit feedback

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

src/short-urls/CreateShortUrl.tsx

@@ -49,7 +49,11 @@ const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResul
         saving={shortUrlCreationResult.saving}
         selectedServer={selectedServer}
         mode={basicMode ? 'create-basic' : 'create'}
-        onSave={createShortUrl}
+        onSave={async (data: ShortUrlData) => {
+          resetCreateShortUrl();
+
+          return createShortUrl(data);
+        }}
       />
       <CreateShortUrlResult
         {...shortUrlCreationResult}

src/short-urls/EditShortUrl.tsx

@@ -11,6 +11,7 @@ import { parseQuery } from '../utils/helpers/query';
 import Message from '../utils/Message';
 import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
+import { useToggle } from '../utils/helpers/hooks';
 import { ShortUrlFormProps } from './ShortUrlForm';
 import { ShortUrlDetail } from './reducers/shortUrlDetail';
 import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
@@ -62,6 +63,7 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
     () => getInitialState(shortUrl, shortUrlCreationSettings),
     [ shortUrl, shortUrlCreationSettings ],
   );
+  const [ savingSucceeded,, isSuccessful, isNotSuccessful ] = useToggle();
 
   useEffect(() => {
     getShortUrlDetail(params.shortCode, domain);
@@ -79,8 +81,6 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
     );
   }
 
-  const title = <small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>;
-
   return (
     <>
       <header className="mb-3">
@@ -89,7 +89,9 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
             <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
               <FontAwesomeIcon icon={faArrowLeft} />
             </Button>
-            <span className="text-center">{title}</span>
+            <span className="text-center">
+              <small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>
+            </span>
             <span />
           </h2>
         </Card>
@@ -99,13 +101,23 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
         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 && (
         <Result type="error" className="mt-3">
           <ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
         </Result>
       )}
+      {savingSucceeded && <Result type="success" className="mt-3">Short URL properly edited.</Result>}
     </>
   );
 };