How to use the mobx.decorate function in mobx

function autoObservables(target) {
  const obj = {}
  Object.keys(target).forEach(key => {
    const descriptor = Object.getOwnPropertyDescriptor(target, key)
    if (!/^(\$|_)/.test(key) && typeof descriptor.value !== 'function' && !isObservable(descriptor.value)) {
      obj[key] = observable
    }
  })
  decorate(target, obj)
}

};

  private loadCurrentTeamData() {
    if (this.currentTeam) {
      this.currentTeam
        .loadInitialMembers()
        .catch((err) => console.error('Error while loading Users', err));

      this.currentTeam
        .loadDiscussions()
        .catch((err) => console.error('Error while loading Discussions', err));
    }
  }
}

decorate(Store, {
  teams: observable,
  isLoadingTeams: observable,
  isInitialTeamsLoaded: observable,
  currentUser: observable,
  currentTeam: observable,
  currentUrl: observable,
  isLoggingIn: observable,

  changeCurrentUrl: action,
  addTeam: action,
  loadTeams: action,
  setCurrentTeam: action,
});

let store: Store = null;

<div data-test="license-text">
              {this.licenseText}
            </div>
          ) : (
            
          )}
        
        
          <button>Close</button>
        
      
    )
  }
}

decorate(LicenseModal, {
  licenseText: observable
})

export default observer(LicenseModal)

<div>
                <button type="dark-2" size="sm">
                  Reset all
                </button>
              </div>
            
          
        
      
    );
  }
}

decorate(Filters, {
  allTickers: computed,
});

Filters.propTypes = {
  filterState: PropTypes.shape({
    date: PropTypes.string.isRequired,
    tickers: PropTypes.array.isRequired,
  }),
  allTickers: PropTypes.array.isRequired,
  defaultDate: PropTypes.string,
};

Filters.defaultProps = {
  defaultDate: TextUtils.getISODateFromNow(),
};

}

  getValidationDisplayProp(key) {
    return {
      style: {
        display: this.data[key].valid ? 'none' : 'block',
      },
    };
  }
}
CreateContractTemplate.propTypes = {
  template: PropTypes.object.isRequired,
  tickerPrices: PropTypes.object.isRequired,
};

decorate(CreateContractTemplate, {
  data: observable,
  valid: observable,
  handleNameChange: action,
  handleDateChange: action,
  resetForm: action,
  validate: action,
  tickers: computed,
  dataFlattened: computed,
});

export default observer(CreateContractTemplate);

const policiesByRole = {};
    this.policies.forEach(policy => {
      policy.roles.forEach(role => {
        policiesByRole[role] = policiesByRole[role] || [];
        policiesByRole[role].push(policy);
      });
    });
    return policiesByRole;
  }

  getPolicies(role): Array {
    return this.policiesByRole[role] || NO_POLICIES;
  }
}

decorate(DbPoliciesManager, {
  policies: observable,
  policiesByRole: computed,
});

export default DbPoliciesManager;

import { decorate, observable, computed } from "mobx";

class headerStore {
    constructor() {
        this.likedItems = [];
    }

    get getLikedItemsCount() {
        return this.likedItems.length;
    }
}

decorate(headerStore, {
    likedItems: observable,
    getLikedItemsCount: computed
})

export default new headerStore();

this.roles[name] = { oid, name, isSuperUser: rolsuper, bypassRLS: rolbypassrls };
      rolesByIds[oid] = this.roles[name];
    });
    this.rolesNames = Object.keys(this.roles);
    roles.forEach((role) => {
      const { rolname: name, parents_oids: parentsOids } = role;
      this.roles[name].parents = parentsOids.filter(Boolean).map(oid => rolesByIds[oid].name);
    });
  });

  get isFetched() {
    return this.rolesFetcher.inSuccessState && this.schemasFetcher.inSuccessState;
  }
}

decorate(DbConnection, {
  roles: observable,
  rolesNames: observable,
  schemas: observable,
  schemasNames: observable,
  isFetched: computed,
});

export default DbConnection;

import { decorate, observable, computed } from "mobx";

class productsStore {
  constructor() {
    this.likedItems = [];
    this.currentLikedItem = {};
  }
  get getLikedItems() {
    return this.likedItems;
  }
}

decorate(productsStore, {
  likedItems: observable,
  getLikedItems: computed
});

export default new productsStore();