Implemented reducers for actions affecting short URLs list

src/short-urls/CreateShortUrl.tsx

@@ -202,7 +202,11 @@ const CreateShortUrl = (
         </Button>
       </div>
 
-      <CreateShortUrlResult {...shortUrlCreationResult} resetCreateShortUrl={resetCreateShortUrl} />
+      <CreateShortUrlResult
+        {...shortUrlCreationResult}
+        resetCreateShortUrl={resetCreateShortUrl}
+        canBeClosed={basicMode}
+      />
     </form>
   );
 };

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -1,4 +1,5 @@
 import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import { faTimes as closeIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isNil } from 'ramda';
 import { useEffect } from 'react';
@@ -10,10 +11,11 @@ import './CreateShortUrlResult.scss';
 
 export interface CreateShortUrlResultProps extends ShortUrlCreation {
   resetCreateShortUrl: () => void;
+  canBeClosed: boolean;
 }
 
 const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
-  { error, result, resetCreateShortUrl }: CreateShortUrlResultProps,
+  { error, result, resetCreateShortUrl, canBeClosed }: CreateShortUrlResultProps,
 ) => {
   const [ showCopyTooltip, setShowCopyTooltip ] = useStateFlagTimeout();
 
@@ -38,6 +40,7 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
   return (
     <Card inverse className="bg-main mt-3">
       <CardBody>
+        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
         <b>Great!</b> The short URL is <b>{shortUrl}</b>
 
         <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>

src/short-urls/reducers/shortUrlDeletion.ts

@@ -18,7 +18,7 @@ export interface ShortUrlDeletion {
   errorData?: ProblemDetailsError;
 }
 
-interface DeleteShortUrlAction extends Action<string> {
+export interface DeleteShortUrlAction extends Action<string> {
   shortCode: string;
   domain?: string | null;
 }

src/short-urls/reducers/shortUrlsList.ts

@@ -1,4 +1,4 @@
-import { assoc, assocPath, last, reject } from 'ramda';
+import { assoc, assocPath, init, last, pipe, reject } from 'ramda';
 import { Action, Dispatch } from 'redux';
 import { shortUrlMatches } from '../helpers';
 import { CREATE_VISITS, CreateVisitsAction } from '../../visits/reducers/visitCreation';
@@ -8,10 +8,11 @@ import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
 import { ShlinkShortUrlsResponse } from '../../utils/services/types';
 import { EditShortUrlTagsAction, SHORT_URL_TAGS_EDITED } from './shortUrlTags';
-import { SHORT_URL_DELETED } from './shortUrlDeletion';
+import { DeleteShortUrlAction, SHORT_URL_DELETED } from './shortUrlDeletion';
 import { SHORT_URL_META_EDITED, ShortUrlMetaEditedAction } from './shortUrlMeta';
 import { SHORT_URL_EDITED, ShortUrlEditedAction } from './shortUrlEdition';
 import { ShortUrlsListParams } from './shortUrlsListParams';
+import { CREATE_SHORT_URL, CreateShortUrlAction } from './shortUrlCreation';
 
 /* eslint-disable padding-line-between-statements */
 export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
@@ -31,7 +32,13 @@ export interface ListShortUrlsAction extends Action<string> {
 }
 
 export type ListShortUrlsCombinedAction = (
-  ListShortUrlsAction & EditShortUrlTagsAction & ShortUrlEditedAction & ShortUrlMetaEditedAction & CreateVisitsAction
+  ListShortUrlsAction
+  & EditShortUrlTagsAction
+  & ShortUrlEditedAction
+  & ShortUrlMetaEditedAction
+  & CreateVisitsAction
+  & CreateShortUrlAction
+  & DeleteShortUrlAction
 );
 
 const initialState: ShortUrlsList = {
@@ -55,10 +62,17 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
   [LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
   [LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true }),
   [LIST_SHORT_URLS]: (_, { shortUrls }) => ({ loading: false, error: false, shortUrls }),
-  [SHORT_URL_DELETED]: (state, { shortCode, domain }) => !state.shortUrls ? state : assocPath(
-    [ 'shortUrls', 'data' ],
-    reject((shortUrl) => shortUrlMatches(shortUrl, shortCode, domain), state.shortUrls.data),
-    state,
+  [SHORT_URL_DELETED]: pipe(
+    (state: ShortUrlsList, { shortCode, domain }: DeleteShortUrlAction) => !state.shortUrls ? state : assocPath(
+      [ 'shortUrls', 'data' ],
+      reject((shortUrl) => shortUrlMatches(shortUrl, shortCode, domain), state.shortUrls.data),
+      state,
+    ),
+    (state) => !state.shortUrls ? state : assocPath(
+      [ 'shortUrls', 'pagination', 'totalItems' ],
+      state.shortUrls.pagination.totalItems - 1,
+      state,
+    ),
   ),
   [SHORT_URL_TAGS_EDITED]: setPropFromActionOnMatchingShortUrl<EditShortUrlTagsAction>('tags'),
   [SHORT_URL_META_EDITED]: setPropFromActionOnMatchingShortUrl<ShortUrlMetaEditedAction>('meta'),
@@ -77,6 +91,20 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
     ),
     state,
   ),
+  [CREATE_SHORT_URL]: pipe(
+    // The only place where the list and the creation form coexist is the overview page.
+    // There we can assume we are displaying page 1, and therefore, we can safely prepend the new short URL and remove the last one.
+    (state: ShortUrlsList, { result }: CreateShortUrlAction) => !state.shortUrls ? state : assocPath(
+      [ 'shortUrls', 'data' ],
+      [ result, ...init(state.shortUrls.data) ],
+      state,
+    ),
+    (state: ShortUrlsList) => !state.shortUrls ? state : assocPath(
+      [ 'shortUrls', 'pagination', 'totalItems' ],
+      state.shortUrls.pagination.totalItems + 1,
+      state,
+    ),
+  ),
 }, initialState);
 
 export const listShortUrls = (buildShlinkApiClient: ShlinkApiClientBuilder) => (