refactor: ♻️ Toast component

apps/builder/components/templates/CreateNewTypebotButtons.tsx

@@ -1,12 +1,6 @@
-import {
-  VStack,
-  Heading,
-  Stack,
-  Button,
-  useDisclosure,
-  useToast,
-} from '@chakra-ui/react'
+import { VStack, Heading, Stack, Button, useDisclosure } from '@chakra-ui/react'
 import { ToolIcon, TemplateIcon, DownloadIcon } from 'assets/icons'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useUser } from 'contexts/UserContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Typebot } from 'models'
@@ -24,11 +18,7 @@ export const CreateNewTypebotButtons = () => {
 
   const [isLoading, setIsLoading] = useState(false)
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-    title: 'An error occured',
-  })
+  const { showToast } = useToast()
 
   const handleCreateSubmit = async (typebot?: Typebot) => {
     if (!user || !workspace) return
@@ -54,7 +44,7 @@ export const CreateNewTypebotButtons = () => {
           folderId,
           workspaceId: workspace.id,
         })
-    if (error) toast({ description: error.message })
+    if (error) showToast({ description: error.message })
     if (data)
       router.push({
         pathname: `/typebots/${data.id}/edit`,

apps/builder/components/templates/ImportTypebotFromFileButton.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonProps, chakra, useToast } from '@chakra-ui/react'
+import { Button, ButtonProps, chakra } from '@chakra-ui/react'
+import { useToast } from 'components/shared/hooks/useToast'
 import { Typebot } from 'models'
 import React, { ChangeEvent } from 'react'
 import { readFile } from 'services/utils'
@@ -11,10 +12,7 @@ export const ImportTypebotFromFileButton = ({
   onNewTypebot,
   ...props
 }: Props) => {
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const handleInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target?.files) return
@@ -24,7 +22,7 @@ export const ImportTypebotFromFileButton = ({
       onNewTypebot(JSON.parse(fileContent))
     } catch (err) {
       console.error(err)
-      toast({ description: 'Failed to parse the file' })
+      showToast({ description: 'Failed to parse the file' })
     }
   }
 

apps/builder/components/templates/TemplatesModal.tsx

@@ -10,10 +10,10 @@ import {
   ModalOverlay,
   Stack,
   Tooltip,
-  useToast,
 } from '@chakra-ui/react'
 import { ExternalLinkIcon } from 'assets/icons'
 import { TypebotViewer } from 'bot-engine'
+import { useToast } from 'components/shared/hooks/useToast'
 import { Typebot } from 'models'
 import React, { useEffect, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
@@ -33,10 +33,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
   )
   const [isLoading, setIsLoading] = useState(false)
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   useEffect(() => {
     fetchTemplate(templates[0])
@@ -46,7 +43,8 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
   const fetchTemplate = async (template: TemplateProps) => {
     setSelectedTemplate(template)
     const { data, error } = await sendRequest(`/templates/${template.fileName}`)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     setTypebot(data as Typebot)
   }