Move toasts to sonner (#6053)

2023-10-22 17:30:24 -04:00
parent 389297a337
commit ef76405bd6
92 changed files with 363 additions and 1015 deletions
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -5,6 +5,7 @@ import { TeamIcon } from "outline-icons";
 import { useRef, useState } from "react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import { ThemeProvider, useTheme } from "styled-components";
 import { buildDarkTheme, buildLightTheme } from "@shared/styles/theme";
 import { CustomTheme, TeamPreference } from "@shared/types";
@@ -21,7 +22,6 @@ import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import isCloudHosted from "~/utils/isCloudHosted";
 import TeamDelete from "../TeamDelete";
 import ImageInput from "./components/ImageInput";
@@ -29,7 +29,6 @@ import SettingRow from "./components/SettingRow";

 function Details() {
  const { auth, dialogs, ui } = useStores();
-  const { showToast } = useToasts();
  const { t } = useTranslation();
  const team = useCurrentTeam();
  const theme = useTheme();
@@ -76,13 +75,9 @@ function Details() {
            customTheme,
          },
        });
-        showToast(t("Settings saved"), {
-          type: "success",
-        });
+        toast.success(t("Settings saved"));
      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
      }
    },
    [
@@ -93,7 +88,6 @@ function Details() {
      team.preferences,
      publicBranding,
      customTheme,
-      showToast,
      t,
    ]
  );
@@ -116,16 +110,14 @@ function Details() {
    await auth.updateTeam({
      avatarUrl,
    });
-    showToast(t("Logo updated"), {
-      type: "success",
-    });
+    toast.success(t("Logo updated"));
  };

  const handleAvatarError = React.useCallback(
    (error: string | null | undefined) => {
-      showToast(error || t("Unable to upload new logo"));
+      toast.error(error || t("Unable to upload new logo"));
    },
-    [showToast, t]
+    [t]
  );

  const showDeleteWorkspace = () => {
--- a/app/scenes/Settings/Features.tsx
+++ b/app/scenes/Settings/Features.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { BeakerIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { TeamPreference } from "@shared/types";
 import Heading from "~/components/Heading";
 import Scene from "~/components/Scene";
@@ -9,14 +10,12 @@ import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import SettingRow from "./components/SettingRow";

 function Features() {
  const { auth } = useStores();
  const team = useCurrentTeam();
  const { t } = useTranslation();
-  const { showToast } = useToasts();

  const handlePreferenceChange =
    (inverted = false) =>
@@ -27,9 +26,7 @@ function Features() {
      };

      await auth.updateTeam({ preferences });
-      showToast(t("Settings saved"), {
-        type: "success",
-      });
+      toast.success(t("Settings saved"));
    };

  return (
--- a/app/scenes/Settings/GoogleAnalytics.tsx
+++ b/app/scenes/Settings/GoogleAnalytics.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
@@ -12,7 +13,6 @@ import Input from "~/components/Input";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import SettingRow from "./components/SettingRow";

 type FormData = {
@@ -22,7 +22,6 @@ type FormData = {
 function GoogleAnalytics() {
  const { integrations } = useStores();
  const { t } = useTranslation();
-  const { showToast } = useToasts();

  const integration = find(integrations.orderedData, {
    type: IntegrationType.Analytics,
@@ -67,16 +66,12 @@ function GoogleAnalytics() {
          await integration?.delete();
        }

-        showToast(t("Settings saved"), {
-          type: "success",
-        });
+        toast.success(t("Settings saved"));
      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
      }
    },
-    [integrations, integration, t, showToast]
+    [integrations, integration, t]
  );

  return (
--- a/app/scenes/Settings/Notifications.tsx
+++ b/app/scenes/Settings/Notifications.tsx
@@ -13,6 +13,7 @@ import {
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import { NotificationEventType } from "@shared/types";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
@@ -23,12 +24,10 @@ import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import useToasts from "~/hooks/useToasts";
 import isCloudHosted from "~/utils/isCloudHosted";
 import SettingRow from "./components/SettingRow";

 function Notifications() {
-  const { showToast } = useToasts();
  const user = useCurrentUser();
  const { t } = useTranslation();

@@ -106,9 +105,7 @@ function Notifications() {
  ];

  const showSuccessMessage = debounce(() => {
-    showToast(t("Notifications saved"), {
-      type: "success",
-    });
+    toast.success(t("Notifications saved"));
  }, 500);

  const handleChange = React.useCallback(
--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { SettingsIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { languageOptions } from "@shared/i18n";
 import { TeamPreference, UserPreference } from "@shared/types";
 import Button from "~/components/Button";
@@ -13,13 +14,11 @@ import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import UserDelete from "../UserDelete";
 import SettingRow from "./components/SettingRow";

 function Preferences() {
  const { t } = useTranslation();
-  const { showToast } = useToasts();
  const { dialogs, auth } = useStores();
  const user = useCurrentUser();
  const team = useCurrentTeam();
@@ -33,16 +32,12 @@ function Preferences() {
      };

      await auth.updateUser({ preferences });
-      showToast(t("Preferences saved"), {
-        type: "success",
-      });
+      toast.success(t("Preferences saved"));
    };

  const handleLanguageChange = async (language: string) => {
    await auth.updateUser({ language });
-    showToast(t("Preferences saved"), {
-      type: "success",
-    });
+    toast.success(t("Preferences saved"));
  };

  const showDeleteAccount = () => {
--- a/app/scenes/Settings/Profile.tsx
+++ b/app/scenes/Settings/Profile.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { ProfileIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
@@ -9,7 +10,6 @@ import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import ImageInput from "./components/ImageInput";
 import SettingRow from "./components/SettingRow";

@@ -18,7 +18,6 @@ const Profile = () => {
  const user = useCurrentUser();
  const form = React.useRef<HTMLFormElement>(null);
  const [name, setName] = React.useState<string>(user.name || "");
-  const { showToast } = useToasts();
  const { t } = useTranslation();

  const handleSubmit = async (ev: React.SyntheticEvent) => {
@@ -28,13 +27,9 @@ const Profile = () => {
      await auth.updateUser({
        name,
      });
-      showToast(t("Profile saved"), {
-        type: "success",
-      });
+      toast.success(t("Profile saved"));
    } catch (err) {
-      showToast(err.message, {
-        type: "error",
-      });
+      toast.error(err.message);
    }
  };

@@ -46,15 +41,11 @@ const Profile = () => {
    await auth.updateUser({
      avatarUrl,
    });
-    showToast(t("Profile picture updated"), {
-      type: "success",
-    });
+    toast.success(t("Profile picture updated"));
  };

  const handleAvatarError = (error: string | null | undefined) => {
-    showToast(error || t("Unable to upload new profile picture"), {
-      type: "error",
-    });
+    toast.error(error || t("Unable to upload new profile picture"));
  };

  const isValid = form.current?.checkValidity();
--- a/app/scenes/Settings/Security.tsx
+++ b/app/scenes/Settings/Security.tsx
@@ -4,6 +4,7 @@ import { CheckboxIcon, EmailIcon, PadlockIcon } from "outline-icons";
 import { useState } from "react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import { useTheme } from "styled-components";
 import { TeamPreference } from "@shared/types";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
@@ -18,7 +19,6 @@ import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import isCloudHosted from "~/utils/isCloudHosted";
 import DomainManagement from "./components/DomainManagement";
 import SettingRow from "./components/SettingRow";
@@ -27,7 +27,6 @@ function Security() {
  const { auth, authenticationProviders, dialogs } = useStores();
  const team = useCurrentTeam();
  const { t } = useTranslation();
-  const { showToast } = useToasts();
  const theme = useTheme();
  const [data, setData] = useState({
    sharing: team.sharing,
@@ -53,11 +52,9 @@ function Security() {
  const showSuccessMessage = React.useMemo(
    () =>
      debounce(() => {
-        showToast(t("Settings saved"), {
-          type: "success",
-        });
+        toast.success(t("Settings saved"));
      }, 250),
-    [showToast, t]
+    [t]
  );

  const saveData = React.useCallback(
@@ -67,12 +64,10 @@ function Security() {
        await auth.updateTeam(newData);
        showSuccessMessage();
      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
      }
    },
-    [auth, showSuccessMessage, showToast]
+    [auth, showSuccessMessage]
  );

  const handleChange = React.useCallback(
--- a/app/scenes/Settings/SelfHosted.tsx
+++ b/app/scenes/Settings/SelfHosted.tsx
@@ -4,6 +4,7 @@ import { BuildingBlocksIcon } from "outline-icons";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { IntegrationService, IntegrationType } from "@shared/types";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
@@ -11,7 +12,6 @@ import Heading from "~/components/Heading";
 import Input from "~/components/Input";
 import Scene from "~/components/Scene";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import SettingRow from "./components/SettingRow";

 type FormData = {
@@ -22,7 +22,6 @@ type FormData = {
 function SelfHosted() {
  const { integrations } = useStores();
  const { t } = useTranslation();
-  const { showToast } = useToasts();

  const integrationDiagrams = find(integrations.orderedData, {
    type: IntegrationType.Embed,
@@ -89,16 +88,12 @@ function SelfHosted() {
          await integrationGrist?.delete();
        }

-        showToast(t("Settings saved"), {
-          type: "success",
-        });
+        toast.success(t("Settings saved"));
      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
      }
    },
-    [integrations, integrationDiagrams, integrationGrist, t, showToast]
+    [integrations, integrationDiagrams, integrationGrist, t]
  );

  return (
--- a/app/scenes/Settings/components/ApiKeyListItem.tsx
+++ b/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
--- a/app/scenes/Settings/components/DomainManagement.tsx
+++ b/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);
--- a/app/scenes/Settings/components/DropToImport.tsx
+++ b/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;
--- a/app/scenes/Settings/components/FileOperationListItem.tsx
+++ b/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({