fix : display org login error with toast (#75)

- make sure that org login error is desplied using toast not with ApolloError
atlp-rwanda · Nov 1, 2024 · 6231c97 · 6231c97
1 parent 7ee04e6
commit 6231c97
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 20 deletions.
diff --git a/app/auth/login/index.tsx b/app/auth/login/index.tsx
@@ -4,8 +4,27 @@ import { LOGIN_MUTATION, ORG_LOGIN_MUTATION } from '@/graphql/mutations/login.mu
 import { ApolloError, useApolloClient, useMutation } from '@apollo/client';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Href, useLocalSearchParams, useRouter } from 'expo-router';
-import { useEffect, useState } from 'react';
+import { useEffect,useState } from 'react';
 import { useToast } from 'react-native-toast-notifications';
+import {ToastAndroid } from 'react-native';
+
+class ErrorHandler {
+  static handleNetworkError() {
+    ToastAndroid.show('There was a problem contacting the server', ToastAndroid.LONG);
+  }
+
+  static handleInvalidCredentials() {
+    ToastAndroid.show('Error Invalid credentials',ToastAndroid.LONG);
+  }
+
+  static handleCustomError(message: string | undefined) {
+    ToastAndroid.show('Error:' + message,ToastAndroid.LONG);
+  }
+
+  static handleGeneralError() {
+    ToastAndroid.show('Error An unexpected error occurred.',ToastAndroid.LONG);
+  }
+}
 
 export default function SignInOrganization() {
   const toast = useToast();
@@ -47,11 +66,13 @@ export default function SignInOrganization() {
           setOrgLoginSuccess(true);
         },
         onError(err: any) {
-          if (err instanceof ApolloError) {
-            toast.show(err.message, { type: 'danger' });
-          } else {
-            toast.show(err.message, { type: 'danger' });
-          }
+          toast.show(err.message,{
+            type: 'fail',
+            placement : 'top',
+            duration : 5000,
+            animationType : 'slide-in',
+            style: { backgroundColor: 'red' },
+          })
         },
       });
     } catch (err: any) {
@@ -94,6 +115,10 @@ export default function SignInOrganization() {
               });
               return;
             }
+
+          } else {
+            await AsyncStorage.setItem('authToken', data.loginUser.token);
+            router.push('/dashboard');
           }
         },
         onError: (err) => {

diff --git a/app/auth/register.tsx b/app/auth/register.tsx
@@ -14,7 +14,6 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ActivityIndicator,
-  Alert,
   TextInput,
   TouchableOpacity,
   useColorScheme,
@@ -317,7 +316,7 @@ export default function RegisterForm() {
           <TouchableOpacity
             onPress={() => {
               if (!TCAccepted) {
-                Alert.alert('Warning', 'Please accept terms and conditions');
+                toast.show('Please accept terms and conditions', {type:"Warning"});
                 return;
               }
               formik.handleSubmit();

diff --git a/components/perfomanceStats/index.tsx b/components/perfomanceStats/index.tsx
@@ -1,7 +1,7 @@
+import React, { useEffect, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { TRAINEE_RATING } from '@/graphql/queries/rating';
 import { useQuery } from '@apollo/client';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ScrollView,
@@ -16,6 +16,7 @@ import CircularIndicator from './circleIndicator';
 import styles from './styles';
 
 const PerformanceScores = () => {
+  const toast = useToast()
   const { t } = useTranslation();
   const colors = {
     quality: 'rgba(160, 132, 244, 1)',
@@ -24,7 +25,6 @@ const PerformanceScores = () => {
   };
 
   const theme = useColorScheme();
-  const toast = useToast();
   const dimensions = useWindowDimensions();
 
   const backgroundColor = theme === 'dark' ? '#020917' : '#fff';
@@ -47,10 +47,20 @@ const PerformanceScores = () => {
         if (token) {
           setUserToken(token);
         } else {
-          toast.show('User token not found.', { type: 'danger' });
+          toast.show('Error: User token not found.', {
+            type: 'danger',
+            placement: 'top',
+            duration: 4000,
+            animationType: 'slide-in',
+          });
         }
       } catch (error) {
-        toast.show('Failed to fetch token.', { type: 'danger' });
+        toast.show('Error: Failed to fetch token.', {
+          type: 'danger',
+          placement: 'top',
+          duration: 4000,
+          animationType: 'slide-in',
+        });
       }
     };
     fetchToken();

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
@@ -32,13 +32,13 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ onClose }) => {
+  const toast = useToast();
   const [activeItem, setActiveItem] = useState<string | null>(null);
   const router = useRouter();
   const pathname = usePathname();
   const colorScheme = useColorScheme();
   const { t } = useTranslation();
   const client = useApolloClient();
-  const toast = useToast();
 
   const UpperItems = [
     {
@@ -104,7 +104,12 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose }) => {
       await AsyncStorage.removeItem('auth');
       router.push('/auth/login?logout=1');
     } catch (error) {
-      toast.show(`Failed to log out. Please try again.`);
+      toast.show(`Error logging out:${error}`, {
+        type: 'danger',
+        placement: 'top',
+        duration: 4000,
+        animationType: 'slide-in',
+      });
     }
   };
 
@@ -119,10 +124,11 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose }) => {
         onClose();
       }
     } catch (error) {
-      toast.show(`Failed to navigate: ${error}`, {
+      toast.show(`Failed to navigate:${error}`, {
         type: 'danger',
         placement: 'top',
-        duration: 3000,
+        duration: 4000,
+        animationType: 'slide-in',
       });
     }
   };

diff --git a/components/sprintRatings.tsx b/components/sprintRatings.tsx
@@ -30,7 +30,7 @@ export default function TraineeRatings({
       if (token) {
         setUserToken(token);
       } else {
-        toast.show(t('sprintRating.user_token_not_found'), { type: 'danger' });
+        toast.show(t('sprintRating.error') + t('sprintRating.user_token_not_found'), {type:"danger"});
       }
     };
     fetchToken();
@@ -56,7 +56,7 @@ export default function TraineeRatings({
 
   useEffect(() => {
     if (error) {
-      toast.show(t('sprintRating.error_loading_ratings'), { type: 'danger' });
+      toast.show(t('sprintRating.error')+t('sprintRating.error_loading_ratings'),{type:"danger"});
     }
   }, [loading, error]);
 
@@ -136,7 +136,7 @@ export default function TraineeRatings({
                             className="flex-row items-center text-white"
                           >
                             <AntDesign name="eye" size={15} color="white" />
-                            <Text className="text-white ml-1">{t('sprintRating.view')}</Text>
+                            <Text className="ml-1 text-white">{t('sprintRating.view')}</Text>
                           </TouchableOpacity>
                         </View>
                       </View>