Migrated shortUrlDeletion reducer to RTK

src/reducers/index.ts

@@ -3,7 +3,6 @@ import { combineReducers } from 'redux';
 import { serversReducer } from '../servers/reducers/servers';
 import selectedServerReducer from '../servers/reducers/selectedServer';
 import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
-import shortUrlDeletionReducer from '../short-urls/reducers/shortUrlDeletion';
 import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
 import tagVisitsReducer from '../visits/reducers/tagVisits';
 import domainVisitsReducer from '../visits/reducers/domainVisits';
@@ -24,7 +23,7 @@ export default (container: IContainer) => combineReducers<ShlinkState>({
   selectedServer: selectedServerReducer,
   shortUrlsList: shortUrlsListReducer,
   shortUrlCreationResult: container.shortUrlCreationReducer,
-  shortUrlDeletion: shortUrlDeletionReducer,
+  shortUrlDeletion: container.shortUrlDeletionReducer,
   shortUrlEdition: container.shortUrlEditionReducer,
   shortUrlVisits: shortUrlVisitsReducer,
   tagVisits: tagVisitsReducer,

src/short-urls/reducers/shortUrlDeletion.ts

@@ -1,20 +1,15 @@
-import { PayloadAction } from '@reduxjs/toolkit';
-import { Dispatch } from 'redux';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { GetState } from '../../container/types';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { parseApiError } from '../../api/utils';
-import { ApiErrorAction } from '../../api/types/actions';
 import { ProblemDetailsError } from '../../api/types/errors';
 
-export const DELETE_SHORT_URL_START = 'shlink/deleteShortUrl/DELETE_SHORT_URL_START';
-export const DELETE_SHORT_URL_ERROR = 'shlink/deleteShortUrl/DELETE_SHORT_URL_ERROR';
 export const SHORT_URL_DELETED = 'shlink/deleteShortUrl/SHORT_URL_DELETED';
-export const RESET_DELETE_SHORT_URL = 'shlink/deleteShortUrl/RESET_DELETE_SHORT_URL';
 
 export interface ShortUrlDeletion {
   shortCode: string;
   loading: boolean;
+  deleted: boolean;
   error: boolean;
   errorData?: ProblemDetailsError;
 }
@@ -29,35 +24,38 @@ export type DeleteShortUrlAction = PayloadAction<DeleteShortUrl>;
 const initialState: ShortUrlDeletion = {
   shortCode: '',
   loading: false,
+  deleted: false,
   error: false,
 };
 
-export default buildReducer<ShortUrlDeletion, DeleteShortUrlAction & ApiErrorAction>({
-  [DELETE_SHORT_URL_START]: (state) => ({ ...state, loading: true, error: false }),
-  [DELETE_SHORT_URL_ERROR]: (state, { errorData }) => ({ ...state, errorData, loading: false, error: true }),
-  [SHORT_URL_DELETED]: (state, { payload }) => (
-    { ...state, shortCode: payload.shortCode, loading: false, error: false }
-  ),
-  [RESET_DELETE_SHORT_URL]: () => initialState,
-}, initialState);
+export const shortUrlDeletionReducerCreator = (buildShlinkApiClient: ShlinkApiClientBuilder) => {
+  const deleteShortUrl = createAsyncThunk(
+    SHORT_URL_DELETED,
+    async ({ shortCode, domain }: DeleteShortUrl, { getState }): Promise<DeleteShortUrl> => {
+      const { deleteShortUrl: shlinkDeleteShortUrl } = buildShlinkApiClient(getState);
+      await shlinkDeleteShortUrl(shortCode, domain);
+      return { shortCode, domain };
+    },
+  );
 
-export const deleteShortUrl = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
-  { shortCode, domain }: DeleteShortUrl,
-) => async (dispatch: Dispatch, getState: GetState) => {
-  dispatch({ type: DELETE_SHORT_URL_START });
-  const { deleteShortUrl: shlinkDeleteShortUrl } = buildShlinkApiClient(getState);
+  const { actions, reducer } = createSlice({
+    name: 'shortUrlDeletion',
+    initialState,
+    reducers: {
+      resetDeleteShortUrl: () => initialState,
+    },
+    extraReducers: (builder) => {
+      builder.addCase(deleteShortUrl.pending, (state) => ({ ...state, loading: true, error: false, deleted: false }));
+      builder.addCase(deleteShortUrl.rejected, (state, { error }) => (
+        { ...state, errorData: parseApiError(error), loading: false, error: true, deleted: false }
+      ));
+      builder.addCase(deleteShortUrl.fulfilled, (state, { payload }) => (
+        { ...state, shortCode: payload.shortCode, loading: false, error: false, deleted: true }
+      ));
+    },
+  });
 
-  try {
-    await shlinkDeleteShortUrl(shortCode, domain);
-    dispatch<DeleteShortUrlAction>({
-      type: SHORT_URL_DELETED,
-      payload: { shortCode, domain },
-    });
-  } catch (e: any) {
-    dispatch<ApiErrorAction>({ type: DELETE_SHORT_URL_ERROR, errorData: parseApiError(e) });
+  const { resetDeleteShortUrl } = actions;
 
-    throw e;
-  }
+  return { reducer, deleteShortUrl, resetDeleteShortUrl };
 };
-
-export const resetDeleteShortUrl = buildActionCreator(RESET_DELETE_SHORT_URL);

src/short-urls/reducers/shortUrlsList.ts

@@ -44,8 +44,7 @@ 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}/fulfilled`]: pipe( // TODO Do not hardcode action type here
-  [SHORT_URL_DELETED]: pipe(
+  [`${SHORT_URL_DELETED}/fulfilled`]: pipe( // TODO Do not hardcode action type here
     (state: ShortUrlsList, { payload }: DeleteShortUrlAction) => (!state.shortUrls ? state : assocPath(
       ['shortUrls', 'data'],
       reject<ShortUrl, ShortUrl[]>((shortUrl) =>

src/short-urls/services/provideServices.ts

@@ -9,7 +9,7 @@ import { DeleteShortUrlModal } from '../helpers/DeleteShortUrlModal';
 import { CreateShortUrlResult } from '../helpers/CreateShortUrlResult';
 import { listShortUrls } from '../reducers/shortUrlsList';
 import { shortUrlCreationReducerCreator } from '../reducers/shortUrlCreation';
-import { deleteShortUrl, resetDeleteShortUrl } from '../reducers/shortUrlDeletion';
+import { shortUrlDeletionReducerCreator } from '../reducers/shortUrlDeletion';
 import { shortUrlEditionReducerCreator } from '../reducers/shortUrlEdition';
 import { ConnectDecorator } from '../../container/types';
 import { ShortUrlsTable } from '../ShortUrlsTable';
@@ -63,14 +63,17 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('shortUrlEditionReducerCreator', shortUrlEditionReducerCreator, 'buildShlinkApiClient');
   bottle.serviceFactory('shortUrlEditionReducer', prop('reducer'), 'shortUrlEditionReducerCreator');
 
+  bottle.serviceFactory('shortUrlDeletionReducerCreator', shortUrlDeletionReducerCreator, 'buildShlinkApiClient');
+  bottle.serviceFactory('shortUrlDeletionReducer', prop('reducer'), 'shortUrlDeletionReducerCreator');
+
   // Actions
   bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');
 
   bottle.serviceFactory('createShortUrl', prop('createShortUrl'), 'shortUrlCreationReducerCreator');
   bottle.serviceFactory('resetCreateShortUrl', prop('resetCreateShortUrl'), 'shortUrlCreationReducerCreator');
 
-  bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'buildShlinkApiClient');
-  bottle.serviceFactory('resetDeleteShortUrl', () => resetDeleteShortUrl);
+  bottle.serviceFactory('deleteShortUrl', prop('deleteShortUrl'), 'shortUrlDeletionReducerCreator');
+  bottle.serviceFactory('resetDeleteShortUrl', prop('resetDeleteShortUrl'), 'shortUrlDeletionReducerCreator');
 
   bottle.serviceFactory('getShortUrlDetail', getShortUrlDetail, 'buildShlinkApiClient');