Move toasts to sonner (#6053)

app/stores/RootStore.ts

@@ -21,7 +21,6 @@ import SearchesStore from "./SearchesStore";
 import SharesStore from "./SharesStore";
 import StarsStore from "./StarsStore";
 import SubscriptionsStore from "./SubscriptionsStore";
-import ToastsStore from "./ToastsStore";
 import UiStore from "./UiStore";
 import UsersStore from "./UsersStore";
 import ViewsStore from "./ViewsStore";
@@ -53,7 +52,6 @@ export default class RootStore {
   subscriptions: SubscriptionsStore;
   users: UsersStore;
   views: ViewsStore;
-  toasts: ToastsStore;
   fileOperations: FileOperationsStore;
   webhookSubscriptions: WebhookSubscriptionsStore;
 
@@ -85,7 +83,6 @@ export default class RootStore {
     this.users = new UsersStore(this);
     this.views = new ViewsStore(this);
     this.fileOperations = new FileOperationsStore(this);
-    this.toasts = new ToastsStore();
     this.webhookSubscriptions = new WebhookSubscriptionsStore(this);
   }
 

app/stores/ToastsStore.test.ts

@@ -1,25 +0,0 @@
-import stores from ".";
-
-describe("ToastsStore", () => {
-  const store = stores.toasts;
-
-  test("#add should add messages", () => {
-    expect(store.orderedData.length).toBe(0);
-
-    store.showToast("first error");
-    store.showToast("second error");
-    expect(store.orderedData.length).toBe(2);
-  });
-
-  test("#remove should remove messages", () => {
-    store.toasts.clear();
-    const id = store.showToast("first error");
-    store.showToast("second error");
-
-    expect(store.orderedData.length).toBe(2);
-    id && store.hideToast(id);
-
-    expect(store.orderedData.length).toBe(1);
-    expect(store.orderedData[0].message).toBe("second error");
-  });
-});

app/stores/ToastsStore.ts

@@ -1,55 +0,0 @@
-import orderBy from "lodash/orderBy";
-import { observable, action, computed } from "mobx";
-import { v4 as uuidv4 } from "uuid";
-import { Toast, ToastOptions } from "~/types";
-
-export default class ToastsStore {
-  @observable
-  toasts: Map<string, Toast> = new Map();
-
-  lastToastId: string;
-
-  @action
-  showToast = (
-    message: string,
-    options: ToastOptions = {
-      type: "info",
-    }
-  ) => {
-    if (!message) {
-      return;
-    }
-    const lastToast = this.toasts.get(this.lastToastId);
-
-    if (lastToast?.message === message) {
-      this.toasts.set(this.lastToastId, {
-        ...lastToast,
-        reoccurring: lastToast.reoccurring ? ++lastToast.reoccurring : 1,
-      });
-      return this.lastToastId;
-    }
-
-    const id = uuidv4();
-    const createdAt = new Date().toISOString();
-    this.toasts.set(id, {
-      id,
-      message,
-      createdAt,
-      type: options.type,
-      timeout: options.timeout,
-      action: options.action,
-    });
-    this.lastToastId = id;
-    return id;
-  };
-
-  @action
-  hideToast = (id: string) => {
-    this.toasts.delete(id);
-  };
-
-  @computed
-  get orderedData(): Toast[] {
-    return orderBy(Array.from(this.toasts.values()), "createdAt", "desc");
-  }
-}