Merge pull request #196 from vigneshshettyin/sonner

sonner library added for toasting messages

app/app/(dashboard)/home/page.tsx

@@ -24,7 +24,7 @@ import { getTutorialStatus } from "@/lib/actions/getStatusAction";
 import { HTTP_STATUS } from "@/lib/constants";
 import { useRouter } from "next/navigation";
 import Loading from "./loading";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import encodeId from "@/lib/services/encodeId";
 
 export default function HomePage() {
@@ -111,10 +111,7 @@ export default function HomePage() {
                     router.push(`/app/links/${encodeId(linkId)}`)
                   }
                   else{
-                    toast({
-                      title:"Create a link",
-                      description:"Create atleast one link to continue"
-                    })
+                    toast.info("Create a link")
                     router.push('/app/links/create')
                   }
                 }} variant="outline" size="sm" className="text-sm mt-2">
@@ -199,10 +196,7 @@ export default function HomePage() {
                     router.push(`/app/links/${encodeId(linkId)}`)
                   }
                   else{
-                    toast({
-                      title:"Create a link",
-                      description:"Create atleast one link to continue"
-                    })
+                    toast.info("Create a link")
                     router.push('/app/links/create')
                   }
                 }} size="sm" className="py-3" variant="default">

app/app/(dashboard)/links/[id]/page.tsx

@@ -28,9 +28,8 @@ import { LinkType, linkType } from "@/interfaces/types";
 import { useEffect, useState } from "react";
 import { getAnalyticsAction } from "@/lib/actions/getAnalyticsAction";
 import { getLinkDetails } from "@/lib/actions/getLinksAction";
-import AuthenticatingComponent from "@/components/LoadingComponents/AuthenticatingComponent";
 import { HTTP_STATUS } from "@/lib/constants";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import { LinkPageLoading } from "@/components/LoadingComponents/LinkPageLoading";
 import { NoDataLoading } from "@/components/LoadingComponents/NoDataLoading";
@@ -116,9 +115,7 @@ export default function Page({
     setLoading(true);
     getLinkDetails(decodeId(params.id).toString()).then((res) => {
       if (res.status == HTTP_STATUS.NOT_FOUND) {
-        toast({
-          title: "Link not found",
-        });
+        toast.error("Link not found");
         router.push("/app/links");
         return;
       }

app/app/(dashboard)/links/create/page.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { createLinkAction } from "@/lib/actions/createLinkAction";
 import { HTTP_STATUS } from "@/lib/constants";
 import encodeId from "@/lib/services/encodeId";
@@ -26,36 +26,19 @@ export default function CreatePage() {
 
             createLinkAction(e).then((res) => {
               if (res.status == HTTP_STATUS.CREATED) {
-                toast({
-                  title: "Link shortened successfully !!",
-                });
+                toast.success("Link shortened successfully !!");
 
               router.push(`/app/links/${encodeId(res.linkId as number)}`)
               } else if(res.status == HTTP_STATUS.NOT_ACCEPTABLE){
-                  toast({
-                    title: "This url cannot be shortened",
-                    variant: "destructive"
-                  })
+                  toast.error("This url cannot be shortened")
               } 
               else if (res.status == HTTP_STATUS.BAD_REQUEST) {
-                toast({
-                  title: "Invalid Inputs !!",
-                  description: "Please try again",
-                  variant: "destructive",
-                });
+                toast.error("Invalid Inputs !!");
               }else if (res.status == HTTP_STATUS.CONFLICT) {
-                toast({
-                  title: "The short code has already been in use",
-                  description:"Please try different shortcode",
-                  variant:"destructive"
-                })
+                toast.error("The short code has already been in use")
               }
               else{
-                toast({
-                  title: "Error while shortening the link",
-                  description: "Please try again",
-                  variant: "destructive",
-                });
+                toast.error("Error while shortening the link");
               }
               setLongurl("");
               setTitle("");

app/app/(dashboard)/links/page.tsx

@@ -17,7 +17,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { pageOrder, paginateOperation } from "@/lib/constants";
 import { EmptyLoading } from "@/components/LoadingComponents/EmptyLoading";
 
@@ -52,10 +52,7 @@ export default function Page() {
       (paginator.pageActive + paginator.value + 1 > totalPages &&
         action == paginateOperation.NEXT)
     ) {
-      toast({
-        title: "End of the links",
-        description: "That's all we have",
-      });
+      toast.info("End of the links");
       return;
     }
 

app/app/(dashboard)/qrcodes/page.tsx

@@ -7,7 +7,7 @@ import { Label } from "@radix-ui/react-label";
 import { useEffect, useRef, useState } from "react";
 import Loading from "./loading";
 import { pageOrder, paginateOperation } from "@/lib/constants";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import {
   Pagination,
   PaginationContent,
@@ -36,10 +36,7 @@ export default function QRCodePage() {
       (paginator.pageActive + paginator.value + 1 > totalPages &&
         action == paginateOperation.NEXT)
     ) {
-      toast({
-        title: "End of the links",
-        description: "That's all we have",
-      });
+      toast.info("End of the links");
       return;
     }
 

app/app/(dashboard)/settings/page.tsx

@@ -5,7 +5,7 @@ import { LoadingSpinner } from "@/components/LoadingComponents/LoadingSpinner";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { getUserDetails, updateUser } from "@/lib/actions/updateUserAction";
 import { HTTP_STATUS } from "@/lib/constants";
 import { Label } from "@radix-ui/react-label";
@@ -35,10 +35,7 @@ export default function SettingsPage(){
         const formdata = new FormData();
 
         if(!name || !confPass){
-            toast({
-                title:"Invalid Inputs",
-                description: "Name or password fields cannot be empty"
-            })
+            toast.error("Invalid Inputs")
             return;
         }
 
@@ -49,26 +46,14 @@ export default function SettingsPage(){
         const res = await updateUser(formdata);
 
         if(res.status == HTTP_STATUS.OK){
-            toast({
-                title: "User updated successfully"
-            })
+            toast.success("User updated successfully")
         } else if(res.status == HTTP_STATUS.BAD_REQUEST){
-            toast({
-                title: "Incorrect password",
-                variant: "destructive"
-            })
+            toast.error("Incorrect password")
         } 
         else if(res.status == HTTP_STATUS.NOT_ACCEPTABLE){
-            toast({
-                title: "Invalid Inputs",
-                description: "Password must contain atleast 6 characters",
-                variant: "destructive"
-            })
+            toast.error("Password must contain atleast 6 characters")
         } else{
-            toast({
-                title: "Error while updating the user",
-                variant: "destructive"
-            })
+            toast.error("Error while updating the user")
         }
         setUpdateLoading(false)
         setConfPass("")

app/app/login/page.tsx

@@ -14,7 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { signIn, useSession } from "next-auth/react";
 import { useState } from "react";
-import { useToast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import { SkeletonCard } from "@/components/CardComponents/SkeletonCard";
 import { Turnstile } from '@marsidev/react-turnstile'
@@ -24,7 +24,6 @@ import { LoadingSpinner } from "@/components/LoadingComponents/LoadingSpinner";
 const LoginPage = () => {
   const [email, setEmail] = useState("");
   const [pass, setPass] = useState("");
-  const { toast } = useToast();
   const router = useRouter();
   const [loading, setLoading] = useState(true);
   const [token,setToken] = useState<string>("")
@@ -36,7 +35,7 @@ const LoginPage = () => {
   useEffect(() => {
     if (data) {
       router.push("/app/home");
-      toast({ title: "Welcome back!" });
+      toast.success("Welcome back!");
     }
   }, [data, router, toast]);
 
@@ -89,11 +88,7 @@ const LoginPage = () => {
                 const verify = await captchaVerify(token);
 
                 if(verify == 403){
-                    toast({
-                      title:"Captcha invalid",
-                      description: "Please try again",
-                      variant:"destructive"
-                    })
+                    toast.error("Captcha invalid!! Refresh the page")
                     return;
                 }
 
@@ -105,15 +100,10 @@ const LoginPage = () => {
                 });
                 setConfirmLoading(false);
                 if (res.status == 200) {
-                  toast({
-                    title: "User logged in successfully !!",
-                  });
+                  toast.success( "User logged in successfully !!");
                   router.push("/app/home");
                 } else {
-                  toast({
-                    title: "Wrong credentials !!",
-                    variant: "destructive",
-                  });
+                  toast.error("Wrong credentials !!");
                 }
               }}
             >

app/app/register/page.tsx

@@ -13,7 +13,7 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import register from "@/lib/actions/register";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner";
 import { redirect } from "next/navigation";
 import { useSession } from "next-auth/react";
 import { SkeletonCard } from "@/components/CardComponents/SkeletonCard";
@@ -38,45 +38,25 @@ const RegisterPage = () => {
 
     const verify = await captchaVerify(token);
     if(verify == 403){
-        toast({
-          title:"Invalid Captcha",
-          description: "Please try again",
-          variant:"destructive"
-        })
+        toast.error("Invalid Captcha !! Refresh the page")
         return;
     }
 
     const status:number = await register(formData);
 
     if (status == HTTP_STATUS.OK) {
-      toast({
-        title: "User registered successfully !!",
-        description: "Please login to continue",
-      });
+      toast.success("User registered successfully !!");
       redirect("/app/login");
     } else if ( status == HTTP_STATUS.BAD_REQUEST){
-      toast({
-        title: "Invalid Inputs !!",
-        description: "Enter valid email / Password should contains atleast 6 characters",
-        variant:"destructive"
-      });
+      toast.error("Enter valid email / Password should contains atleast 6 characters");
     } 
     else if ( status == HTTP_STATUS.NOT_FOUND){
-      toast({
-        title: "Please enter all fields",
-        variant:"destructive"
-      });
+      toast.info("Please enter all fields");
     } 
     else if (status == HTTP_STATUS.UNAUTHORIZED) {
-      toast({
-        title: "User already exists !!",
-        variant: "destructive",
-      });
+      toast.error("User already exists !!");
     } else {
-      toast({
-        title: "Error while user registration !!",
-        variant: "destructive",
-      });
+      toast.error("Error while user registration !!");
     }
 
     setConfirmLoading(false)
@@ -86,7 +66,7 @@ const RegisterPage = () => {
   useEffect(() => {
     setLoading(false)
     if (data) {
-      toast({ title: "User already logged in" });
+      toast.success("User already logged in" );
       redirect("/app/home");
     }
   }, [data]);

app/layout.tsx

@@ -1,6 +1,6 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { Toaster } from "@/components/ui/toaster";
+import { Toaster } from "@/components/ui/sonner";
 import { Appbar } from "@/components/NavigationBars/Appbar";
 import type { Metadata } from "next";
 import { Providers } from "./providers";

app/page.tsx

@@ -9,7 +9,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Analytics } from "@vercel/analytics/react";
 import Script from "next/script";
 import createPublicUrl from "@/lib/actions/createPublicUrl";
-import { toast } from "@/components/ui/use-toast";
+import { toast } from "sonner"
 import { useEffect, useState } from "react";
 import { publicLinkType } from "@/interfaces/types";
 import parsePublicRecords from "@/lib/actions/parsePublicRecords";
@@ -49,24 +49,15 @@ export default function Home() {
     const response = await createPublicUrl(form);
 
     if (response.status == HTTP_STATUS.BAD_REQUEST) {
-      toast({
-        title: "URL is not valid",
-        variant: "destructive",
-      });
+      toast.error("URL is not valid");
       setLongurlInput("");
       return;
     } else if (response.status == HTTP_STATUS.INTERNAL_SERVER_ERROR) {
-      toast({
-        title: "Error while shortening the link",
-        variant: "destructive",
-      });
+      toast.error("Error while shortening the link");
       return;
     }
 
-    toast({
-      title: "Short link generated successfully!!",
-      description: "The link is valid only for 2hrs!!",
-    });
+    toast.success("Short link generated successfully!!");
     setLongurlInput("");
     updateLocalStorage({
       shortUrl: response.shortUrl as string,

components/Auth/WithAuth.tsx

@@ -2,7 +2,7 @@
 import { useSession } from "next-auth/react"
 import { redirect } from "next/navigation";
 import { useEffect, useState } from "react";
-import { toast } from "../ui/use-toast";
+import { toast } from "sonner";
 import AuthenticatingComponent from "../LoadingComponents/AuthenticatingComponent";
 import { LinkLoading } from "../LoadingComponents/LinkLoading";
 
@@ -15,11 +15,7 @@ export default function WithAuth(Component : any){
         useEffect(()=>{
             if(status!='loading' && !show) setShow(true)
             if(status == 'unauthenticated'){
-                toast({
-                    title: 'You are not authenticated',
-                    description: 'You need to be authenticated to access this page',
-                    variant: 'destructive',
-                })
+                toast.error('You are not authenticated')
                 redirect('/app/login')
             }
         },[status])