Update app version to 1.6, fix user slice import, and customize empty…

… list component

android/app/build.gradle

@@ -79,8 +79,8 @@ android {
         applicationId "com.travelbook"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 5
-        versionName "1.5"
+        versionCode 6
+        versionName "1.6"
     }
     signingConfigs {
         debug {

components/emptyList.js

@@ -4,8 +4,8 @@ import React from 'react'
 export default function EmptyList({message}) {
   return (
     <View className="flex items-center my-10">
-        <Image source={require('../assets/images/empty.png')} className="w-40 h-40 shadowOffset: 10" />
-      <Text className="text-white font-medium">{message || 'data not found'}</Text>
+        <Image source={require('../assets/images/empty.png')} className="w-60 h-60 shadowOffset: 10" />
+      <Text className="text-green-900 font-medium">{message || 'data not found'}</Text>
     </View>
   )
 }

config/firebase.js

@@ -2,8 +2,10 @@
 import { initializeApp } from "firebase/app";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
-import { getFirestore,collection } from "firebase/firestore";
-import { getAuth } from "firebase/auth";
+import { getFirestore, collection } from "firebase/firestore";
+import { getAuth, initializeAuth, getReactNativePersistence } from "firebase/auth";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
 // Your web app's Firebase configuration
 const firebaseConfig = {
   apiKey: "AIzaSyCfKqzqfTFZ09-TGixnW7NKc2A47tw23ME",
@@ -17,9 +19,11 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
-export const auth = getAuth(app);
+export const auth = initializeAuth(app, {
+  persistence: getReactNativePersistence(AsyncStorage) // Configure persistence with AsyncStorage
+});
 
 export const tripsRef = collection(db, 'trips');
 export const expensesRef = collection(db, 'expenses');
 
-export default app;
+export default app;

navigation/appNavigation.js

@@ -1,60 +1,60 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useSelector, useDispatch } from 'react-redux';
+import { onAuthStateChanged } from 'firebase/auth';
+import { setUser } from '../redux/slices/user';
+import { auth } from '../config/firebase';
 import HomeScreen from '../screens/HomeScreen';
-import { useSelector } from 'react-redux';
 import AddTripScreen from '../screens/AddTripScreen';
 import AddExpenseScreen from '../screens/AddExpenseScreen';
 import TripExpense from '../screens/TripExpense';
 import WelcomeScreen from '../screens/WelcomeScreen';
 import SignupScreen from '../screens/SignupScreen';
 import SigninScreen from '../screens/SigninScreen';
 import EditExpense from '../screens/EditExpense';
-import { store } from '../redux/store';
-import {user} from '../redux/slices/user'
-import { onAuthStateChanged } from 'firebase/auth';
-import { useDispatch } from 'react-redux';
-import { setUser } from '../redux/slices/user';
-import { auth } from '../config/firebase';
 import ExpenseSummary from '../screens/ExpenseSummary';
 
 const Stack = createNativeStackNavigator();
-export default function AppNavigation() {
-  const { user } = useSelector(state => state.user)
 
+export default function AppNavigation() {
+  const { user } = useSelector(state => state.user);
   const dispatch = useDispatch();
 
-  onAuthStateChanged(auth, u => {
-    console.log('got user: ', u)
-    dispatch(setUser(u))
-  })
-  if (user) {
-    return (
-      <NavigationContainer>
-        <Stack.Navigator initialRouteName='Home'>
-
-          <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
-
-          <Stack.Screen name="AddTrip" component={AddTripScreen} options={{ headerShown: false }} />
-          <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ headerShown: false }} />
-          <Stack.Screen name="TripExpense" component={TripExpense} options={{ headerShown: false }} />
-          <Stack.Screen  name="EditExpense" component={EditExpense} options={{ headerShown: false }} />
-          <Stack.Screen name="ExpenseSummary" component={ExpenseSummary} options={{ headerShown: false }} />
-        </Stack.Navigator>
-      </NavigationContainer>
-    );
-  } else {
-    return (
-      <NavigationContainer>
-        <Stack.Navigator initialRouteName='Welcome'>
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, user => {
+      console.log('got user:', user);
+      if (user) {
+        dispatch(setUser(user));
+      } else {
+        dispatch(setUser(null));
+      }
+    });
 
-          <Stack.Screen name="Welcome" component={WelcomeScreen} options={{ headerShown: false }} />
-          <Stack.Screen name="SignIn" component={SigninScreen} options={{ headerShown: false, presentation: 'modal' }} />
-          <Stack.Screen name="SignUp" component={SignupScreen} options={{ headerShown: false, presentation: 'modal' }} />
-
-        </Stack.Navigator>
-      </NavigationContainer>
-    );
-  }
+    // Clean up subscription on unmount
+    return unsubscribe;
+  }, [dispatch]);
 
-}
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName={user ? 'Home' : 'Welcome'}>
+        {user ? (
+          <>
+            <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="AddTrip" component={AddTripScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="TripExpense" component={TripExpense} options={{ headerShown: false }} />
+            <Stack.Screen name="EditExpense" component={EditExpense} options={{ headerShown: false }} />
+            <Stack.Screen name="ExpenseSummary" component={ExpenseSummary} options={{ headerShown: false }} />
+          </>
+        ) : (
+          <>
+            <Stack.Screen name="Welcome" component={WelcomeScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="SignIn" component={SigninScreen} options={{ headerShown: false, presentation: 'modal' }} />
+            <Stack.Screen name="SignUp" component={SignupScreen} options={{ headerShown: false, presentation: 'modal' }} />
+          </>
+        )}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

redux/slices/user.js

@@ -1,28 +1,23 @@
-
-import { createSlice } from '@reduxjs/toolkit'
-
+import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
-    value:0,
-}
+  user: null,
+  userLoading: false,
+};
 
-const usersSlice = createSlice({
-    name: 'user',
-    initialState:{
-        user:null,
-        userLoading: false,
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setUser: (state, action) => {
+      state.user = action.payload;
     },
-    reducers: {
-        setUser: (state, action) => {
-            state.user = action.payload
-        },
-        setUserLoading: (state, action) => {
-            state.userLoading = action.payload
-        },
+    setUserLoading: (state, action) => {
+      state.userLoading = action.payload;
     },
-  })
-  
+  },
+});
 
-export const { setUser, setUserLoading } = usersSlice.actions
+export const { setUser, setUserLoading } = userSlice.actions;
 
-export default usersSlice.reducer
+export default userSlice.reducer;

redux/store.js

@@ -1,10 +1,8 @@
-import {configureStore} from '@reduxjs/toolkit'
-import user from './slices/user'
+import { configureStore } from '@reduxjs/toolkit';
+import userReducer from './slices/user'; // Import the corrected user slice
 
 export const store = configureStore({
-
-    reducer: {  
-        user
-    }
-
-})
+  reducer: {
+    user: userReducer, // Include the user slice in the reducers object
+  },
+});

screens/HomeScreen.js

@@ -107,7 +107,7 @@ export default function HomeScreen() {
                         data={trips}
                         numColumns={3}
                         keyExtractor={item => item.id}
-                        ListEmptyComponent={<EmptyList message={"You have not recorded any trips yet"} />}
+                        ListEmptyComponent={<EmptyList/>}
                         showsVerticalScrollIndicator={true}
                         columnWrapperStyle={{ justifyContent: 'space-between' }}
                         style={{ marginHorizontal: width * 0.01, marginTop: height * 0.03 }}

screens/SigninScreen.js

@@ -74,7 +74,7 @@ export default function SigninScreen() {
       } catch (e) {
         dispatch(setUserLoading(false));
         Snackbar.show({
-          text: e.message,
+          text: 'Incorrect password or email',
           backgroundColor: 'red',
         });
       }