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

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'}

app/layouts/news/dialog-subscribe-plan.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, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -30,7 +31,6 @@ export const DialogSubscribePlan = () => {
   const { setIsSubscribeOpen, setIsSuccessOpen, isSubscribeOpen } =
     useNewsContext()
   const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscribePlanData: subscribePlan } = loaderData || {}
 
@@ -44,11 +44,10 @@ export const DialogSubscribePlan = () => {
 
   useEffect(() => {
     if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+      toast.error(fetcher.data?.message)
       return
     }
 
-    setError(undefined)
     setIsSubscribeOpen(false)
     setIsSuccessOpen('payment')
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -80,10 +79,6 @@ export const DialogSubscribePlan = () => {
               options={subscribePlan}
             />
 
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-
             <Button
               isLoading={fetcher.state !== 'idle'}
               disabled={fetcher.state !== 'idle'}