Migrated short URL detail reducer to RTK

src/reducers/index.ts

@@ -8,7 +8,6 @@ import tagVisitsReducer from '../visits/reducers/tagVisits';
 import domainVisitsReducer from '../visits/reducers/domainVisits';
 import orphanVisitsReducer from '../visits/reducers/orphanVisits';
 import nonOrphanVisitsReducer from '../visits/reducers/nonOrphanVisits';
-import shortUrlDetailReducer from '../short-urls/reducers/shortUrlDetail';
 import tagsListReducer from '../tags/reducers/tagsList';
 import tagDeleteReducer from '../tags/reducers/tagDelete';
 import tagEditReducer from '../tags/reducers/tagEdit';
@@ -25,12 +24,12 @@ export default (container: IContainer) => combineReducers<ShlinkState>({
   shortUrlCreationResult: container.shortUrlCreationReducer,
   shortUrlDeletion: container.shortUrlDeletionReducer,
   shortUrlEdition: container.shortUrlEditionReducer,
+  shortUrlDetail: container.shortUrlDetailReducer,
   shortUrlVisits: shortUrlVisitsReducer,
   tagVisits: tagVisitsReducer,
   domainVisits: domainVisitsReducer,
   orphanVisits: orphanVisitsReducer,
   nonOrphanVisits: nonOrphanVisitsReducer,
-  shortUrlDetail: shortUrlDetailReducer,
   tagsList: tagsListReducer,
   tagDelete: tagDeleteReducer,
   tagEdit: tagEditReducer,

src/short-urls/reducers/shortUrlDetail.ts

@@ -1,17 +1,12 @@
-import { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { Dispatch } from 'redux';
 import { ShortUrl, ShortUrlIdentifier } from '../data';
-import { buildReducer } from '../../utils/helpers/redux';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { GetState } from '../../container/types';
 import { shortUrlMatches } from '../helpers';
 import { parseApiError } from '../../api/utils';
-import { ApiErrorAction } from '../../api/types/actions';
 import { ProblemDetailsError } from '../../api/types/errors';
 
-export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
+const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
-export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';
-export const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
 
 export interface ShortUrlDetail {
   shortUrl?: ShortUrl;
@@ -27,25 +22,29 @@ const initialState: ShortUrlDetail = {
   error: false,
 };
 
-export default buildReducer<ShortUrlDetail, ShortUrlDetailAction & ApiErrorAction>({
+export const shortUrlDetailReducerCreator = (buildShlinkApiClient: ShlinkApiClientBuilder) => {
-  [GET_SHORT_URL_DETAIL_START]: () => ({ loading: true, error: false }),
+  const getShortUrlDetail = createAsyncThunk(
-  [GET_SHORT_URL_DETAIL_ERROR]: (_, { errorData }) => ({ loading: false, error: true, errorData }),
+    GET_SHORT_URL_DETAIL,
-  [GET_SHORT_URL_DETAIL]: (_, { payload: shortUrl }) => ({ shortUrl, ...initialState }),
+    async ({ shortCode, domain }: ShortUrlIdentifier, { getState }): Promise<ShortUrl> => {
-}, initialState);
-
-export const getShortUrlDetail = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
-  { shortCode, domain }: ShortUrlIdentifier,
-) => async (dispatch: Dispatch, getState: GetState) => {
-  dispatch({ type: GET_SHORT_URL_DETAIL_START });
-
-  try {
       const { shortUrlsList } = getState();
-    const payload = shortUrlsList?.shortUrls?.data.find(
+      const alreadyLoaded = shortUrlsList?.shortUrls?.data.find((url) => shortUrlMatches(url, shortCode, domain));
-      (url) => shortUrlMatches(url, shortCode, domain),
-    ) ?? await buildShlinkApiClient(getState).getShortUrl(shortCode, domain);
 
-    dispatch<ShortUrlDetailAction>({ payload, type: GET_SHORT_URL_DETAIL });
+      return alreadyLoaded ?? await buildShlinkApiClient(getState).getShortUrl(shortCode, domain);
-  } catch (e: any) {
+    },
-    dispatch<ApiErrorAction>({ type: GET_SHORT_URL_DETAIL_ERROR, errorData: parseApiError(e) });
+  );
-  }
+
+  const { reducer } = createSlice({
+    name: 'shortUrlDetailReducer',
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+      builder.addCase(getShortUrlDetail.pending, () => ({ loading: true, error: false }));
+      builder.addCase(getShortUrlDetail.rejected, (_, { error }) => (
+        { loading: false, error: true, errorData: parseApiError(error) }
+      ));
+      builder.addCase(getShortUrlDetail.fulfilled, (_, { payload: shortUrl }) => ({ ...initialState, shortUrl }));
+    },
+  });
+
+  return { reducer, getShortUrlDetail };
 };

src/short-urls/services/provideServices.ts

@@ -11,12 +11,12 @@ import { listShortUrls } from '../reducers/shortUrlsList';
 import { shortUrlCreationReducerCreator } from '../reducers/shortUrlCreation';
 import { shortUrlDeletionReducerCreator } from '../reducers/shortUrlDeletion';
 import { shortUrlEditionReducerCreator } from '../reducers/shortUrlEdition';
+import { shortUrlDetailReducerCreator } from '../reducers/shortUrlDetail';
 import { ConnectDecorator } from '../../container/types';
 import { ShortUrlsTable } from '../ShortUrlsTable';
-import { QrCodeModal } from '../helpers/QrCodeModal';
 import { ShortUrlForm } from '../ShortUrlForm';
 import { EditShortUrl } from '../EditShortUrl';
-import { getShortUrlDetail } from '../reducers/shortUrlDetail';
+import { QrCodeModal } from '../helpers/QrCodeModal';
 import { ExportShortUrlsBtn } from '../helpers/ExportShortUrlsBtn';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
@@ -66,6 +66,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('shortUrlDeletionReducerCreator', shortUrlDeletionReducerCreator, 'buildShlinkApiClient');
   bottle.serviceFactory('shortUrlDeletionReducer', prop('reducer'), 'shortUrlDeletionReducerCreator');
 
+  bottle.serviceFactory('shortUrlDetailReducerCreator', shortUrlDetailReducerCreator, 'buildShlinkApiClient');
+  bottle.serviceFactory('shortUrlDetailReducer', prop('reducer'), 'shortUrlDetailReducerCreator');
+
   // Actions
   bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');
 
@@ -75,7 +78,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('deleteShortUrl', prop('deleteShortUrl'), 'shortUrlDeletionReducerCreator');
   bottle.serviceFactory('resetDeleteShortUrl', prop('resetDeleteShortUrl'), 'shortUrlDeletionReducerCreator');
 
-  bottle.serviceFactory('getShortUrlDetail', getShortUrlDetail, 'buildShlinkApiClient');
+  bottle.serviceFactory('getShortUrlDetail', prop('getShortUrlDetail'), 'shortUrlDetailReducerCreator');
 
   bottle.serviceFactory('editShortUrl', prop('editShortUrl'), 'shortUrlEditionReducerCreator');
 };

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

@@ -1,31 +1,29 @@
 import { Mock } from 'ts-mockery';
-import reducer, {
+import { ShortUrlDetailAction, shortUrlDetailReducerCreator } from '../../../src/short-urls/reducers/shortUrlDetail';
-  getShortUrlDetail,
-  GET_SHORT_URL_DETAIL_START,
-  GET_SHORT_URL_DETAIL_ERROR,
-  GET_SHORT_URL_DETAIL,
-  ShortUrlDetailAction,
-} from '../../../src/short-urls/reducers/shortUrlDetail';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
 import { ShlinkState } from '../../../src/container/types';
 import { ShortUrlsList } from '../../../src/short-urls/reducers/shortUrlsList';
 
 describe('shortUrlDetailReducer', () => {
+  const getShortUrlCall = jest.fn();
+  const buildShlinkApiClient = () => Mock.of<ShlinkApiClient>({ getShortUrl: getShortUrlCall });
+  const { reducer, getShortUrlDetail } = shortUrlDetailReducerCreator(buildShlinkApiClient);
+
   beforeEach(jest.clearAllMocks);
 
   describe('reducer', () => {
     const action = (type: string) => Mock.of<ShortUrlDetailAction>({ type });
 
     it('returns loading on GET_SHORT_URL_DETAIL_START', () => {
-      const state = reducer({ loading: false, error: false }, action(GET_SHORT_URL_DETAIL_START));
+      const state = reducer({ loading: false, error: false }, action(getShortUrlDetail.pending.toString()));
       const { loading } = state;
 
       expect(loading).toEqual(true);
     });
 
     it('stops loading and returns error on GET_SHORT_URL_DETAIL_ERROR', () => {
-      const state = reducer({ loading: true, error: false }, action(GET_SHORT_URL_DETAIL_ERROR));
+      const state = reducer({ loading: true, error: false }, action(getShortUrlDetail.rejected.toString()));
       const { loading, error } = state;
 
       expect(loading).toEqual(false);
@@ -34,7 +32,10 @@ describe('shortUrlDetailReducer', () => {
 
     it('return short URL on GET_SHORT_URL_DETAIL', () => {
       const actionShortUrl = Mock.of<ShortUrl>({ longUrl: 'foo', shortCode: 'bar' });
-      const state = reducer({ loading: true, error: false }, { type: GET_SHORT_URL_DETAIL, payload: actionShortUrl });
+      const state = reducer(
+        { loading: true, error: false },
+        { type: getShortUrlDetail.fulfilled.toString(), payload: actionShortUrl },
+      );
       const { loading, error, shortUrl } = state;
 
       expect(loading).toEqual(false);
@@ -44,21 +45,22 @@ describe('shortUrlDetailReducer', () => {
   });
 
   describe('getShortUrlDetail', () => {
-    const buildApiClientMock = (returned: Promise<ShortUrl>) => Mock.of<ShlinkApiClient>({
-      getShortUrl: jest.fn(async () => returned),
-    });
     const dispatchMock = jest.fn();
     const buildGetState = (shortUrlsList?: ShortUrlsList) => () => Mock.of<ShlinkState>({ shortUrlsList });
 
     it('dispatches start and error when promise is rejected', async () => {
-      const ShlinkApiClient = buildApiClientMock(Promise.reject({}));
+      getShortUrlCall.mockRejectedValue({});
 
-      await getShortUrlDetail(() => ShlinkApiClient)({ shortCode: 'abc123', domain: '' })(dispatchMock, buildGetState());
+      await getShortUrlDetail({ shortCode: 'abc123', domain: '' })(dispatchMock, buildGetState(), {});
 
       expect(dispatchMock).toHaveBeenCalledTimes(2);
-      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_DETAIL_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_DETAIL_ERROR });
+        type: getShortUrlDetail.pending.toString(),
-      expect(ShlinkApiClient.getShortUrl).toHaveBeenCalledTimes(1);
+      }));
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: getShortUrlDetail.rejected.toString(),
+      }));
+      expect(getShortUrlCall).toHaveBeenCalledTimes(1);
     });
 
     it.each([
@@ -78,33 +80,44 @@ describe('shortUrlDetailReducer', () => {
       ],
     ])('performs API call when short URL is not found in local state', async (shortUrlsList?: ShortUrlsList) => {
       const resolvedShortUrl = Mock.of<ShortUrl>({ longUrl: 'foo', shortCode: 'abc123' });
-      const ShlinkApiClient = buildApiClientMock(Promise.resolve(resolvedShortUrl));
+      getShortUrlCall.mockResolvedValue(resolvedShortUrl);
 
-      await getShortUrlDetail(() => ShlinkApiClient)({ shortCode: 'abc123', domain: '' })(dispatchMock, buildGetState(shortUrlsList));
+      await getShortUrlDetail({ shortCode: 'abc123', domain: '' })(dispatchMock, buildGetState(shortUrlsList), {});
 
       expect(dispatchMock).toHaveBeenCalledTimes(2);
-      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_DETAIL_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_DETAIL, payload: resolvedShortUrl });
+        type: getShortUrlDetail.pending.toString(),
-      expect(ShlinkApiClient.getShortUrl).toHaveBeenCalledTimes(1);
+      }));
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: getShortUrlDetail.fulfilled.toString(),
+        payload: resolvedShortUrl,
+      }));
+      expect(getShortUrlCall).toHaveBeenCalledTimes(1);
     });
 
     it('avoids API calls when short URL is found in local state', async () => {
       const foundShortUrl = Mock.of<ShortUrl>({ longUrl: 'foo', shortCode: 'abc123' });
-      const ShlinkApiClient = buildApiClientMock(Promise.resolve(Mock.all<ShortUrl>()));
+      getShortUrlCall.mockResolvedValue(Mock.all<ShortUrl>());
 
-      await getShortUrlDetail(() => ShlinkApiClient)(foundShortUrl)(
+      await getShortUrlDetail(foundShortUrl)(
         dispatchMock,
         buildGetState(Mock.of<ShortUrlsList>({
           shortUrls: {
             data: [foundShortUrl],
           },
         })),
+        {},
       );
 
       expect(dispatchMock).toHaveBeenCalledTimes(2);
-      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_DETAIL_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_DETAIL, payload: foundShortUrl });
+        type: getShortUrlDetail.pending.toString(),
-      expect(ShlinkApiClient.getShortUrl).not.toHaveBeenCalled();
+      }));
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: getShortUrlDetail.fulfilled.toString(),
+        payload: foundShortUrl,
+      }));
+      expect(getShortUrlCall).not.toHaveBeenCalled();
     });
   });
 });