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

@@ -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",

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,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/master_card_actions.js → src/Actions/master_card_actions.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/note_texts.js → src/Actions/note_texts.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 {

src/react/Actions/pay.js → src/Actions/pay.js

@@ -1,9 +1,9 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { openSnackbar } from "./snackbar";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { paymentInfoUpdate } from "./payments";
-import { accountsUpdate } from "./accounts";
 import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "./share_invite_monetary_account_inquiries";
 import { shareInviteMonetaryAccountResponsesInfoUpdate } from "./share_invite_monetary_account_responses";
+import { actions as snackbarActions } from "~store/snackbar";
+import { accountsUpdate } from "~store/accounts/thunks";
 
 export function paySend(BunqJSClient, userId, accountId, description, amount, targets, draft = false) {
     const failedMessage = window.t("We received the following error while sending your payment");
@@ -28,10 +28,10 @@ export function paySend(BunqJSClient, userId, accountId, description, amount, ta
 
         paymentHandler
             .post(userId, accountId, description, amount, targetData)
-            .then(result => {
+            .then(() => {
                 const notification = draft ? successMessage1 : isMultiple ? successMessage2 : successMessage3;
 
-                dispatch(openSnackbar(notification));
+                dispatch(snackbarActions.open({ message: notification }));
 
                 // update the payments, accounts and share list
                 dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId));
@@ -73,9 +73,9 @@ export function paySchedule(BunqJSClient, userId, accountId, description, amount
 
         scheduleTypeHandler
             .post(userId, accountId, paymentData, schedule)
-            .then(result => {
+            .then(() => {
                 const notification = isMultiple ? successMessage1 : successMessage2;
-                dispatch(openSnackbar(notification));
+                dispatch(snackbarActions.open({ message: notification }));
 
                 // update the payments, accounts and share list
                 dispatch(paymentInfoUpdate(BunqJSClient, userId, accountId));

src/react/Actions/payment_info.js → src/Actions/payment_info.js

@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import Payment from "../Models/Payment";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import Payment from "~models/Payment";
 
 import { paymentsSetInfo } from "./payments";
 

src/react/Actions/payments.js → src/Actions/payments.js

@@ -1,7 +1,7 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { paymentApiFilter } from "../Functions/DataFilters";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { paymentApiFilter } from "~functions/DataFilters";
 
-import Payment from "../Models/Payment";
+import Payment from "~models/Payment";
 
 export const STORED_PAYMENTS = "BUNQDESKTOP_STORED_PAYMENTS";