Merge pull request #415 from acelaya-forks/feature/update-url-on-list

Feature/update url on list

CHANGELOG.md

@@ -4,6 +4,23 @@ 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]
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#413](https://github.com/shlinkio/shlink-web-client/issues/413) Fixed edit short URL form reflecting outdated info after navigating back from other section.
+
+
 ## [3.1.0] - 2021-03-29
 ### Added
 * [#379](https://github.com/shlinkio/shlink-web-client/issues/379) and [#384](https://github.com/shlinkio/shlink-web-client/issues/384) Improved QR code modal, including controls to customize size, format and margin, as well as a button to copy the link to the clipboard.

src/short-urls/reducers/shortUrlsList.ts

@@ -9,6 +9,7 @@ import { ShlinkShortUrlsResponse } from '../../api/types';
 import { DeleteShortUrlAction, SHORT_URL_DELETED } from './shortUrlDeletion';
 import { ShortUrlsListParams } from './shortUrlsListParams';
 import { CREATE_SHORT_URL, CreateShortUrlAction } from './shortUrlCreation';
+import { SHORT_URL_EDITED, ShortUrlEditedAction } from './shortUrlEdition';
 
 /* eslint-disable padding-line-between-statements */
 export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
@@ -32,6 +33,7 @@ export type ListShortUrlsCombinedAction = (
   & CreateVisitsAction
   & CreateShortUrlAction
   & DeleteShortUrlAction
+  & ShortUrlEditedAction
 );
 
 const initialState: ShortUrlsList = {
@@ -87,6 +89,15 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
       state,
     ),
   ),
+  [SHORT_URL_EDITED]: (state, { shortUrl: editedShortUrl }) => !state.shortUrls ? state : assocPath(
+    [ 'shortUrls', 'data' ],
+    state.shortUrls.data.map((shortUrl) => {
+      const { shortCode, domain } = editedShortUrl;
+
+      return shortUrlMatches(shortUrl, shortCode, domain) ? editedShortUrl : shortUrl;
+    }),
+    state,
+  ),
 }, initialState);
 
 export const listShortUrls = (buildShlinkApiClient: ShlinkApiClientBuilder) => (

test/short-urls/reducers/shortUrlsList.test.ts

@@ -11,6 +11,7 @@ import { ShortUrl } from '../../../src/short-urls/data';
 import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
 import { ShlinkPaginator, ShlinkShortUrlsResponse } from '../../../src/api/types';
 import { CREATE_SHORT_URL } from '../../../src/short-urls/reducers/shortUrlCreation';
+import { SHORT_URL_EDITED } from '../../../src/short-urls/reducers/shortUrlEdition';
 
 describe('shortUrlsListReducer', () => {
   describe('reducer', () => {
@@ -124,6 +125,40 @@ describe('shortUrlsListReducer', () => {
         error: false,
       });
     });
+
+    it.each([
+      ((): [ShortUrl, ShortUrl[], ShortUrl[]] => {
+        const editedShortUrl = Mock.of<ShortUrl>({ shortCode: 'notMatching' });
+        const list = [ Mock.of<ShortUrl>({ shortCode: 'foo' }), Mock.of<ShortUrl>({ shortCode: 'bar' }) ];
+
+        return [ editedShortUrl, list, list ];
+      })(),
+      ((): [ShortUrl, ShortUrl[], ShortUrl[]] => {
+        const editedShortUrl = Mock.of<ShortUrl>({ shortCode: 'matching', longUrl: 'new_one' });
+        const list = [
+          Mock.of<ShortUrl>({ shortCode: 'matching', longUrl: 'old_one' }),
+          Mock.of<ShortUrl>({ shortCode: 'bar' }),
+        ];
+        const expectedList = [ editedShortUrl, list[1] ];
+
+        return [ editedShortUrl, list, expectedList ];
+      })(),
+    ])('updates matching short URL on SHORT_URL_EDITED', (editedShortUrl, initialList, expectedList) => {
+      const state = {
+        shortUrls: Mock.of<ShlinkShortUrlsResponse>({
+          data: initialList,
+          pagination: Mock.of<ShlinkPaginator>({
+            totalItems: 15,
+          }),
+        }),
+        loading: false,
+        error: false,
+      };
+
+      const result = reducer(state, { type: SHORT_URL_EDITED, shortUrl: editedShortUrl } as any);
+
+      expect(result.shortUrls?.data).toEqual(expectedList);
+    });
   });
 
   describe('listShortUrls', () => {