refactor: Redux toolkit + TypeScript

Author: firstred

.babelrc

@@ -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
+            }
+        }
+    };
+};
+

babel.config.js

@@ -129,13 +129,18 @@
         ]
     },
     "dependencies": {
+        "@manaflair/redux-batch": "^1.0.0",
+        "@reduxjs/toolkit": "^1.2.3",
+        "@types/lodash": "^4.14.149",
         "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": {
@@ -150,9 +155,9 @@
         "@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-nullish-coalescing-operator": "^7.8.3",
         "@babel/plugin-proposal-numeric-separator": "^7.7.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.7.4",
+        "@babel/plugin-proposal-optional-chaining": "^7.8.3",
         "@babel/plugin-proposal-pipeline-operator": "^7.7.4",
         "@babel/plugin-proposal-throw-expressions": "^7.7.4",
         "@babel/plugin-syntax-dynamic-import": "^7.7.4",
@@ -169,6 +174,7 @@
         "@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/moxios": "^0.4.9",
         "@types/node": "^13.1.4",
@@ -178,6 +184,7 @@
         "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",

package.json

@@ -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,6 +14,18 @@ export function masterCardActionSetInfo(master_card_action_info, account_id, mas
     };
 }
 
+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(BunqJSClient, user_id, account_id, master_card_action_id) {
     const failedMessage = window.t("We failed to load the mastercard payment information");
 
@@ -37,14 +49,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/filters.js renamed to src/Actions/filters.js

@@ -1,5 +1,4 @@
-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";
 
@@ -60,7 +59,8 @@ export function masterCardActionsUpdate(
             })
             .catch(error => {
                 dispatch(masterCardActionsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
+                // FIXME
+                // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
 }

src/react/Actions/master_card_action_info.js renamed to src/Actions/master_card_action_info.js

@@ -1,4 +1,4 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 export function noteTextsSetInfo(noteTexts, event_type, user_id, account_id, event_id) {
     return {