refactor: ♻️ Toast component

apps/builder/components/share/customDomain/CustomDomainModal.tsx

@@ -12,10 +12,10 @@ import {
   Alert,
   ModalFooter,
   Button,
-  useToast,
   Text,
   Tooltip,
 } from '@chakra-ui/react'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useEffect, useRef, useState } from 'react'
 import { createCustomDomain } from 'services/user'
 import { isEmpty } from 'utils'
@@ -46,11 +46,7 @@ export const CustomDomainModal = ({
     subdomain: splitHostname(domain)?.subdomain ?? '',
   })
 
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-    description: 'An error occured',
-  })
+  const { showToast } = useToast()
 
   useEffect(() => {
     if (inputValue === '' || !isOpen) return
@@ -72,7 +68,8 @@ export const CustomDomainModal = ({
       name: inputValue,
     })
     setIsLoading(false)
-    if (error) return toast({ title: error.name, description: error.message })
+    if (error)
+      return showToast({ title: error.name, description: error.message })
     onNewDomain(inputValue)
     onClose()
   }

apps/builder/components/share/customDomain/CustomDomainsDropdown.tsx

@@ -9,13 +9,13 @@ import {
   Stack,
   Text,
   useDisclosure,
-  useToast,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon, PlusIcon, TrashIcon } from 'assets/icons'
 import React, { useState } from 'react'
 import { CustomDomainModal } from './CustomDomainModal'
 import { deleteCustomDomain, useCustomDomains } from 'services/user'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = Omit<MenuButtonProps, 'type'> & {
   currentCustomDomain?: string
@@ -30,14 +30,11 @@ export const CustomDomainsDropdown = ({
   const [isDeleting, setIsDeleting] = useState('')
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { workspace } = useWorkspace()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
   const { customDomains, mutate } = useCustomDomains({
     workspaceId: workspace?.id,
     onError: (error) =>
-      toast({ title: error.name, description: error.message }),
+      showToast({ title: error.name, description: error.message }),
   })
 
   const handleMenuItemClick = (customDomain: string) => () =>
@@ -50,7 +47,8 @@ export const CustomDomainsDropdown = ({
       setIsDeleting(domainName)
       const { error } = await deleteCustomDomain(workspace.id, domainName)
       setIsDeleting('')
-      if (error) return toast({ title: error.name, description: error.message })
+      if (error)
+        return showToast({ title: error.name, description: error.message })
       mutate({
         customDomains: (customDomains ?? []).filter(
           (cd) => cd.name !== domainName