Migrated first reducer to typescript, adding also type for the shared app state

src/container/types.ts

@@ -1 +1,25 @@
+import { MercureInfo } from '../mercure/reducers/mercureInfo';
+
 export type ConnectDecorator = (props: string[], actions?: string[]) => any;
+
+export interface ShlinkState {
+  servers: any;
+  selectedServer: any;
+  shortUrlsList: any;
+  shortUrlsListParams: any;
+  shortUrlCreationResult: any;
+  shortUrlDeletion: any;
+  shortUrlTags: any;
+  shortUrlMeta: any;
+  shortUrlEdition: any;
+  shortUrlVisits: any;
+  tagVisits: any;
+  shortUrlDetail: any;
+  tagsList: any;
+  tagDelete: any;
+  tagEdit: any;
+  mercureInfo: MercureInfo;
+  settings: any;
+}
+
+export type GetState = () => ShlinkState;

src/mercure/reducers/mercureInfo.js

@@ -1,49 +0,0 @@
-import { handleActions } from 'redux-actions';
-import PropTypes from 'prop-types';
-
-/* eslint-disable padding-line-between-statements */
-export const GET_MERCURE_INFO_START = 'shlink/mercure/GET_MERCURE_INFO_START';
-export const GET_MERCURE_INFO_ERROR = 'shlink/mercure/GET_MERCURE_INFO_ERROR';
-export const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
-/* eslint-enable padding-line-between-statements */
-
-export const MercureInfoType = PropTypes.shape({
-  token: PropTypes.string,
-  mercureHubUrl: PropTypes.string,
-  loading: PropTypes.bool,
-  error: PropTypes.bool,
-});
-
-const initialState = {
-  token: undefined,
-  mercureHubUrl: undefined,
-  loading: true,
-  error: false,
-};
-
-export default handleActions({
-  [GET_MERCURE_INFO_START]: (state) => ({ ...state, loading: true, error: false }),
-  [GET_MERCURE_INFO_ERROR]: (state) => ({ ...state, loading: false, error: true }),
-  [GET_MERCURE_INFO]: (state, { token, mercureHubUrl }) => ({ token, mercureHubUrl, loading: false, error: false }),
-}, initialState);
-
-export const loadMercureInfo = (buildShlinkApiClient) => () => async (dispatch, getState) => {
-  dispatch({ type: GET_MERCURE_INFO_START });
-
-  const { settings } = getState();
-  const { mercureInfo } = buildShlinkApiClient(getState);
-
-  if (!settings.realTimeUpdates.enabled) {
-    dispatch({ type: GET_MERCURE_INFO_ERROR });
-
-    return;
-  }
-
-  try {
-    const result = await mercureInfo();
-
-    dispatch({ type: GET_MERCURE_INFO, ...result });
-  } catch (e) {
-    dispatch({ type: GET_MERCURE_INFO_ERROR });
-  }
-};

src/mercure/reducers/mercureInfo.ts

@@ -0,0 +1,59 @@
+import { handleActions } from 'redux-actions';
+import PropTypes from 'prop-types';
+import { Dispatch } from 'redux';
+import { ShlinkApiClientBuilder, ShlinkMercureInfo } from '../../utils/services/types';
+import { GetState } from '../../container/types';
+
+/* eslint-disable padding-line-between-statements */
+export const GET_MERCURE_INFO_START = 'shlink/mercure/GET_MERCURE_INFO_START';
+export const GET_MERCURE_INFO_ERROR = 'shlink/mercure/GET_MERCURE_INFO_ERROR';
+export const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
+/* eslint-enable padding-line-between-statements */
+
+/** @deprecated Use MercureInfo interface */
+export const MercureInfoType = PropTypes.shape({
+  token: PropTypes.string,
+  mercureHubUrl: PropTypes.string,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+});
+
+export interface MercureInfo {
+  token?: string;
+  mercureHubUrl?: string;
+  loading: boolean;
+  error: boolean;
+}
+
+const initialState: MercureInfo = {
+  loading: true,
+  error: false,
+};
+
+export default handleActions<MercureInfo, ShlinkMercureInfo>({
+  [GET_MERCURE_INFO_START]: (state) => ({ ...state, loading: true, error: false }),
+  [GET_MERCURE_INFO_ERROR]: (state) => ({ ...state, loading: false, error: true }),
+  [GET_MERCURE_INFO]: (_, { payload }) => ({ ...payload, loading: false, error: false }),
+}, initialState);
+
+export const loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
+  () => async (dispatch: Dispatch, getState: GetState) => {
+    dispatch({ type: GET_MERCURE_INFO_START });
+
+    const { settings } = getState();
+    const { mercureInfo } = buildShlinkApiClient(getState);
+
+    if (!settings.realTimeUpdates.enabled) {
+      dispatch({ type: GET_MERCURE_INFO_ERROR });
+
+      return;
+    }
+
+    try {
+      const payload = await mercureInfo();
+
+      dispatch({ type: GET_MERCURE_INFO, payload });
+    } catch (e) {
+      dispatch({ type: GET_MERCURE_INFO_ERROR });
+    }
+  };

src/reducers/index.ts

@@ -16,8 +16,9 @@ import tagDeleteReducer from '../tags/reducers/tagDelete';
 import tagEditReducer from '../tags/reducers/tagEdit';
 import mercureInfoReducer from '../mercure/reducers/mercureInfo';
 import settingsReducer from '../settings/reducers/settings';
+import { ShlinkState } from '../container/types';
 
-export default combineReducers({
+export default combineReducers<ShlinkState>({
   servers: serversReducer,
   selectedServer: selectedServerReducer,
   shortUrlsList: shortUrlsListReducer,

src/utils/services/types.ts

@@ -0,0 +1,11 @@
+import { RegularServer } from '../../servers/data';
+import { GetState } from '../../container/types';
+import ShlinkApiClient from './ShlinkApiClient';
+
+// FIXME Move to ShlinkApiClientBuilder
+export type ShlinkApiClientBuilder = (getStateOrSelectedServer: RegularServer | GetState) => ShlinkApiClient;
+
+export interface ShlinkMercureInfo {
+  token: string;
+  mercureHubUrl: string;
+}