From ca670d810da446ed8b771acc6ee4d0a2dbc67288 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 27 Mar 2021 10:27:46 +0100
Subject: [PATCH] Added error/loading handling to edit short URL

---
 src/short-urls/EditShortUrl.tsx            | 14 ++++++++++++--
 src/short-urls/services/provideServices.ts |  8 ++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/short-urls/EditShortUrl.tsx b/src/short-urls/EditShortUrl.tsx
index 7f0f0c31..5d2078bf 100644
--- a/src/short-urls/EditShortUrl.tsx
+++ b/src/short-urls/EditShortUrl.tsx
@@ -10,11 +10,13 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
 import { ShortUrlFormProps } from './ShortUrlForm';
 import { ShortUrlDetail } from './reducers/shortUrlDetail';
 import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
+import { ShortUrlEdition } from './reducers/shortUrlEdition';
 
 interface EditShortUrlConnectProps extends RouteComponentProps<{ shortCode: string }> {
   settings: Settings;
   selectedServer: SelectedServer;
   shortUrlDetail: ShortUrlDetail;
+  shortUrlEdition: ShortUrlEdition;
   getShortUrlDetail: (shortCode: string, domain: OptionalString) => void;
   editShortUrl: (shortUrl: string, domain: OptionalString, data: EditShortUrlData) => Promise<void>;
 }
@@ -45,9 +47,11 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
   selectedServer,
   shortUrlDetail,
   getShortUrlDetail,
+  shortUrlEdition,
   editShortUrl,
 }: EditShortUrlConnectProps) => {
   const { loading, error, errorData, shortUrl } = shortUrlDetail;
+  const { saving, error: savingError, errorData: savingErrorData } = shortUrlEdition;
   const { domain } = parseQuery<{ domain?: string }>(search);
 
   useEffect(() => {
@@ -69,10 +73,16 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
   return (
     <ShortUrlForm
       initialState={getInitialState(shortUrl, shortUrlCreationSettings)}
-      saving={false}
+      saving={saving}
       selectedServer={selectedServer}
       mode="edit"
       onSave={async (shortUrlData) => shortUrl && editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)}
-    />
+    >
+      {savingError && (
+        <Result type="error" className="mt-3">
+          <ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
+        </Result>
+      )}
+    </ShortUrlForm>
   );
 };
diff --git a/src/short-urls/services/provideServices.ts b/src/short-urls/services/provideServices.ts
index b0328c2f..dc2188b7 100644
--- a/src/short-urls/services/provideServices.ts
+++ b/src/short-urls/services/provideServices.ts
@@ -57,10 +57,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   );
 
   bottle.serviceFactory('EditShortUrl', EditShortUrl, 'ShortUrlForm');
-  bottle.decorator(
-    'EditShortUrl',
-    connect([ 'shortUrlDetail', 'selectedServer', 'settings' ], [ 'getShortUrlDetail', 'editShortUrl' ]),
-  );
+  bottle.decorator('EditShortUrl', connect(
+    [ 'shortUrlDetail', 'shortUrlEdition', 'selectedServer', 'settings' ],
+    [ 'getShortUrlDetail', 'editShortUrl' ],
+  ));
 
   bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
   bottle.decorator('DeleteShortUrlModal', connect([ 'shortUrlDeletion' ], [ 'deleteShortUrl', 'resetDeleteShortUrl' ]));