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

app/layouts/news/dialog-login.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -25,7 +26,6 @@ export const DialogLogin = () => {
     isLoginOpen,
   } = useNewsContext()
   const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
 
   const formMethods = useRemixForm<TLoginSchema>({
     mode: 'onSubmit',
@@ -37,11 +37,10 @@ export const DialogLogin = () => {
 
   useEffect(() => {
     if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+      toast.error(fetcher.data?.message)
       return
     }
 
-    setError(undefined)
     setIsLoginOpen(false)
 
     if (fetcher.data?.user.subscribe?.subscribe_plan?.code === 'basic') {
@@ -84,10 +83,6 @@ export const DialogLogin = () => {
                 type="password"
               />
 
-              {error && (
-                <div className="text-sm text-red-500 capitalize">{error}</div>
-              )}
-
               <div className="flex items-center justify-between text-sm">
                 <span className="text-gray-600">Lupa Kata Sandi?</span>
                 <Button