Migrated to typescript the most complex reducer in the project

src/container/types.ts

@@ -8,11 +8,12 @@ import { ShortUrlDeletion } from '../short-urls/reducers/shortUrlDeletion';
 import { ShortUrlEdition } from '../short-urls/reducers/shortUrlEdition';
 import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
 import { ShortUrlTags } from '../short-urls/reducers/shortUrlTags';
+import { ShortUrlsList } from '../short-urls/reducers/shortUrlsList';
 
 export interface ShlinkState {
   servers: ServersMap;
   selectedServer: SelectedServer;
-  shortUrlsList: any;
+  shortUrlsList: ShortUrlsList;
   shortUrlsListParams: ShortUrlsListParams;
   shortUrlCreationResult: ShortUrlCreation;
   shortUrlDeletion: ShortUrlDeletion;

src/short-urls/data/index.ts

@@ -1,4 +1,4 @@
-import { Nullable } from '../../utils/utils';
+import { Nullable, OptionalString } from '../../utils/utils';
 
 export interface ShortUrlData {
   longUrl: string;
@@ -33,3 +33,8 @@ export interface ShortUrlModalProps {
   isOpen: boolean;
   toggle: () => void;
 }
+
+export interface ShortUrlIdentifier {
+  shortCode: string;
+  domain: OptionalString;
+}

src/short-urls/helpers/index.ts

@@ -1,6 +1,8 @@
 import { isNil } from 'ramda';
+import { ShortUrl } from '../data';
+import { OptionalString } from '../../utils/utils';
 
-export const shortUrlMatches = (shortUrl, shortCode, domain) => {
+export const shortUrlMatches = (shortUrl: ShortUrl, shortCode: string, domain: OptionalString): boolean => {
   if (isNil(domain)) {
     return shortUrl.shortCode === shortCode && !shortUrl.domain;
   }

src/short-urls/reducers/shortUrlEdition.ts

@@ -3,6 +3,7 @@ import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../utils/services/types';
 import { GetState } from '../../container/types';
 import { OptionalString } from '../../utils/utils';
+import { ShortUrlIdentifier } from '../data';
 
 /* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_START = 'shlink/shortUrlEdition/EDIT_SHORT_URL_START';
@@ -17,10 +18,8 @@ export interface ShortUrlEdition {
   error: boolean;
 }
 
-export interface ShortUrlEditedAction extends Action<string> {
+export interface ShortUrlEditedAction extends Action<string>, ShortUrlIdentifier {
-  shortCode: string;
   longUrl: string;
-  domain: OptionalString;
 }
 
 const initialState: ShortUrlEdition = {

src/short-urls/reducers/shortUrlMeta.ts

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { Dispatch, Action } from 'redux';
-import { ShortUrlMeta } from '../data';
+import { ShortUrlIdentifier, ShortUrlMeta } from '../data';
 import { ShlinkApiClientBuilder } from '../../utils/services/types';
 import { GetState } from '../../container/types';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
@@ -27,9 +27,7 @@ export interface ShortUrlMetaEdition {
   error: boolean;
 }
 
-interface ShortUrlMetaEditedAction extends Action<string> {
+export interface ShortUrlMetaEditedAction extends Action<string>, ShortUrlIdentifier {
-  shortCode: string;
-  domain?: string | null;
   meta: ShortUrlMeta;
 }
 

src/short-urls/reducers/shortUrlTags.ts

@@ -4,6 +4,7 @@ import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../utils/services/types';
 import { GetState } from '../../container/types';
 import { OptionalString } from '../../utils/utils';
+import { ShortUrlIdentifier } from '../data';
 
 /* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
@@ -27,10 +28,8 @@ export interface ShortUrlTags {
   error: boolean;
 }
 
-export interface EditShortUrlTagsAction extends Action<string> {
+export interface EditShortUrlTagsAction extends Action<string>, ShortUrlIdentifier {
-  shortCode: string;
   tags: string[];
-  domain: OptionalString;
 }
 
 const initialState: ShortUrlTags = {

src/short-urls/reducers/shortUrlsList.js

@@ -1,76 +0,0 @@
-import { handleActions } from 'redux-actions';
-import { assoc, assocPath, reject } from 'ramda';
-import PropTypes from 'prop-types';
-import { shortUrlMatches } from '../helpers';
-import { CREATE_VISIT } from '../../visits/reducers/visitCreation';
-import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
-import { SHORT_URL_DELETED } from './shortUrlDeletion';
-import { SHORT_URL_META_EDITED, shortUrlMetaType } from './shortUrlMeta';
-import { SHORT_URL_EDITED } from './shortUrlEdition';
-
-/* eslint-disable padding-line-between-statements */
-export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
-export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
-export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
-/* eslint-enable padding-line-between-statements */
-
-/** @deprecated Use ShortUrl interface instead */
-export const shortUrlType = PropTypes.shape({
-  shortCode: PropTypes.string,
-  shortUrl: PropTypes.string,
-  longUrl: PropTypes.string,
-  visitsCount: PropTypes.number,
-  meta: shortUrlMetaType,
-  tags: PropTypes.arrayOf(PropTypes.string),
-  domain: PropTypes.string,
-});
-
-const initialState = {
-  shortUrls: {},
-  loading: true,
-  error: false,
-};
-
-const setPropFromActionOnMatchingShortUrl = (prop) => (state, { shortCode, domain, [prop]: propValue }) => assocPath(
-  [ 'shortUrls', 'data' ],
-  state.shortUrls.data.map(
-    (shortUrl) => shortUrlMatches(shortUrl, shortCode, domain) ? assoc(prop, propValue, shortUrl) : shortUrl,
-  ),
-  state,
-);
-
-export default handleActions({
-  [LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
-  [LIST_SHORT_URLS]: (state, { shortUrls }) => ({ loading: false, error: false, shortUrls }),
-  [LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true, shortUrls: {} }),
-  [SHORT_URL_DELETED]: (state, { shortCode, domain }) => assocPath(
-    [ 'shortUrls', 'data' ],
-    reject((shortUrl) => shortUrlMatches(shortUrl, shortCode, domain), state.shortUrls.data),
-    state,
-  ),
-  [SHORT_URL_TAGS_EDITED]: setPropFromActionOnMatchingShortUrl('tags'),
-  [SHORT_URL_META_EDITED]: setPropFromActionOnMatchingShortUrl('meta'),
-  [SHORT_URL_EDITED]: setPropFromActionOnMatchingShortUrl('longUrl'),
-  [CREATE_VISIT]: (state, { shortUrl: { shortCode, domain, visitsCount } }) => assocPath(
-    [ 'shortUrls', 'data' ],
-    state.shortUrls && state.shortUrls.data && state.shortUrls.data.map(
-      (shortUrl) => shortUrlMatches(shortUrl, shortCode, domain)
-        ? assoc('visitsCount', visitsCount, shortUrl)
-        : shortUrl,
-    ),
-    state,
-  ),
-}, initialState);
-
-export const listShortUrls = (buildShlinkApiClient) => (params = {}) => async (dispatch, getState) => {
-  dispatch({ type: LIST_SHORT_URLS_START });
-  const { listShortUrls } = buildShlinkApiClient(getState);
-
-  try {
-    const shortUrls = await listShortUrls(params);
-
-    dispatch({ type: LIST_SHORT_URLS, shortUrls, params });
-  } catch (e) {
-    dispatch({ type: LIST_SHORT_URLS_ERROR, params });
-  }
-};

src/short-urls/reducers/shortUrlsList.ts

@@ -0,0 +1,108 @@
+import { assoc, assocPath, reject } from 'ramda';
+import PropTypes from 'prop-types';
+import { Action, Dispatch } from 'redux';
+import { shortUrlMatches } from '../helpers';
+import { CREATE_VISIT, CreateVisitAction } from '../../visits/reducers/visitCreation';
+import { ShortUrl, ShortUrlIdentifier } from '../data';
+import { buildReducer } from '../../utils/helpers/redux';
+import { GetState } from '../../container/types';
+import { ShlinkApiClientBuilder } from '../../utils/services/types';
+import { EditShortUrlTagsAction, SHORT_URL_TAGS_EDITED } from './shortUrlTags';
+import { SHORT_URL_DELETED } from './shortUrlDeletion';
+import { SHORT_URL_META_EDITED, ShortUrlMetaEditedAction, shortUrlMetaType } from './shortUrlMeta';
+import { SHORT_URL_EDITED, ShortUrlEditedAction } from './shortUrlEdition';
+import { ShortUrlsListParams } from './shortUrlsListParams';
+
+/* eslint-disable padding-line-between-statements */
+export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
+export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
+export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
+/* eslint-enable padding-line-between-statements */
+
+/** @deprecated Use ShortUrl interface instead */
+export const shortUrlType = PropTypes.shape({
+  shortCode: PropTypes.string,
+  shortUrl: PropTypes.string,
+  longUrl: PropTypes.string,
+  visitsCount: PropTypes.number,
+  meta: shortUrlMetaType,
+  tags: PropTypes.arrayOf(PropTypes.string),
+  domain: PropTypes.string,
+});
+
+interface ShortUrlsData {
+  data: ShortUrl[];
+}
+
+export interface ShortUrlsList {
+  shortUrls: ShortUrlsData;
+  loading: boolean;
+  error: boolean;
+}
+
+export interface ListShortUrlsAction extends Action<string> {
+  shortUrls: ShortUrlsData;
+  params: ShortUrlsListParams;
+}
+
+export type ListShortUrlsCombinedAction = (
+  ListShortUrlsAction & EditShortUrlTagsAction & ShortUrlEditedAction & ShortUrlMetaEditedAction & CreateVisitAction
+);
+
+const initialState: ShortUrlsList = {
+  shortUrls: {
+    data: [],
+  },
+  loading: true,
+  error: false,
+};
+
+const setPropFromActionOnMatchingShortUrl = <T extends ShortUrlIdentifier>(prop: keyof T) => (
+  state: ShortUrlsList,
+  { shortCode, domain, [prop]: propValue }: T,
+): ShortUrlsList => assocPath(
+  [ 'shortUrls', 'data' ],
+  state.shortUrls.data.map(
+    (shortUrl: ShortUrl) =>
+      shortUrlMatches(shortUrl, shortCode, domain) ? { ...shortUrl, [prop]: propValue } : shortUrl,
+  ),
+  state,
+);
+
+export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
+  [LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
+  [LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true, shortUrls: { data: [] } }),
+  [LIST_SHORT_URLS]: (_, { shortUrls }) => ({ loading: false, error: false, shortUrls }),
+  [SHORT_URL_DELETED]: (state, { shortCode, domain }) => assocPath(
+    [ 'shortUrls', 'data' ],
+    reject((shortUrl) => shortUrlMatches(shortUrl, shortCode, domain), state.shortUrls.data),
+    state,
+  ),
+  [SHORT_URL_TAGS_EDITED]: setPropFromActionOnMatchingShortUrl<EditShortUrlTagsAction>('tags'),
+  [SHORT_URL_META_EDITED]: setPropFromActionOnMatchingShortUrl<ShortUrlMetaEditedAction>('meta'),
+  [SHORT_URL_EDITED]: setPropFromActionOnMatchingShortUrl<ShortUrlEditedAction>('longUrl'),
+  [CREATE_VISIT]: (state, { shortUrl: { shortCode, domain, visitsCount } }) => assocPath(
+    [ 'shortUrls', 'data' ],
+    state.shortUrls && state.shortUrls.data && state.shortUrls.data.map(
+      (shortUrl) => shortUrlMatches(shortUrl, shortCode, domain)
+        ? assoc('visitsCount', visitsCount, shortUrl)
+        : shortUrl,
+    ),
+    state,
+  ),
+}, initialState);
+
+export const listShortUrls = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
+  params: ShortUrlsListParams = {},
+) => async (dispatch: Dispatch, getState: GetState) => {
+  dispatch({ type: LIST_SHORT_URLS_START });
+  const { listShortUrls } = buildShlinkApiClient(getState);
+
+  try {
+    const shortUrls = await listShortUrls(params);
+
+    dispatch<ListShortUrlsAction>({ type: LIST_SHORT_URLS, shortUrls, params });
+  } catch (e) {
+    dispatch({ type: LIST_SHORT_URLS_ERROR, params });
+  }
+};

src/short-urls/reducers/shortUrlsListParams.ts

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
-import { Action } from 'redux';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { LIST_SHORT_URLS } from './shortUrlsList';
+import { LIST_SHORT_URLS, ListShortUrlsAction } from './shortUrlsList';
 
 export const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS';
 
@@ -16,7 +15,7 @@ export const shortUrlsListParamsType = PropTypes.shape({
 });
 
 export interface ShortUrlsListParams {
-  page: string;
+  page?: string;
   tags?: string[];
   searchTerm?: string;
   startDate?: string;
@@ -24,11 +23,7 @@ export interface ShortUrlsListParams {
   orderBy?: object;
 }
 
-interface ListShortUrlsAction extends Action<string> {
+const initialState: ShortUrlsListParams = { page: '1' };
-  params: ShortUrlsListParams;
-}
-
-const initialState = { page: '1' };
 
 export default buildReducer<ShortUrlsListParams, ListShortUrlsAction>({
   [LIST_SHORT_URLS]: (state, { params }) => ({ ...state, ...params }),

src/visits/reducers/visitCreation.ts

@@ -3,7 +3,7 @@ import { CreateVisit } from '../types';
 
 export const CREATE_VISIT = 'shlink/visitCreation/CREATE_VISIT';
 
-type CreateVisitAction = Action<typeof CREATE_VISIT> & CreateVisit;
+export type CreateVisitAction = Action<typeof CREATE_VISIT> & CreateVisit;
 
 export const createNewVisit = ({ shortUrl, visit }: CreateVisit): CreateVisitAction => ({
   type: CREATE_VISIT,

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

@@ -1,3 +1,4 @@
+import { Mock } from 'ts-mockery';
 import reducer, {
   LIST_SHORT_URLS,
   LIST_SHORT_URLS_ERROR,
@@ -8,26 +9,32 @@ import { SHORT_URL_TAGS_EDITED } from '../../../src/short-urls/reducers/shortUrl
 import { SHORT_URL_DELETED } from '../../../src/short-urls/reducers/shortUrlDeletion';
 import { SHORT_URL_META_EDITED } from '../../../src/short-urls/reducers/shortUrlMeta';
 import { CREATE_VISIT } from '../../../src/visits/reducers/visitCreation';
+import { ShortUrl } from '../../../src/short-urls/data';
+import ShlinkApiClient from '../../../src/utils/services/ShlinkApiClient';
 
 describe('shortUrlsListReducer', () => {
   describe('reducer', () => {
     it('returns loading on LIST_SHORT_URLS_START', () =>
-      expect(reducer(undefined, { type: LIST_SHORT_URLS_START })).toEqual({
+      expect(reducer(undefined, { type: LIST_SHORT_URLS_START } as any)).toEqual({
-        shortUrls: {},
+        shortUrls: {
+          data: [],
+        },
         loading: true,
         error: false,
       }));
 
     it('returns short URLs on LIST_SHORT_URLS', () =>
-      expect(reducer(undefined, { type: LIST_SHORT_URLS, shortUrls: { data: [], paginator: {} } })).toEqual({
+      expect(reducer(undefined, { type: LIST_SHORT_URLS, shortUrls: { data: [] } } as any)).toEqual({
-        shortUrls: { data: [], paginator: {} },
+        shortUrls: { data: [] },
         loading: false,
         error: false,
       }));
 
     it('returns error on LIST_SHORT_URLS_ERROR', () =>
-      expect(reducer(undefined, { type: LIST_SHORT_URLS_ERROR })).toEqual({
+      expect(reducer(undefined, { type: LIST_SHORT_URLS_ERROR } as any)).toEqual({
-        shortUrls: {},
+        shortUrls: {
+          data: [],
+        },
         loading: false,
         error: true,
       }));
@@ -38,14 +45,16 @@ describe('shortUrlsListReducer', () => {
       const state = {
         shortUrls: {
           data: [
-            { shortCode, tags: [] },
+            Mock.of<ShortUrl>({ shortCode, tags: [] }),
-            { shortCode, tags: [], domain: 'example.com' },
+            Mock.of<ShortUrl>({ shortCode, tags: [], domain: 'example.com' }),
-            { shortCode: 'foo', tags: [] },
+            Mock.of<ShortUrl>({ shortCode: 'foo', tags: [] }),
           ],
         },
+        loading: false,
+        error: false,
       };
 
-      expect(reducer(state, { type: SHORT_URL_TAGS_EDITED, shortCode, tags, domain: null })).toEqual({
+      expect(reducer(state, { type: SHORT_URL_TAGS_EDITED, shortCode, tags, domain: null } as any)).toEqual({
         shortUrls: {
           data: [
             { shortCode, tags },
@@ -53,6 +62,8 @@ describe('shortUrlsListReducer', () => {
             { shortCode: 'foo', tags: [] },
           ],
         },
+        loading: false,
+        error: false,
       });
     });
 
@@ -66,21 +77,25 @@ describe('shortUrlsListReducer', () => {
       const state = {
         shortUrls: {
           data: [
-            { shortCode, meta: { maxVisits: 10 }, domain },
+            Mock.of<ShortUrl>({ shortCode, meta: { maxVisits: 10 }, domain }),
-            { shortCode, meta: { maxVisits: 50 } },
+            Mock.of<ShortUrl>({ shortCode, meta: { maxVisits: 50 } }),
-            { shortCode: 'foo', meta: null },
+            Mock.of<ShortUrl>({ shortCode: 'foo', meta: {} }),
           ],
         },
+        loading: false,
+        error: false,
       };
 
-      expect(reducer(state, { type: SHORT_URL_META_EDITED, shortCode, meta, domain })).toEqual({
+      expect(reducer(state, { type: SHORT_URL_META_EDITED, shortCode, meta, domain } as any)).toEqual({
         shortUrls: {
           data: [
             { shortCode, meta, domain: 'example.com' },
             { shortCode, meta: { maxVisits: 50 } },
-            { shortCode: 'foo', meta: null },
+            { shortCode: 'foo', meta: {} },
           ],
         },
+        loading: false,
+        error: false,
       });
     });
 
@@ -89,17 +104,21 @@ describe('shortUrlsListReducer', () => {
       const state = {
         shortUrls: {
           data: [
-            { shortCode },
+            Mock.of<ShortUrl>({ shortCode }),
-            { shortCode, domain: 'example.com' },
+            Mock.of<ShortUrl>({ shortCode, domain: 'example.com' }),
-            { shortCode: 'foo' },
+            Mock.of<ShortUrl>({ shortCode: 'foo' }),
           ],
         },
+        loading: false,
+        error: false,
       };
 
-      expect(reducer(state, { type: SHORT_URL_DELETED, shortCode })).toEqual({
+      expect(reducer(state, { type: SHORT_URL_DELETED, shortCode } as any)).toEqual({
         shortUrls: {
           data: [{ shortCode, domain: 'example.com' }, { shortCode: 'foo' }],
         },
+        loading: false,
+        error: false,
       });
     });
 
@@ -112,14 +131,16 @@ describe('shortUrlsListReducer', () => {
       const state = {
         shortUrls: {
           data: [
-            { shortCode, domain: 'example.com', visitsCount: 5 },
+            Mock.of<ShortUrl>({ shortCode, domain: 'example.com', visitsCount: 5 }),
-            { shortCode, visitsCount: 10 },
+            Mock.of<ShortUrl>({ shortCode, visitsCount: 10 }),
-            { shortCode: 'foo', visitsCount: 8 },
+            Mock.of<ShortUrl>({ shortCode: 'foo', visitsCount: 8 }),
           ],
         },
+        loading: false,
+        error: false,
       };
 
-      expect(reducer(state, { type: CREATE_VISIT, shortUrl })).toEqual({
+      expect(reducer(state, { type: CREATE_VISIT, shortUrl } as any)).toEqual({
         shortUrls: {
           data: [
             { shortCode, domain: 'example.com', visitsCount: 5 },
@@ -127,6 +148,8 @@ describe('shortUrlsListReducer', () => {
             { shortCode: 'foo', visitsCount: 8 },
           ],
         },
+        loading: false,
+        error: false,
       });
     });
   });
@@ -135,15 +158,11 @@ describe('shortUrlsListReducer', () => {
     const dispatch = jest.fn();
     const getState = jest.fn().mockReturnValue({ selectedServer: {} });
 
-    afterEach(() => {
+    afterEach(jest.clearAllMocks);
-      dispatch.mockReset();
-      getState.mockClear();
-    });
 
     it('dispatches proper actions if API client request succeeds', async () => {
-      const apiClientMock = {
+      const listShortUrlsMock = jest.fn().mockResolvedValue([]);
-        listShortUrls: jest.fn().mockResolvedValue([]),
+      const apiClientMock = Mock.of<ShlinkApiClient>({ listShortUrls: listShortUrlsMock });
-      };
 
       await listShortUrls(() => apiClientMock)()(dispatch, getState);
 
@@ -151,13 +170,12 @@ describe('shortUrlsListReducer', () => {
       expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_SHORT_URLS_START });
       expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_SHORT_URLS, shortUrls: [], params: {} });
 
-      expect(apiClientMock.listShortUrls).toHaveBeenCalledTimes(1);
+      expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
     });
 
     it('dispatches proper actions if API client request fails', async () => {
-      const apiClientMock = {
+      const listShortUrlsMock = jest.fn().mockRejectedValue(undefined);
-        listShortUrls: jest.fn().mockRejectedValue(),
+      const apiClientMock = Mock.of<ShlinkApiClient>({ listShortUrls: listShortUrlsMock });
-      };
 
       await listShortUrls(() => apiClientMock)()(dispatch, getState);
 
@@ -165,7 +183,7 @@ describe('shortUrlsListReducer', () => {
       expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_SHORT_URLS_START });
       expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_SHORT_URLS_ERROR, params: {} });
 
-      expect(apiClientMock.listShortUrls).toHaveBeenCalledTimes(1);
+      expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
     });
   });
 });