summaryrefslogtreecommitdiff
path: root/frontend/src/components/DeckyToasterState.tsx
blob: 8732d7f89b9245a322ea1a419871e4bd84eacc63 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { ToastData } from 'decky-frontend-lib';
import { FC, createContext, useContext, useEffect, useState } from 'react';

interface PublicDeckyToasterState {
  toasts: Set<ToastData>;
}

export class DeckyToasterState {
  // TODO a set would be better
  private _toasts: Set<ToastData> = new Set();

  public eventBus = new EventTarget();

  publicState(): PublicDeckyToasterState {
    return { toasts: this._toasts };
  }

  addToast(toast: ToastData) {
    this._toasts.add(toast);
    this.notifyUpdate();
  }

  removeToast(toast: ToastData) {
    this._toasts.delete(toast);
    this.notifyUpdate();
  }

  private notifyUpdate() {
    this.eventBus.dispatchEvent(new Event('update'));
  }
}

interface DeckyToasterContext extends PublicDeckyToasterState {
  addToast(toast: ToastData): void;
  removeToast(toast: ToastData): void;
}

const DeckyToasterContext = createContext<DeckyToasterContext>(null as any);

export const useDeckyToasterState = () => useContext(DeckyToasterContext);

interface Props {
  deckyToasterState: DeckyToasterState;
}

export const DeckyToasterStateContextProvider: FC<Props> = ({ children, deckyToasterState }) => {
  const [publicDeckyToasterState, setPublicDeckyToasterState] = useState<PublicDeckyToasterState>({
    ...deckyToasterState.publicState(),
  });

  useEffect(() => {
    function onUpdate() {
      setPublicDeckyToasterState({ ...deckyToasterState.publicState() });
    }

    deckyToasterState.eventBus.addEventListener('update', onUpdate);

    return () => deckyToasterState.eventBus.removeEventListener('update', onUpdate);
  }, []);

  const addToast = deckyToasterState.addToast.bind(deckyToasterState);
  const removeToast = deckyToasterState.removeToast.bind(deckyToasterState);

  return (
    <DeckyToasterContext.Provider value={{ ...publicDeckyToasterState, addToast, removeToast }}>
      {children}
    </DeckyToasterContext.Provider>
  );
};