Move toasts to sonner (#6053)

app/components/Sidebar/components/ArchiveLink.tsx

@@ -3,24 +3,21 @@ import { ArchiveIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { archivePath } from "~/utils/routeHelpers";
 import SidebarLink, { DragObject } from "./SidebarLink";
 
 function ArchiveLink() {
   const { policies, documents } = useStores();
   const { t } = useTranslation();
-  const { showToast } = useToasts();
 
   const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
     accept: "document",
     drop: async (item: DragObject) => {
       const document = documents.get(item.id);
       await document?.archive();
-      showToast(t("Document archived"), {
-        type: "success",
-      });
+      toast.success(t("Document archived"));
     },
     canDrop: (item) => policies.abilities(item.id).archive,
     collect: (monitor) => ({

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -9,7 +10,6 @@ import DocumentsLoader from "~/components/DocumentsLoader";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import EmptyCollectionPlaceholder from "./EmptyCollectionPlaceholder";
@@ -30,7 +30,6 @@ function CollectionLinkChildren({
   prefetchDocument,
 }: Props) {
   const can = usePolicy(collection);
-  const { showToast } = useToasts();
   const manualSort = collection.sort.field === "index";
   const { documents } = useStores();
   const { t } = useTranslation();
@@ -42,14 +41,10 @@ function CollectionLinkChildren({
     accept: "document",
     drop: (item: DragObject) => {
       if (!manualSort && item.collectionId === collection?.id) {
-        showToast(
+        toast.message(
           t(
             "You can't reorder documents in an alphabetically sorted collection"
-          ),
-          {
-            type: "info",
-            timeout: 5000,
-          }
+          )
         );
         return;
       }

app/components/Sidebar/components/DocumentLink.tsx

@@ -6,6 +6,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
 import { sortNavigationNodes } from "@shared/utils/collections";
@@ -18,7 +19,6 @@ import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { newDocumentPath } from "~/utils/routeHelpers";
 import DropCursor from "./DropCursor";
@@ -53,7 +53,6 @@ function InnerDocumentLink(
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
 ) {
-  const { showToast } = useToasts();
   const { documents, policies } = useStores();
   const { t } = useTranslation();
   const canUpdate = usePolicy(node.id).update;
@@ -222,14 +221,10 @@ function InnerDocumentLink(
     accept: "document",
     drop: (item: DragObject) => {
       if (!manualSort) {
-        showToast(
+        toast.message(
           t(
             "You can't reorder documents in an alphabetically sorted collection"
-          ),
-          {
-            type: "info",
-            timeout: 5000,
-          }
+          )
         );
         return;
       }

app/components/Sidebar/components/DropToImport.tsx

@@ -3,12 +3,12 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import Dropzone from "react-dropzone";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled, { css } from "styled-components";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import useImportDocument from "~/hooks/useImportDocument";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   children: JSX.Element;
@@ -21,7 +21,6 @@ type Props = {
 function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const { t } = useTranslation();
   const { documents } = useStores();
-  const { showToast } = useToasts();
   const { handleFiles, isImporting } = useImportDocument(
     collectionId,
     documentId
@@ -35,13 +34,10 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const canDocument = usePolicy(documentId);
 
   const handleRejection = React.useCallback(() => {
-    showToast(
-      t("Document not supported – try Markdown, Plain text, HTML, or Word"),
-      {
-        type: "error",
-      }
+    toast.error(
+      t("Document not supported – try Markdown, Plain text, HTML, or Word")
     );
-  }, [t, showToast]);
+  }, [t]);
 
   if (
     disabled ||

app/components/Sidebar/components/EditableTitle.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   onSubmit: (title: string) => Promise<void>;
@@ -22,7 +22,6 @@ function EditableTitle(
   const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
-  const { showToast } = useToasts();
 
   React.useImperativeHandle(ref, () => ({
     setIsEditing,
@@ -78,14 +77,12 @@ function EditableTitle(
           setOriginalValue(trimmedValue);
         } catch (error) {
           setValue(originalValue);
-          showToast(error.message, {
-            type: "error",
-          });
+          toast.error(error.message);
           throw error;
         }
       }
     },
-    [originalValue, showToast, value, onSubmit]
+    [originalValue, value, onSubmit]
   );
 
   React.useEffect(() => {