Move toasts to sonner (#6053)

app/scenes/Document/components/CommentForm.tsx

@@ -3,6 +3,7 @@ import { action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { v4 as uuidv4 } from "uuid";
 import { CommentValidation } from "@shared/validations";
 import Comment from "~/models/Comment";
@@ -15,7 +16,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePersistedState from "~/hooks/usePersistedState";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import CommentEditor from "./CommentEditor";
 import { Bubble } from "./CommentThreadItem";
 
@@ -65,7 +65,6 @@ function CommentForm({
   const [forceRender, setForceRender] = React.useState(0);
   const [inputFocused, setInputFocused] = React.useState(autoFocus);
   const { t } = useTranslation();
-  const { showToast } = useToasts();
   const { comments } = useStores();
   const user = useCurrentUser();
 
@@ -106,7 +105,7 @@ function CommentForm({
       })
       .catch(() => {
         comment.isNew = true;
-        showToast(t("Error creating comment"), { type: "error" });
+        toast.error(t("Error creating comment"));
       });
 
     // optimistically update the comment model
@@ -139,7 +138,7 @@ function CommentForm({
     comment.save().catch(() => {
       comments.remove(comment.id);
       comment.isNew = true;
-      showToast(t("Error creating comment"), { type: "error" });
+      toast.error(t("Error creating comment"));
     });
 
     // optimistically update the comment model

app/scenes/Document/components/CommentThreadItem.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import { darken } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
@@ -17,7 +18,6 @@ import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import Time from "~/components/Time";
 import useBoolean from "~/hooks/useBoolean";
-import useToasts from "~/hooks/useToasts";
 import CommentMenu from "~/menus/CommentMenu";
 import { hover } from "~/styles";
 import CommentEditor from "./CommentEditor";
@@ -85,7 +85,6 @@ function CommentThreadItem({
   canReply,
 }: Props) {
   const { editor } = useDocumentContext();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const [forceRender, setForceRender] = React.useState(0);
   const [data, setData] = React.useState(toJS(comment.data));
@@ -116,7 +115,7 @@ function CommentThreadItem({
       });
     } catch (error) {
       setEditing();
-      showToast(t("Error updating comment"), { type: "error" });
+      toast.error(t("Error updating comment"));
     }
   };
 

app/scenes/Document/components/Document.tsx

@@ -11,6 +11,7 @@ import {
   withRouter,
   Redirect,
 } from "react-router";
+import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
@@ -176,7 +177,7 @@ class DocumentScene extends React.Component<Props> {
   };
 
   onSynced = async () => {
-    const { toasts, history, location, t } = this.props;
+    const { history, location, t } = this.props;
     const restore = location.state?.restore;
     const revisionId = location.state?.revisionId;
     const editorRef = this.editor.current;
@@ -191,7 +192,7 @@ class DocumentScene extends React.Component<Props> {
 
     if (response) {
       await this.replaceDocument(response.data);
-      toasts.showToast(t("Document restored"));
+      toast.success(t("Document restored"));
       history.replace(this.props.document.url, history.location.state);
     }
   };
@@ -316,9 +317,7 @@ class DocumentScene extends React.Component<Props> {
         this.props.ui.setActiveDocument(savedDocument);
       }
     } catch (err) {
-      this.props.toasts.showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
     } finally {
       this.isSaving = false;
       this.isPublishing = false;

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -3,6 +3,7 @@ import throttle from "lodash/throttle";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
 import MultiplayerExtension from "@shared/editor/extensions/Multiplayer";
@@ -14,7 +15,6 @@ import useIdle from "~/hooks/useIdle";
 import useIsMounted from "~/hooks/useIsMounted";
 import usePageVisibility from "~/hooks/usePageVisibility";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { AwarenessChangeEvent } from "~/types";
 import Logger from "~/utils/Logger";
 import { homePath } from "~/utils/routeHelpers";
@@ -51,7 +51,6 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
   const [isLocalSynced, setLocalSynced] = React.useState(false);
   const [isRemoteSynced, setRemoteSynced] = React.useState(false);
   const [ydoc] = React.useState(() => new Y.Doc());
-  const { showToast } = useToasts();
   const token = auth.collaborationToken;
   const isIdle = useIdle();
   const isVisible = usePageVisibility();
@@ -180,7 +179,6 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     };
   }, [
     history,
-    showToast,
     t,
     documentId,
     ui,
@@ -251,21 +249,17 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
   React.useEffect(() => {
     function onUnhandledError(event: ErrorEvent) {
       if (event.message.includes("URIError: URI malformed")) {
-        showToast(
+        toast.error(
           t(
             "Sorry, the last change could not be persisted – please reload the page"
-          ),
-          {
-            type: "error",
-            timeout: 0,
-          }
+          )
         );
       }
     }
 
     window.addEventListener("error", onUnhandledError);
     return () => window.removeEventListener("error", onUnhandledError);
-  }, [showToast, t]);
+  }, [t]);
 
   if (!remoteProvider) {
     return null;

app/scenes/Document/components/SharePopover.tsx

@@ -6,6 +6,7 @@ import { ExpandedIcon, GlobeIcon, PadlockIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { Link } from "react-router-dom";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { dateLocale, dateToRelative } from "@shared/utils/date";
@@ -23,7 +24,6 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import useUserLocale from "~/hooks/useUserLocale";
 
 type Props = {
@@ -44,7 +44,6 @@ function SharePopover({
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const { shares, collections } = useStores();
-  const { showToast } = useToasts();
   const [expandedOptions, setExpandedOptions] = React.useState(false);
   const [isEditMode, setIsEditMode] = React.useState(false);
   const [slugValidationError, setSlugValidationError] = React.useState("");
@@ -100,12 +99,10 @@ function SharePopover({
           published: event.currentTarget.checked,
         });
       } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
       }
     },
-    [document.id, shares, showToast]
+    [document.id, shares]
   );
 
   const handleChildDocumentsChange = React.useCallback(
@@ -118,22 +115,18 @@ function SharePopover({
           includeChildDocuments: event.currentTarget.checked,
         });
       } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
       }
     },
-    [document.id, shares, showToast]
+    [document.id, shares]
   );
 
   const handleCopied = React.useCallback(() => {
     timeout.current = setTimeout(() => {
       onRequestClose();
-      showToast(t("Share link copied"), {
-        type: "info",
-      });
+      toast.message(t("Share link copied"));
     }, 250);
-  }, [t, onRequestClose, showToast]);
+  }, [t, onRequestClose]);
 
   const handleUrlSlugChange = React.useMemo(
     () =>