Move toasts to sonner (#6053)

app/scenes/GroupMembers/AddPeopleToGroup.tsx

@@ -2,9 +2,12 @@ import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import Group from "~/models/Group";
 import User from "~/models/User";
 import Invite from "~/scenes/Invite";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import ButtonLink from "~/components/ButtonLink";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
@@ -24,7 +27,7 @@ type Props = {
 function AddPeopleToGroup(props: Props) {
   const { group } = props;
 
-  const { users, auth, groupMemberships, toasts } = useStores();
+  const { users, auth, groupMemberships } = useStores();
   const { t } = useTranslation();
 
   const [query, setQuery] = React.useState("");
@@ -53,18 +56,16 @@ function AddPeopleToGroup(props: Props) {
         userId: user.id,
       });
 
-      toasts.showToast(
+      toast.success(
         t(`{{userName}} was added to the group`, {
           userName: user.name,
         }),
         {
-          type: "success",
+          icon: <Avatar model={user} size={AvatarSize.Toast} />,
         }
       );
     } catch (err) {
-      toasts.showToast(t("Could not add user"), {
-        type: "error",
-      });
+      toast.error(t("Could not add user"));
     }
   };
 

app/scenes/GroupMembers/GroupMembers.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import Group from "~/models/Group";
 import User from "~/models/User";
 import Button from "~/components/Button";
@@ -13,7 +14,6 @@ import Subheading from "~/components/Subheading";
 import Text from "~/components/Text";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import AddPeopleToGroup from "./AddPeopleToGroup";
 import GroupMemberListItem from "./components/GroupMemberListItem";
 
@@ -24,7 +24,6 @@ type Props = {
 function GroupMembers({ group }: Props) {
   const [addModalOpen, setAddModalOpen] = React.useState(false);
   const { users, groupMemberships } = useStores();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const can = usePolicy(group);
 
@@ -38,18 +37,13 @@ function GroupMembers({ group }: Props) {
         groupId: group.id,
         userId: user.id,
       });
-      showToast(
+      toast.success(
         t(`{{userName}} was removed from the group`, {
           userName: user.name,
-        }),
-        {
-          type: "success",
-        }
+        })
       );
     } catch (err) {
-      showToast(t("Could not remove user"), {
-        type: "error",
-      });
+      toast.error(t("Could not remove user"));
     }
   };