Pasted

import {action, computed, makeObservable, observable, runInAction} from "mobx";
import {merchantApi, serverApi} from "../../api";
 
export default class MerchantStore {
    merchant = []
    async constructor() {
        makeObservable(this, {
            merchant: observable,
            getMerchant: action
        });
        await this.getMerchant()
    }
    async getMerchant() {
        try {
            let page_state = null
            let firstFetch = true
            let merchant = []
            while (page_state || firstFetch) {
                const { data } = await merchantApi().get('/v1/merchants', {params:{firm:"SHS",page_count:100}});
                merchant = [...merchant, data.merchant]
                page_state = data.page_state
                firstFetch = false
            }
            
            // after await, modifying state again, needs an actions:
            runInAction(async () => {
                this.merchant = merchant
            })
        } catch (error) {
            runInAction(() => {
                this.state = "error";
                this.message = error.response.data.message
            })
        }
    }
    filterMerchant = (filter) => {
        return this.merchant.filter(merchant => {
            return filter.data === merchant.service 
        })
    }
}