import { MobxQuery } from "mobbing-query";

class Store {
  counter = 0;
  query: MobxQuery;
  constructor() {
    makeObservable(this, {
      counter: observable,
      increment: action,
      decrement: action,
      userId: computed,
      isLoading: computed,
    });
    this.query = new MobxQuery(queryClient, () => ({
      queryKey: ["todos", this.counter],
      queryFn: async () => {
        return fetch(
          `https://jsonplaceholder.typicode.com/todos/${this.counter}`,
        ).then((res) => {
          // slow network call
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(res.json());
            }, 1000);
          });
        });
      },
    }));
  }
  increment() {
    this.counter++;
  }
  decrement() {
    this.counter--;
  }
  refetch() {
    this.query.refetch();
  }
  get userId() {
    return JSON.stringify(this.query.state.data);
  }
  get isLoading() {
    return this.query.state.isLoading || this.query.state.isFetching;
  }
}