@fakel/rest-admin/src/stores/ImagesStore.ts

An application that makes it easier to work with your API

import { observable, action, runInAction, makeObservable } from 'mobx';

export type ImageT = {
  id?: string | number;
  src: string;
  name?: string;
  isSelected?: boolean;
};

export class ImagesStore {
  images: ImageT[] = [];

  total: number = 0;

  constructor() {
    makeObservable(this, {
      images: observable,
      total: observable,
    });
  }

  public setImages(images: any[], total: number) {
    this.images = images.map((image) => ({ ...image, isSelected: false }));
    this.images.sort((a, b) => +a.isSelected - +b.isSelected);
    this.total = total;
  }

  public pushImage(image: ImageT) {
    this.images = [...this.images, { ...image, isSelected: false }];
  }

  public setIsSelected(image: ImageT, isSelected: boolean) {
    this.images = this.images.map((img) => {
      if (img.id === image.id) {
        return {
          ...img,
          isSelected,
        };
      }

      return img;
    });
  }

  public clearSelected() {
    this.images = this.images.map((image) => ({ ...image, isSelected: false }));
  }

  public toggleSelectAll() {
    this.images = this.images.map((image) => ({
      ...image,
      isSelected: !image.isSelected,
    }));
  }

  public setTotal(total: number) {
    this.total = total;
  }
}