refactor: ♻️ Toast component

baptisteArno · Jun 2, 2022 · 12f2e40 · 12f2e40
1 parent 43fb8a7
commit 12f2e40
Show file tree

Hide file tree

Showing 26 changed files with 148 additions and 177 deletions.
diff --git a/apps/builder/components/auth/SignInForm.tsx b/apps/builder/components/auth/SignInForm.tsx
@@ -4,7 +4,6 @@ import {
   Input,
   Stack,
   HStack,
-  useToast,
   Text,
 } from '@chakra-ui/react'
 import React, { ChangeEvent, FormEvent, useEffect } from 'react'
@@ -21,6 +20,7 @@ import { SocialLoginButtons } from './SocialLoginButtons'
 import { useRouter } from 'next/router'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { BuiltInProviderType } from 'next-auth/providers'
+import { useToast } from 'components/shared/hooks/useToast'
 
 type Props = {
   defaultEmail?: string
@@ -34,9 +34,7 @@ export const SignInForm = ({
   const [isLoadingProviders, setIsLoadingProviders] = useState(true)
 
   const [emailValue, setEmailValue] = useState(defaultEmail ?? '')
-  const toast = useToast({
-    position: 'top-right',
-  })
+  const { showToast } = useToast()
   const [providers, setProviders] =
     useState<
       Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>
@@ -65,7 +63,7 @@ export const SignInForm = ({
       email: emailValue,
       redirect: false,
     })
-    toast({
+    showToast({
       status: 'success',
       title: 'Success!',
       description: 'Check your inbox to sign in',

diff --git a/apps/builder/components/dashboard/FolderContent.tsx b/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] })
   }
 

diff --git a/apps/builder/components/dashboard/FolderContent/FolderButton.tsx b/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)
   }
 

diff --git a/apps/builder/components/dashboard/FolderContent/TypebotButton.tsx b/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,
       })

diff --git a/apps/builder/components/dashboard/OnboardingModal.tsx b/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)
   }
 

diff --git a/apps/builder/components/editor/preview/PreviewDrawer.tsx b/apps/builder/components/editor/preview/PreviewDrawer.tsx
@@ -6,11 +6,11 @@ import {
   Flex,
   FlexProps,
   useEventListener,
-  useToast,
   UseToastOptions,
   VStack,
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
+import { useToast } from 'components/shared/hooks/useToast'
 import { headerHeight } from 'components/shared/TypebotHeader'
 import { useEditor } from 'contexts/EditorContext'
 import { useGraph } from 'contexts/GraphContext'
@@ -33,9 +33,7 @@ export const PreviewDrawer = () => {
     [typebot]
   )
 
-  const toast = useToast({
-    position: 'top-right',
-  })
+  const { showToast } = useToast()
 
   const handleMouseDown = () => {
     setIsResizing(true)
@@ -60,7 +58,7 @@ export const PreviewDrawer = () => {
   }
 
   const handleNewLog = (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) =>
-    toast(log as UseToastOptions)
+    showToast(log as UseToastOptions)
 
   return (
     <Flex

diff --git a/apps/builder/components/share/ShareContent.tsx b/apps/builder/components/share/ShareContent.tsx
@@ -5,12 +5,12 @@ import {
   IconButton,
   Stack,
   Tag,
-  useToast,
   Wrap,
   Text,
 } from '@chakra-ui/react'
 import { TrashIcon } from 'assets/icons'
 import { UpgradeButton } from 'components/shared/buttons/UpgradeButton'
+import { useToast } from 'components/shared/hooks/useToast'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import React from 'react'
@@ -24,15 +24,12 @@ import { integrationsList } from './integrations/EmbedButton'
 export const ShareContent = () => {
   const { workspace } = useWorkspace()
   const { typebot, updateOnBothTypebots } = useTypebot()
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
+  const { showToast } = useToast()
 
   const handlePublicIdChange = (publicId: string) => {
     if (publicId === typebot?.publicId) return
     if (publicId.length < 4)
-      return toast({ description: 'ID must be longer than 4 characters' })
+      return showToast({ description: 'ID must be longer than 4 characters' })
     updateOnBothTypebots({ publicId })
   }
 

diff --git a/apps/builder/components/share/customDomain/CustomDomainModal.tsx b/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()
   }

diff --git a/apps/builder/components/share/customDomain/CustomDomainsDropdown.tsx b/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