mobx#observable JavaScript Examples

StoreProvider = (props) => {
  const dsStore = [];

  const { children } = props;
  const value = {
    ...props,
    dsStore: observable(props.dsStore || dsStore),
  };
  return (
    <Store.Provider value={value}>
      {children}
    </Store.Provider>
  );
}

/**
     * Initialize transaction execution context for an intent request.
     * @param {Transaction} transaction
     * @param {Object} intentParams
     * @param {StellarNetworkParams} networkParams
     */
    constructor(transaction, intentParams, networkParams) {
        makeObservable(this, {
            availableSigners: observable.shallow,
            signatures: observable.shallow,
            signatureSchema: observable,
            setAvailableSigners: action,
            isFullySigned: computed,
            isPartiallySigned: computed,
            setTxSourceAccount: action,
            setTxSequence: action,
            removeSignatureByKey: action,
            removeSignatureByHint: action,
            updateSignatureSchema: action,
            sign: action
        })

        this.tx = transaction
        //TODO: retrieve pre-set signatures from tx
        this.signatures = [...transaction.signatures]
        this.availableSigners = []
        this.mapSignatureKeys()
    }

constructor(network, address) {
        this.address = address
        this.network = network
        this.records = []
        makeObservable(this, {
            records: observable,
            loadingNextPagePromise: observable.ref,
            loadNextPage: action,
            startStreaming: action,
            addInProgressTx: action,
            addNewTx: action,
            removeInProgressTx: action,
            loading: computed
        })
    }

constructor() {
        makeObservable(this, {
            address: observable,
            network: observable,
            history: observable,
            accountData: observable.ref,
            balances: observable.ref,
            pendingLiabilities: observable.ref,
            notificationCounters: observable,
            init: action,
            reset: action,
            error: observable,
            loaded: observable,
            nonExisting: observable,
            balancesWithPriority: computed
        })
        this.pendingLiabilities = {}
        this.balances = {}
    }

constructor(intent, intentParams) {
        this.intent = intent
        this.intentParams = intentParams
        makeObservable(this, {
            intent: observable,
            intentParams: observable.shallow,
            txContext: observable,
            intentErrors: observable,
            requiresExistingAlbedoAccount: computed,
            autoSubmitToHorizon: computed,
            setTxContext: action
        })
    }

constructor() {
        makeObservable(this, {
            dialogOpen: observable,
            reset: action,
            requestAuthorization: action
        })
        this.sessions = {}

        setTimeout(() => { //TODO: address the loading sequence problem and rewrite this dirty hack
            navigation.history.listen((location, action) => {
                this.dialogOpen = false // hide auth dialog when navigation occurred
            })
        }, 200)

        setInterval(() => {
            const now = new Date().getTime()
            for (let key of Object.keys(this.sessions))
                if (this.sessions[key].expires < now) {
                    delete this.sessions[key]
                }
        }, 5000)
    }

constructor() {
        makeObservable(this, {
            status: observable,
            intentRequests: observable,
            origin: observable,
            networkParams: observable,
            intentParams: observable.shallow,
            intentErrors: observable,
            runtimeErrors: observable,
            requestedPubkey: observable,
            selectedAccount: observable,
            selectedAccountInfo: observable,
            isBatchRequest: computed,
            reset: action,
            setIntentError: action,
            confirmRequest: action,
            setStatus: action,
            selectAccount: action,
            cancelAction: action,
            loadSelectedAccountInfo: action
        })
    }

constructor(params) {
        super(params)
        this.accountType = ACCOUNT_TYPES.EPHEMERAL_ACCOUNT
        this.friendlyName = 'Stellar account'
        makeObservable(this, {
            secret: observable,
            setSecret: action
        })
    }

/**
     * Create an Account instance from the stored account data
     * @param {Object} params - An object containing account properties
     */
    constructor(params) {
        makeObservable(this, {
            friendlyName: observable,
            displayName: computed,
            shortDisplayName: computed,
            requestAccountSecret: action
        })

        Object.assign(this, params)
    }

constructor() {
        makeObservable(this, {
            selectorVisible: observable,
            activeAccount: observable,
            accounts: observable.shallow,
            setActiveAccount: action,
            loadAvailableAccounts: action,
            addAccount: action
        })
    }

StoreProvider = (props) => {
  const dsStore = observable([props.dsStore[0], []]);

  const { children } = props;
  const value = {
    ...props,
    dsStore,
  };
  return (
    <Store.Provider value={value}>
      {children}
    </Store.Provider>
  );
}

Common = {
  Catalog: {
    KubernetesCluster,
    CatalogEntity,
    CatalogCategory,
    catalogEntities: {
      activeEntity: observable.object({}),
      getItemsForCategory: () => [],
    },
  },
  Store: {
    ExtensionStore: class ExtensionStore extends Singleton {},
  },
  Util: {
    Singleton,
    getAppVersion: () => '1.0.0',
  },
  logger: {
    // eslint-disable-next-line no-console
    info: console.info,
    // eslint-disable-next-line no-console
    error: console.error,
    // eslint-disable-next-line no-console
    warn: console.warn,
    // eslint-disable-next-line no-console
    log: console.log,
  },
  EventBus: {
    appEventBus: {
      emit: () => {},
    },
  },
}

decorate(Uploader, {
	uploads: observable,
	uploadsInProgress: observable,
	statusWindowVisible: observable,
	successfulUpload: observable,
	getUploads: action,
	showStatusWindow: action,
	uploadFile: action,
	uploadFiles: action,
	clearCompletedUploads: action
});

decorate(RoutingStore, {
	// props
	page: observable,
	queryParams: observable,
	subView: observable,
	// actions
	setRouteCtx: action,
	setPage: action,
	setSubView: action
});

decorate(Uploader, {
	uploads: observable,
	uploadsInProgress: observable,
	statusWindowVisible: observable,
	successfulUpload: observable,
	getUploads: action,
	uploadFile: action,
	uploadFiles: action,
	clearCompletedUploads: action
});

decorate(RoutingStore, {
	// props
	page: observable,
	queryParams: observable,
	subView: observable,
	// actions
	setRouteCtx: action,
	setPage: action,
	setSubView: action
});

Renderer = {
  Ipc,
  Component: {
    Select,
    Spinner,
    Notifications: {
      error: () => {},
    },
    Button: Button,
    Icon: Icon,
    ConfirmDialog: {
      // eslint-disable-next-line no-undef
      open: jest.fn(),
    },
  },
  Catalog: {
    KubernetesCluster,
    catalogEntities: {
      activeEntity: observable.object({}),
    },
    catalogCategories: {
      getForGroupKind: () => Common.Catalog.KubernetesCluster,
      add: () => () => {},
    },
  },
  K8sApi: {
    KubeObject: class {},
  },
}

decorate(Uploader, {
	uploadProgress: observable,
	uploadFile: action,
	reset: action
});

store = observable({

})

decorate(PermissionStore, {
	// props
	permissions: observable,
	// actions
	setPermissions: action,
});

decorate(IAPStore, {
	isInitialized: observable,
	skuProcessing: observable,
	productsForSale: observable,
	activeProducts: observable
})

decorate(AppStore, {
  isLogged: observable
})

constructor() {
        makeAutoObservable(this, {currentNetwork: observable})
        this.currentNetwork = 'testnet'
    }

decorate(QueryStore, {
    query: observable,
    setQuery: action,
});

decorate(NotificationStore, {
  open: observable,
  message: observable,
  durationMs: observable,
  onClose: observable,
  showMessage: action
});

decorate(LanguageStore, {
  lang: observable,
  langCode: observable,
  setLanguage: action,
});

constructor() {
        makeObservable(this, {
            notification: observable,
            showNotification: action,
            closeNotification: action
        })
    }