Merge pull request #654 from bounswe/MOBILE-646

feat(mobile): Notifications on successful login/register

mobile/bulingo/app/(tabs)/index.tsx

@@ -1,17 +1,32 @@
-import React, {useState} from 'react';
+import React, {useState, useCallback} from 'react';
 import {Image, TouchableOpacity, StyleSheet, Text, View, Dimensions} from 'react-native';
-import { router } from "expo-router";
+import { router, useLocalSearchParams, useFocusEffect } from "expo-router";
 import TokenManager from '../TokenManager';
 import { Shadow } from 'react-native-shadow-2';
+import Notification from '../components/topNotification';
 
 const { width, height } = Dimensions.get('window');
 
 export default function Home() {
   const handleRegister = () => {
     router.navigate("/register");
   };
+  const searchParams = useLocalSearchParams();
   const username = TokenManager.getUsername();
   const [logoutTrigger, setLogoutTrigger] = useState(false);
+  const [notification, setNotification] = useState<string | null>(null);
+
+
+
+  useFocusEffect(
+    useCallback(() => {
+      if (searchParams?.notification == 'login_success'){
+        setNotification("Login Successful!");
+      } else if (searchParams?.notification == 'register_success'){
+        setNotification("Registration Successful!");
+      }
+    }, [])
+  );
 
   const handleLogOut = () => {
     console.log("logout pressed");
@@ -24,6 +39,12 @@ export default function Home() {
 
   return (
     <View style={styles.container}>
+      {notification && (
+          <Notification
+              message={notification}
+              onHide={() => setNotification(null)} // Clear notification after hiding
+          />
+      )}
       <View style={styles.page}>
       <View style={styles.profilePictureContainer}>
       <Image

mobile/bulingo/app/components/topNotification.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+type NotificationProps = {
+    message: string;
+    duration?: number; // Duration in milliseconds (default: 3000ms)
+    onHide?: () => void; // Callback when notification hides
+    color?: string,
+};
+
+const Notification: React.FC<NotificationProps> = ({ message, duration = 3000, onHide, color }) => {
+    const [fadeAnim] = useState(new Animated.Value(0)); // Animation value
+
+    useEffect(() => {
+        // Fade in the notification
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+
+        // Automatically hide the notification after the specified duration
+        const timer = setTimeout(() => {
+            Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true,
+            }).start(() => {
+                if (onHide) onHide(); // Call onHide callback if provided
+            });
+        }, duration);
+
+        return () => clearTimeout(timer); // Cleanup timer on unmount
+    }, [fadeAnim, duration, onHide]);
+
+    return (
+        <Animated.View style={[styles.notification, { opacity: fadeAnim }, color && {backgroundColor: color}]}>
+            <Text style={styles.notificationText}>{message}</Text>
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    notification: {
+        position: 'absolute',
+        top: 50,
+        left: 10,
+        right: 10,
+        backgroundColor: '#4caf50',
+        padding: 10,
+        borderRadius: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000, // Ensure it stays above other UI elements
+    },
+    notificationText: {
+        color: 'white',
+        fontWeight: 'bold',
+    },
+});
+
+export default Notification;

mobile/bulingo/app/login.tsx

@@ -2,6 +2,8 @@ import React, {useState, createContext, useContext} from 'react';
 import {Pressable, StyleSheet, Text, View, TextInput, TouchableWithoutFeedback, ActivityIndicator} from 'react-native';
 import {router} from 'expo-router'
 import TokenManager from './TokenManager'; // Import the TokenManager
+import Notification from './components/topNotification';
+
 
 
 const LOGIN_URL = "http://54.93.52.38:8000/login/";
@@ -11,6 +13,8 @@ export default function Home() {
   const [password, setPassword] = useState('');  // State for password
   const [isLoading, setIsLoading] = useState(false);
   const [isErrorVisible, setIsErrorVisible] = useState(false);
+  const [notification, setNotification] = useState<string | null>(null);
+
 
   const handleRegister = () => {
     router.navigate('/register')
@@ -36,8 +40,9 @@ export default function Home() {
         const { access, refresh } = json;
         TokenManager.saveTokens(access, refresh);
         TokenManager.setUsername(username);
-        router.replace('/');
+        router.replace('/?notification=login_success');
       } else {
+        setNotification("Incorrect Login information.")
         setIsErrorVisible(true);
       };
     } catch (error) {
@@ -57,6 +62,14 @@ export default function Home() {
         </TouchableWithoutFeedback>
       )}
 
+      {notification && (
+          <Notification
+              message={notification}
+              onHide={() => setNotification(null)} // Clear notification after hiding
+              color='red'
+          />
+      )}
+
         <View style={styles.page}>
 
 

mobile/bulingo/app/register.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { Picker } from '@react-native-picker/picker';
-import { useNavigation } from '@react-navigation/native';
 import {router} from 'expo-router';
 
 const SIGNUP_URL = "http://54.93.52.38:8000/signup/";
@@ -60,7 +59,7 @@ const Register = () => {
       const json = await response.json();
       console.log(json)
       if (json){
-        router.navigate('/');
+        router.navigate('/?notification=register_success');
       }
     } catch (error) {
       console.error(error);