Move toasts to sonner (#6053)

app/scenes/Settings/components/ApiKeyListItem.tsx

@@ -1,12 +1,12 @@
 import { CopyIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import ApiKey from "~/models/ApiKey";
 import Button from "~/components/Button";
 import CopyToClipboard from "~/components/CopyToClipboard";
 import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
-import useToasts from "~/hooks/useToasts";
 import ApiKeyMenu from "~/menus/ApiKeyMenu";
 
 type Props = {
@@ -15,7 +15,6 @@ type Props = {
 
 const ApiKeyListItem = ({ apiKey }: Props) => {
   const { t } = useTranslation();
-  const { showToast } = useToasts();
   const [linkCopied, setLinkCopied] = React.useState<boolean>(false);
 
   React.useEffect(() => {
@@ -28,10 +27,8 @@ const ApiKeyListItem = ({ apiKey }: Props) => {
 
   const handleCopy = React.useCallback(() => {
     setLinkCopied(true);
-    showToast(t("API token copied to clipboard"), {
-      type: "success",
-    });
-  }, [showToast, t]);
+    toast.message(t("API token copied to clipboard"));
+  }, [t]);
 
   return (
     <ListItem

app/scenes/Settings/components/DomainManagement.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { CloseIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
@@ -11,7 +12,6 @@ import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import SettingRow from "./SettingRow";
 
 type Props = {
@@ -22,7 +22,6 @@ function DomainManagement({ onSuccess }: Props) {
   const { auth } = useStores();
   const team = useCurrentTeam();
   const { t } = useTranslation();
-  const { showToast } = useToasts();
 
   const [allowedDomains, setAllowedDomains] = React.useState([
     ...(team.allowedDomains ?? []),
@@ -43,11 +42,9 @@ function DomainManagement({ onSuccess }: Props) {
       setExistingDomainsTouched(false);
       updateLastKnownDomainCount(allowedDomains.length);
     } catch (err) {
-      showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
     }
-  }, [auth, allowedDomains, onSuccess, showToast]);
+  }, [auth, allowedDomains, onSuccess]);
 
   const handleRemoveDomain = async (index: number) => {
     const newDomains = allowedDomains.filter((_, i) => index !== i);

app/scenes/Settings/components/DropToImport.tsx

@@ -3,13 +3,13 @@ import { NewDocumentIcon } from "outline-icons";
 import * as React from "react";
 import Dropzone from "react-dropzone";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { AttachmentPreset } from "@shared/types";
 import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { uploadFile } from "~/utils/files";
 
 type Props = {
@@ -23,15 +23,12 @@ type Props = {
 function DropToImport({ disabled, onSubmit, children, format }: Props) {
   const { t } = useTranslation();
   const { collections } = useStores();
-  const { showToast } = useToasts();
   const [isImporting, setImporting] = React.useState(false);
 
   const handleFiles = React.useCallback(
     async (files) => {
       if (files.length > 1) {
-        showToast(t("Please choose a single file to import"), {
-          type: "error",
-        });
+        toast.error(t("Please choose a single file to import"));
         return;
       }
       const file = files[0];
@@ -45,27 +42,21 @@ function DropToImport({ disabled, onSubmit, children, format }: Props) {
         });
         await collections.import(attachment.id, format);
         onSubmit();
-        showToast(
-          t("Your import is being processed, you can safely leave this page"),
-          {
-            type: "success",
-            timeout: 6000,
-          }
+        toast.success(
+          t("Your import is being processed, you can safely leave this page")
         );
       } catch (err) {
-        showToast(err.message);
+        toast.error(err.message);
       } finally {
         setImporting(false);
       }
     },
-    [t, onSubmit, collections, format, showToast]
+    [t, onSubmit, collections, format]
   );
 
   const handleRejection = React.useCallback(() => {
-    showToast(t("File not supported – please upload a valid ZIP file"), {
-      type: "error",
-    });
-  }, [t, showToast]);
+    toast.error(t("File not supported – please upload a valid ZIP file"));
+  }, [t]);
 
   if (disabled) {
     return children;

app/scenes/Settings/components/FileOperationListItem.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { ArchiveIcon, DoneIcon, WarningIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { useTheme } from "styled-components";
 import {
   FileOperationFormat,
@@ -16,7 +17,6 @@ import Spinner from "~/components/Spinner";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import FileOperationMenu from "~/menus/FileOperationMenu";
 
 type Props = {
@@ -28,7 +28,6 @@ const FileOperationListItem = ({ fileOperation }: Props) => {
   const user = useCurrentUser();
   const theme = useTheme();
   const { dialogs, fileOperations } = useStores();
-  const { showToast } = useToasts();
 
   const stateMapping = {
     [FileOperationState.Creating]: t("Processing"),
@@ -65,16 +64,14 @@ const FileOperationListItem = ({ fileOperation }: Props) => {
       await fileOperations.delete(fileOperation);
 
       if (fileOperation.type === FileOperationType.Import) {
-        showToast(t("Import deleted"));
+        toast.success(t("Import deleted"));
       } else {
-        showToast(t("Export deleted"));
+        toast.success(t("Export deleted"));
       }
     } catch (err) {
-      showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
     }
-  }, [fileOperation, fileOperations, showToast, t]);
+  }, [fileOperation, fileOperations, t]);
 
   const handleConfirmDelete = React.useCallback(async () => {
     dialogs.openModal({