CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

notification

Browse Source
This commit is contained in:
Abin Toppo
2025-10-07 16:06:05 +05:30
parent ba3d4f7579
commit a2d2ae580f
21 changed files with 312 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+5 -5
View File
@@ -5,23 +5,23 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
import { PaperProvider } from 'react-native-paper'; import { PaperProvider } from 'react-native-paper';
import AppNavigator from './src/navigation/AppNavigator'; import AppNavigator from './src/navigation/AppNavigator';
import notifee from '@notifee/react-native'; import notifee from '@notifee/react-native';
import FirebaseService from './src/utils/firebase/firebaseServices'; import { backgroundHandler, foregroundListener, requestPermission, tokenRefreshHandler } from './src/utils/firebase/firebaseServices';
function App() { function App() {
const isDarkMode = useColorScheme() === 'dark'; const isDarkMode = useColorScheme() === 'dark';
useEffect(() => { useEffect(() => {
// 🔹 Ask for permission // 🔹 Ask for permission
FirebaseService.requestPermission(); requestPermission();
// 🔹 Handle background + quit state // 🔹 Handle background + quit state
FirebaseService.backgroundHandler(); backgroundHandler();
// 🔹 Listen for foreground messages // 🔹 Listen for foreground messages
const unsubscribe = FirebaseService.foregroundListener(); const unsubscribe = foregroundListener();
// 🔹 Listen for token refresh // 🔹 Listen for token refresh
const unsubscribeRefresh = FirebaseService.tokenRefreshHandler(); const unsubscribeRefresh = tokenRefreshHandler();
// 🔹 Create default notification channel (Android) // 🔹 Create default notification channel (Android)
notifee.createChannel({ notifee.createChannel({
src/components/JoinedGroupCard.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
const navigation = useNavigation<any>() const navigation = useNavigation<any>()
return ( return (
<TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.Settings})}> <TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.black})}>
{/* Header */} {/* Header */}
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.groupName}>{item.groupName}</Text> <Text style={styles.groupName}>{item.groupName}</Text>
src/components/MyGroupCard.tsx
+1
View File
@@ -94,6 +94,7 @@ const styles = StyleSheet.create({
shadowColor: "#000", shadowColor: "#000",
shadowOpacity: 0.05, shadowOpacity: 0.05,
shadowRadius: 4, shadowRadius: 4,
marginHorizontal:12
}, },
cardHeader: { cardHeader: {
flexDirection: "row", flexDirection: "row",
src/components/RequestCard.tsx
+8 -8
View File
@@ -37,8 +37,8 @@ export const RequestCard: FC<RequestCardProps> = ({ item, onApprove, onDecline }
{/* Bottom section with action buttons */} {/* Bottom section with action buttons */}
<View style={styles.actionsSection}> <View style={styles.actionsSection}>
<TouchableOpacity style={[styles.actionButton, styles.declineButton]} onPress={() => onDecline(item)}> <TouchableOpacity style={[styles.actionButton, styles.declineButton]} onPress={() => onDecline(item)}>
<Ionicons name="close-outline" size={20} color={colors.pastelOrange} /> <Ionicons name="close-outline" size={20} color={colors.black} />
<Text style={[styles.actionButtonText, { color: colors.pastelOrange }]}>Decline</Text> <Text style={[styles.actionButtonText,]}>Decline</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={[styles.actionButton, styles.approveButton]} onPress={() => onApprove(item)}> <TouchableOpacity style={[styles.actionButton, styles.approveButton]} onPress={() => onApprove(item)}>
{/* Corrected icon color and updated text color for better contrast */} {/* Corrected icon color and updated text color for better contrast */}
@@ -54,10 +54,11 @@ export const RequestCard: FC<RequestCardProps> = ({ item, onApprove, onDecline }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card: { card: {
marginHorizontal: 12,
backgroundColor: colors.white, backgroundColor: colors.white,
borderRadius: 16, borderRadius: 16,
marginVertical: 8, marginVertical: 8,
elevation: 4, elevation: 5,
shadowColor: '#000', shadowColor: '#000',
shadowOpacity: 0.1, shadowOpacity: 0.1,
shadowRadius: 10, shadowRadius: 10,
@@ -67,9 +68,7 @@ const styles = StyleSheet.create({
userInfoSection: { userInfoSection: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1, paddingBottom: 6,
borderBottomColor: colors.textLight,
paddingBottom: 12,
}, },
avatar: { avatar: {
width: 50, width: 50,
@@ -96,7 +95,6 @@ const styles = StyleSheet.create({
requestText: { requestText: {
fontSize: 15, fontSize: 15,
color: colors.textDark, color: colors.textDark,
lineHeight: 22,
}, },
groupName: { groupName: {
fontWeight: 'bold', fontWeight: 'bold',
@@ -116,11 +114,13 @@ const styles = StyleSheet.create({
borderRadius: 12, borderRadius: 12,
}, },
declineButton: { declineButton: {
backgroundColor: colors.pastelPink, elevation:5,
backgroundColor:colors.white
}, },
approveButton: { approveButton: {
// Set background color as requested // Set background color as requested
backgroundColor: colors.pastelOrange, backgroundColor: colors.pastelOrange,
elevation:5,
}, },
actionButtonText: { actionButtonText: {
fontSize: 16, fontSize: 16,
src/components/common/CustomModal.tsx
+7 -3
View File
@@ -21,6 +21,8 @@ type CustomModalProps = {
cancelText?: string; cancelText?: string;
onConfirm?: () => void; onConfirm?: () => void;
confirmButton?:string confirmButton?:string
confirmTextColor?:string
elevation?:number
}; };
const CustomModal: React.FC<CustomModalProps> = ({ const CustomModal: React.FC<CustomModalProps> = ({
@@ -31,6 +33,8 @@ const CustomModal: React.FC<CustomModalProps> = ({
confirmText = "Confirm", confirmText = "Confirm",
cancelText = "Cancel", cancelText = "Cancel",
onConfirm, onConfirm,
confirmTextColor,
elevation,
confirmButton = colors.primary confirmButton = colors.primary
}) => { }) => {
const slideAnim = useRef(new Animated.Value(height)).current; // starts off screen const slideAnim = useRef(new Animated.Value(height)).current; // starts off screen
@@ -89,17 +93,17 @@ const CustomModal: React.FC<CustomModalProps> = ({
{/* Footer Actions */} {/* Footer Actions */}
<View style={styles.actions}> <View style={styles.actions}>
<TouchableOpacity <TouchableOpacity
style={[styles.button, styles.cancelButton]} style={[styles.button, styles.cancelButton,{elevation:elevation}]}
onPress={onClose} onPress={onClose}
> >
<Text style={styles.cancelText}>{cancelText}</Text> <Text style={styles.cancelText}>{cancelText}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[styles.button, {backgroundColor:confirmButton}]} style={[styles.button, {backgroundColor:confirmButton ,elevation:elevation}]}
onPress={onConfirm} onPress={onConfirm}
> >
<Text style={styles.confirmText}>{confirmText}</Text> <Text style={[styles.confirmText,{color:confirmTextColor}]}>{confirmText}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</Animated.View> </Animated.View>
src/screens/ContributionScreen.tsx
+3 -4
View File
@@ -56,7 +56,7 @@ const ContributionDetails: React.FC<ContributionProps> = ({
}, [visible]); }, [visible]);
return ( return (
<CustomModal visible={visible} onClose={onClose} onConfirm={onConfirm}> <CustomModal visible={visible} onClose={onClose} onConfirm={onConfirm} confirmButton={colors.pastelOrange} confirmTextColor={colors.black} elevation={5}>
{/* Header */} {/* Header */}
<Animated.View <Animated.View
style={[ style={[
@@ -64,7 +64,7 @@ const ContributionDetails: React.FC<ContributionProps> = ({
{ opacity: fadeAnim, transform: [{ translateY: slideAnim }] }, { opacity: fadeAnim, transform: [{ translateY: slideAnim }] },
]} ]}
> >
<Ionicons name="wallet-outline" size={32} color={colors.primary} /> <Ionicons name="wallet-outline" size={32} color={colors.black} />
<Text style={styles.headerTitle}>Contribution Summary</Text> <Text style={styles.headerTitle}>Contribution Summary</Text>
</Animated.View> </Animated.View>
@@ -126,7 +126,6 @@ const styles = StyleSheet.create({
headerTitle: { headerTitle: {
fontSize: 22, fontSize: 22,
fontWeight: "700", fontWeight: "700",
color: colors.primary,
marginLeft: 10, marginLeft: 10,
}, },
card: { card: {
@@ -154,7 +153,7 @@ const styles = StyleSheet.create({
valueHighlight: { valueHighlight: {
fontSize: 18, fontSize: 18,
fontWeight: "700", fontWeight: "700",
color: colors.primary, color: colors.black,
marginBottom: 10, marginBottom: 10,
}, },
}); });
src/screens/InviteScreen.tsx
+2 -2
View File
@@ -52,7 +52,7 @@ const InviteScreen: FC<InviteScreenProps> = ({ route }) => {
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
const response = await apiCall(`https://api.godemo.in/FundCollect/api/fund/group/details?groupId=${groupId}`, 'GET') as { status: string; data?: GroupDetails; message?: string }; const response = await apiCall(`http://192.168.1.5:9060/api/fund/group/details?groupId=${groupId}`, 'GET') as { status: string; data?: GroupDetails; message?: string };
if (response.status === 'success' && response.data) { if (response.status === 'success' && response.data) {
setGroupDetails(response.data); setGroupDetails(response.data);
} else { } else {
@@ -76,7 +76,7 @@ const InviteScreen: FC<InviteScreenProps> = ({ route }) => {
try { try {
// Replace with your actual API call to join the group // Replace with your actual API call to join the group
// For now, it just shows an alert. // For now, it just shows an alert.
await apiCall(`https://api.godemo.in/FundCollect/api/fund/groups/join/invite/${code}`, 'POST'); await apiCall(`http://192.168.1.5:9060/api/fund/groups/join/invite/${code}`, 'POST');
Alert.alert('Success!', `You have requested to join "${groupDetails.groupName}".`); Alert.alert('Success!', `You have requested to join "${groupDetails.groupName}".`);
} catch (e: any) { } catch (e: any) {
Alert.alert('Join Error', e.message || 'An unexpected error occurred.'); Alert.alert('Join Error', e.message || 'An unexpected error occurred.');
src/screens/LoginScreen.tsx
+2
View File
@@ -64,6 +64,7 @@ export default function LoginScreen() {
if (mobile.length === 10) { if (mobile.length === 10) {
setLoading(true); setLoading(true);
try { try {
console.log("Login api call:");
// FIX: Used the imported LOGIN_URL constant instead of a string literal // FIX: Used the imported LOGIN_URL constant instead of a string literal
const res = await axios.get(LOGIN_URL, { params: { mobile } }); const res = await axios.get(LOGIN_URL, { params: { mobile } });
console.log("Login response:", res.data); console.log("Login response:", res.data);
@@ -76,6 +77,7 @@ export default function LoginScreen() {
[{ text: "Try Again", onPress: hideAlert }], [{ text: "Try Again", onPress: hideAlert }],
'error' 'error'
); );
} }
} catch (error: any) { } catch (error: any) {
console.error("Login error:", error); console.error("Login error:", error);
src/screens/OtpVarificationScreen.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import { LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls";
import colors from "../components/colors"; import colors from "../components/colors";
import LinearGradient from "react-native-linear-gradient"; import LinearGradient from "react-native-linear-gradient";
import CustomAlert from "../components/CostomAlart"; import CustomAlert from "../components/CostomAlart";
import FirebaseService from "../utils/firebase/firebaseServices"; import { getFcmToken } from "../utils/firebase/firebaseServices";
const CELL_COUNT = 6; const CELL_COUNT = 6;
type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">; type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">;
@@ -128,7 +128,7 @@ export default function OtpVerificationScreen() {
const { jwt } = res.data?.data || {}; const { jwt } = res.data?.data || {};
console.log("✅ OTP Verified:", res.data); console.log("✅ OTP Verified:", res.data);
await saveToken(jwt); await saveToken(jwt);
await FirebaseService.getFcmToken(res.data?.data?.userId); await getFcmToken(res.data?.data?.userId);
let hasActionRun = false; let hasActionRun = false;
src/screens/home/GroupList.tsx
+3 -3
View File
@@ -110,7 +110,7 @@ const GroupList = () => {
} }
}, [search, groups]); }, [search, groups]);
if (loading) return <ActivityIndicator size="large" color={colors.Home} />; if (loading) return <ActivityIndicator size="large" color={colors.pastelBlue} />;
return ( return (
<> <>
@@ -175,10 +175,10 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
marginRight: 12, marginRight: 12,
}, },
avatarText: { fontSize: 18, fontWeight: "700", color: colors.Home }, avatarText: { fontSize: 18, fontWeight: "700", color: colors.black },
groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark }, groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 }, groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 }, groupMeta: { fontSize: 12, color: colors.black, marginTop: 2 },
detailsBox: { detailsBox: {
marginTop: 10, marginTop: 10,
padding: 10, padding: 10,
src/screens/home/RequestList.tsx
+3 -3
View File
@@ -58,7 +58,7 @@ const RequestList: React.FC = () => {
setError(null); setError(null);
const response = await fetch( const response = await fetch(
"https://api.godemo.in/FundCollect/api/fund/group/pending/request", "http://192.168.1.5:9060/api/fund/group/pending/request",
{ {
method: "GET", method: "GET",
headers: { headers: {
@@ -124,7 +124,7 @@ const RequestList: React.FC = () => {
// Make API call to approve the request // Make API call to approve the request
const response = await fetch( const response = await fetch(
`https://api.godemo.in/FundCollect/api/fund/requests/${requestId}/approve`, `http://192.168.1.5:9060/api/fund/requests/${requestId}/approve`,
{ {
method: "PUT", method: "PUT",
headers: { headers: {
@@ -170,7 +170,7 @@ const RequestList: React.FC = () => {
// Make API call to decline the request // Make API call to decline the request
const response = await fetch( const response = await fetch(
`https://api.godemo.in/FundCollect/api/fund/requests/${requestedId}/reject?reason=/${reason}`, `http://192.168.1.5:9060/api/fund/requests/${requestedId}/reject?reason=/${reason}`,
{ {
method: "PUT", method: "PUT",
headers: { headers: {
src/screens/management/EditGroupScreen.tsx
+8 -8
View File
@@ -28,7 +28,7 @@ import *as Keychain from 'react-native-keychain'
import Ionicons from '@react-native-vector-icons/ionicons'; import Ionicons from '@react-native-vector-icons/ionicons';
import { CustomButton } from '../../components/common/Custom'; import { CustomButton } from '../../components/common/Custom';
import { StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationProp } from '@react-navigation/stack';
import CustomModal from '../../components/common/CustomModal'; // import CustomModal from '../../components/common/CustomModal';
import WinnerUser from './WinnerUser'; import WinnerUser from './WinnerUser';
@@ -346,7 +346,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
<Text style={styles.cardTitle}>{title}</Text> <Text style={styles.cardTitle}>{title}</Text>
{isEditable && !editingCard && ( {isEditable && !editingCard && (
<TouchableOpacity onPress={() => setEditingCard(cardKey)} style={styles.editButton}> <TouchableOpacity onPress={() => setEditingCard(cardKey)} style={styles.editButton}>
<Text style={styles.editButtonText}>✎</Text> <Text style={styles.editButtonText}>Update</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
</View> </View>
@@ -537,7 +537,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
onPress={handleUpdateImage} onPress={handleUpdateImage}
icon={imageUpdating ? undefined : "cloud-upload"} icon={imageUpdating ? undefined : "cloud-upload"}
style={{ paddingHorizontal: 20 }} style={{ paddingHorizontal: 20 }}
buttonBackground={colors.pastelBlue} buttonBackground={colors.pastelOrange}
/> />
</View> </View>
</View> </View>
@@ -674,7 +674,7 @@ const styles = StyleSheet.create({
position: "absolute", position: "absolute",
// right: 0, // right: 0,
bottom: 0, bottom: 0,
backgroundColor: colors.pastelBlue, backgroundColor: colors.pastelOrange,
borderRadius: 20, borderRadius: 20,
width: 40, width: 40,
height: 40, height: 40,
@@ -694,8 +694,8 @@ const styles = StyleSheet.create({
marginBottom: 12, marginBottom: 12,
}, },
cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937' }, cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937' },
editButton: { padding: 8 }, editButton: { padding: 8,backgroundColor:colors.pastelOrange, borderRadius: 15,elevation:5 },
editButtonText: { color: colors.pastelPink, fontSize: 20, fontWeight: 'bold' }, editButtonText: { color: colors.black, fontSize: 15, fontWeight: 'bold' },
fieldContainer: { borderBottomWidth: 1, borderBottomColor: '#F3F4F6', paddingBottom: 12, marginBottom: 12 }, fieldContainer: { borderBottomWidth: 1, borderBottomColor: '#F3F4F6', paddingBottom: 12, marginBottom: 12 },
infoLabel: { fontSize: 16, color: '#6B7280', marginBottom: 4 }, infoLabel: { fontSize: 16, color: '#6B7280', marginBottom: 4 },
infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' }, infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
@@ -712,8 +712,8 @@ const styles = StyleSheet.create({
button: { borderRadius: 10, paddingVertical: 12, paddingHorizontal: 20, marginLeft: 10, minWidth: 80, alignItems: 'center', justifyContent: 'center' }, button: { borderRadius: 10, paddingVertical: 12, paddingHorizontal: 20, marginLeft: 10, minWidth: 80, alignItems: 'center', justifyContent: 'center' },
saveButton: { backgroundColor: colors.pastelOrange }, saveButton: { backgroundColor: colors.pastelOrange },
cancelButton: { backgroundColor: '#E5E7EB' }, cancelButton: { backgroundColor: '#E5E7EB' },
inviteButton: { backgroundColor: colors.primary }, inviteButton: { backgroundColor: colors.pastelOrange },
buttonText: { color: '#ffffffff', fontSize: 15, fontWeight: '600' }, buttonText: { color: colors.black, fontSize: 15, fontWeight: '600' },
floatingButtonContainer: { floatingButtonContainer: {
position: 'absolute', position: 'absolute',
bottom: 85, bottom: 85,
src/screens/management/ManagementScreen.tsx
+2 -2
View File
@@ -161,8 +161,8 @@ const ManagementScreen: FC = () => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#f5f6fa' }, container: { flex: 1, backgroundColor: '#f5f6fa' },
header: { paddingHorizontal: 20, paddingBottom: 15, paddingTop: 10 }, header: { paddingHorizontal: 20, paddingBottom: 15, paddingTop: 10 },
title: { fontSize: 22, fontWeight: "600", color: colors.Settings }, title: { fontSize: 22, fontWeight: "600"},
segmentedControl: { flexDirection: 'row',borderRadius: 10, marginHorizontal: 20, marginBottom: 20, padding: 3 }, segmentedControl: { flexDirection: 'row',borderRadius: 10,marginBottom: 20, padding: 3 },
segmentButton: { flex: 1, paddingVertical: 12, alignItems: 'center', borderRadius: 8 }, segmentButton: { flex: 1, paddingVertical: 12, alignItems: 'center', borderRadius: 8 },
segmentActive: { backgroundColor: colors.pastelOrange, elevation: 5,borderRadius:15, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 }, segmentActive: { backgroundColor: colors.pastelOrange, elevation: 5,borderRadius:15, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 },
segmentText: { fontSize: 14, fontWeight: '600', color: '#6c757d' }, segmentText: { fontSize: 14, fontWeight: '600', color: '#6c757d' },
src/screens/management/ManagementTabNavigation.tsx
+49 -38
View File
@@ -1,22 +1,33 @@
import React from 'react'; import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator, BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { View, Text, StyleSheet, Platform, TouchableOpacity } from 'react-native'; import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {Ionicons} from '@react-native-vector-icons/ionicons'; // Correct import for react-native-vector-icons import { Ionicons } from '@react-native-vector-icons/ionicons';
import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
import EditGroupScreen from './EditGroupScreen'; // Your screen component import colors from '../../components/colors';
// --- Screen Imports ---
import EditGroupScreen from './EditGroupScreen';
import Payments from './Payments'; import Payments from './Payments';
import Member from './Member'; import Member from './Member';
type Props = NativeStackScreenProps<RootStackParamList, 'ManagementTabs'>;
// --- Type Definitions ---
type Props = NativeStackScreenProps<RootStackParamList, 'ManagementTabs'>;
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
// --- Custom Floating Tab Bar Component ---
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
// --- Icon Mapping ---
const iconMap: { [key: string]: string } = {
EditGroup: 'trail-sign-outline',
Payments: 'trending-up',
Member: 'people-outline',
};
// --- Custom Floating Tab Bar Component ---
const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => { const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
@@ -24,13 +35,10 @@ const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) =
<View style={[styles.tabBarContainer, { bottom: insets.bottom > 0 ? insets.bottom : 16 }]}> <View style={[styles.tabBarContainer, { bottom: insets.bottom > 0 ? insets.bottom : 16 }]}>
{state.routes.map((route, index) => { {state.routes.map((route, index) => {
const { options } = descriptors[route.key]; const { options } = descriptors[route.key];
const label = options.tabBarLabel ?? options.title ?? route.name; const label = options.tabBarLabel?.toString() ?? options.title ?? route.name;
console.log("option : ", options)
// A custom option to pass the icon name
const iconName = label === "Settings" ? "trail-sign-outline" : label === "Payments" ? "trending-up" : label === "Members" ? "people-outline" : "flower";
const isFocused = state.index === index; const isFocused = state.index === index;
const iconName = iconMap[route.name] || 'help-circle-outline';
const onPress = () => { const onPress = () => {
const event = navigation.emit({ const event = navigation.emit({
@@ -60,15 +68,16 @@ const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) =
testID={options.tabBarButtonTestID} testID={options.tabBarButtonTestID}
onPress={onPress} onPress={onPress}
onLongPress={onLongPress} onLongPress={onLongPress}
style={styles.tabItem} // The style for the tab item itself no longer needs elevation
style={[styles.tabItem, { backgroundColor: isFocused ? colors.pastelOrange : 'transparent' }]}
> >
<Ionicons <Ionicons
name={iconName} name={iconName}
size={24} size={24}
color={isFocused ? '#4F46E5' : '#6B7280'} color={isFocused ? colors.black : '#6B7280'}
/> />
<Text style={[styles.tabLabel, { color: isFocused ? '#4F46E5' : '#6B7280' }]}> <Text style={[styles.tabLabel, { color: isFocused ? colors.black : '#6B7280' }]}>
{label as string} {label}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
); );
@@ -77,69 +86,61 @@ const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) =
); );
}; };
// --- Main Tab Navigator Component --- // --- Main Tab Navigator Component ---
const ManagementTabNavigation: React.FC<Props> = ({ route }) => { const ManagementTabNavigation: React.FC<Props> = ({ route }) => {
const { groupId } = route.params const { groupId } = route.params;
return ( return (
<Tab.Navigator <Tab.Navigator
// Assign the custom floating tab bar
tabBar={props => <FloatingTabBar {...props} />} tabBar={props => <FloatingTabBar {...props} />}
screenOptions={{ screenOptions={{
headerShown: false, // Hides the default header for all screens in the tab headerShown: false,
}} }}
> >
<Tab.Screen <Tab.Screen
name="EditGroup" name="EditGroup"
component={EditGroupScreen} component={EditGroupScreen}
// Pass the groupId to the EditGroupScreen as an initial parameter
initialParams={{ groupId }} initialParams={{ groupId }}
options={{ options={{
tabBarLabel: 'Settings', tabBarLabel: 'Settings',
// Custom prop to define the icon for our FloatingTabBar
}} }}
/> />
<Tab.Screen <Tab.Screen
name="Payments" name="Payments"
component={Payments} component={Payments}
// Pass the groupId to the EditGroupScreen as an initial parameter
initialParams={{ groupId }} initialParams={{ groupId }}
options={{ options={{
tabBarLabel: 'Payments', tabBarLabel: 'Payments',
}} }}
/> />
<Tab.Screen <Tab.Screen
name="Member" name="Member"
component={Member} component={Member}
// Pass the groupId to the EditGroupScreen as an initial parameter
initialParams={{ groupId }} initialParams={{ groupId }}
options={{ options={{
tabBarLabel: 'Members', tabBarLabel: 'Members',
}} }}
/> />
{/* You can easily add more tabs here in the future */}
</Tab.Navigator> </Tab.Navigator>
); );
}; };
// --- Styles --- // --- Styles ---
const styles = StyleSheet.create({ const styles = StyleSheet.create({
tabBarContainer: { tabBarContainer: {
flexDirection: 'row', flexDirection: 'row',
position: 'absolute', position: 'absolute',
left: 30, left: 20, // Adjusted for better visual balance
right: 30, right: 20, // Adjusted for better visual balance
backgroundColor: 'white', backgroundColor: 'white',
borderRadius: 60, borderRadius: 30,
paddingVertical: 4, paddingVertical: 8,
paddingHorizontal: 8, // Added padding
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-around', justifyContent: 'space-around',
// iOS Shadow
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
@@ -147,14 +148,24 @@ const styles = StyleSheet.create({
}, },
shadowOpacity: 0.1, shadowOpacity: 0.1,
shadowRadius: 10, shadowRadius: 10,
// Android Shadow
elevation: 8, elevation: 8,
}, },
tabItem: { tabItem: {
flex: 1, flex: 1, // Allow items to fill the space
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
paddingVertical: 8, paddingVertical: 10, // Increased padding for a better touch area
borderRadius: 25,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.1,
shadowRadius: 10, // This is for the background color highlight
}, },
// The 'activeTab' style is no longer needed as the logic is handled inline
tabLabel: { tabLabel: {
fontSize: 12, fontSize: 12,
marginTop: 4, marginTop: 4,
src/screens/management/Member.tsx
+3 -10
View File
@@ -56,7 +56,7 @@ const MemberScreen = ({ route }) => {
setLoading(true); setLoading(true);
try { try {
const response = await apiCall<ApiResponse>( const response = await apiCall<ApiResponse>(
`https://api.godemo.in/FundCollect/api/fund/group/all/member?groupId=${groupId}`, `http://192.168.1.5:9060/api/fund/group/all/member?groupId=${groupId}`,
'GET' 'GET'
); );
@@ -118,12 +118,7 @@ const MemberScreen = ({ route }) => {
if (error) { if (error) {
return ( return (
<View style={styles.centered}> <View style={styles.centered}>
<Ionicons name="cloud-offline-outline" size={60} color="#EF4444" /> <Text style={styles.errorText}>no members found</Text>
<Text style={styles.errorTitle}>Oops!</Text>
<Text style={styles.errorText}>{error}</Text>
<TouchableOpacity style={styles.retryButton} onPress={fetchMembers}>
<Text style={styles.retryButtonText}>Try Again</Text>
</TouchableOpacity>
</View> </View>
); );
} }
@@ -170,9 +165,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 20, paddingHorizontal: 20,
paddingTop: 20, paddingTop: 20,
paddingBottom: 12, paddingBottom: 12,
backgroundColor: 'white',
borderBottomWidth: 1,
borderBottomColor: '#E5E7EB',
}, },
headerTitle: { headerTitle: {
fontSize: 28, fontSize: 28,
src/screens/management/Payments.tsx
+93 -52
View File
@@ -8,7 +8,7 @@ import { apiCall } from '../../utils/ApiHelper';
import { BASE_URL } from '../../utils/ApiUrls'; import { BASE_URL } from '../../utils/ApiUrls';
// --- CONSTANTS --- // --- CONSTANTS ---
const API_BASE_URL = 'https://api.godemo.in/FundCollect/api/payments'; const API_BASE_URL = 'http://192.168.1.5:9060/api/payments';
// --- TYPE DEFINITIONS --- // --- TYPE DEFINITIONS ---
interface ApiResponse<T> { interface ApiResponse<T> {
@@ -43,54 +43,61 @@ interface PaymentDetails {
type PaymentStackParamList = { Payments: { groupId: string } }; type PaymentStackParamList = { Payments: { groupId: string } };
type PaymentsRouteProp = RouteProp<PaymentStackParamList, 'Payments'>; type PaymentsRouteProp = RouteProp<PaymentStackParamList, 'Payments'>;
// The component is a valid React Functional Component, which is required for using hooks.
const Payments: React.FC = () => { const Payments: React.FC = () => {
// --- HOOKS ---
// All hooks are called at the top level, which is correct.
const route = useRoute<PaymentsRouteProp>(); const route = useRoute<PaymentsRouteProp>();
const { groupId } = route.params; const { groupId } = route.params;
const [paymentDetails, setPaymentDetails] = useState<PaymentDetails | null>(null); const [paymentDetails, setPaymentDetails] = useState<PaymentDetails | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const [isGroupActive, setIsGroupActive] = useState(true);
// State for the waiver modal
const [isModalVisible, setModalVisible] = useState(false); const [isModalVisible, setModalVisible] = useState(false);
const [currentParticipant, setCurrentParticipant] = useState<Participant | null>(null); const [currentParticipant, setCurrentParticipant] = useState<Participant | null>(null);
const [waiverAmount, setWaiverAmount] = useState(''); const [waiverAmount, setWaiverAmount] = useState('');
const [cycleData, setCycleData] = useState<any>(); const [cycleData, setCycleData] = useState<any>();
// --- FUNCTIONS ---
// These are regular functions and do not call hooks inside them, which is correct.
const getCycleData = async () => { const getCycleData = async () => {
try { try {
const response = await apiCall(`${API_BASE_URL}/groups/${groupId}/cycle-dashboard`, 'GET') as ApiResponse<any>;
const response = await apiCall(`${API_BASE_URL}/groups/${groupId}/cycle-dashboard`, 'GET') as ApiResponse<any>;
if (response && response.statusCode === 200) { if (response && response.statusCode === 200) {
setCycleData(response.data); setCycleData(response.data);
} else {
Alert.alert("Error", response?.message || "Failed to fetch cycle data.");
} }
} catch (error: any) { } catch (error: any) {
Alert.alert("Error", error.message || "An unexpected error occurred."); console.error("Failed to fetch cycle data:", error.message);
} }
}; };
const fetchPaymentDetails = useCallback(async () => { const fetchPaymentDetails = useCallback(async () => {
if (!refreshing) setLoading(true); if (!refreshing) setLoading(true);
setIsGroupActive(true);
try { try {
const response = await apiCall(`${BASE_URL}payments/current/payment/details/${groupId}`, 'GET') as ApiResponse<PaymentDetails>; const response = await apiCall(`${BASE_URL}payments/current/payment/details/${groupId}`, 'GET') as ApiResponse<PaymentDetails>;
console.log("payment response :", response)
if (response && response.statusCode === 200) { if (response && response.statusCode === 200) {
setPaymentDetails(response.data); setPaymentDetails(response.data);
} else if (response && response.statusCode === 400) {
setIsGroupActive(false);
setPaymentDetails(null);
} else { } else {
Alert.alert("Error", response?.message || "Failed to fetch details."); setIsGroupActive(false);
} }
} catch (error: any) { } catch (error: any) {
// Alert.alert("Error", error.message || "An unexpected error occurred."); console.log("payment error: ", error);
console.log("payment error : ", error) setIsGroupActive(false);
} finally { } finally {
setLoading(false); setLoading(false);
setRefreshing(false); setRefreshing(false);
} }
}, [groupId, refreshing]); }, [groupId, refreshing]);
// --- EFFECT HOOK ---
// useEffect is correctly used to call functions when the component mounts or dependencies change.
useEffect(() => { useEffect(() => {
getCycleData(); getCycleData();
fetchPaymentDetails(); fetchPaymentDetails();
@@ -104,18 +111,17 @@ const Payments: React.FC = () => {
const openWaiverDialog = (participant: Participant) => { const openWaiverDialog = (participant: Participant) => {
setCurrentParticipant(participant); setCurrentParticipant(participant);
setWaiverAmount(''); setWaiverAmount(participant.lateFee.toString());
setModalVisible(true); setModalVisible(true);
}; };
// --- UPDATED: handleWaiveFee now uses the correct API endpoint ---
const handleWaiveFee = async () => { const handleWaiveFee = async () => {
if (!currentParticipant || !paymentDetails) return; if (!currentParticipant || !paymentDetails) return;
const amountToWaive = parseFloat(waiverAmount); const amountToWaive = parseFloat(waiverAmount);
if (isNaN(amountToWaive) || amountToWaive <= 0) { if (isNaN(amountToWaive) || amountToWaive < 0) {
Alert.alert("Invalid Input", "Please enter a waiver amount greater than zero."); Alert.alert("Invalid Input", "Please enter a valid waiver amount.");
return; return;
} }
@@ -125,15 +131,13 @@ const Payments: React.FC = () => {
} }
try { try {
// Construct the exact URL as provided
const url = `${BASE_URL}groups/${groupId}/cycles/${paymentDetails.currentCycle}/waive/${currentParticipant.userId}?amountToWaive=${amountToWaive}`; const url = `${BASE_URL}groups/${groupId}/cycles/${paymentDetails.currentCycle}/waive/${currentParticipant.userId}?amountToWaive=${amountToWaive}`;
const response = await apiCall(url, 'PUT', {}) as any;
const response = await apiCall(url, 'PUT', {}) as any; // Body is empty as amount is in URL
if (response && response.statusCode === 200) { if (response && response.statusCode === 200) {
Alert.alert("Success", `₹${amountToWaive} has been waived successfully.`); Alert.alert("Success", `₹${amountToWaive} has been waived successfully.`);
setModalVisible(false); setModalVisible(false);
onRefresh(); // Refresh data to reflect the change onRefresh();
} else { } else {
throw new Error(response?.message || "Failed to apply waiver."); throw new Error(response?.message || "Failed to apply waiver.");
} }
@@ -142,13 +146,14 @@ const Payments: React.FC = () => {
} }
}; };
// --- RENDER LOGIC ---
const renderParticipant = (participant: Participant) => { const renderParticipant = (participant: Participant) => {
const isPending = participant.status === 'PENDING'; const isPending = participant.status === 'PENDING';
const canWaive = isPending && participant.lateFee > 0; const canWaive = isPending && participant.lateFee > 0 && !participant.lateFeeWaived;
return ( return (
<View key={participant.userId} style={styles.participantCard}> <View key={participant.userId} style={styles.participantCard}>
<View style={styles.participantInfo}> <View style={styles.participantInfo}>
<Text style={styles.participantName}>{participant.firstName} {participant.lastName}</Text> <Text style={styles.participantName}>{participant.firstName} {participant.lastName}</Text>
<Text style={styles.participantMobile}>{participant.mobile}</Text> <Text style={styles.participantMobile}>{participant.mobile}</Text>
</View> </View>
@@ -163,7 +168,7 @@ const Payments: React.FC = () => {
{isPending && participant.lateFee > 0 && ( {isPending && participant.lateFee > 0 && (
<Text style={styles.lateFeeText}>Late Fee: ₹{participant.lateFee}</Text> <Text style={styles.lateFeeText}>Late Fee: ₹{participant.lateFee}</Text>
)} )}
{participant.lateFee === 0 && participant.lateFeeWaived && <Text style={styles.waivedText}>Fee Waived</Text>} {participant.lateFeeWaived && <Text style={styles.waivedText}>Fee Waived</Text>}
</View> </View>
<View style={styles.menuContainer}> <View style={styles.menuContainer}>
@@ -210,36 +215,48 @@ const Payments: React.FC = () => {
</View> </View>
</Modal> </Modal>
<ScrollView {loading && !refreshing ? (
style={styles.container} <ActivityIndicator style={{marginTop: 50}} size="large" color={colors.primary} />
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} ) : !isGroupActive ? (
> <View style={styles.fullScreenMessage}>
{loading && !refreshing ? ( <Ionicons name="warning-outline" size={40} color={colors.black} />
<ActivityIndicator style={{marginTop: 50}} size="large" color={colors.primary} /> <Text style={styles.fullScreenMessageText}>
) : ( This group is not currently active.
<> </Text>
<View style={styles.header}> <TouchableOpacity onPress={onRefresh} style={styles.refreshButton}>
<Text style={styles.headerTitle}>{paymentDetails?.groupName}</Text> <Text style={styles.refreshButtonText}>Tap to Refresh</Text>
</View> </TouchableOpacity>
<View style={styles.summaryContainer}> </View>
<View style={styles.summaryBox}> ) : (
<Text style={styles.summaryLabel}>Cycle</Text> <ScrollView
<Text style={styles.summaryValue}>{paymentDetails?.currentCycle}</Text> style={styles.container}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
>
{paymentDetails && (
<>
<View style={styles.header}>
<Text style={styles.headerTitle}>{paymentDetails.groupName}</Text>
</View> </View>
<View style={styles.summaryBox}> <View style={styles.summaryContainer}>
<Text style={styles.summaryLabel}>Contribution</Text> <View style={styles.summaryBox}>
<Text style={styles.summaryValue}>₹{paymentDetails?.contributionAmount}</Text> <Text style={styles.summaryLabel}>Cycle</Text>
<Text style={styles.summaryValue}>{paymentDetails.currentCycle}</Text>
</View>
<View style={styles.summaryBox}>
<Text style={styles.summaryLabel}>Contribution</Text>
<Text style={styles.summaryValue}>₹{paymentDetails.contributionAmount}</Text>
</View>
<View style={styles.summaryBox}>
<Text style={styles.summaryLabel}>Total Due</Text>
<Text style={[styles.summaryValue, { color: colors.danger }]}>₹{paymentDetails.totalDueWithLateFee}</Text>
</View>
</View> </View>
<View style={styles.summaryBox}> <Text style={styles.sectionTitle}>Participants</Text>
<Text style={styles.summaryLabel}>Total Due</Text> {paymentDetails.participants.map(renderParticipant)}
<Text style={[styles.summaryValue, { color: colors.danger }]}>₹{paymentDetails?.totalDueWithLateFee}</Text> </>
</View> )}
</View> </ScrollView>
<Text style={styles.sectionTitle}>Participants</Text> )}
{paymentDetails?.participants.map(renderParticipant)}
</>
)}
</ScrollView>
</AppView> </AppView>
); );
}; };
@@ -251,7 +268,7 @@ const styles = StyleSheet.create({
summaryContainer: { flexDirection: 'row', justifyContent: 'space-around', padding: 20, backgroundColor: '#fff', marginHorizontal: 15, borderRadius: 12, elevation: 2 }, summaryContainer: { flexDirection: 'row', justifyContent: 'space-around', padding: 20, backgroundColor: '#fff', marginHorizontal: 15, borderRadius: 12, elevation: 2 },
summaryBox: { alignItems: 'center' }, summaryBox: { alignItems: 'center' },
summaryLabel: { fontSize: 14, color: '#6c757d', marginBottom: 4 }, summaryLabel: { fontSize: 14, color: '#6c757d', marginBottom: 4 },
summaryValue: { fontSize: 18, fontWeight: '700', color: colors.primary }, summaryValue: { fontSize: 18, fontWeight: '700', color: colors.black },
sectionTitle: { fontSize: 20, fontWeight: 'bold', marginLeft: 20, marginTop: 20, marginBottom: 10 }, sectionTitle: { fontSize: 20, fontWeight: 'bold', marginLeft: 20, marginTop: 20, marginBottom: 10 },
participantCard: { backgroundColor: '#fff', marginHorizontal: 15, marginBottom: 10, borderRadius: 10, padding: 15, flexDirection: 'row', alignItems: 'center', elevation: 1 }, participantCard: { backgroundColor: '#fff', marginHorizontal: 15, marginBottom: 10, borderRadius: 10, padding: 15, flexDirection: 'row', alignItems: 'center', elevation: 1 },
participantInfo: { flex: 1 }, participantInfo: { flex: 1 },
@@ -274,6 +291,30 @@ const styles = StyleSheet.create({
cancelButtonText: { color: '#333', fontWeight: 'bold' }, cancelButtonText: { color: '#333', fontWeight: 'bold' },
saveButton: { backgroundColor: colors.primary }, saveButton: { backgroundColor: colors.primary },
saveButtonText: { color: 'white', fontWeight: 'bold' }, saveButtonText: { color: 'white', fontWeight: 'bold' },
fullScreenMessage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f4f6f8',
padding: 20,
},
fullScreenMessageText: {
fontSize: 18,
color: '#333',
textAlign: 'center',
marginTop: 15,
fontWeight: 'bold',
},
refreshButton: {
marginTop: 20,
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 8,
},
refreshButtonText: {
color: colors.black,
fontWeight: 'bold',
},
}); });
export default Payments; export default Payments;
src/screens/profile/BecomeOrg.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const BecomeOrg = () => {
const token = credentials.password; const token = credentials.password;
const response = await fetch( const response = await fetch(
"https://api.godemo.in/FundCollect/api/organizer/registration/apply", "http://192.168.1.5:9060/api/organizer/registration/apply",
{ {
method: "POST", method: "POST",
headers: { headers: {
src/screens/profile/Profile.tsx
+4 -4
View File
@@ -29,7 +29,7 @@ import { clearUser, setUserData } from "../../redux/userSlice";
import { StackNavigationProp } from "@react-navigation/stack"; import { StackNavigationProp } from "@react-navigation/stack";
import { RootStackParamList } from "../../navigation/AppNavigator"; import { RootStackParamList } from "../../navigation/AppNavigator";
import { firebase } from "@react-native-firebase/messaging"; import { firebase } from "@react-native-firebase/messaging";
import FirebaseService from "../../utils/firebase/firebaseServices"; import FirebaseService, { deleteFcmToken } from "../../utils/firebase/firebaseServices";
type UserProfile = { type UserProfile = {
@@ -305,7 +305,7 @@ const Profile = () => {
return; return;
} }
await FirebaseService.deleteFcmToken(); await deleteFcmToken();
// Clear stored credentials // Clear stored credentials
await Keychain.resetGenericPassword(); await Keychain.resetGenericPassword();
@@ -377,7 +377,7 @@ const Profile = () => {
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerTitle}>User Profile</Text> <Text style={styles.headerTitle}>User Profile</Text>
<TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}> <TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}>
<Ionicons name="log-out-outline" size={24} color={colors.Profile} /> <Ionicons name="log-out-outline" size={24} color={colors.black} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{/* if (fetching || !user) { {/* if (fetching || !user) {
@@ -701,7 +701,7 @@ const styles = StyleSheet.create({
borderBottomRightRadius: 20, borderBottomRightRadius: 20,
}, },
headerTitle: { headerTitle: {
fontSize: 22, fontWeight: "600", color: colors.Profile fontSize: 22, fontWeight: "600", color: colors.black
}, },
refreshButton: { refreshButton: {
padding: 4, padding: 4,
src/utils/ApiHelper.tsx
+12 -13
View File
@@ -36,32 +36,31 @@ export async function apiCall<T>(
}); });
// --- Response Logging --- // --- Response Logging ---
console.log(`--- API Response: [${response}] ${url} ---`); console.log(`--- API Response:${url}///// [${response}] `);
// Uncomment the line below to see the full response data in logs
// console.log("Response Data:", JSON.stringify(response.data, null, 2));
console.log("---------------------------------------",response);
return response.data; return response.data;
} catch (error: any) { } catch (error: any) {
if (error.response) { if (error.response) {
// Server responded with a status other than 2xx // Server responded with a status other than 2xx
console.error( // console.error(
"API Error:", // "API Error:",
`Status: ${error.response.status}`, // `Status: ${error.response.status}`,
`Data: ${JSON.stringify(error.response.data)}` // `Data: ${JSON.stringify(error.response.data)}`
); // );
if(error.response.status === 400){ if(error.response.status === 400){
console.log("API Error:9090", url);
ToastAndroid.show(error.response.data.message || responseErrorMessage, ToastAndroid.SHORT) ToastAndroid.show(error.response.data.message || responseErrorMessage, ToastAndroid.SHORT)
} }
} else if (error.request) { } else if (error.request) {
// Request was made but no response received // Request was made but no response received
console.error("API Error: No response received", error.request); // console.error("API Error: No response received", error.request);
} else { } else {
// Something else went wrong while setting up the request // Something else went wrong while setting up the request
console.error("API Error:", error); // console.error("API Error:", error);
} }
console.error("-----------------"); console.log(`API : ${url} API Error:`, error);
return error.response.status
// Re-throw the error so that the calling function can handle it if needed // Re-throw the error so that the calling function can handle it if needed
throw error; throw error;
} }
src/utils/ApiUrls.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
// export const BASE_URL = "https://api.godemo.in/FundCollect/api/" // export const BASE_URL = "http://192.168.1.5:9060/api/"
export const BASE_URL = "https://api.godemo.in/FundCollect/api/" export const BASE_URL = "http://192.168.1.5:9060/api/"
export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=` export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=`
export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify` export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply` export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`
src/utils/firebase/firebaseServices.tsx
+101 -88
View File
@@ -4,105 +4,118 @@ import axios from 'axios';
import { apiCall } from '../ApiHelper'; import { apiCall } from '../ApiHelper';
import { REMOVE_FCM_TOKEN, STORE_FCM_TOKEN } from '../ApiUrls'; import { REMOVE_FCM_TOKEN, STORE_FCM_TOKEN } from '../ApiUrls';
// replace with your backend // 🔹 Request notification permission
export const requestPermission = async () => {
await messaging().requestPermission();
await notifee.requestPermission();
};
class FirebaseService { // 🔹 Display local notification
// 🔹 Request notification permission export const displayNotification = async (title: string, body: string) => {
static async requestPermission() { await notifee.displayNotification({
await messaging().requestPermission(); title,
await notifee.requestPermission(); body,
} android: {
channelId: 'default',
// 🔹 Display local notification smallIcon: 'ic_launcher', // ensure you have this icon in android/app/src/main/res/mipmap
static async displayNotification(title: string, body: string) { importance: AndroidImportance.HIGH,
await notifee.displayNotification({ pressAction: {
title, id: 'default',
body,
android: {
channelId: 'default',
smallIcon: 'ic_launcher', // ensure you have this icon in android/app/src/main/res/mipmap
importance: AndroidImportance.HIGH,
pressAction: {
id: 'default',
},
}, },
}); },
} });
};
// 🔹 Get & send token to backend // 🔹 Get & send token to backend
static async getFcmToken(userId: string) { export const getFcmToken = async (userId: string) => {
console.log('FCM Token o'); console.log('FCM Token o');
try { try {
console.log('FCM Token 1'); console.log('FCM Token 1');
const token = await messaging().getToken(); const token = await messaging().getToken();
console.log('FCM Token 2'); console.log('FCM Token 2');
console.log('FCM Token login: ', token); console.log('FCM Token login:', token);
await apiCall(STORE_FCM_TOKEN+token, 'POST'); await apiCall(STORE_FCM_TOKEN + token, 'POST');
console.log('FCM Token sent to backend'); console.log('FCM Token sent to backend');
return token; return token;
} catch (error) { } catch (error) {
console.error('Error getting FCM token:', error); console.error('Error getting FCM token:', error);
return null; return null;
}
};
// 🔹 Delete token from backend
export const deleteFcmToken = async () => {
try {
console.log('FCM Token 1');
const token = await messaging().getToken();
console.log('FCM Token 2');
console.log('fcm token logout -', token);
await apiCall(REMOVE_FCM_TOKEN + token, 'POST');
console.log('FCM Token deleted from backend');
} catch (error) {
console.error('Error deleting FCM token:', error);
}
};
// 🔹 Foreground notifications
export const foregroundListener = () => {
return messaging().onMessage(async remoteMessage => {
console.log('Foreground message:', remoteMessage);
const { messageId, notification, data } = remoteMessage;
if (!remoteMessage) return;
const { title, body } = data || {};
if (remoteMessage) {
await displayNotification(
(title as string) ?? 'New Message',
(body as string) ?? ''
);
} }
} });
};
// 🔹 Delete token from backend // 🔹 Background & Quit state
static async deleteFcmToken() { export const backgroundHandler = () => {
try { messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('FCM Token 1'); console.log('Background message:', remoteMessage);
const token = await messaging().getToken(); const { messageId, notification, data } = remoteMessage;
console.log('FCM Token 2'); if (!remoteMessage) return;
console.log("fcm token logout -",token) const { title, body } = data || {};
await apiCall(REMOVE_FCM_TOKEN+token, 'POST'); if (remoteMessage) {
console.log('FCM Token deleted from backend'); await displayNotification(
} catch (error) { (title as string) ?? 'New Message',
console.error('Error deleting FCM token:', error); (body as string) ?? ''
);
} }
} });
// 🔹 Foreground notifications messaging().onNotificationOpenedApp(remoteMessage => {
static foregroundListener() { console.log('App opened from background:', remoteMessage);
return messaging().onMessage(async remoteMessage => { });
console.log('Foreground message:', remoteMessage);
if (remoteMessage.notification) {
await this.displayNotification(
remoteMessage.notification.title ?? 'New Message',
remoteMessage.notification.body ?? ''
);
}
});
}
// 🔹 Background & Quit state messaging()
static backgroundHandler() { .getInitialNotification()
messaging().setBackgroundMessageHandler(async remoteMessage => { .then(remoteMessage => {
console.log('Background message:', remoteMessage);
if (remoteMessage.notification) {
await this.displayNotification(
remoteMessage.notification.title ?? 'New Message',
remoteMessage.notification.body ?? ''
);
}
});
messaging().onNotificationOpenedApp(remoteMessage => {
console.log('App opened from background:', remoteMessage);
});
messaging().getInitialNotification().then(remoteMessage => {
if (remoteMessage) { if (remoteMessage) {
console.log('App opened from quit state:', remoteMessage); console.log('App opened from quit state:', remoteMessage);
} }
}); });
} };
// 🔹 Token auto-refresh // 🔹 Token auto-refresh
static tokenRefreshHandler() { export const tokenRefreshHandler = () => {
return messaging().onTokenRefresh(async token => { return messaging().onTokenRefresh(async token => {
console.log('New refreshed FCM Token:', token); console.log('New refreshed FCM Token:', token);
// 👉 send to backend // 👉 send to backend
}); });
} };
}
export default FirebaseService; // Optional: Export all functions as a single object for easier imports
export default {
requestPermission,
displayNotification,
getFcmToken,
deleteFcmToken,
foregroundListener,
backgroundHandler,
tokenRefreshHandler,
};