Migrated to typescript the most complex reducer in the project

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> {
-  shortCode: string;
+export interface ShortUrlEditedAction extends Action<string>, ShortUrlIdentifier {
   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> {
-  shortCode: string;
-  domain?: string | null;
+export interface ShortUrlMetaEditedAction extends Action<string>, ShortUrlIdentifier {
   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> {
-  shortCode: string;
+export interface EditShortUrlTagsAction extends Action<string>, ShortUrlIdentifier {
   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> {
-  params: ShortUrlsListParams;
-}
-
-const initialState = { page: '1' };
+const initialState: ShortUrlsListParams = { page: '1' };
 
 export default buildReducer<ShortUrlsListParams, ListShortUrlsAction>({
   [LIST_SHORT_URLS]: (state, { params }) => ({ ...state, ...params }),