feat: replace error state handling with toast in login, register, and subscribe dialogs

app/layouts/news/dialog-register.tsx

@@ -1,6 +1,7 @@
 import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -44,7 +45,6 @@ export const DialogRegister = () => {
     setIsSuccessOpen,
     isRegisterOpen,
   } = useNewsContext()
-  const [error, setError] = useState<string>()
   const fetcher = useFetcher()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscribePlanData: subscribePlan } = loaderData || {}
@@ -59,11 +59,10 @@ export const DialogRegister = () => {
 
   useEffect(() => {
     if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+      toast.error(fetcher.data?.message)
       return
     }
 
-    setError(undefined)
     setIsRegisterOpen(false)
     setIsSuccessOpen('register')
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -126,10 +125,6 @@ export const DialogRegister = () => {
                 options={subscribePlan}
               />
 
-              {error && (
-                <div className="text-sm text-red-500 capitalize">{error}</div>
-              )}
-
               <Button
                 isLoading={fetcher.state !== 'idle'}
                 disabled={fetcher.state !== 'idle'}