From 0f5c25f546ef641089aa1aefd6ed555e87381cce Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Thu, 31 Oct 2024 08:31:32 -0300
Subject: [PATCH] feat: handle authentication error on sign in screen

---
 src/screens/SignIn.tsx | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/screens/SignIn.tsx b/src/screens/SignIn.tsx
index f2a4028..1140bc7 100644
--- a/src/screens/SignIn.tsx
+++ b/src/screens/SignIn.tsx
@@ -1,4 +1,4 @@
-import { Center, Heading, Image, ScrollView, Text, VStack } from '@gluestack-ui/themed';
+import { Center, Heading, Image, ScrollView, Text, useToast, VStack } from '@gluestack-ui/themed';
 import { useNavigation } from '@react-navigation/native';
 import { Controller, useForm } from 'react-hook-form';
 
@@ -6,10 +6,12 @@ import BackgroundImg from '@assets/background.png';
 import Logo from '@assets/logo.svg';
 
 import { useAuth } from '@hooks/useAuth';
-
-import { Input } from '@components/Input';
-import { Button } from '@components/Button';
 import { AuthNavigatorRoutesProps } from '@routes/auth.routes';
+import { AppError } from '@utils/AppError';
+
+import { Button } from '@components/Button';
+import { Input } from '@components/Input';
+import { ToastMessage } from '@components/ToastMessage';
 
 type FormData = {
   email: string;
@@ -18,7 +20,7 @@ type FormData = {
 
 export function SignIn() {
   const { signIn } = useAuth();
-
+  const toast = useToast();
   const navigation = useNavigation<AuthNavigatorRoutesProps>();
   const {
     control,
@@ -31,7 +33,21 @@ export function SignIn() {
   }
 
   async function handleSignIn({ email, password }: FormData) {
-    await signIn(email, password);
+    try {
+      await signIn(email, password);
+      console.log('User signed in successfully.');
+    } catch (error) {
+      const isAppError = error instanceof AppError;
+      const title = isAppError
+        ? error.message
+        : 'Não foi possível entrar. Tente novamente mais tarde.';
+      toast.show({
+        placement: 'top',
+        render: ({ id }) => (
+          <ToastMessage id={id} title={title} action="error" onClose={() => toast.close(id)} />
+        ),
+      });
+    }
   }
 
   return (