From fefa4e78489e341e4421da70d739d82b27cff0d2 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 24 Aug 2020 17:32:20 +0200
Subject: [PATCH] Migrated settings module to TS

---
 src/container/types.ts                        |  3 ++-
 src/mercure/reducers/mercureInfo.ts           |  4 +--
 ...RealTimeUpdates.js => RealTimeUpdates.tsx} | 15 +++++------
 src/settings/{Settings.js => Settings.tsx}    |  4 +--
 src/settings/reducers/settings.js             | 25 -----------------
 src/settings/reducers/settings.ts             | 27 +++++++++++++++++++
 .../{settings.test.js => settings.test.ts}    |  2 +-
 7 files changed, 40 insertions(+), 40 deletions(-)
 rename src/settings/{RealTimeUpdates.js => RealTimeUpdates.tsx} (68%)
 rename src/settings/{Settings.js => Settings.tsx} (62%)
 delete mode 100644 src/settings/reducers/settings.js
 create mode 100644 src/settings/reducers/settings.ts
 rename test/settings/reducers/{settings.test.js => settings.test.ts} (84%)

diff --git a/src/container/types.ts b/src/container/types.ts
index c8fd2ff7..7a644498 100644
--- a/src/container/types.ts
+++ b/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;
diff --git a/src/mercure/reducers/mercureInfo.ts b/src/mercure/reducers/mercureInfo.ts
index a5e251fc..cb7faa24 100644
--- a/src/mercure/reducers/mercureInfo.ts
+++ b/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 });
     }
diff --git a/src/settings/RealTimeUpdates.js b/src/settings/RealTimeUpdates.tsx
similarity index 68%
rename from src/settings/RealTimeUpdates.js
rename to src/settings/RealTimeUpdates.tsx
index d2de544a..dc89f1d5 100644
--- a/src/settings/RealTimeUpdates.js
+++ b/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 = {
-  settings: SettingsType,
-  setRealTimeUpdates: PropTypes.func,
-};
+interface RealTimeUpdatesProps {
+  settings: Settings;
+  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;
diff --git a/src/settings/Settings.js b/src/settings/Settings.tsx
similarity index 62%
rename from src/settings/Settings.js
rename to src/settings/Settings.tsx
index 81b662bd..10871290 100644
--- a/src/settings/Settings.js
+++ b/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>
diff --git a/src/settings/reducers/settings.js b/src/settings/reducers/settings.js
deleted file mode 100644
index 6771dbb5..00000000
--- a/src/settings/reducers/settings.js
+++ /dev/null
@@ -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 },
-});
diff --git a/src/settings/reducers/settings.ts b/src/settings/reducers/settings.ts
new file mode 100644
index 00000000..e2409222
--- /dev/null
+++ b/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 },
+});
diff --git a/test/settings/reducers/settings.test.js b/test/settings/reducers/settings.test.ts
similarity index 84%
rename from test/settings/reducers/settings.test.js
rename to test/settings/reducers/settings.test.ts
index 80f22c49..2d52bdd8 100644
--- a/test/settings/reducers/settings.test.js
+++ b/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 });
     });
   });