(WIP) refactor: Redux toolkit + TypeScript

babel.config.js

@@ -0,0 +1,58 @@
+const { fixResolvePath, getResolverAlias } = require("./webpacktools");
+
+module.exports = function (api) {
+    api.cache(true);
+
+    return {
+        "presets": [
+            "@babel/preset-react",
+            [
+                "@babel/preset-env",
+                {
+                    "targets": {
+                        "browsers": [
+                            "last 2 versions"
+                        ]
+                    }
+                }
+            ]
+        ],
+        "plugins": [
+            "react-html-attrs",
+            [
+                "module-resolver",
+                {
+                    root: ["./"],
+                    alias: getResolverAlias(__dirname),
+                    resolvePath: fixResolvePath(__dirname),
+                },
+            ],
+            "@babel/plugin-proposal-object-rest-spread",
+            [
+                "@babel/plugin-transform-runtime",
+                {
+                    "helpers": false,
+                    "regenerator": true
+                }
+            ],
+            "@babel/plugin-proposal-class-properties",
+            "@babel/plugin-proposal-nullish-coalescing-operator",
+            "@babel/plugin-proposal-optional-chaining",
+            "@babel/plugin-transform-react-constant-elements",
+            "@babel/plugin-transform-react-inline-elements",
+            "@babel/plugin-transform-react-jsx-source",
+            "@babel/plugin-syntax-dynamic-import"
+        ],
+        "env": {
+            "test": {
+                "plugins": [
+                    "babel-plugin-dynamic-import-node"
+                ]
+            },
+            "development": {
+                "compact": false
+            }
+        }
+    };
+};
+

package.json

@@ -101,7 +101,7 @@
     "jest": {
         "globals": {
             "ts-jest": {
-                "useBabelrc": true
+                "babelConfig": true
             }
         },
         "modulePathIgnorePatterns": [
@@ -120,64 +120,75 @@
             "^.+\\.tsx?$": "ts-jest"
         },
         "moduleFileExtensions": [
-            "ts",
-            "tsx",
             "js",
-            "jsx",
             "json",
-            "node"
-        ]
+            "jsx",
+            "node",
+            "ts",
+            "tsx"
+        ],
+        "preset": "ts-jest/presets/js-with-babel",
+        "testMatch": null
     },
     "dependencies": {
+        "@manaflair/redux-batch": "^1.0.0",
+        "@reduxjs/toolkit": "^1.2.3",
         "electron-localshortcut": "^3.2.1",
         "electron-log": "^2.2.9",
         "electron-settings": "^3.1.3",
         "fs-jetpack": "^1.0.0",
         "glob": "^7.1.2",
         "i18next": "^10.6.0",
         "i18next-xhr-backend": "^1.5.1",
+        "lodash": "^4.17.15",
+        "redux-saga": "^1.1.3",
         "upath": "1.0.5"
     },
     "devDependencies": {
-        "@babel/cli": "^7.7.7",
-        "@babel/core": "^7.7.7",
-        "@babel/plugin-proposal-class-properties": "^7.7.4",
-        "@babel/plugin-proposal-decorators": "^7.7.4",
-        "@babel/plugin-proposal-do-expressions": "^7.7.4",
-        "@babel/plugin-proposal-export-default-from": "^7.7.4",
-        "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
-        "@babel/plugin-proposal-function-bind": "^7.7.4",
-        "@babel/plugin-proposal-function-sent": "^7.7.4",
-        "@babel/plugin-proposal-json-strings": "^7.7.4",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.7.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
-        "@babel/plugin-proposal-numeric-separator": "^7.7.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.7.4",
-        "@babel/plugin-proposal-pipeline-operator": "^7.7.4",
-        "@babel/plugin-proposal-throw-expressions": "^7.7.4",
-        "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-        "@babel/plugin-syntax-import-meta": "^7.7.4",
-        "@babel/plugin-transform-react-constant-elements": "^7.7.4",
-        "@babel/plugin-transform-react-inline-elements": "^7.7.4",
-        "@babel/plugin-transform-react-jsx-source": "^7.7.4",
-        "@babel/plugin-transform-runtime": "^7.7.4",
-        "@babel/preset-env": "^7.7.7",
-        "@babel/preset-react": "^7.7.4",
+        "@babel/cli": "^7.8.3",
+        "@babel/core": "^7.8.3",
+        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-proposal-decorators": "^7.8.3",
+        "@babel/plugin-proposal-do-expressions": "^7.8.3",
+        "@babel/plugin-proposal-export-default-from": "^7.8.3",
+        "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
+        "@babel/plugin-proposal-function-bind": "^7.8.3",
+        "@babel/plugin-proposal-function-sent": "^7.8.3",
+        "@babel/plugin-proposal-json-strings": "^7.8.3",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-proposal-numeric-separator": "^7.8.3",
+        "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+        "@babel/plugin-proposal-pipeline-operator": "^7.8.3",
+        "@babel/plugin-proposal-throw-expressions": "^7.8.3",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-transform-react-constant-elements": "^7.8.3",
+        "@babel/plugin-transform-react-inline-elements": "^7.8.3",
+        "@babel/plugin-transform-react-jsx-source": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.8.3",
+        "@babel/preset-env": "^7.8.3",
+        "@babel/preset-react": "^7.8.3",
         "@bunq-community/bunq-js-client": "^1.0.3",
         "@bunq-community/bunqdesktop-templates": "^1.2.0",
         "@fortawesome/fontawesome-free": "^5.2.0",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^3.0.2",
         "@material-ui/lab": "^3.0.0-alpha.30",
+        "@rollup/plugin-typescript": "^2.1.0",
         "@types/jest": "^24.0.25",
+        "@types/lodash": "^4.14.149",
         "@types/moxios": "^0.4.9",
         "@types/node": "^13.1.4",
         "@types/react-i18next": "^8.1.0",
+        "@types/react-router": "^5.1.4",
+        "@types/react-router-dom": "^5.1.3",
         "animate.css": "^3.7.2",
         "awaiting": "^3.0.0",
         "axios": "0.18.1",
         "babel-loader": "^8.0.6",
         "babel-plugin-dynamic-import-node": "^2.3.0",
+        "babel-plugin-module-resolver": "^4.0.0",
         "babel-plugin-react-html-attrs": "^2.1.0",
         "babel-plugin-system-import-transformer": "^3.1.0",
         "chart.js": "^2.7.2",
@@ -201,9 +212,9 @@
         "gulp-watch": "^5.0.1",
         "hard-source-webpack-plugin": "^0.13.1",
         "html-webpack-plugin": "^3.2.0",
-        "iban": "^0.0.10",
+        "iban": "^0.0.12",
         "increase-memory-limit": "^1.0.6",
-        "jest": "^24.1.0",
+        "jest": "^24.9.0",
         "libphonenumber-js": "^1.6.4",
         "localforage": "^1.7.2",
         "loglevel": "^1.6.1",
@@ -217,27 +228,27 @@
         "prettier": "^1.14.2",
         "prop-types": "^15.6.2",
         "qrcode.react": "^0.8.0",
-        "react": "^16.6.3",
+        "react": "^16.12.0",
         "react-chartjs-2": "^2.7.2",
         "react-color": "^2.14.1",
         "react-copy-to-clipboard": "^5.0.1",
-        "react-dom": "^16.4.1",
+        "react-dom": "^16.12.0",
         "react-helmet": "^5.2.0",
         "react-i18next": "^7.7.0",
         "react-json-view": "^1.17.1",
         "react-loadable": "^5.4.0",
         "react-map-gl": "^3.3.5",
         "react-number-format": "^4.0.7",
-        "react-redux": "^5.0.7",
-        "react-router": "^4.3.1",
-        "react-router-dom": "^4.3.1",
+        "react-redux": "^7.1.3",
+        "react-router": "^5.1.2",
+        "react-router-dom": "^5.1.2",
         "react-spring": "^3.1.0",
         "react-sticky-box": "^0.6.1",
         "react-test-renderer": "^16.3.1",
         "react-visibility-sensor": "^5.0.2",
         "react-windowed-list": "^2.0.0",
-        "redux": "^3.7.2",
-        "redux-form": "^7.4.2",
+        "redux": "^4.0.5",
+        "redux-form": "^8.2.6",
         "redux-mock-store": "^1.5.1",
         "redux-thunk": "^2.2.0",
         "rollup": "^0.45.2",
@@ -247,10 +258,10 @@
         "spectron": "^3.7.2",
         "store": "^2.0.4",
         "style-loader": "^0.22.1",
-        "ts-jest": "^23.1.4",
-        "ts-loader": "^4.5.0",
+        "ts-jest": "^24.3.0",
+        "ts-loader": "^6.2.1",
         "typeface-roboto": "^0.0.54",
-        "typescript": "^3.0.1",
+        "typescript": "^3.7.5",
         "uglifyjs-webpack-plugin": "^1.3.0",
         "universal-analytics": "^0.4.15",
         "vcf": "^2.0.1",

src/react/Actions/master_card_action_info.js → src/Actions/master_card_action_info.js

@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import MasterCardAction from "../Models/MasterCardAction";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import MasterCardAction from "~models/MasterCardAction";
 
 import { masterCardActionsSetInfo } from "./master_card_actions";
 
@@ -14,8 +14,21 @@ export function masterCardActionSetInfo(master_card_action_info, account_id, mas
     };
 }
 
-export function masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, master_card_action_id) {
+export function masterCardActionInfoLoading() {
+    return { type: "MASTER_CARD_ACTION_INFO_IS_LOADING" };
+}
+
+export function masterCardActionInfoNotLoading() {
+    return { type: "MASTER_CARD_ACTION_INFO_IS_NOT_LOADING" };
+}
+
+export function masterCardActionInfoClear() {
+    return { type: "MASTER_CARD_ACTION_INFO_CLEAR" };
+}
+
+export function masterCardActionInfoUpdate(user_id, account_id, master_card_action_id) {
     const failedMessage = window.t("We failed to load the mastercard payment information");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(masterCardActionInfoLoading());
@@ -25,7 +38,7 @@ export function masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, ma
                 const masterCardActionInfo = new MasterCardAction(masterCardAction);
 
                 // update this item in the list and the stored data
-                dispatch(masterCardActionsSetInfo([masterCardActionInfo], parseInt(account_id), false, BunqJSClient));
+                dispatch(masterCardActionsSetInfo([masterCardActionInfo], parseInt(account_id), false));
 
                 dispatch(masterCardActionSetInfo(masterCardActionInfo, parseInt(account_id), master_card_action_id));
                 dispatch(masterCardActionInfoNotLoading());
@@ -37,14 +50,4 @@ export function masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, ma
     };
 }
 
-export function masterCardActionInfoLoading() {
-    return { type: "MASTER_CARD_ACTION_INFO_IS_LOADING" };
-}
 
-export function masterCardActionInfoNotLoading() {
-    return { type: "MASTER_CARD_ACTION_INFO_IS_NOT_LOADING" };
-}
-
-export function masterCardActionInfoClear() {
-    return { type: "MASTER_CARD_ACTION_INFO_CLEAR" };
-}

src/react/Actions/master_card_actions.js → src/Actions/master_card_actions.js

@@ -1,22 +1,22 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import MasterCardAction from "../Models/MasterCardAction";
+import MasterCardAction from "~models/MasterCardAction";
 
 export const STORED_MASTER_CARD_ACTIONS = "BUNQDESKTOP_STORED_MASTER_CARD_ACTIONS";
 
-export function masterCardActionsSetInfo(masterCardActions, account_id, resetOldItems = false, BunqJSClient = false) {
+export function masterCardActionsSetInfo(masterCardActions, account_id, resetOldItems = false) {
     const type = resetOldItems ? "MASTER_CARD_ACTIONS_SET_INFO" : "MASTER_CARD_ACTIONS_UPDATE_INFO";
 
     return {
         type: type,
         payload: {
-            BunqJSClient,
             masterCardActions,
             account_id
         }
     };
 }
 
-export function loadStoredMasterCardActions(BunqJSClient) {
+export function loadStoredMasterCardActions() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(masterCardActionsLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -36,7 +36,6 @@ export function loadStoredMasterCardActions(BunqJSClient) {
 }
 
 export function masterCardActionsUpdate(
-    BunqJSClient,
     userId,
     accountId,
     options = {
@@ -49,18 +48,19 @@ export function masterCardActionsUpdate(
 
     return dispatch => {
         dispatch(masterCardActionsLoading());
-        BunqJSClient.api.masterCardAction
+        window.BunqDesktopClient.BunqJSClient.api.masterCardAction
             .list(userId, accountId, options)
             .then(masterCardActions => {
                 // turn plain objects into Model objects
                 const masterCardActionsNew = masterCardActions.map(item => new MasterCardAction(item));
 
-                dispatch(masterCardActionsSetInfo(masterCardActionsNew, accountId, false, BunqJSClient));
+                dispatch(masterCardActionsSetInfo(masterCardActionsNew, accountId, false));
                 dispatch(masterCardActionsNotLoading());
             })
             .catch(error => {
                 dispatch(masterCardActionsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
+                // FIXME
+                // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
 }