Move toasts to sonner (#6053)

app/hooks/useImportDocument.ts

@@ -2,8 +2,8 @@ import invariant from "invariant";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { documentPath } from "~/utils/routeHelpers";
 
 let importingLock = false;
@@ -16,7 +16,6 @@ export default function useImportDocument(
   isImporting: boolean;
 } {
   const { documents } = useStores();
-  const { showToast } = useToasts();
   const [isImporting, setImporting] = React.useState(false);
   const { t } = useTranslation();
   const history = useHistory();
@@ -55,15 +54,13 @@ export default function useImportDocument(
           }
         }
       } catch (err) {
-        showToast(`${t("Could not import file")}. ${err.message}`, {
-          type: "error",
-        });
+        toast.error(`${t("Could not import file")}. ${err.message}`);
       } finally {
         setImporting(false);
         importingLock = false;
       }
     },
-    [t, documents, history, showToast, collectionId, documentId]
+    [t, documents, history, collectionId, documentId]
   );
 
   return {

app/hooks/useQueryNotices.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { QueryNotices } from "@shared/types";
 import useQuery from "./useQuery";
-import useToasts from "./useToasts";
 
 /**
  * Display a toast message based on a notice in the query string. This is usually
@@ -12,13 +12,12 @@ import useToasts from "./useToasts";
 export default function useQueryNotices() {
   const query = useQuery();
   const { t } = useTranslation();
-  const { showToast } = useToasts();
   const notice = query.get("notice") as QueryNotices;
 
   React.useEffect(() => {
     switch (notice) {
       case QueryNotices.UnsubscribeDocument: {
-        showToast(
+        toast.success(
           t("Unsubscribed from document", {
             type: "success",
           })
@@ -27,5 +26,5 @@ export default function useQueryNotices() {
       }
       default:
     }
-  }, [t, showToast, notice]);
+  }, [t, notice]);
 }

app/hooks/useToasts.ts

@@ -1,9 +0,0 @@
-import useStores from "./useStores";
-
-export default function useToasts() {
-  const { toasts } = useStores();
-  return {
-    showToast: toasts.showToast,
-    hideToast: toasts.hideToast,
-  };
-}