Move toasts to sonner

app/actions/definitions/developer.tsx

@@ -1,6 +1,6 @@
 import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
 import * as React from "react";
-import stores from "~/stores";
+import { toast } from "sonner";
 import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";
 import env from "~/env";
@@ -15,7 +15,7 @@ export const clearIndexedDB = createAction({
   section: DeveloperSection,
   perform: async ({ t }) => {
     await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
+    toast.message(t("IndexedDB cache deleted"));
   },
 });
 
@@ -29,9 +29,9 @@ export const createTestUsers = createAction({
 
     try {
       await client.post("/developer.create_test_users", { count });
-      stores.toasts.showToast(`${count} test users created`);
+      toast.message(`${count} test users created`);
     } catch (err) {
-      stores.toasts.showToast(err.message, { type: "error" });
+      toast.error(err.message);
     }
   },
 });
@@ -41,15 +41,8 @@ export const createToast = createAction({
   section: DeveloperSection,
   visible: () => env.ENVIRONMENT === "development",
   perform: async () => {
-    stores.toasts.showToast("Hello world", {
-      type: "info",
-      timeout: 30000,
-      action: {
-        text: "Click me",
-        onClick: () => {
-          stores.toasts.showToast("Clicked!");
-        },
-      },
+    toast.message("Hello world", {
+      duration: 30000,
     });
   },
 });
@@ -60,7 +53,7 @@ export const toggleDebugLogging = createAction({
   section: DeveloperSection,
   perform: async ({ t }) => {
     Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    stores.toasts.showToast(
+    toast.message(
       Logger.debugLoggingEnabled
         ? t("Debug logging enabled")
         : t("Debug logging disabled")

app/actions/definitions/documents.tsx

@@ -25,6 +25,7 @@ import {
   CommentIcon,
 } from "outline-icons";
 import * as React from "react";
+import { toast } from "sonner";
 import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
 import DocumentDelete from "~/scenes/DocumentDelete";
@@ -209,13 +210,10 @@ export const publishDocument = createAction({
       await document.save(undefined, {
         publish: true,
       });
-      stores.toasts.showToast(
+      toast.success(
         t("Published {{ documentName }}", {
           documentName: document.noun,
-        }),
-        {
-          type: "success",
-        }
+        })
       );
     } else if (document) {
       stores.dialogs.openModal({
@@ -250,13 +248,10 @@ export const unpublishDocument = createAction({
 
     await document.unpublish();
 
-    stores.toasts.showToast(
+    toast.message(
       t("Unpublished {{ documentName }}", {
         documentName: document.noun,
-      }),
-      {
-        type: "success",
-      }
+      })
     );
   },
 });
@@ -287,9 +282,7 @@ export const subscribeDocument = createAction({
 
     await document?.subscribe();
 
-    stores.toasts.showToast(t("Subscribed to document notifications"), {
-      type: "success",
-    });
+    toast.success(t("Subscribed to document notifications"));
   },
 });
 
@@ -319,9 +312,7 @@ export const unsubscribeDocument = createAction({
 
     await document?.unsubscribe(currentUserId);
 
-    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
-      type: "success",
-    });
+    toast.success(t("Unsubscribed from document notifications"));
   },
 });
 
@@ -360,15 +351,11 @@ export const downloadDocumentAsPDF = createAction({
       return;
     }
 
-    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
-      type: "loading",
-      timeout: 30 * 1000,
-    });
-
+    const id = toast.loading(`${t("Exporting")}…`);
     const document = stores.documents.get(activeDocumentId);
     document
       ?.download(ExportContentType.Pdf)
-      .finally(() => id && stores.toasts.hideToast(id));
+      .finally(() => id && toast.dismiss(id));
   },
 });
 
@@ -479,12 +466,10 @@ export const pinDocumentToCollection = createAction({
       const collection = stores.collections.get(activeCollectionId);
 
       if (!collection || !location.pathname.startsWith(collection?.url)) {
-        stores.toasts.showToast(t("Pinned to collection"));
+        toast.success(t("Pinned to collection"));
       }
     } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
     }
   },
 });
@@ -521,12 +506,10 @@ export const pinDocumentToHome = createAction({
       await document?.pin();
 
       if (location.pathname !== homePath()) {
-        stores.toasts.showToast(t("Pinned to home"));
+        toast.success(t("Pinned to home"));
       }
     } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
     }
   },
 });
@@ -569,7 +552,7 @@ export const importDocument = createAction({
     return false;
   },
   perform: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const { documents, toasts } = stores;
+    const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
     input.accept = documents.importFileTypes.join(", ");
@@ -589,9 +572,7 @@ export const importDocument = createAction({
         );
         history.push(document.url);
       } catch (err) {
-        toasts.showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
         throw err;
       }
     };
@@ -712,9 +693,7 @@ export const archiveDocument = createAction({
       }
 
       await document.archive();
-      stores.toasts.showToast(t("Document archived"), {
-        type: "success",
-      });
+      toast.success(t("Document archived"));
     }
   },
 });

app/actions/definitions/revisions.tsx

@@ -2,6 +2,7 @@ import copy from "copy-to-clipboard";
 import { LinkIcon, RestoreIcon } from "outline-icons";
 import * as React from "react";
 import { matchPath } from "react-router-dom";
+import { toast } from "sonner";
 import stores from "~/stores";
 import { createAction } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
@@ -68,9 +69,7 @@ export const copyLinkToRevision = createAction({
     copy(url, {
       format: "text/plain",
       onCopy: () => {
-        stores.toasts.showToast(t("Link copied"), {
-          type: "info",
-        });
+        toast.message(t("Link copied"));
       },
     });
   },

app/actions/index.ts

@@ -1,5 +1,6 @@
 import flattenDeep from "lodash/flattenDeep";
 import * as React from "react";
+import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
@@ -77,9 +78,7 @@ export function actionToMenuItem(
       try {
         action.perform?.(context);
       } catch (err) {
-        context.stores.toasts.showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
       }
     },
     selected: action.selected?.(context),

app/components/Avatar/Avatar.tsx

@@ -5,6 +5,7 @@ import Initials from "./Initials";
 
 export enum AvatarSize {
   Small = 16,
+  Toast = 18,
   Medium = 24,
   Large = 32,
   XLarge = 48,

app/components/CollectionDeleteDialog.tsx

@@ -2,12 +2,12 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { homePath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -18,7 +18,6 @@ type Props = {
 function CollectionDeleteDialog({ collection, onSubmit }: Props) {
   const team = useCurrentTeam();
   const { ui } = useStores();
-  const { showToast } = useToasts();
   const history = useHistory();
   const { t } = useTranslation();
 
@@ -31,7 +30,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
 
     await collection.delete();
     onSubmit();
-    showToast(t("Collection deleted"), { type: "success" });
+    toast.success(t("Collection deleted"));
   };
 
   return (

app/components/CollectionDescription.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
@@ -13,15 +14,13 @@ import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   collection: Collection;
 };
 
 function CollectionDescription({ collection }: Props) {
   const { collections } = useStores();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
@@ -59,15 +58,11 @@ function CollectionDescription({ collection }: Props) {
           });
           setDirty(false);
         } catch (err) {
-          showToast(
-            t("Sorry, an error occurred saving the collection", {
-              type: "error",
-            })
-          );
+          toast.error(t("Sorry, an error occurred saving the collection"));
           throw err;
         }
       }, 1000),
-    [collection, showToast, t]
+    [collection, t]
   );
 
   const handleChange = React.useCallback(

app/components/CommentDeleteDialog.tsx

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import Comment from "~/models/Comment";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   comment: Comment;
@@ -14,7 +14,6 @@ type Props = {
 
 function CommentDeleteDialog({ comment, onSubmit }: Props) {
   const { comments } = useStores();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const hasChildComments = comments.inThread(comment.id).length > 1;
 
@@ -23,7 +22,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
       await comment.delete();
       onSubmit?.();
     } catch (err) {
-      showToast(err.message, { type: "error" });
+      toast.error(err.message);
     }
   };
 

app/components/ConfirmationDialog.tsx

@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { toast } from "sonner";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   /** Callback when the dialog is submitted */
@@ -30,7 +30,6 @@ const ConfirmationDialog: React.FC<Props> = ({
 }: Props) => {
   const [isSaving, setIsSaving] = React.useState(false);
   const { dialogs } = useStores();
-  const { showToast } = useToasts();
 
   const handleSubmit = React.useCallback(
     async (ev: React.SyntheticEvent) => {
@@ -40,14 +39,12 @@ const ConfirmationDialog: React.FC<Props> = ({
         await onSubmit();
         dialogs.closeAllModals();
       } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
       } finally {
         setIsSaving(false);
       }
     },
-    [onSubmit, dialogs, showToast]
+    [onSubmit, dialogs]
   );
 
   return (