Upgrade mobx to 6.x

package.json

@@ -35,9 +35,9 @@
     "history": "^4.10.1",
     "lodash": "^4.17.21",
     "mkdirp": "^1.0.4",
-    "mobx": "^5.15.6",
+    "mobx": "^6.3.2",
     "mobx-logger": "^0.7.1",
-    "mobx-react-lite": "^2.2.2",
+    "mobx-react-lite": "^3.2.0",
     "mysterium-vpn-js": "^13.0.1",
     "node-machine-id": "^1.1.12",
     "open": "^7.0.0",

src/config/filters.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { action, computed, reaction } from "mobx"
+import { action, computed, makeObservable, reaction } from "mobx"
 import { QualityLevel } from "mysterium-vpn-js"
 
 import { RootStore } from "../store"
@@ -16,6 +16,14 @@ export class Filters {
     root: RootStore
 
     constructor(root: RootStore) {
+        makeObservable(this, {
+            priceCeiling: computed,
+            config: computed,
+            setPartial: action,
+            initialized: computed,
+            defaults: computed,
+            reset: action,
+        })
         this.root = root
     }
 
@@ -40,7 +48,6 @@ export class Filters {
         }
     }
 
-    @computed
     get priceCeiling(): PriceCeiling | undefined {
         const consumerConfig = this.root.config.defaultConfig.payments?.consumer
         if (!consumerConfig || !consumerConfig["price-hour-max"] || !consumerConfig["price-gib-max"]) {
@@ -52,22 +59,18 @@ export class Filters {
         }
     }
 
-    @computed
     get config(): ProposalFilters {
         return this.root.config.config.desktop?.filters || {}
     }
 
-    @action
     setPartial = (filters: ProposalFilters): Promise<void> => {
         return this.root.config.setPartial({ filters })
     }
 
-    @computed
     get initialized(): boolean {
         return this.config.price?.perhour != null
     }
 
-    @computed
     get defaults(): ProposalFilters {
         const ceil = this.priceCeiling
         return {
@@ -86,7 +89,6 @@ export class Filters {
         }
     }
 
-    @action
     reset = (): Promise<void> => {
         return this.setPartial(this.defaults)
     }

src/config/store.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { action, computed, observable, reaction, runInAction } from "mobx"
+import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx"
 import { DNSOption, QualityLevel } from "mysterium-vpn-js"
 import * as termsPackageJson from "@mysteriumnetwork/terms/package.json"
 import * as _ from "lodash"
@@ -55,17 +55,25 @@ export interface PriceCeiling {
 }
 
 export class ConfigStore {
-    @observable
     config: Config = { desktop: {} }
-    @observable
     loaded = false
-    @observable
     defaultConfig: Config = { desktop: {} }
 
     root: RootStore
 
     constructor(root: RootStore) {
         this.root = root
+        makeObservable(this, {
+            config: observable,
+            loaded: observable,
+            defaultConfig: observable,
+            fetchConfig: action,
+            agreeToTerms: action,
+            setDnsOption: action,
+            dnsOption: computed,
+            persistConfig: action,
+            setPartial: action,
+        })
     }
 
     setupReactions(): void {
@@ -80,7 +88,6 @@ export class ConfigStore {
         )
     }
 
-    @action
     fetchConfig = async (): Promise<void> => {
         const [config, defaultConfig] = await Promise.all([tequilapi.userConfig(), tequilapi.defaultConfig()])
         runInAction(() => {
@@ -102,7 +109,6 @@ export class ConfigStore {
         })
     }
 
-    @action
     agreeToTerms = async (): Promise<void> => {
         const data: Config = {
             ...this.config,
@@ -124,20 +130,17 @@ export class ConfigStore {
         return !!version && !!at && version == termsPackageJson.version
     }
 
-    @action
     setDnsOption = async (value: string): Promise<void> => {
         await tequilapi.updateUserConfig({
             data: { "desktop.dns": value },
         })
         await this.fetchConfig()
     }
 
-    @computed
     get dnsOption(): DNSOption {
         return this.config.desktop?.dns ?? "1.1.1.1"
     }
 
-    @action
     persistConfig = _.debounce(async () => {
         const cfg = this.config
         log.info("Persisting user configuration:", JSON.stringify(cfg))
@@ -147,7 +150,6 @@ export class ConfigStore {
         await this.fetchConfig()
     }, 3_000)
 
-    @action
     setPartial = async (desktopConfig: DesktopConfig): Promise<void> => {
         this.config.desktop = _.merge({}, this.config.desktop, desktopConfig)
         this.persistConfig()

src/connection/store.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { action, observable, reaction, runInAction } from "mobx"
+import { action, makeObservable, observable, reaction, runInAction } from "mobx"
 import { AppState, ConnectionStatistics, ConnectionStatus, Location, SSEEventType } from "mysterium-vpn-js"
 import { ipcRenderer } from "electron"
 import retry from "async-retry"
@@ -20,24 +20,39 @@ import { tequilapi } from "../tequilapi"
 import { AppStateAction, ConnectionAction } from "../analytics/actions"
 
 export class ConnectionStore {
-    @observable
     connectInProgress = false
-    @observable
     gracePeriod = false
-    @observable
     status = ConnectionStatus.NOT_CONNECTED
-    @observable
     statistics?: ConnectionStatistics
-    @observable
     proposal?: UIProposal
-    @observable
     location?: Location
-    @observable
     originalLocation?: Location
 
     root: RootStore
 
     constructor(root: RootStore) {
+        makeObservable(this, {
+            connectInProgress: observable,
+            gracePeriod: observable,
+            status: observable,
+            statistics: observable,
+            proposal: observable,
+            location: observable,
+            originalLocation: observable,
+            connect: action,
+            statusCheck: action,
+            disconnect: action,
+            resolveOriginalLocation: action,
+            resetLocation: action,
+            resolveLocation: action,
+            setConnectInProgress: action,
+            setGracePeriod: action,
+            setStatus: action,
+            setProposal: action,
+            setLocation: action,
+            setOriginalLocation: action,
+            setStatistics: action,
+        })
         this.root = root
     }
 
@@ -81,7 +96,6 @@ export class ConnectionStore {
         )
     }
 
-    @action
     async connect(): Promise<void> {
         if (!this.root.identity.identity || !this.root.proposals.active) {
             return
@@ -109,7 +123,6 @@ export class ConnectionStore {
         }
     }
 
-    @action
     async statusCheck(): Promise<void> {
         try {
             if (this.connectInProgress) {
@@ -126,7 +139,6 @@ export class ConnectionStore {
         }
     }
 
-    @action
     async disconnect(): Promise<void> {
         userEvent(ConnectionAction.Disconnect, this.root.connection.location?.country)
         this.setGracePeriod()
@@ -137,7 +149,6 @@ export class ConnectionStore {
         }
     }
 
-    @action
     async resolveOriginalLocation(): Promise<void> {
         try {
             const location = await tequilapi.location()
@@ -147,7 +158,6 @@ export class ConnectionStore {
         }
     }
 
-    @action
     resetLocation(): void {
         this.setLocation({
             country: "unknown",
@@ -160,7 +170,6 @@ export class ConnectionStore {
         })
     }
 
-    @action
     async resolveLocation(): Promise<void> {
         let location: Location = {
             country: "unknown",
@@ -183,12 +192,10 @@ export class ConnectionStore {
         this.setLocation(location)
     }
 
-    @action
     setConnectInProgress = (b: boolean): void => {
         this.connectInProgress = b
     }
 
-    @action
     setGracePeriod = (): void => {
         this.gracePeriod = true
         setTimeout(() => {
@@ -198,27 +205,22 @@ export class ConnectionStore {
         }, 5000)
     }
 
-    @action
     setStatus = (s: ConnectionStatus): void => {
         this.status = s
     }
 
-    @action
     setProposal = (p?: UIProposal): void => {
         this.proposal = p
     }
 
-    @action
     setLocation = (l: Location): void => {
         this.location = l
     }
 
-    @action
     setOriginalLocation = (l: Location): void => {
         this.originalLocation = l
     }
 
-    @action
     setStatistics = (s?: ConnectionStatistics): void => {
         this.statistics = s
     }