refactor: ♻️ Toast component

apps/builder/components/dashboard/FolderContent.tsx

@@ -7,7 +7,6 @@ import {
   Skeleton,
   Stack,
   useEventListener,
-  useToast,
   Wrap,
 } from '@chakra-ui/react'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
@@ -27,6 +26,7 @@ import { TypebotButton } from './FolderContent/TypebotButton'
 import { TypebotCardOverlay } from './FolderContent/TypebotButtonOverlay'
 import { OnboardingModal } from './OnboardingModal'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = { folder: DashboardFolder | null }
 
@@ -51,10 +51,7 @@ export const FolderContent = ({ folder }: Props) => {
   const [typebotDragCandidate, setTypebotDragCandidate] =
     useState<TypebotInDashboard>()
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const {
     folders,
@@ -64,7 +61,7 @@ export const FolderContent = ({ folder }: Props) => {
     workspaceId: workspace?.id,
     parentId: folder?.id,
     onError: (error) => {
-      toast({ title: "Couldn't fetch folders", description: error.message })
+      showToast({ title: "Couldn't fetch folders", description: error.message })
     },
   })
 
@@ -76,7 +73,10 @@ export const FolderContent = ({ folder }: Props) => {
     workspaceId: workspace?.id,
     folderId: folder?.id,
     onError: (error) => {
-      toast({ title: "Couldn't fetch typebots", description: error.message })
+      showToast({
+        title: "Couldn't fetch typebots",
+        description: error.message,
+      })
     },
   })
 
@@ -85,7 +85,7 @@ export const FolderContent = ({ folder }: Props) => {
     const { error } = await patchTypebot(typebotId, {
       folderId: folderId === 'root' ? null : folderId,
     })
-    if (error) toast({ description: error.message })
+    if (error) showToast({ description: error.message })
     mutateTypebots({ typebots: typebots.filter((t) => t.id !== typebotId) })
   }
 
@@ -97,7 +97,10 @@ export const FolderContent = ({ folder }: Props) => {
     })
     setIsCreatingFolder(false)
     if (error)
-      return toast({ title: 'An error occured', description: error.message })
+      return showToast({
+        title: 'An error occured',
+        description: error.message,
+      })
     if (newFolder) mutateFolders({ folders: [...folders, newFolder] })
   }
 

apps/builder/components/dashboard/FolderContent/FolderButton.tsx

@@ -12,7 +12,6 @@ import {
   Menu,
   MenuButton,
   MenuList,
-  useToast,
   SkeletonText,
   SkeletonCircle,
   WrapItem,
@@ -23,6 +22,7 @@ import { useTypebotDnd } from 'contexts/TypebotDndContext'
 import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
 import { deleteFolder, updateFolder } from 'services/folders'
+import { useToast } from 'components/shared/hooks/useToast'
 
 export const FolderButton = ({
   folder,
@@ -41,15 +41,12 @@ export const FolderButton = ({
     [draggedTypebot, folder.id, mouseOverFolderId]
   )
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const onDeleteClick = async () => {
     const { error } = await deleteFolder(folder.id)
     return error
-      ? toast({
+      ? showToast({
           title: "Couldn't delete the folder",
           description: error.message,
         })
@@ -60,7 +57,7 @@ export const FolderButton = ({
     if (newName === '' || newName === folder.name) return
     const { error } = await updateFolder(folder.id, { name: newName })
     return error
-      ? toast({ title: 'An error occured', description: error.message })
+      ? showToast({ title: 'An error occured', description: error.message })
       : onFolderRenamed(newName)
   }
 

apps/builder/components/dashboard/FolderContent/TypebotButton.tsx

@@ -7,7 +7,6 @@ import {
   Tag,
   Text,
   useDisclosure,
-  useToast,
   VStack,
   WrapItem,
 } from '@chakra-ui/react'
@@ -23,6 +22,7 @@ import { useDebounce } from 'use-debounce'
 import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
 import { Plan } from 'db'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type ChatbotCardProps = {
   typebot: Pick<Typebot, 'id' | 'publishedTypebotId' | 'name' | 'icon'>
@@ -47,10 +47,7 @@ export const TypebotButton = ({
     onClose: onDeleteClose,
   } = useDisclosure()
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const handleTypebotClick = () => {
     if (draggedTypebotDebounced) return
@@ -65,7 +62,7 @@ export const TypebotButton = ({
     if (isReadOnly) return
     const { error } = await deleteTypebot(typebot.id)
     if (error)
-      return toast({
+      return showToast({
         title: "Couldn't delete typebot",
         description: error.message,
       })
@@ -82,7 +79,7 @@ export const TypebotButton = ({
       workspace?.plan ?? Plan.FREE
     )
     if (error)
-      return toast({
+      return showToast({
         title: "Couldn't duplicate typebot",
         description: error.message,
       })

apps/builder/components/dashboard/OnboardingModal.tsx

@@ -5,7 +5,6 @@ import {
   ModalContent,
   ModalOverlay,
   useDisclosure,
-  useToast,
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
 import { useUser } from 'contexts/UserContext'
@@ -14,6 +13,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 import { sendRequest } from 'utils'
 import confetti from 'canvas-confetti'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = { totalTypebots: number }
 
@@ -26,10 +26,7 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
   const [chosenCategories, setChosenCategories] = useState<string[]>([])
   const [openedOnce, setOpenedOnce] = useState(false)
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   useEffect(() => {
     fetchTemplate()
@@ -77,7 +74,8 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
 
   const fetchTemplate = async () => {
     const { data, error } = await sendRequest(`/bots/onboarding.json`)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     setTypebot(data as Typebot)
   }