Merge pull request #350 from captableinc/fix/replace-toast

feat: replace shadcn/toast with sonner
captableinc · May 22, 2024 · 6b27c00 · 6b27c00
2 parents c207c50 + cea52d4
commit 6b27c00
Show file tree

Hide file tree

Showing 41 changed files with 275 additions and 1,532 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "build": "next build",
     "start": "next start",
     "postinstall": "prisma generate",
-    "prepare": "husky install",
+    "prepare": "husky",
     "lint": "biome check --apply ./src",
     "email:dev": "mailpit",
     "format": "biome format --write ./src && prisma format",
@@ -50,7 +50,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@react-pdf/renderer": "^3.4.4",
     "@remixicon/react": "^4.0.1",
@@ -98,6 +97,7 @@
     "react-pdf": "^8.0.2",
     "server-only": "^0.0.1",
     "sharp": "^0.33.3",
+    "sonner": "^1.4.41",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/documents/components/table.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/documents/components/table.tsx
@@ -6,9 +6,7 @@ import { Card } from "@/components/ui/card";
 import { getPresignedGetUrl } from "@/server/file-uploads";
 import { RiMoreLine } from "@remixicon/react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
 
-import DocumentShareModal from "@/components/documents/share/document-share-modal";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,7 +23,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { type RouterOutputs } from "@/trpc/shared";
+import type { RouterOutputs } from "@/trpc/shared";
 
 type DocumentType = RouterOutputs["document"]["getAll"];
 
@@ -41,11 +39,6 @@ const DocumentsTable = ({ documents, companyPublicId }: DocumentTableProps) => {
     window.open(fileUrl.url, "_blank");
   };
 
-  const [openShareModal, setOpenShareModal] = useState(false);
-  const [selectedDocumentId, setSelectedDocumentId] = useState<string | null>(
-    null,
-  );
-
   return (
     <>
       <Card>
@@ -56,7 +49,7 @@ const DocumentsTable = ({ documents, companyPublicId }: DocumentTableProps) => {
               {/* <TableHead>Type</TableHead> */}
               <TableHead>Owner</TableHead>
               <TableHead>Uploaded</TableHead>
-              <TableHead></TableHead>
+              <TableHead />
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -137,14 +130,6 @@ const DocumentsTable = ({ documents, companyPublicId }: DocumentTableProps) => {
           </TableBody>
         </Table>
       </Card>
-
-      <DocumentShareModal
-        title="Share document"
-        subtitle="Create a link to share this document."
-        open={openShareModal}
-        setOpen={setOpenShareModal}
-        documentId={selectedDocumentId}
-      />
     </>
   );
 };

diff --git a/...authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-files.tsx b/...authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-files.tsx
@@ -7,9 +7,9 @@ import ShareModal, {
 import DataRoomFileExplorer from "@/components/documents/data-room/explorer";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { useToast } from "@/components/ui/use-toast";
 import type { ShareContactType, ShareRecipientType } from "@/schema/contacts";
 import { api } from "@/trpc/react";
+import { toast } from "sonner";
 
 import type { Bucket, DataRoom } from "@prisma/client";
 import { RiShareLine } from "@remixicon/react";
@@ -25,15 +25,6 @@ import { env } from "next-runtime-env";
 import Link from "next/link";
 import DataRoomUploader from "./data-room-uploader";
 
-interface DataRoomType extends DataRoom {
-  documents: {
-    id: string;
-    name: string;
-    url: string;
-    createdAt: Date;
-  }[];
-}
-
 type DataRoomFilesProps = {
   dataRoom: DataRoom;
   documents: Bucket[];
@@ -50,26 +41,17 @@ const DataRoomFiles = ({
   companyPublicId,
 }: DataRoomFilesProps) => {
   const router = useRouter();
-  const { toast } = useToast();
-  const baseUrl = env("NEXT_PUBLIC_BASE_URL")!;
+  const baseUrl = env("NEXT_PUBLIC_BASE_URL");
   const { mutateAsync: saveDataRoomMutation } = api.dataRoom.save.useMutation();
   const { mutateAsync: shareDataRoomMutation } = api.dataRoom.share.useMutation(
     {
       onSuccess: () => {
         router.refresh();
-
-        toast({
-          title: "✨ Complete",
-          description: "Data room successfully shared.",
-        });
+        toast.success("Data room successfully shared.");
       },
 
       onError: (error) => {
-        toast({
-          title: error.message,
-          description: "",
-          variant: "destructive",
-        });
+        toast.error(error.message);
       },
     },
   );
@@ -78,19 +60,11 @@ const DataRoomFiles = ({
     api.dataRoom.unShare.useMutation({
       onSuccess: () => {
         router.refresh();
-
-        toast({
-          title: "✨ Complete",
-          description: "Successfully removed access to data room.",
-        });
+        toast.success("Successfully removed access to data room.");
       },
 
       onError: (error) => {
-        toast({
-          title: error.message,
-          description: "",
-          variant: "destructive",
-        });
+        toast.error(error.message);
       },
     });
 

diff --git a/...thenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-popover.tsx b/...thenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-popover.tsx
@@ -9,20 +9,19 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/trpc/react";
 import { RiArrowRightLine as ArrowRightIcon } from "@remixicon/react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { toast } from "sonner";
 
 type DataRoomPopoverType = {
   trigger: React.ReactNode;
 };
 
 const DataRoomPopover = ({ trigger }: DataRoomPopoverType) => {
   const router = useRouter();
-  const { toast } = useToast();
   const { data } = useSession();
   const [name, setName] = useState("");
   const [loading, setLoading] = useState(false);
@@ -35,19 +34,11 @@ const DataRoomPopover = ({ trigger }: DataRoomPopoverType) => {
           `/${companyPublicId}/documents/data-rooms/${response.data?.publicId}`,
         );
       } else {
-        toast({
-          variant: "destructive",
-          title: response.message,
-          description: "",
-        });
+        toast.success(response.message);
       }
     },
     onError: (error) => {
-      toast({
-        variant: "destructive",
-        title: error.message,
-        description: "",
-      });
+      toast.error(error.message);
     },
 
     onSettled: () => {

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/form.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/form.tsx
@@ -3,12 +3,12 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/trpc/react";
-import { type ShareClassMutationType } from "@/trpc/routers/share-class/schema";
+import type { ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 
 import {
   EquityPlanMutationSchema,
@@ -60,23 +60,19 @@ const EquityPlanForm = ({
   },
 }: EquityFormType) => {
   const router = useRouter();
-  const { toast } = useToast();
-
   const form = useForm<EquityPlanMutationType>({
     resolver: zodResolver(formSchema),
     defaultValues: equityPlan,
   });
 
   const isSubmitting = form.formState.isSubmitting;
   const createMutation = api.equityPlan.create.useMutation({
-    onSuccess: async ({ success, message }) => {
-      toast({
-        variant: success ? "default" : "destructive",
-        title: success
-          ? "🎉 Successfully created"
-          : "Uh oh! Something went wrong.",
-        description: message,
-      });
+    onSuccess: ({ success, message }) => {
+      if (success) {
+        toast.success(message);
+      } else {
+        toast.error(message);
+      }
 
       form.reset();
       setOpen(false);
@@ -85,14 +81,12 @@ const EquityPlanForm = ({
   });
 
   const updateMutation = api.equityPlan.update.useMutation({
-    onSuccess: async ({ success, message }) => {
-      toast({
-        variant: success ? "default" : "destructive",
-        title: success
-          ? "🎉 Successfully updated"
-          : "Uh oh! Something went wrong.",
-        description: message,
-      });
+    onSuccess: ({ success, message }) => {
+      if (success) {
+        toast.success(message);
+      } else {
+        toast.error(message);
+      }
 
       form.reset();
       setOpen(false);
@@ -225,7 +219,7 @@ const EquityPlanForm = ({
                         {shareClasses.map((shareClass) => (
                           <SelectItem
                             key={shareClass.id}
-                            value={shareClass.id!}
+                            value={shareClass.id as string}
                           >
                             {shareClass.name}
                           </SelectItem>