apphouse/dist/models/Popup/PopupStore.ts

Component library for React that uses observable state management and theme-able components.

import { makeAutoObservable } from 'mobx';
import { Popup } from './Popup';
import { uuidv4 } from '@firebase/util';
import { List } from '../List';

/**
 * Manages the state of Popups (Stack able UIs)
 */
class PopupStore {
  items: List<Popup>;

  constructor() {
    this.items = new List<Popup>();
    makeAutoObservable(this);
  }

  /**
   * List of all the open popups, latest on top
   */
  get list() {
    return this.items.values;
  }

  /**
   * How many popups are open
   */
  get length() {
    return this.items.length;
  }

  /**
   * Clear all popups in the stack
   */
  clear = () => {
    this.items.reset();
  };

  /**
   * remove last opened popup
   */
  pop = () => {
    this.items.pop();
  };

  /**
   * Get popup data by id
   * @param popupId id of the popup to get data from
   * @returns the popup data associated with the id
   */
  get = (popupId: string): Popup | undefined => {
    return this.items.get(popupId);
  };

  /**
   * Add a new popup to the stack
   * @param uiid Id for the UI associated with this popup
   * @param title Title for the component
   * @param data data related to the popup
   * @param popupComponent the popup component to render
   */
  set = (
    uiid: string,
    title?: string,
    data?: any,
    popupComponent?: JSX.Element
  ) => {
    // uiid is associated with a key for the UI
    // different popups may have the same uiid
    const key = data?.id || uiid || uuidv4();
    console.log('setting popup', uiid, title, data, popupComponent);
    const popup = new Popup({
      id: key, // unique id for popup
      index: this.length,
      data,
      title,
      uiid, // id that identifies the ui for the popup
      active: true,
      popup: popupComponent
    });

    this.items.set(popup);
  };

  /**
   * Get the last opened popup
   */
  peak = () => {
    return this.items.peakLast();
  };

  /**
   * remove popup with id
   */
  remove = (popupId: string) => {
    this.items.delete(popupId);
  };
}

export default PopupStore;