Migrated settings module to TS

src/container/types.ts

@@ -1,6 +1,7 @@
 import { MercureInfo } from '../mercure/reducers/mercureInfo';
 import { ServersMap } from '../servers/reducers/servers';
 import { SelectedServer } from '../servers/data';
+import { Settings } from '../settings/reducers/settings';
 
 export type ConnectDecorator = (props: string[], actions?: string[]) => any;
 
@@ -21,7 +22,7 @@ export interface ShlinkState {
   tagDelete: any;
   tagEdit: any;
   mercureInfo: MercureInfo;
-  settings: any;
+  settings: Settings;
 }
 
 export type GetState = () => ShlinkState;

src/mercure/reducers/mercureInfo.ts

@@ -1,4 +1,4 @@
-import { handleActions } from 'redux-actions';
+import { Action, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 import { Dispatch } from 'redux';
 import { ShlinkApiClientBuilder, ShlinkMercureInfo } from '../../utils/services/types';
@@ -52,7 +52,7 @@ export const loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
     try {
       const payload = await mercureInfo();
 
-      dispatch({ type: GET_MERCURE_INFO, payload });
+      dispatch<Action<ShlinkMercureInfo>>({ type: GET_MERCURE_INFO, payload });
     } catch (e) {
       dispatch({ type: GET_MERCURE_INFO_ERROR });
     }

src/settings/RealTimeUpdates.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { Card, CardBody, CardHeader } from 'reactstrap';
-import PropTypes from 'prop-types';
 import ToggleSwitch from '../utils/ToggleSwitch';
-import { SettingsType } from './reducers/settings';
+import { Settings } from './reducers/settings';
 
-const propTypes = {
+interface RealTimeUpdatesProps {
-  settings: SettingsType,
+  settings: Settings;
-  setRealTimeUpdates: PropTypes.func,
+  setRealTimeUpdates: (enabled: boolean) => void;
-};
+}
 
-const RealTimeUpdates = ({ settings: { realTimeUpdates }, setRealTimeUpdates }) => (
+const RealTimeUpdates = ({ settings: { realTimeUpdates }, setRealTimeUpdates }: RealTimeUpdatesProps) => (
   <Card>
     <CardHeader>Real-time updates</CardHeader>
     <CardBody>
@@ -20,6 +19,4 @@ const RealTimeUpdates = ({ settings: { realTimeUpdates }, setRealTimeUpdates })
   </Card>
 );
 
-RealTimeUpdates.propTypes = propTypes;
-
 export default RealTimeUpdates;

src/settings/Settings.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import NoMenuLayout from '../common/NoMenuLayout';
 
-const Settings = (RealTimeUpdates) => () => (
+const Settings = (RealTimeUpdates: FC) => () => (
   <NoMenuLayout>
     <RealTimeUpdates />
   </NoMenuLayout>

src/settings/reducers/settings.js

@@ -1,25 +0,0 @@
-import { handleActions } from 'redux-actions';
-import PropTypes from 'prop-types';
-
-export const SET_REAL_TIME_UPDATES = 'shlink/realTimeUpdates/SET_REAL_TIME_UPDATES';
-
-export const SettingsType = PropTypes.shape({
-  realTimeUpdates: PropTypes.shape({
-    enabled: PropTypes.bool.isRequired,
-  }),
-});
-
-const initialState = {
-  realTimeUpdates: {
-    enabled: true,
-  },
-};
-
-export default handleActions({
-  [SET_REAL_TIME_UPDATES]: (state, { realTimeUpdates }) => ({ ...state, realTimeUpdates }),
-}, initialState);
-
-export const setRealTimeUpdates = (enabled) => ({
-  type: SET_REAL_TIME_UPDATES,
-  realTimeUpdates: { enabled },
-});

src/settings/reducers/settings.ts

@@ -0,0 +1,27 @@
+import { handleActions } from 'redux-actions';
+import { Action } from 'redux';
+
+export const SET_REAL_TIME_UPDATES = 'shlink/realTimeUpdates/SET_REAL_TIME_UPDATES';
+
+interface RealTimeUpdates {
+  enabled: boolean;
+}
+
+export interface Settings {
+  realTimeUpdates: RealTimeUpdates;
+}
+
+const initialState: Settings = {
+  realTimeUpdates: {
+    enabled: true,
+  },
+};
+
+export default handleActions<Settings, any>({
+  [SET_REAL_TIME_UPDATES]: (state, { realTimeUpdates }: any) => ({ ...state, realTimeUpdates }),
+}, initialState);
+
+export const setRealTimeUpdates = (enabled: boolean): Action & Settings => ({
+  type: SET_REAL_TIME_UPDATES,
+  realTimeUpdates: { enabled },
+});

test/settings/reducers/settings.test.ts

@@ -5,7 +5,7 @@ describe('settingsReducer', () => {
 
   describe('reducer', () => {
     it('returns realTimeUpdates when action is SET_REAL_TIME_UPDATES', () => {
-      expect(reducer({}, { type: SET_REAL_TIME_UPDATES, realTimeUpdates })).toEqual({ realTimeUpdates });
+      expect(reducer(undefined, { type: SET_REAL_TIME_UPDATES, realTimeUpdates } as any)).toEqual({ realTimeUpdates });
     });
   });