Merge pull request #246 from acelaya-forks/feature/create-improvements

Feature/create improvements

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## 2.4.0 - 2020-04-10
 
 #### Added
 
@@ -39,7 +39,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Fixed
 
-* *Nothing*
+* [#243](https://github.com/shlinkio/shlink-web-client/issues/243) Fixed loading state and resetting on short URL creation form.
 
 
 ## 2.3.1 - 2020-02-08

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>
 

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;
   }
 };
 

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', () => {

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) {