From 71c52373f81cace664047edd19d9d289f45a4dff Mon Sep 17 00:00:00 2001 From: Ricardo Cino Date: Thu, 7 Jul 2022 09:31:50 +0200 Subject: chore: Mobx & React-Router upgrade (#406) Co-authored-by: Vijay A --- src/stores/AppStore.ts | 6 ++++-- src/stores/FeaturesStore.ts | 25 +++++++++++++++++++++---- src/stores/GlobalErrorStore.ts | 4 +++- src/stores/RecipePreviewsStore.ts | 5 ++++- src/stores/RecipesStore.ts | 4 +++- src/stores/RequestStore.ts | 4 +++- src/stores/ServicesStore.ts | 4 +++- src/stores/SettingsStore.ts | 7 +++++-- src/stores/UIStore.ts | 5 ++++- src/stores/UserStore.ts | 4 +++- src/stores/index.ts | 2 +- src/stores/lib/Request.js | 4 +++- src/stores/lib/TypedStore.ts | 20 ++++++++++++++------ 13 files changed, 71 insertions(+), 23 deletions(-) (limited to 'src/stores') diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts index 0ecfdb7c0..ed6d0e263 100644 --- a/src/stores/AppStore.ts +++ b/src/stores/AppStore.ts @@ -7,7 +7,7 @@ import { getCurrentWindow, process as remoteProcess, } from '@electron/remote'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import moment from 'moment'; import AutoLaunch from 'auto-launch'; import ms from 'ms'; @@ -105,6 +105,8 @@ export default class AppStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + // Register action handlers this.actions.app.notify.listen(this._notify.bind(this)); this.actions.app.setBadge.listen(this._setBadge.bind(this)); @@ -510,7 +512,7 @@ export default class AppStore extends TypedStore { } _setLocale() { - if (this.stores.user.isLoggedIn && this.stores.user.data.locale) { + if (this.stores.user?.isLoggedIn && this.stores.user?.data.locale) { this.locale = this.stores.user.data.locale; } else if (!this.locale) { this.locale = this._getDefaultLocale(); diff --git a/src/stores/FeaturesStore.ts b/src/stores/FeaturesStore.ts index b63c252df..ed0c6c17b 100644 --- a/src/stores/FeaturesStore.ts +++ b/src/stores/FeaturesStore.ts @@ -1,5 +1,14 @@ -import { computed, observable, runInAction } from 'mobx'; +import { + action, + computed, + makeObservable, + observable, + runInAction, +} from 'mobx'; +import { Stores } from '../@types/stores.types'; +import { ApiInterface } from '../api'; +import { Actions } from '../actions/lib/actions'; import CachedRequest from './lib/CachedRequest'; import serviceProxy from '../features/serviceProxy'; import basicAuth from '../features/basicAuth'; @@ -24,6 +33,12 @@ export default class FeaturesStore extends TypedStore { @observable features = {}; + constructor(stores: Stores, api: ApiInterface, actions: Actions) { + super(stores, api, actions); + + makeObservable(this); + } + async setup(): Promise { this.registerReactions([ this._updateFeatures, @@ -49,9 +64,11 @@ export default class FeaturesStore extends TypedStore { } Object.assign(features, requestResult); } - runInAction('FeaturesStore::_updateFeatures', () => { - this.features = features; - }); + runInAction( + action('FeaturesStore::_updateFeatures', () => { + this.features = features; + }), + ); }; _monitorLoginStatus(): void { diff --git a/src/stores/GlobalErrorStore.ts b/src/stores/GlobalErrorStore.ts index 8c6317c91..c42e9a4af 100644 --- a/src/stores/GlobalErrorStore.ts +++ b/src/stores/GlobalErrorStore.ts @@ -1,4 +1,4 @@ -import { observable, action } from 'mobx'; +import { observable, action, makeObservable } from 'mobx'; import { Actions } from '../actions/lib/actions'; import { ApiInterface } from '../api'; import { Stores } from '../@types/stores.types'; @@ -34,6 +34,8 @@ export default class GlobalErrorStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + window.addEventListener('error', (...errorArgs: any[]): void => { // @ts-ignore ts-message: Expected 5 arguments, but got 2. this._handleConsoleError.call(this, ['error', ...errorArgs]); diff --git a/src/stores/RecipePreviewsStore.ts b/src/stores/RecipePreviewsStore.ts index b1d50c8b8..1c95e6b54 100644 --- a/src/stores/RecipePreviewsStore.ts +++ b/src/stores/RecipePreviewsStore.ts @@ -1,4 +1,5 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; + import { Actions } from '../actions/lib/actions'; import { ApiInterface } from '../api'; import Recipe from '../models/Recipe'; @@ -28,6 +29,8 @@ export default class RecipePreviewsStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + // Register action handlers this.actions.recipePreview.search.listen(this._search.bind(this)); } diff --git a/src/stores/RecipesStore.ts b/src/stores/RecipesStore.ts index 364d56dd2..25304e97c 100644 --- a/src/stores/RecipesStore.ts +++ b/src/stores/RecipesStore.ts @@ -1,4 +1,4 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { readJSONSync } from 'fs-extra'; import semver from 'semver'; @@ -24,6 +24,8 @@ export default class RecipesStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + // Register action handlers this.actions.recipe.install.listen(this._install.bind(this)); this.actions.recipe.update.listen(this._update.bind(this)); diff --git a/src/stores/RequestStore.ts b/src/stores/RequestStore.ts index e5df1292d..a964c5d12 100644 --- a/src/stores/RequestStore.ts +++ b/src/stores/RequestStore.ts @@ -1,5 +1,5 @@ import { ipcRenderer } from 'electron'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import ms from 'ms'; import { Actions } from '../actions/lib/actions'; @@ -28,6 +28,8 @@ export default class RequestStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + this.actions.requests.retryRequiredRequests.listen( this._retryRequiredRequests.bind(this), ); diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts index 4c1b4116c..7812d5aee 100644 --- a/src/stores/ServicesStore.ts +++ b/src/stores/ServicesStore.ts @@ -1,5 +1,5 @@ import { shell } from 'electron'; -import { action, reaction, computed, observable } from 'mobx'; +import { action, reaction, computed, observable, makeObservable } from 'mobx'; import { debounce, remove } from 'lodash'; import ms from 'ms'; import { ensureFileSync, pathExistsSync, writeFileSync } from 'fs-extra'; @@ -67,6 +67,8 @@ export default class ServicesStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + // Register action handlers this.actions.service.setActive.listen(this._setActive.bind(this)); this.actions.service.blurActive.listen(this._blurActive.bind(this)); diff --git a/src/stores/SettingsStore.ts b/src/stores/SettingsStore.ts index 0296ba0e7..a03d3c188 100644 --- a/src/stores/SettingsStore.ts +++ b/src/stores/SettingsStore.ts @@ -1,6 +1,7 @@ + import { ipcRenderer } from 'electron'; import { getCurrentWindow } from '@electron/remote'; -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, makeObservable, observable, reaction } from 'mobx'; import localStorage from 'mobx-localstorage'; import { Stores } from '../@types/stores.types'; import { ApiInterface } from '../api'; @@ -22,7 +23,7 @@ export default class SettingsStore extends TypedStore { 'updateAppSettings', ); - loaded = false; + @observable loaded: boolean = false; fileSystemSettingsTypes = FILE_SYSTEM_SETTINGS_TYPES; @@ -34,6 +35,8 @@ export default class SettingsStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + // Register action handlers this.actions.settings.update.listen(this._update.bind(this)); this.actions.settings.remove.listen(this._remove.bind(this)); diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts index c43c6d8c7..e0589729f 100644 --- a/src/stores/UIStore.ts +++ b/src/stores/UIStore.ts @@ -1,4 +1,4 @@ -import { action, observable, computed, reaction } from 'mobx'; +import { action, observable, computed, reaction, makeObservable } from 'mobx'; import { nativeTheme } from '@electron/remote'; import { Stores } from '../@types/stores.types'; @@ -14,6 +14,9 @@ export default class UIStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + + makeObservable(this); + // Register action handlers this.actions.ui.openSettings.listen(this._openSettings.bind(this)); this.actions.ui.closeSettings.listen(this._closeSettings.bind(this)); diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts index b9c3c7576..c5e67c966 100644 --- a/src/stores/UserStore.ts +++ b/src/stores/UserStore.ts @@ -1,4 +1,4 @@ -import { observable, computed, action } from 'mobx'; +import { observable, computed, action, makeObservable } from 'mobx'; import moment from 'moment'; import jwt from 'jsonwebtoken'; import localStorage from 'mobx-localstorage'; @@ -93,6 +93,8 @@ export default class UserStore extends TypedStore { constructor(stores: Stores, api: ApiInterface, actions: Actions) { super(stores, api, actions); + makeObservable(this); + // Register action handlers this.actions.user.login.listen(this._login.bind(this)); this.actions.user.retrievePassword.listen( diff --git a/src/stores/index.ts b/src/stores/index.ts index d31f2c933..8836f2892 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -1,4 +1,4 @@ -import { RouterStore } from 'mobx-react-router'; +import { RouterStore } from '@superwf/mobx-react-router'; import { ApiInterface } from '../api'; import { Actions } from '../actions/lib/actions'; import AppStore from './AppStore'; diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js index 0ac36a218..e58341790 100644 --- a/src/stores/lib/Request.js +++ b/src/stores/lib/Request.js @@ -1,4 +1,4 @@ -import { observable, action, computed } from 'mobx'; +import { observable, action, computed, makeObservable } from 'mobx'; import { isEqual } from 'lodash/fp'; export default class Request { @@ -29,6 +29,8 @@ export default class Request { _currentApiCall = null; constructor(api, method) { + makeObservable(this); + this._api = api; this._method = method; } diff --git a/src/stores/lib/TypedStore.ts b/src/stores/lib/TypedStore.ts index c97ae1aa5..e44eadd32 100644 --- a/src/stores/lib/TypedStore.ts +++ b/src/stores/lib/TypedStore.ts @@ -1,4 +1,4 @@ -import { computed, IReactionPublic, observable } from 'mobx'; +import { computed, IReactionPublic, makeObservable, observable } from 'mobx'; import { Actions } from '../../actions/lib/actions'; import { ApiInterface } from '../../api'; import { Stores } from '../../@types/stores.types'; @@ -9,6 +9,12 @@ export default abstract class TypedStore { @observable _status: any = null; + stores: Stores; + + api: ApiInterface; + + actions: Actions; + @computed get actionStatus() { return this._status || []; } @@ -17,11 +23,13 @@ export default abstract class TypedStore { this._status = status; } - constructor( - public readonly stores: Stores, - public readonly api: ApiInterface, - public readonly actions: Actions, - ) {} + constructor(stores: Stores, api: ApiInterface, actions: Actions) { + makeObservable(this); + + this.stores = stores; + this.api = api; + this.actions = actions; + } registerReactions(reactions: { (r: IReactionPublic): void }[]): void { for (const reaction of reactions) { -- cgit v1.2.3-54-g00ecf