From 2a2bae6d1a4ca9d67e24d7ef1c70ea5459b68ea4 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 10 Apr 2020 18:42:08 +0200
Subject: [PATCH] Improved short URL creation

---
 src/short-urls/CreateShortUrl.js              | 49 +++++++++++--------
 src/short-urls/reducers/shortUrlCreation.js   |  2 +
 test/short-urls/CreateShortUrl.test.js        |  4 +-
 .../reducers/shortUrlCreation.test.js         |  2 +
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index d2ee0cae..0759489b 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -23,22 +23,36 @@ const propTypes = {
   selectedServer: serverType,
 };
 
+const initialState = {
+  longUrl: '',
+  tags: [],
+  customSlug: '',
+  shortCodeLength: '',
+  domain: '',
+  validSince: undefined,
+  validUntil: undefined,
+  maxVisits: '',
+  findIfExists: false,
+};
+
 const CreateShortUrl = (TagsSelector, CreateShortUrlResult, ForServerVersion) => {
   const CreateShortUrlComp = ({ createShortUrl, shortUrlCreationResult, resetCreateShortUrl, selectedServer }) => {
-    const [ shortUrlCreation, setShortUrlCreation ] = useState({
-      longUrl: '',
-      tags: [],
-      customSlug: undefined,
-      shortCodeLength: undefined,
-      domain: undefined,
-      validSince: undefined,
-      validUntil: undefined,
-      maxVisits: undefined,
-      findIfExists: false,
-    });
+    const [ shortUrlCreation, setShortUrlCreation ] = useState(initialState);
     const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle();
 
     const changeTags = (tags) => setShortUrlCreation({ ...shortUrlCreation, tags: tags.map(normalizeTag) });
+    const reset = () => setShortUrlCreation(initialState);
+    const save = (e) => {
+      e.preventDefault();
+
+      const shortUrlData = {
+        ...shortUrlCreation,
+        validSince: formatDate(shortUrlCreation.validSince),
+        validUntil: formatDate(shortUrlCreation.validUntil),
+      };
+
+      createShortUrl(shortUrlData).then(reset).catch(() => {});
+    };
     const renderOptionalInput = (id, placeholder, type = 'text', props = {}) => (
       <FormGroup>
         <Input
@@ -62,14 +76,7 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult, ForServerVersion) =>
         />
       </div>
     );
-    const save = (e) => {
-      e.preventDefault();
-      createShortUrl({
-        ...shortUrlCreation,
-        validSince: formatDate(shortUrlCreation.validSince),
-        validUntil: formatDate(shortUrlCreation.validUntil),
-      });
-    };
+
     const currentServerVersion = selectedServer && selectedServer.version;
     const disableDomain = !versionMatch(currentServerVersion, { minVersion: '1.19.0-beta.1' });
     const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' });
@@ -147,9 +154,9 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult, ForServerVersion) =>
           </button>
           <button
             className="btn btn-outline-primary float-right"
-            disabled={shortUrlCreationResult.loading || isEmpty(shortUrlCreation.longUrl)}
+            disabled={shortUrlCreationResult.saving || isEmpty(shortUrlCreation.longUrl)}
           >
-            {shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
+            {shortUrlCreationResult.saving ? 'Creating...' : 'Create'}
           </button>
         </div>
 
diff --git a/src/short-urls/reducers/shortUrlCreation.js b/src/short-urls/reducers/shortUrlCreation.js
index dc99e0ac..071e3d28 100644
--- a/src/short-urls/reducers/shortUrlCreation.js
+++ b/src/short-urls/reducers/shortUrlCreation.js
@@ -39,6 +39,8 @@ export const createShortUrl = (buildShlinkApiClient) => (data) => async (dispatc
     dispatch({ type: CREATE_SHORT_URL, result });
   } catch (e) {
     dispatch({ type: CREATE_SHORT_URL_ERROR });
+
+    throw e;
   }
 };
 
diff --git a/test/short-urls/CreateShortUrl.test.js b/test/short-urls/CreateShortUrl.test.js
index fcb1ec04..ae47aa10 100644
--- a/test/short-urls/CreateShortUrl.test.js
+++ b/test/short-urls/CreateShortUrl.test.js
@@ -11,7 +11,7 @@ describe('<CreateShortUrl />', () => {
   const shortUrlCreationResult = {
     loading: false,
   };
-  const createShortUrl = jest.fn();
+  const createShortUrl = jest.fn(() => Promise.resolve());
 
   beforeEach(() => {
     const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => '', () => '');
@@ -22,7 +22,7 @@ describe('<CreateShortUrl />', () => {
   });
   afterEach(() => {
     wrapper.unmount();
-    createShortUrl.mockReset();
+    createShortUrl.mockClear();
   });
 
   it('saves short URL with data set in form controls', () => {
diff --git a/test/short-urls/reducers/shortUrlCreation.test.js b/test/short-urls/reducers/shortUrlCreation.test.js
index 3e1ee367..d373f972 100644
--- a/test/short-urls/reducers/shortUrlCreation.test.js
+++ b/test/short-urls/reducers/shortUrlCreation.test.js
@@ -72,6 +72,8 @@ describe('shortUrlCreationReducer', () => {
       const apiClientMock = createApiClientMock(Promise.reject(error));
       const dispatchable = createShortUrl(() => apiClientMock)({});
 
+      expect.assertions(5);
+
       try {
         await dispatchable(dispatch, getState);
       } catch (e) {