manage group
This commit is contained in:
Abin Toppo
@@ -15,7 +15,7 @@ const colors = {
|
||||
textLight: "#555555",
|
||||
white: "#FFFFFF",
|
||||
black: "#000000",
|
||||
primary: "#007AFF",
|
||||
primary: "#a57ae9ff",
|
||||
};
|
||||
|
||||
export default colors;
|
||||
|
||||
@@ -63,7 +63,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
|
||||
? colors.pastelOrange
|
||||
: colors.primary);
|
||||
|
||||
const textColor = type === "secondary" ? colors.textDark : colors.white;
|
||||
const textColor = type === "secondary" ? colors.textDark : '#000';
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
|
||||
@@ -11,6 +11,7 @@ import GroupCreation from "../screens/GroupCreation";
|
||||
import GroupReview from "../screens/GroupReview";
|
||||
import BottomTabs from "./BottomTabs";
|
||||
import BecomeOrg from "../screens/profile/BecomeOrg";
|
||||
import EditGroupScreen from "../screens/management/EditGroupScreen";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
export type RootStackParamList = {
|
||||
@@ -23,6 +24,7 @@ export type RootStackParamList = {
|
||||
Profile: undefined;
|
||||
GroupCreation: undefined;
|
||||
GroupReview: undefined;
|
||||
EditGroup: { groupId: string}
|
||||
|
||||
};
|
||||
|
||||
@@ -60,6 +62,7 @@ export default function AppNavigator() {
|
||||
<Stack.Screen name="GroupCreation" component={GroupCreation} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="GroupReview" component={GroupReview} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="BecomeOrg" component={BecomeOrg} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="EditGroup" component={EditGroupScreen} options={{ headerShown: false }} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
// store.ts
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import userReducer from "./userSlice"; // adjust the path
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
user: userReducer, // register user slice here
|
||||
},
|
||||
});
|
||||
|
||||
// ✅ Types for TypeScript
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
@@ -0,0 +1,70 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import type { PayloadAction } from "@reduxjs/toolkit";
|
||||
|
||||
export interface UserState {
|
||||
id: string;
|
||||
userId: number | null;
|
||||
username: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
gender: string;
|
||||
mobile: string;
|
||||
email: string;
|
||||
address: string;
|
||||
bankAccountNumber: string;
|
||||
bankName: string;
|
||||
branchCode: string;
|
||||
profilePicture: string;
|
||||
filePath: string;
|
||||
imageBlob: string;
|
||||
role: string;
|
||||
organizerId: string;
|
||||
organizerStatus: string;
|
||||
profileStatus: boolean;
|
||||
}
|
||||
|
||||
const initialState: UserState = {
|
||||
id: "",
|
||||
userId: null,
|
||||
username: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
gender: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
address: "",
|
||||
bankAccountNumber: "",
|
||||
bankName: "",
|
||||
branchCode: "",
|
||||
profilePicture: "",
|
||||
filePath: "",
|
||||
imageBlob: "",
|
||||
role: "",
|
||||
organizerId: "",
|
||||
organizerStatus: "",
|
||||
profileStatus: false,
|
||||
};
|
||||
|
||||
export const userSlice = createSlice({
|
||||
name: "user",
|
||||
initialState,
|
||||
reducers: {
|
||||
// ✅ set all user details at once (e.g. after login)
|
||||
setUserData: (state, action: PayloadAction<UserState>) => {
|
||||
return { ...action.payload };
|
||||
},
|
||||
|
||||
// ✅ update only selected fields (e.g. profile update)
|
||||
updateUserData: (state, action: PayloadAction<Partial<UserState>>) => {
|
||||
return { ...state, ...action.payload };
|
||||
},
|
||||
|
||||
// ✅ clear user data (e.g. on logout)
|
||||
clearUser: () => initialState,
|
||||
},
|
||||
});
|
||||
|
||||
// Action creators
|
||||
export const { setUserData, updateUserData, clearUser } = userSlice.actions;
|
||||
|
||||
export default userSlice.reducer;
|
||||
@@ -16,6 +16,7 @@ import { CustomInput } from "../components/common/Custom";
|
||||
import CustomButton from "../components/CustomButton";
|
||||
import { Calendar } from "react-native-calendars";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from "../components/colors";
|
||||
|
||||
const calendarTheme = {
|
||||
backgroundColor: '#ffffff',
|
||||
@@ -133,7 +134,7 @@ export default function GroupCreationForm() {
|
||||
{presetAmounts.map((amount) => (<TouchableOpacity key={amount} onPress={() => handlePresetAmount(amount)} style={[styles.presetButton, form.contributionAmount === amount.toString() && styles.presetSelected]}><Text style={[styles.presetButtonText, form.contributionAmount === amount.toString() && styles.presetSelectedText]}>{amount}</Text></TouchableOpacity>))}
|
||||
</View>
|
||||
<View style={styles.amountContainer}>
|
||||
<Slider style={styles.slider} minimumValue={0} maximumValue={50000} step={100} value={parseInt(form.contributionAmount, 10) || 0} onValueChange={handleAmountChange} minimumTrackTintColor="#83f5cc" maximumTrackTintColor="#ddd" thumbTintColor="#62b59a" />
|
||||
<Slider style={styles.slider} minimumValue={0} maximumValue={50000} step={100} value={parseInt(form.contributionAmount, 10) || 0} onValueChange={handleAmountChange} minimumTrackTintColor={colors.pastelGreen} maximumTrackTintColor="#ddd" thumbTintColor="#62b59a" />
|
||||
<View style={styles.amountInput}><CustomInput label="" placeholder="Amount" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" /></View>
|
||||
</View>
|
||||
|
||||
@@ -164,19 +165,19 @@ export default function GroupCreationForm() {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f6fa" },
|
||||
titleContainer: { backgroundColor: "#83f5cc", paddingHorizontal: 18, paddingVertical: 2, borderRadius: 15, alignSelf: "flex-start", marginBottom: 30 },
|
||||
titleContainer: { paddingVertical: 2, borderRadius: 15, alignSelf: "flex-start", marginBottom: 30 },
|
||||
title: { fontSize: 22, fontWeight: "bold", color: "#333" },
|
||||
label: { fontSize: 14, fontWeight: "600", marginBottom: 10, color: "#444" },
|
||||
toggleContainer: { flexDirection: "row", gap: 10, marginBottom: 15 },
|
||||
toggleButton: { flex: 1, paddingVertical: 12, borderWidth: 1, borderColor: "#ddd", borderRadius: 12, alignItems: "center", backgroundColor: "#fff" },
|
||||
selectedButton: { backgroundColor: "#83f5cc", borderColor: "#62b59a" },
|
||||
selectedButton: { backgroundColor: colors.pastelGreen, borderColor: "#62b59a" },
|
||||
toggleButtonText: { color: "#444", fontWeight: "600" },
|
||||
selectedButtonText: { color: "#333" },
|
||||
participantsRow: { flexDirection: "row", justifyContent: "space-between", alignItems: 'flex-start', marginBottom: 10 },
|
||||
participantInput: { flex: 0.48 },
|
||||
presetContainer: { flexDirection: 'row', justifyContent: 'flex-start', gap: 10, marginBottom: 10 },
|
||||
presetButton: { paddingVertical: 8, paddingHorizontal: 15, backgroundColor: '#ddd', borderRadius: 20 },
|
||||
presetSelected: { backgroundColor: '#83f5cc' },
|
||||
presetSelected: { backgroundColor: colors.pastelGreen, },
|
||||
presetButtonText: { color: '#555', fontWeight: '600' },
|
||||
presetSelectedText: { color: '#333' },
|
||||
amountContainer: { flexDirection: 'row', alignItems: 'center', marginBottom: 15, },
|
||||
@@ -184,7 +185,7 @@ const styles = StyleSheet.create({
|
||||
amountInput: { width: 120, marginLeft: 10 },
|
||||
cycleTypeContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginBottom: 20 },
|
||||
cycleTypeButton: { paddingVertical: 10, paddingHorizontal: 15, backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 20, elevation: 1 },
|
||||
cycleTypeSelected: { backgroundColor: '#83f5cc', borderColor: '#62b59a' },
|
||||
cycleTypeSelected: { backgroundColor: colors.pastelGreen, borderColor: '#62b59a' },
|
||||
cycleTypeButtonText: { color: '#444', fontWeight: '600', textTransform: 'capitalize' },
|
||||
cycleTypeSelectedText: { color: '#333' },
|
||||
datePickerButton: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 12, paddingVertical: 15, paddingHorizontal: 15, marginBottom: 5, },
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import AppView from "../components/AppView";
|
||||
import { apiCall } from "../utils/ApiHelper";
|
||||
import { GROUP_CREATION_URL } from "../utils/ApiUrls";
|
||||
import colors from "../components/colors";
|
||||
|
||||
// --- Simplified Dialog Component ---
|
||||
const ThemedDialog = ({ visible, isSuccess, onClose }: { visible: boolean; isSuccess: boolean; onClose: () => void; }) => {
|
||||
@@ -114,7 +115,7 @@ export default function GroupReview({ route, navigation }: any) {
|
||||
<TimelineSection icon="wallet-outline" title="Financial Details">{renderRow("Contribution", `${form.contributionAmount} INR`)}{renderRow("Cycle", form.cycleType)}{form.cycleType === "CUSTOM" && renderRow("Cycle Days", `${form.customCycleDays} days`)}{renderRow("Start Date", form.startDate)}</TimelineSection>
|
||||
|
||||
<TouchableOpacity onPress={handleSubmit} style={styles.submitBtn} disabled={isLoading}>
|
||||
{isLoading ? <ActivityIndicator color="#333" /> : ( <> <Ionicons name="rocket-outline" size={22} color="#333" /> <Text style={styles.btnText}>Launch Group</Text> </> )}
|
||||
{isLoading ? <ActivityIndicator color="#333" /> : ( <> <Ionicons name="rocket-outline" size={22} color="#333" /> <Text style={styles.btnText}>Create Group</Text> </> )}
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
|
||||
@@ -136,7 +137,7 @@ const styles = StyleSheet.create({
|
||||
subtitle: { fontSize: 16, color: "#666", marginTop: 2 },
|
||||
section: { flexDirection: 'row', marginBottom: 10 },
|
||||
timeline: { alignItems: 'center', width: 40 },
|
||||
timelineIcon: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#83f5cc', justifyContent: 'center', alignItems: 'center', elevation: 3 },
|
||||
timelineIcon: { width: 40, height: 40, borderRadius: 20, backgroundColor: colors.pastelGreen, justifyContent: 'center', alignItems: 'center', elevation: 3 },
|
||||
timelineLine: { flex: 1, width: 2, backgroundColor: '#e0e0e0' },
|
||||
content: { flex: 1, paddingLeft: 10, paddingBottom: 20 },
|
||||
sectionTitle: { fontSize: 18, fontWeight: 'bold', color: '#444', marginBottom: 10 },
|
||||
@@ -146,12 +147,12 @@ const styles = StyleSheet.create({
|
||||
value: { fontSize: 15, color: "#333", fontWeight: "600", textAlign: 'right', textTransform: 'capitalize' },
|
||||
descriptionContainer: { paddingVertical: 10 },
|
||||
descriptionText: { fontSize: 15, color: '#333', marginTop: 4, lineHeight: 22 },
|
||||
submitBtn: { backgroundColor: "#83f5cc", flexDirection: 'row', justifyContent: 'center', alignItems: "center", paddingVertical: 16, borderRadius: 12, elevation: 3, marginTop: 20, borderWidth: 1.5, borderColor: '#62b59a' },
|
||||
submitBtn: { backgroundColor: colors.pastelGreen, flexDirection: 'row', justifyContent: 'center', alignItems: "center", paddingVertical: 16, borderRadius: 12, elevation: 3, marginTop: 20, borderWidth: 1.5, borderColor: '#62b59a' },
|
||||
btnText: { color: "#333", fontWeight: "bold", fontSize: 18, marginLeft: 10 },
|
||||
modalBackdrop: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center' },
|
||||
dialogBox: { width: '85%', backgroundColor: 'white', borderRadius: 16, padding: 25, alignItems: 'center', elevation: 10 },
|
||||
dialogTitle: { fontSize: 22, fontWeight: 'bold', color: '#333', marginTop: 15, marginBottom: 5 },
|
||||
dialogMessage: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 25 },
|
||||
dialogButton: { backgroundColor: '#83f5cc', paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 },
|
||||
dialogButton: { backgroundColor: colors.pastelGreen, paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 },
|
||||
dialogButtonText: { color: '#333', fontWeight: 'bold', fontSize: 16 },
|
||||
});
|
||||
|
||||
@@ -191,7 +191,7 @@ export default function GroupScreen() {
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
let data ;
|
||||
let data: Group[];
|
||||
switch (activeTab) {
|
||||
case "My Groups": data = myGroups; break;
|
||||
case "Joined": data = joinedGroups; break;
|
||||
@@ -214,7 +214,12 @@ export default function GroupScreen() {
|
||||
renderItem={({ item }) => (
|
||||
<GroupCard
|
||||
item={item}
|
||||
onJoin={activeTab === 'Public' ? handleJoinGroup : () => { }}
|
||||
onJoin={() => {
|
||||
console.log('mmmm')
|
||||
if (activeTab === 'Public') {
|
||||
handleJoinGroup(item.id, 'currentUserId');
|
||||
}
|
||||
}}
|
||||
onView={handleViewGroup}
|
||||
isGrid={isGridView}
|
||||
/>
|
||||
|
||||
+20
-24
@@ -10,24 +10,29 @@ import {
|
||||
Platform,
|
||||
Animated,
|
||||
StatusBar,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import { LOGIN_URL } from "../utils/ApiUrls";
|
||||
import axios from "axios";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import type { StackNavigationProp } from '@react-navigation/stack';
|
||||
import type { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
import { CustomButton, CustomInput } from "../components/common/Custom";
|
||||
import colors from "../components/colors";
|
||||
|
||||
const theme = {
|
||||
primary: "#111111",
|
||||
accent: "#FF7A00",
|
||||
accent: colors.primary,
|
||||
background: "#F9F9F9",
|
||||
surface: "#FFFFFF",
|
||||
text: "#1A1A1A",
|
||||
subText: "#6B6B6B",
|
||||
outline: "#E5E5E5",
|
||||
error: "#E53935",
|
||||
success: "#2E7D32",
|
||||
};
|
||||
|
||||
export default function LoginScreen() {
|
||||
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const [mobile, setMobile] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -48,16 +53,14 @@ export default function LoginScreen() {
|
||||
if (mobile.length === 10) {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log("Mobile submitted:", mobile);
|
||||
const res = await axios.get(LOGIN_URL + mobile)
|
||||
console.log('loginres', res.data)
|
||||
const res = await axios.get(LOGIN_URL + mobile);
|
||||
if (res.data.statusCode === 200) {
|
||||
navigation.navigate('OtpVarify', { mobile: mobile })
|
||||
navigation.navigate("OtpVarify", { mobile });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Login error:", error);
|
||||
Alert.alert("Error", "Failed to send OTP. Please try again.");
|
||||
}finally {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
@@ -102,15 +105,14 @@ export default function LoginScreen() {
|
||||
{ opacity: fade, transform: [{ translateY: slide }] },
|
||||
]}
|
||||
>
|
||||
<Text style={styles.inputLabel}>Mobile Number</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
<CustomInput
|
||||
label="Mobile Number"
|
||||
placeholder="Enter Mobile Number"
|
||||
placeholderTextColor={theme.subText}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
value={mobile}
|
||||
onChangeText={setMobile}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
icon="call-outline"
|
||||
/>
|
||||
</Animated.View>
|
||||
</View>
|
||||
@@ -119,14 +121,8 @@ export default function LoginScreen() {
|
||||
<Animated.View
|
||||
style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.button}
|
||||
onPress={handleContinue}
|
||||
onPressIn={onPressIn}
|
||||
onPressOut={onPressOut}
|
||||
>
|
||||
<Text style={styles.buttonText}>Continue</Text>
|
||||
</TouchableOpacity>
|
||||
<CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
|
||||
|
||||
<Text style={styles.footerText}>
|
||||
By continuing, you agree to our{" "}
|
||||
<Text style={{ color: theme.accent, fontWeight: "600" }}>
|
||||
@@ -142,7 +138,7 @@ const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: theme.background, padding: 20 },
|
||||
topSection: { flex: 1, justifyContent: "center" },
|
||||
brand: {
|
||||
fontSize: 20,
|
||||
fontSize: 30,
|
||||
fontWeight: "700",
|
||||
color: theme.accent,
|
||||
marginBottom: 24,
|
||||
@@ -166,7 +162,7 @@ const styles = StyleSheet.create({
|
||||
color: theme.text,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "#fff",
|
||||
backgroundColor: theme.surface,
|
||||
borderRadius: 14,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
|
||||
@@ -20,10 +20,11 @@ import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { LOGIN_URL, VARIFY_OTP_URL } from "../utils/ApiUrls";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import colors from "../components/colors";
|
||||
|
||||
const theme = {
|
||||
primary: "#111111",
|
||||
accent: "#FF7A00",
|
||||
accent: colors.primary,
|
||||
background: "#F9F9F9",
|
||||
text: "#1A1A1A",
|
||||
subText: "#6B6B6B",
|
||||
@@ -245,13 +246,13 @@ const styles = StyleSheet.create({
|
||||
cellFilled: { borderColor: "#D1D1D1" },
|
||||
bottomSection: { marginBottom: 30 },
|
||||
button: {
|
||||
backgroundColor: theme.primary,
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 18,
|
||||
borderRadius: 14,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
buttonText: { color: "#fff", fontWeight: "700", fontSize: 16 },
|
||||
buttonText: { color: "#000", fontWeight: "700", fontSize: 16 },
|
||||
footerText: {
|
||||
textAlign: "center",
|
||||
color: theme.subText,
|
||||
|
||||
@@ -1,13 +1,75 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { View, Text, StyleSheet, ActivityIndicator, Animated } from "react-native";
|
||||
import { View, Text, StyleSheet, ActivityIndicator, Animated, Alert } from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
|
||||
import { BASE_URL } from "../utils/ApiUrls";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setUserData } from "../redux/userSlice";
|
||||
import colors from "../components/colors";
|
||||
|
||||
const SplashScreen = () => {
|
||||
const dispatch = useDispatch();
|
||||
const user = useSelector((state: any) => state.user);
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const fadeAnim = useRef(new Animated.Value(1)).current; // opacity starts at 1
|
||||
const fadeAnim = useRef(new Animated.Value(1)).current;
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
const response = await fetch(
|
||||
`${BASE_URL}user/profile/view`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
dispatch(setUserData({
|
||||
id: result?.data.id,
|
||||
userId: result?.data.userId,
|
||||
username: result?.data.username,
|
||||
firstName: result?.data.firstName,
|
||||
lastName: result?.data.lastName,
|
||||
gender: result?.data.gender,
|
||||
mobile: result?.data.mobile,
|
||||
email: result?.data.email,
|
||||
address: result?.data.address,
|
||||
bankAccountNumber: result?.data.bankAccountNumber,
|
||||
bankName: result?.data.bankName,
|
||||
branchCode: result?.data.branchCode,
|
||||
profilePicture: result?.data.filePath, // or keep as `filePath`
|
||||
filePath: result?.data.filePath,
|
||||
imageBlob: result?.data.imageBlob,
|
||||
role: result?.data.role,
|
||||
organizerId: result?.data.organizerId,
|
||||
organizerStatus: result?.data.organizerStatus,
|
||||
profileStatus: true, // set true once profile is fetched
|
||||
}));
|
||||
|
||||
console.log("splash user data:", result.data);
|
||||
} else {
|
||||
Alert.alert("Error", "Failed to fetch user profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error fetching profile:", error);
|
||||
Alert.alert("Error", "Could not connect to server");
|
||||
}
|
||||
};
|
||||
|
||||
console.log("redux user", user);
|
||||
|
||||
useEffect(() => {
|
||||
const checkLogin = async () => {
|
||||
@@ -36,12 +98,16 @@ const SplashScreen = () => {
|
||||
});
|
||||
}, [navigation, fadeAnim]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Animated.Text style={[styles.title, { opacity: fadeAnim }]}>
|
||||
Circle Collect
|
||||
</Animated.Text>
|
||||
<ActivityIndicator size="large" color="#FF7A00" style={{ marginTop: 20 }} />
|
||||
<ActivityIndicator size="large" color={colors.Home} style={{ marginTop: 20 }} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@@ -58,7 +124,7 @@ const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: "800",
|
||||
color: "#FF7A00",
|
||||
color: colors.Home,
|
||||
letterSpacing: 1,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, TextInput, Button, Modal, StyleSheet } from "react-native";
|
||||
|
||||
const DeclineModal = ({ visible, onClose, onSubmit }: {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (reason: string) => void;
|
||||
}) => {
|
||||
const [reason, setReason] = useState("");
|
||||
|
||||
return (
|
||||
<Modal
|
||||
transparent
|
||||
animationType="fade"
|
||||
visible={visible}
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.overlay}>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Decline Request</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter reason"
|
||||
value={reason}
|
||||
onChangeText={setReason}
|
||||
/>
|
||||
<View style={styles.actions}>
|
||||
<Button title="Cancel" onPress={onClose} />
|
||||
<Button
|
||||
title="Decline"
|
||||
onPress={() => {
|
||||
onSubmit(reason);
|
||||
setReason(""); // reset after submit
|
||||
}}
|
||||
color="red"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
},
|
||||
container: {
|
||||
width: "80%",
|
||||
backgroundColor: "white",
|
||||
padding: 20,
|
||||
borderRadius: 10,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
marginBottom: 10,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ccc",
|
||||
borderRadius: 5,
|
||||
padding: 8,
|
||||
marginBottom: 15,
|
||||
},
|
||||
actions: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
});
|
||||
|
||||
export default DeclineModal;
|
||||
@@ -0,0 +1,192 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
TextInput,
|
||||
FlatList,
|
||||
ActivityIndicator,
|
||||
LayoutAnimation,
|
||||
UIManager,
|
||||
Platform,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from "../../components/colors";
|
||||
import * as keychain from "react-native-keychain";
|
||||
import { BASE_URL } from "../../utils/ApiUrls";
|
||||
|
||||
// Enable LayoutAnimation for Android
|
||||
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(true);
|
||||
}
|
||||
|
||||
|
||||
const GroupCard = ({ item }: { item: any }) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const toggleExpand = () => {
|
||||
LayoutAnimation.easeInEaseOut();
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
|
||||
return (
|
||||
<View style={styles.groupCard}>
|
||||
<View style={styles.groupLeft}>
|
||||
<View style={styles.groupAvatar}>
|
||||
<Text style={styles.avatarText}>{initial}</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.groupName}>{item.groupName}</Text>
|
||||
<Text style={styles.groupDescription}>{item.description}</Text>
|
||||
<Text style={styles.groupMeta}>
|
||||
{item.visibility} • {item.cycleType}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={toggleExpand}>
|
||||
<Ionicons
|
||||
name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
|
||||
size={22}
|
||||
color={colors.textLight}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{expanded && (
|
||||
<View style={styles.detailsBox}>
|
||||
{Object.entries(item).map(([key, value]) => (
|
||||
<Text key={key} style={styles.detailText}>
|
||||
<Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
|
||||
{Array.isArray(value) ? value.join("-") : String(value)}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// ✅ Group List with Search
|
||||
const GroupList = () => {
|
||||
const [groups, setGroups] = useState<any[]>([]);
|
||||
const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchGroups = async () => {
|
||||
const credentials = await keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
try {
|
||||
const res = await fetch(`${BASE_URL}fund/getAll/my/groups`, {
|
||||
headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
|
||||
});
|
||||
console.log("my groups response", res);
|
||||
const data = await res.json();
|
||||
setGroups(data.data || []);
|
||||
setFilteredGroups(data.data || []);
|
||||
} catch (e) {
|
||||
console.error("API error", e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchGroups();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (search.trim() === "") {
|
||||
setFilteredGroups(groups);
|
||||
} else {
|
||||
setFilteredGroups(
|
||||
groups.filter((g) =>
|
||||
g.groupName.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [search, groups]);
|
||||
|
||||
if (loading) return <ActivityIndicator size="large" color={colors.Home} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={styles.searchContainer}>
|
||||
<Ionicons name="search" size={20} color={colors.textLight} />
|
||||
<TextInput
|
||||
placeholder="Search groups..."
|
||||
placeholderTextColor={colors.textLight}
|
||||
style={styles.searchInput}
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={filteredGroups}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => <GroupCard item={item} />}
|
||||
ListEmptyComponent={
|
||||
<Text style={styles.emptyText}>No groups found</Text>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupList;
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
searchContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
marginVertical: 10,
|
||||
height: 45,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 5,
|
||||
elevation: 2,
|
||||
},
|
||||
searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
|
||||
|
||||
groupCard: {
|
||||
backgroundColor: colors.white,
|
||||
padding: 14,
|
||||
borderRadius: 14,
|
||||
marginBottom: 12,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
groupLeft: { flexDirection: "row", alignItems: "center" },
|
||||
groupAvatar: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
backgroundColor: colors.pastelPink,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 12,
|
||||
},
|
||||
avatarText: { fontSize: 18, fontWeight: "700", color: colors.Home },
|
||||
groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
|
||||
groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
|
||||
groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 },
|
||||
detailsBox: {
|
||||
marginTop: 10,
|
||||
padding: 10,
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#f9f9f9",
|
||||
},
|
||||
detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
|
||||
emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
|
||||
centered: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||||
sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import colors from "../../components/colors";
|
||||
import GroupList from "./GroupList";
|
||||
import RequestList from "./RequestList";
|
||||
|
||||
|
||||
// ✅ Tab Layout
|
||||
const GroupsTabs = () => {
|
||||
const [activeTab, setActiveTab] = useState("MyGroups");
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case "MyGroups":
|
||||
return <GroupList />;
|
||||
case "Requests":
|
||||
return <RequestList />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{/* Tabs */}
|
||||
<View style={styles.tabs}>
|
||||
{["MyGroups", "Requests"].map((tab) => (
|
||||
<TouchableOpacity
|
||||
key={tab}
|
||||
style={[
|
||||
styles.tabButton,
|
||||
activeTab === tab && styles.activeTabButton,
|
||||
]}
|
||||
onPress={() => setActiveTab(tab)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.tabText,
|
||||
activeTab === tab && styles.activeTabText,
|
||||
]}
|
||||
>
|
||||
{tab === "MyGroups" ? "My Groups" : tab}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Content */}
|
||||
{renderContent()}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupsTabs;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
tabs: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
marginVertical: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#ddd",
|
||||
},
|
||||
tabButton: { paddingVertical: 10, flex: 1, alignItems: "center" },
|
||||
tabText: { fontSize: 16, color: colors.textLight },
|
||||
activeTabButton: { borderBottomWidth: 2, borderBottomColor: colors.Home },
|
||||
activeTabText: { color: colors.Home, fontWeight: "600" },
|
||||
|
||||
searchContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
marginVertical: 10,
|
||||
height: 45,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 5,
|
||||
elevation: 2,
|
||||
},
|
||||
searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
|
||||
|
||||
groupCard: {
|
||||
backgroundColor: colors.white,
|
||||
padding: 14,
|
||||
borderRadius: 14,
|
||||
marginBottom: 12,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
groupLeft: { flexDirection: "row", alignItems: "center" },
|
||||
groupAvatar: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
backgroundColor: colors.Home + "33",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: 12,
|
||||
},
|
||||
avatarText: { fontSize: 18, fontWeight: "700", color: colors.Home },
|
||||
groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
|
||||
groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
|
||||
groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 },
|
||||
detailsBox: {
|
||||
marginTop: 10,
|
||||
padding: 10,
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#f9f9f9",
|
||||
},
|
||||
detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
|
||||
emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
|
||||
centered: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||||
sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
|
||||
});
|
||||
+39
-141
@@ -1,82 +1,51 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
FlatList,
|
||||
UIManager,
|
||||
Platform,
|
||||
Image,
|
||||
} from "react-native";
|
||||
import AppView from "../../components/AppView";
|
||||
import UserProfileStatus from "./UserProfileStatus";
|
||||
import colors from "../../components/colors";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons";
|
||||
|
||||
const dummyChats = [
|
||||
{ id: "1", name: "Amit Sharma", lastMessage: "Sent ₹500", avatar: "https://i.pravatar.cc/100?img=1" },
|
||||
{ id: "2", name: "Sneha Patel", lastMessage: "Requested ₹200", avatar: "https://i.pravatar.cc/100?img=2" },
|
||||
{ id: "3", name: "Group Savings", lastMessage: "Target reached 🎉", avatar: "https://i.pravatar.cc/100?img=3" },
|
||||
];
|
||||
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import GroupsTabs from "./GroupsTabs";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
// Enable animation for Android
|
||||
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(true);
|
||||
}
|
||||
const Home = () => {
|
||||
const user = useSelector((state: any) => state.user);
|
||||
const navigation = useNavigation();
|
||||
console.log("redux user data in Home:", user);
|
||||
return (
|
||||
<AppView barStyle="dark-content">
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.greeting}>Hello, Pooja 👋</Text>
|
||||
<TouchableOpacity>
|
||||
<Ionicons name="person-circle-outline" size={40} color={colors.primary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Status */}
|
||||
<UserProfileStatus />
|
||||
|
||||
{/* Search Bar */}
|
||||
<View style={styles.searchContainer}>
|
||||
<Ionicons name="search" size={20} color={colors.textLight} />
|
||||
<TextInput
|
||||
placeholder="Search chats or funds..."
|
||||
placeholderTextColor={colors.textLight}
|
||||
style={styles.searchInput}
|
||||
<AppView barStyle="dark-content" style={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.greeting}>Hello, {user.firstName} {user.lastName}👋</Text>
|
||||
<TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
|
||||
{/* <Ionicons
|
||||
name="person-circle-outline"
|
||||
size={40}
|
||||
color={colors.primary}
|
||||
/> */}
|
||||
<Image
|
||||
source={
|
||||
user.imageBlob
|
||||
&& { uri: user.imageBlob ? `data:image/jpeg;base64,${user.imageBlob}` : user.profilePicture }
|
||||
}
|
||||
style={{ width: 40, height: 40, borderRadius: 20, borderColor: colors.primary, borderWidth: 2 }}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<View style={styles.quickActions}>
|
||||
<TouchableOpacity style={styles.actionButton}>
|
||||
<Ionicons name="send-outline" size={22} color={colors.primary} />
|
||||
<Text style={styles.actionText}>Send</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.actionButton}>
|
||||
<Ionicons name="cash-outline" size={22} color={colors.primary} />
|
||||
<Text style={styles.actionText}>Request</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.actionButton}>
|
||||
<Ionicons name="time-outline" size={22} color={colors.primary} />
|
||||
<Text style={styles.actionText}>History</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Recent Chats / Transactions */}
|
||||
<Text style={styles.sectionTitle}>Recent Activity</Text>
|
||||
<FlatList
|
||||
data={dummyChats}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity style={styles.chatItem}>
|
||||
<Image source={{ uri: item.avatar }} style={styles.avatar} />
|
||||
<View style={styles.chatInfo}>
|
||||
<Text style={styles.chatName}>{item.name}</Text>
|
||||
<Text style={styles.chatMessage}>{item.lastMessage}</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward-outline" size={20} color={colors.textLight} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{/* Status */}
|
||||
<UserProfileStatus />
|
||||
<GroupsTabs />
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
@@ -85,8 +54,7 @@ export default Home;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
// padding: 16,
|
||||
paddingBottom: '25%',
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
@@ -94,77 +62,7 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
marginBottom: 12,
|
||||
},
|
||||
greeting: {
|
||||
fontSize: 22,
|
||||
fontWeight: "600",
|
||||
color: colors.textDark,
|
||||
},
|
||||
searchContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
marginVertical: 10,
|
||||
height: 45,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 5,
|
||||
elevation: 2,
|
||||
},
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
marginLeft: 8,
|
||||
color: colors.textDark,
|
||||
},
|
||||
quickActions: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginVertical: 16,
|
||||
},
|
||||
actionButton: {
|
||||
alignItems: "center",
|
||||
flex: 1,
|
||||
},
|
||||
actionText: {
|
||||
marginTop: 6,
|
||||
fontSize: 14,
|
||||
color: colors.textDark,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
marginVertical: 10,
|
||||
color: colors.textDark,
|
||||
},
|
||||
chatItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.white,
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
marginBottom: 10,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 1,
|
||||
},
|
||||
avatar: {
|
||||
width: 45,
|
||||
height: 45,
|
||||
borderRadius: 22,
|
||||
marginRight: 12,
|
||||
},
|
||||
chatInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
chatName: {
|
||||
fontSize: 16,
|
||||
fontWeight: "500",
|
||||
color: colors.textDark,
|
||||
},
|
||||
chatMessage: {
|
||||
fontSize: 14,
|
||||
color: colors.textLight,
|
||||
},
|
||||
});
|
||||
greeting: { fontSize: 22, fontWeight: "600", color: colors.Home },
|
||||
|
||||
|
||||
});
|
||||
@@ -0,0 +1,606 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
RefreshControl,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
TextInput
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@react-native-vector-icons/ionicons';
|
||||
import colors from '../../components/colors';
|
||||
import DeclineModal from './DeclineModal';
|
||||
|
||||
// Define TypeScript interfaces
|
||||
interface GroupRequest {
|
||||
requestId: string;
|
||||
groupName: string;
|
||||
groupId: string;
|
||||
userId: number;
|
||||
userName: string;
|
||||
mobile: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface ApiResponse {
|
||||
message: string;
|
||||
status: string;
|
||||
statusCode: number;
|
||||
data: GroupRequest[];
|
||||
}
|
||||
|
||||
const RequestList: React.FC = () => {
|
||||
const [requests, setRequests] = useState<GroupRequest[]>([]);
|
||||
const [filteredRequests, setFilteredRequests] = useState<GroupRequest[]>([]);
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
const [processingRequest, setProcessingRequest] = useState<string | null>(null);
|
||||
const [showDeclineModal, setShowDeclineModal] = useState<{modal: boolean, requestId: string | null}>({modal: false, requestId: null});
|
||||
const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
|
||||
|
||||
// Fetch data from API
|
||||
const fetchRequests = async (): Promise<void> => {
|
||||
try {
|
||||
setRefreshing(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(
|
||||
"https://api.godemo.in/FundCollect/api/fund/group/pending/request",
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
accept: "*/*",
|
||||
Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDkxMjEzLCJleHAiOjE3NTgxNzc2MTN9.T3BvU7nl8fnjwwVobIWRmSFFxQzOjtyIct1Ba0i9lIU"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data: ApiResponse = await response.json();
|
||||
|
||||
if (data.status === "success") {
|
||||
setRequests(data.data);
|
||||
setFilteredRequests(data.data);
|
||||
} else {
|
||||
throw new Error("Failed to fetch requests");
|
||||
}
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";
|
||||
setError(errorMessage);
|
||||
console.error("API Error:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRequests();
|
||||
}, []);
|
||||
|
||||
// Filter requests based on search query
|
||||
useEffect(() => {
|
||||
if (searchQuery.trim() === '') {
|
||||
setFilteredRequests(requests);
|
||||
} else {
|
||||
const query = searchQuery.toLowerCase();
|
||||
const filtered = requests.filter(request =>
|
||||
request.groupName.toLowerCase().includes(query) ||
|
||||
request.userName.toLowerCase().includes(query) ||
|
||||
request.mobile.includes(query) ||
|
||||
request.status.toLowerCase().includes(query)
|
||||
);
|
||||
setFilteredRequests(filtered);
|
||||
}
|
||||
}, [searchQuery, requests]);
|
||||
|
||||
const handleAccept = async (requestId: string): Promise<void> => {
|
||||
Alert.alert(
|
||||
"Accept Request",
|
||||
"Are you sure you want to accept this request?",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Accept",
|
||||
onPress: async () => {
|
||||
try {
|
||||
setProcessingRequest(requestId);
|
||||
|
||||
// Make API call to approve the request
|
||||
const response = await fetch(
|
||||
`https://api.godemo.in/FundCollect/api/fund/requests/${requestId}/approve`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"accept": "*/*",
|
||||
"Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDkxMjEzLCJleHAiOjE3NTgxNzc2MTN9.T3BvU7nl8fnjwwVobIWRmSFFxQzOjtyIct1Ba0i9lIU"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Parse response
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === "success") {
|
||||
// Remove the accepted request from the list
|
||||
const updatedRequests = requests.filter(req => req.requestId !== requestId);
|
||||
setRequests(updatedRequests);
|
||||
Alert.alert("Success", data.message || "Request accepted successfully");
|
||||
fetchRequests();
|
||||
} else {
|
||||
throw new Error(data.message || "Failed to accept request");
|
||||
}
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";
|
||||
Alert.alert("Error", `Failed to accept request: ${errorMessage}`);
|
||||
console.error("Accept Error:", error);
|
||||
} finally {
|
||||
setProcessingRequest(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeclineConfirm = async (requestedId: string | null, reason: string) => {
|
||||
setShowDeclineModal({modal: false, requestId: null});
|
||||
try {
|
||||
setProcessingRequest(requestedId);
|
||||
|
||||
// Make API call to decline the request
|
||||
const response = await fetch(
|
||||
`https://api.godemo.in/FundCollect/api/fund/requests/${requestedId}/reject?reason=/${reason}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"accept": "*/*",
|
||||
"Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDkxMjEzLCJleHAiOjE3NTgxNzc2MTN9.T3BvU7nl8fnjwwVobIWRmSFFxQzOjtyIct1Ba0i9lIU"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Parse response
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === "success") {
|
||||
// Remove the declined request from the list
|
||||
const updatedRequests = requests.filter(req => req.requestId !== selectedRequestId);
|
||||
setRequests(updatedRequests);
|
||||
Alert.alert("Success", data.message || "Request declined successfully");
|
||||
fetchRequests();
|
||||
} else {
|
||||
throw new Error(data.message || "Failed to decline request");
|
||||
}
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";
|
||||
Alert.alert("Error", `Failed to decline request: ${errorMessage}`);
|
||||
console.error("Decline Error:", error);
|
||||
} finally {
|
||||
setProcessingRequest(null);
|
||||
}// call your API
|
||||
};
|
||||
|
||||
|
||||
|
||||
const onRefresh = (): void => {
|
||||
fetchRequests();
|
||||
};
|
||||
|
||||
const getInitials = (name: string): string => {
|
||||
return name
|
||||
.split(' ')
|
||||
.map(word => word.charAt(0))
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.substring(0, 2);
|
||||
};
|
||||
|
||||
const clearSearch = (): void => {
|
||||
setSearchQuery('');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.centerContainer}>
|
||||
<ActivityIndicator size="large" color="#3498db" />
|
||||
<Text style={styles.loadingText}>Loading requests...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<View style={styles.centerContainer}>
|
||||
<Ionicons name="alert-circle" size={64} color="#e74c3c" />
|
||||
<Text style={styles.errorText}>Error loading requests</Text>
|
||||
<Text style={styles.errorSubText}>{error}</Text>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={fetchRequests}>
|
||||
<Text style={styles.retryButtonText}>Try Again</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Pending Requests</Text>
|
||||
<Text style={styles.headerSubtitle}>
|
||||
{filteredRequests.length} pending group request{filteredRequests.length !== 1 ? 's' : ''}
|
||||
{searchQuery ? ` matching "${searchQuery}"` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Search Bar */}
|
||||
<View style={styles.searchContainer}>
|
||||
<Ionicons name="search" size={20} color="#95a5a6" style={styles.searchIcon} />
|
||||
<TextInput
|
||||
style={styles.searchInput}
|
||||
placeholder="Search by group, name, phone or status..."
|
||||
value={searchQuery}
|
||||
onChangeText={setSearchQuery}
|
||||
placeholderTextColor="#95a5a6"
|
||||
/>
|
||||
{searchQuery ? (
|
||||
<TouchableOpacity onPress={clearSearch} style={styles.clearButton}>
|
||||
<Ionicons name="close-circle" size={20} color="#95a5a6" />
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||
}
|
||||
contentContainerStyle={filteredRequests.length === 0 ? styles.emptyScrollView : undefined}
|
||||
>
|
||||
{filteredRequests.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
{searchQuery ? (
|
||||
<>
|
||||
<Ionicons name="search" size={64} color="#ccc" />
|
||||
<Text style={styles.emptyStateText}>No matching requests</Text>
|
||||
<Text style={styles.emptyStateSubtext}>
|
||||
No requests found for "{searchQuery}"
|
||||
</Text>
|
||||
<TouchableOpacity onPress={clearSearch} style={styles.clearSearchButton}>
|
||||
<Text style={styles.clearSearchText}>Clear Search</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="checkmark-done-circle" size={64} color="#ccc" />
|
||||
<Text style={styles.emptyStateText}>No pending requests</Text>
|
||||
<Text style={styles.emptyStateSubtext}>
|
||||
You're all caught up! There are no pending group requests.
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
filteredRequests.map((request) => (
|
||||
<View key={request.requestId} style={styles.requestCard}>
|
||||
<View style={styles.cardHeader}>
|
||||
<View style={styles.groupInfo}>
|
||||
<View style={styles.avatar}>
|
||||
<Text style={styles.avatarText}>
|
||||
{getInitials(request.groupName)}
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text style={styles.groupName}>{request.groupName}</Text>
|
||||
<Text style={styles.requestText}>Group Join Request</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[
|
||||
styles.statusBadge,
|
||||
request.status === 'PENDING' ? styles.pendingBadge : styles.otherBadge
|
||||
]}>
|
||||
<Text style={styles.statusText}>{request.status}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<View style={styles.userInfo}>
|
||||
<Ionicons name="person" size={16} color="#666" />
|
||||
<Text style={styles.userName}>{request.userName}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.userInfo}>
|
||||
<Ionicons name="call" size={16} color="#666" />
|
||||
<Text style={styles.userDetail}>{request.mobile}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.actions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.declineButton]}
|
||||
onPress={() => setShowDeclineModal({modal:true, requestId: request.requestId})}
|
||||
disabled={processingRequest === request.requestId}
|
||||
>
|
||||
{processingRequest === request.requestId ? (
|
||||
<ActivityIndicator size="small" color="#e74c3c" />
|
||||
) : (
|
||||
<Text style={styles.declineButtonText}>Decline</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.acceptButton]}
|
||||
onPress={() => handleAccept(request.requestId)}
|
||||
disabled={processingRequest === request.requestId}
|
||||
>
|
||||
{processingRequest === request.requestId ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.acceptButtonText}>Accept</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</ScrollView>
|
||||
{showDeclineModal.modal && (
|
||||
<DeclineModal
|
||||
visible={showDeclineModal.modal}
|
||||
onClose={() => setShowDeclineModal({modal: false, requestId: null})}
|
||||
onSubmit={(reason) => handleDeclineConfirm(showDeclineModal.requestId, reason)}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingBottom: '100%',
|
||||
},
|
||||
centerContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f5f7fb',
|
||||
padding: 20,
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
marginTop: 12,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#e74c3c',
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
},
|
||||
errorSubText: {
|
||||
fontSize: 14,
|
||||
color: '#7f8c8d',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
retryButton: {
|
||||
backgroundColor: colors.pastelPink,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 8,
|
||||
},
|
||||
retryButtonText: {
|
||||
color: '#fff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
header: {
|
||||
// backgroundColor: '#fff',
|
||||
// // padding: 20,
|
||||
// borderBottomWidth: 1,
|
||||
// borderBottomColor: '#eee',
|
||||
// shadowColor: '#000',
|
||||
// shadowOffset: { width: 0, height: 2 },
|
||||
// shadowOpacity: 0.1,
|
||||
// shadowRadius: 3,
|
||||
// elevation: 3,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#2c3e50',
|
||||
marginBottom: 5,
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: 14,
|
||||
color: '#7f8c8d',
|
||||
},
|
||||
// Search styles
|
||||
searchContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
marginVertical: 16,
|
||||
marginBottom: 8,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
height: 50,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
},
|
||||
searchIcon: {
|
||||
marginRight: 8,
|
||||
},
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
height: '100%',
|
||||
fontSize: 16,
|
||||
color: '#2c3e50',
|
||||
padding: 0,
|
||||
},
|
||||
clearButton: {
|
||||
padding: 4,
|
||||
},
|
||||
clearSearchButton: {
|
||||
marginTop: 16,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: '#ecf0f1',
|
||||
borderRadius: 6,
|
||||
},
|
||||
clearSearchText: {
|
||||
color: '#7f8c8d',
|
||||
fontWeight: '500',
|
||||
},
|
||||
emptyScrollView: {
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
requestCard: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
marginBottom: 16,
|
||||
padding: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
groupInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
avatar: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
backgroundColor: colors.pastelPink,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
avatarText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
groupName: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#2c3e50',
|
||||
},
|
||||
requestText: {
|
||||
fontSize: 14,
|
||||
color: '#7f8c8d',
|
||||
marginTop: 2,
|
||||
},
|
||||
statusBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
borderRadius: 12,
|
||||
},
|
||||
pendingBadge: {
|
||||
backgroundColor: '#fff4e6',
|
||||
},
|
||||
otherBadge: {
|
||||
backgroundColor: '#e8f5e9',
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: '#ecf0f1',
|
||||
marginVertical: 12,
|
||||
},
|
||||
userInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
userName: {
|
||||
fontSize: 16,
|
||||
color: '#2c3e50',
|
||||
marginLeft: 8,
|
||||
},
|
||||
userDetail: {
|
||||
fontSize: 14,
|
||||
color: '#7f8c8d',
|
||||
marginLeft: 8,
|
||||
},
|
||||
actions: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: 16,
|
||||
},
|
||||
button: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 8,
|
||||
marginLeft: 12,
|
||||
minWidth: 100,
|
||||
alignItems: 'center',
|
||||
},
|
||||
acceptButton: {
|
||||
backgroundColor: '#2ecc71',
|
||||
},
|
||||
declineButton: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#e74c3c',
|
||||
},
|
||||
acceptButtonText: {
|
||||
color: '#fff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
declineButtonText: {
|
||||
color: '#e74c3c',
|
||||
fontWeight: '600',
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 40,
|
||||
},
|
||||
emptyStateText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#7f8c8d',
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptyStateSubtext: {
|
||||
fontSize: 14,
|
||||
color: '#bdc3c7',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default RequestList;
|
||||
@@ -159,7 +159,7 @@ export default UserProfileStatus;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
// flex: 1,
|
||||
// padding: 16,
|
||||
// backgroundColor: "#f5f7fb",
|
||||
},
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
import { NativeStackScreenProps } from '@react-navigation/native-stack';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
|
||||
import { apiCall } from '../../utils/ApiHelper'; // Adjust path
|
||||
import AppView from '../../components/AppView';
|
||||
|
||||
// --- Type Definitions ---
|
||||
interface Participant {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string | null;
|
||||
mobile: string;
|
||||
role: 'ORGANIZER' | 'USER';
|
||||
}
|
||||
|
||||
export interface GroupDetails {
|
||||
id: string;
|
||||
groupName: string;
|
||||
description: string;
|
||||
startDate: [number, number, number];
|
||||
endDate: [number, number, number] | null;
|
||||
contributionAmount: number;
|
||||
maxParticipants: number;
|
||||
latePaymentCharge: number | null;
|
||||
cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
|
||||
visibility: 'PUBLIC' | 'PRIVATE';
|
||||
organizerFirstName: string;
|
||||
organizerLastName: string;
|
||||
customCycleDays: number;
|
||||
status: string;
|
||||
totalParticipants: number;
|
||||
participants: Participant[];
|
||||
}
|
||||
|
||||
export interface EditGroupPayload {
|
||||
groupName: string;
|
||||
description: string;
|
||||
visibility: 'PUBLIC' | 'PRIVATE';
|
||||
cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
|
||||
contributionAmount: number;
|
||||
maxParticipants: number;
|
||||
latePaymentCharge: number;
|
||||
customCycleDays: number;
|
||||
startDate: string;
|
||||
endDate: string | null;
|
||||
}
|
||||
|
||||
type EditGroupScreenProps = NativeStackScreenProps<RootStackParamList, 'EditGroup'>;
|
||||
|
||||
// --- Helper Components for Read-Only View ---
|
||||
const InfoRow: React.FC<{ label: string; value: string | number; isStatus?: boolean }> = ({ label, value, isStatus = false }) => (
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.infoValue,
|
||||
isStatus && { color: value === 'ACTIVE' ? '#059669' : '#D97706' } // Green for Active, Amber for others
|
||||
]}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const ParticipantRow: React.FC<{ participant: Participant }> = ({ participant }) => (
|
||||
<View style={styles.participantRow}>
|
||||
<View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Text style={styles.participantName}>{`${participant.firstName} ${participant.lastName || ''}`.trim()}</Text>
|
||||
{participant.role === 'ORGANIZER' && (
|
||||
<View style={styles.organizerBadge}>
|
||||
<Text style={styles.organizerBadgeText}>Organizer</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text style={styles.participantMobile}>{participant.mobile}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
|
||||
// --- Main Screen Component ---
|
||||
const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route, navigation }) => {
|
||||
const { groupId } = route.params;
|
||||
|
||||
// --- State Management ---
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [groupDetails, setGroupDetails] = useState<GroupDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// --- Form State ---
|
||||
const [groupName, setGroupName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [contributionAmount, setContributionAmount] = useState('');
|
||||
const [maxParticipants, setMaxParticipants] = useState('');
|
||||
const [latePaymentCharge, setLatePaymentCharge] = useState('');
|
||||
|
||||
// --- Data Fetching ---
|
||||
const fetchGroupDetails = async () => {
|
||||
if (!groupId) {
|
||||
setError("Group ID not provided.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await apiCall(
|
||||
`https://api.godemo.in/FundCollect/api/fund/group/details?groupId=${groupId}`,
|
||||
'GET',
|
||||
) as { status: string; data?: GroupDetails; message?: string };
|
||||
|
||||
if (response.status === 'success' && response.data) {
|
||||
setGroupDetails(response.data);
|
||||
// Populate form state immediately
|
||||
const data = response.data;
|
||||
setGroupName(data.groupName);
|
||||
setDescription(data.description);
|
||||
setContributionAmount(data.contributionAmount.toString());
|
||||
setMaxParticipants(data.maxParticipants.toString());
|
||||
setLatePaymentCharge((data.latePaymentCharge || 0).toString());
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to fetch group data.');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroupDetails();
|
||||
}, [groupId]);
|
||||
|
||||
// --- Action Handlers ---
|
||||
const handleCancelEdit = () => {
|
||||
// Re-populate state from original details to discard any changes
|
||||
if (groupDetails) {
|
||||
setGroupName(groupDetails.groupName);
|
||||
setDescription(groupDetails.description);
|
||||
setContributionAmount(groupDetails.contributionAmount.toString());
|
||||
setMaxParticipants(groupDetails.maxParticipants.toString());
|
||||
setLatePaymentCharge((groupDetails.latePaymentCharge || 0).toString());
|
||||
}
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleSaveChanges = async () => {
|
||||
if (!groupDetails) return;
|
||||
setSaving(true);
|
||||
const payload: EditGroupPayload = {
|
||||
groupName,
|
||||
description,
|
||||
visibility: groupDetails.visibility, // Assuming these are not editable
|
||||
cycleType: groupDetails.cycleType,
|
||||
contributionAmount: parseFloat(contributionAmount) || 0,
|
||||
maxParticipants: parseInt(maxParticipants, 10) || 0,
|
||||
latePaymentCharge: parseFloat(latePaymentCharge) || 0,
|
||||
customCycleDays: groupDetails.customCycleDays,
|
||||
startDate: new Date(groupDetails.startDate.join('-')).toISOString().split('T')[0],
|
||||
endDate: groupDetails.endDate ? new Date(groupDetails.endDate.join('-')).toISOString().split('T')[0] : null,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await apiCall(
|
||||
`https://api.godemo.in/FundCollect/api/fund/groups/${groupDetails.id}/edit`, 'PUT', payload
|
||||
) as { status: string; message?: string };
|
||||
|
||||
if (response.status === 'success') {
|
||||
Alert.alert('Success', 'Group details have been updated.');
|
||||
setIsEditing(false);
|
||||
await fetchGroupDetails(); // Refresh data to show updated view
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to save changes.');
|
||||
}
|
||||
} catch (e: any) {
|
||||
Alert.alert('Save Error', e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// --- Render Logic ---
|
||||
if (loading) return <View style={styles.centered}><ActivityIndicator size="large" color="#4F46E5" /></View>;
|
||||
if (error) return <View style={styles.centered}><Text style={styles.errorText}>{error}</Text></View>;
|
||||
if (!groupDetails) return null;
|
||||
|
||||
return (
|
||||
<AppView paddingHorizontal={0}>
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Group Overview</Text>
|
||||
{!isEditing && groupDetails.status !== 'ACTIVE' ? (
|
||||
<TouchableOpacity style={styles.editButton} onPress={() => setIsEditing(true)}>
|
||||
<Text style={styles.editButtonText}>Edit</Text>
|
||||
</TouchableOpacity>
|
||||
) : isEditing ? (
|
||||
<TouchableOpacity onPress={handleCancelEdit}>
|
||||
<Text style={styles.cancelButtonText}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{/* --- Main Details Card --- */}
|
||||
<View style={styles.card}>
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Text style={styles.inputLabel}>Group Name</Text>
|
||||
<TextInput style={styles.input} value={groupName} onChangeText={setGroupName} />
|
||||
<Text style={styles.inputLabel}>Description</Text>
|
||||
<TextInput style={[styles.input, styles.textArea]} value={description} onChangeText={setDescription} multiline />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text style={styles.groupNameView}>{groupDetails.groupName}</Text>
|
||||
<Text style={styles.descriptionView}>{groupDetails.description}</Text>
|
||||
</>
|
||||
)}
|
||||
<View style={styles.divider} />
|
||||
<View style={styles.row}>
|
||||
<View style={styles.column}>
|
||||
<Text style={styles.inputLabel}>Contribution</Text>
|
||||
<Text style={styles.dataText}>{`₹${groupDetails.contributionAmount.toLocaleString('en-IN')}`}</Text>
|
||||
</View>
|
||||
<View style={styles.column}>
|
||||
<Text style={styles.inputLabel}>Cycle</Text>
|
||||
<Text style={styles.dataText}>{groupDetails.cycleType}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* --- Participants Card --- */}
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Participants ({groupDetails.totalParticipants}/{groupDetails.maxParticipants})</Text>
|
||||
{groupDetails.participants.map(p => <ParticipantRow key={`${p.id}-${p.mobile}`} participant={p} />)}
|
||||
</View>
|
||||
|
||||
{/* --- Other Details Card (Always Read-Only) --- */}
|
||||
<View style={styles.card}>
|
||||
<InfoRow label="Group Status" value={groupDetails.status} isStatus />
|
||||
<InfoRow label="Visibility" value={groupDetails.visibility} />
|
||||
<InfoRow label="Start Date" value={new Date(groupDetails.startDate.join('-')).toLocaleDateString()} />
|
||||
</View>
|
||||
|
||||
{isEditing && (
|
||||
<TouchableOpacity style={styles.saveButton} onPress={handleSaveChanges} disabled={saving}>
|
||||
{saving ? <ActivityIndicator color="#FFFFFF" /> : <Text style={styles.saveButtonText}>Save Changes</Text>}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</ScrollView>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F3F4F6' },
|
||||
contentContainer: { paddingVertical: 20, paddingHorizontal: 16 },
|
||||
centered: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F3F4F6' },
|
||||
errorText: { color: '#EF4444', fontSize: 16, textAlign: 'center' },
|
||||
|
||||
header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
|
||||
headerTitle: { fontSize: 26, fontWeight: 'bold', color: '#111827' },
|
||||
editButton: { backgroundColor: '#E0E7FF', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
|
||||
editButtonText: { color: '#4338CA', fontSize: 14, fontWeight: '600' },
|
||||
cancelButtonText: { fontSize: 16, color: '#6B7280', fontWeight: '500' },
|
||||
|
||||
card: { backgroundColor: '#FFFFFF', borderRadius: 16, padding: 20, marginBottom: 16, elevation: 1, shadowColor: '#374151', shadowOpacity: 0.05, shadowRadius: 10, shadowOffset: { width: 0, height: 4 } },
|
||||
cardTitle: { fontSize: 18, fontWeight: '600', color: '#1F2937', marginBottom: 10 },
|
||||
|
||||
groupNameView: { fontSize: 22, fontWeight: '700', color: '#1F2937', marginBottom: 8 },
|
||||
descriptionView: { fontSize: 16, color: '#6B7280', lineHeight: 24 },
|
||||
|
||||
divider: { height: 1, backgroundColor: '#E5E7EB', marginVertical: 20 },
|
||||
|
||||
row: { flexDirection: 'row', gap: 20 },
|
||||
column: { flex: 1 },
|
||||
|
||||
inputLabel: { fontSize: 14, color: '#6B7280', marginBottom: 8, fontWeight: '500' },
|
||||
input: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10, paddingHorizontal: 14, paddingVertical: 12, fontSize: 16, color: '#111827', marginBottom: 16 },
|
||||
textArea: { height: 80, textAlignVertical: 'top' },
|
||||
dataText: { fontSize: 18, fontWeight: '600', color: '#111827' },
|
||||
|
||||
infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
|
||||
infoLabel: { fontSize: 16, color: '#6B7280' },
|
||||
infoValue: { fontSize: 16, color: '#1F2937', fontWeight: '600' },
|
||||
|
||||
participantRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
|
||||
participantName: { fontSize: 16, fontWeight: '600', color: '#111827' },
|
||||
participantMobile: { fontSize: 14, color: '#6B7280', marginTop: 4 },
|
||||
organizerBadge: { backgroundColor: '#FEF3C7', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 12, marginLeft: 10 },
|
||||
organizerBadgeText: { color: '#92400E', fontSize: 12, fontWeight: '500' },
|
||||
|
||||
saveButton: { backgroundColor: '#4F46E5', borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 10, elevation: 2 },
|
||||
saveButtonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
|
||||
});
|
||||
|
||||
export default EditGroupScreen;
|
||||
@@ -49,6 +49,10 @@ const ManagementScreen: FC = () => {
|
||||
apiCall(DECLINE_REQUEST_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>, // Assuming this is also needed
|
||||
apiCall(REQUESTS_URL, "GET") as Promise<ApiResponse<JoinRequest[]>>,
|
||||
]);
|
||||
|
||||
console.log("My Groups:", myGroupsRes.data);
|
||||
console.log("Joined Groups:", joinedGroupsRes.data);
|
||||
console.log("Requests:", requestsRes.data);
|
||||
setMyGroups(myGroupsRes.data || []);
|
||||
setJoinedGroups(joinedGroupsRes.data || []);
|
||||
setRequests(requestsRes.data || []);
|
||||
@@ -91,7 +95,7 @@ const ManagementScreen: FC = () => {
|
||||
|
||||
const handleApprove = (req: JoinRequest) => handleAction(APPROVE_REQUEST_URL+req.requestId+"/approve", { requestId: req.requestId }, `${req.userName} has been added.`, "Failed to approve request.","Approve");
|
||||
const handleDecline = (req: JoinRequest) => handleAction(DECLINE_REQUEST_URL+req.requestId+"/reject?reason=/"+" ", { requestId: req.requestId }, `Request from ${req.userName} has been declined.`, "Failed to decline request.","Decline");
|
||||
const handleManageGroup = (group: MyGroup) => Alert.alert("Manage Group", `Navigating to manage ${group.groupName}`);
|
||||
const handleManageGroup = (group: MyGroup) => navigation.navigate('EditGroup', { groupId: group.id });
|
||||
|
||||
const renderContent = () => {
|
||||
if (error) {
|
||||
|
||||
+191
-143
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect, useCallback} from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
@@ -9,20 +9,22 @@ import {
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
StatusBar,
|
||||
TextInput,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
RefreshControl,
|
||||
} from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming you use expo-cli or have this package
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import { launchImageLibrary } from "react-native-image-picker";
|
||||
import { CustomButton, CustomInput } from "../../components/common/Custom";
|
||||
import colors from "../../components/colors";
|
||||
import SwitchNavigator from "./SwitchNavigator";
|
||||
import { CommonActions, useFocusEffect, useNavigation } from "@react-navigation/native";
|
||||
import { useFocusEffect } from "@react-navigation/native";
|
||||
import { ApiResponse } from "../home/UserProfileStatus";
|
||||
import { BASE_URL } from "../../utils/ApiUrls";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import AppView from "../../components/AppView";
|
||||
|
||||
|
||||
|
||||
type UserProfile = {
|
||||
id: string;
|
||||
@@ -49,12 +51,10 @@ const Profile = () => {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [imageUpdating, setImageUpdating] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false); // State for pull-to-refresh
|
||||
const [statusData, setStatusData] = useState<null | { profileStatus: boolean; organizerStatus: string; role: string }>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const navigation = useNavigation<any>();
|
||||
|
||||
const fetchUserProfile = async (isRefreshing = false) => {
|
||||
const fetchUserProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
@@ -63,19 +63,20 @@ const Profile = () => {
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
if (!isRefreshing) {
|
||||
setFetching(true);
|
||||
}
|
||||
|
||||
const response = await fetch(`${BASE_URL}user/profile/view`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
setFetching(true);
|
||||
const response = await fetch(
|
||||
`${BASE_URL}user/profile/view`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
console.log("👤 Profile Response:", result);
|
||||
if (result.status === "success") {
|
||||
setUser(result.data);
|
||||
} else {
|
||||
@@ -85,10 +86,7 @@ const Profile = () => {
|
||||
console.error("❌ Error fetching profile:", error);
|
||||
Alert.alert("Error", "Could not connect to server");
|
||||
} finally {
|
||||
if (!isRefreshing) {
|
||||
setFetching(false);
|
||||
}
|
||||
setRefreshing(false);
|
||||
setFetching(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -101,22 +99,25 @@ const Profile = () => {
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
const response = await fetch(`${BASE_URL}user/profile/update`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
address: user?.address || null,
|
||||
email: user?.email || null,
|
||||
firstName: user?.firstName || null,
|
||||
gender: user?.gender || null,
|
||||
lastName: user?.lastName || null,
|
||||
username: user?.username || null,
|
||||
}),
|
||||
});
|
||||
const response = await fetch(
|
||||
`${BASE_URL}user/profile/update`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
address: user?.address || null,
|
||||
email: user?.email || null,
|
||||
firstName: user?.firstName || null,
|
||||
gender: user?.gender || null,
|
||||
lastName: user?.lastName || null,
|
||||
username: user?.username || null,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
@@ -169,23 +170,31 @@ const Profile = () => {
|
||||
name: "profile.jpg",
|
||||
} as any);
|
||||
|
||||
const response = await fetch(`${BASE_URL}user/update/userImg`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
const response = await fetch(
|
||||
`${BASE_URL}user/update/userImg`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile image updated successfully");
|
||||
|
||||
// If API returns updated image, set it
|
||||
if (result.data?.imageBlob) {
|
||||
setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
|
||||
} else {
|
||||
// Otherwise, keep the local filePath until next fetch
|
||||
setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
|
||||
}
|
||||
|
||||
// Refresh profile from API as well
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
Alert.alert("Error", result.message || "Failed to update profile image");
|
||||
@@ -212,15 +221,17 @@ const Profile = () => {
|
||||
const response = await fetch(`${BASE_URL}user/profile/status`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Accept: "/",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
const json: ApiResponse = await response.json();
|
||||
|
||||
console.log("👤 Profile Status Response:", json);
|
||||
if (json.status === "success") {
|
||||
setStatusData(json.data);
|
||||
|
||||
} else {
|
||||
setError(json.message || "Failed to fetch status");
|
||||
}
|
||||
@@ -231,41 +242,7 @@ const Profile = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
Alert.alert(
|
||||
"Confirm Logout",
|
||||
"Are you sure you want to log out?",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Logout",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
try {
|
||||
await AsyncStorage.clear();
|
||||
await Keychain.resetGenericPassword();
|
||||
navigation.dispatch(
|
||||
CommonActions.reset({
|
||||
index: 0,
|
||||
routes: [{ name: "Splash" }],
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.log("Logout error:", error);
|
||||
Alert.alert("Error", "Could not log out. Please try again.");
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const onRefresh = useCallback(() => {
|
||||
setRefreshing(true);
|
||||
fetchUserProfile(true).then(() => {
|
||||
userStatus();
|
||||
});
|
||||
}, []);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -274,9 +251,11 @@ const Profile = () => {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
userStatus();
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
console.log("user image :", user?.filePath);
|
||||
const getProfileImage = () => {
|
||||
if (user?.imageBlob) {
|
||||
return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
@@ -287,31 +266,25 @@ const Profile = () => {
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
|
||||
|
||||
if (fetching || !user) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color={colors.Profile} />
|
||||
<ActivityIndicator size="large" color={colors.pastelBlue} />
|
||||
<Text style={styles.loadingText}>Loading profile...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
|
||||
<AppView>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>User Profile</Text>
|
||||
<View style={styles.headerIcons}>
|
||||
<TouchableOpacity onPress={() => fetchUserProfile(true)} style={styles.refreshButton}>
|
||||
<Ionicons name="refresh" size={24} color={colors.Profile} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleLogout} style={styles.logoutButton}>
|
||||
<Ionicons name="log-out-outline" size={26} color={"#ef4444"} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
|
||||
<Ionicons name="refresh" size={24} color={'#000'} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
@@ -319,23 +292,16 @@ const Profile = () => {
|
||||
<ScrollView
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
colors={[colors.Profile]}
|
||||
tintColor={colors.Profile}
|
||||
/>
|
||||
}
|
||||
>
|
||||
|
||||
{/* Profile Card */}
|
||||
<View style={styles.profileCard}>
|
||||
{statusData?.role && statusData?.organizerStatus ? (
|
||||
<Text style={{ color: "#64748b", marginBottom: 16, textAlign: 'center', fontSize: 18 }}>
|
||||
Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}
|
||||
</Text>
|
||||
) : (
|
||||
<SwitchNavigator role={statusData?.role || ''} status={statusData?.organizerStatus || ''} />
|
||||
)}
|
||||
{/* Profile Image Section */}
|
||||
{/* {
|
||||
statusData?.role && statusData?.organizerStatus ?
|
||||
<Text style={{ color: "#64748b", marginBottom: 16, textAlign: 'center', fontSize: 18 }}>Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}</Text>
|
||||
:
|
||||
<SwitchNavigator role={statusData?.role || ''} status={statusData?.organizerStatus || ''} />} */}
|
||||
<View style={styles.profileImageSection}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<Image
|
||||
@@ -344,84 +310,101 @@ const Profile = () => {
|
||||
onError={() => console.log("Error loading image")}
|
||||
/>
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
<Ionicons name="camera" size={18} color="#000" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title={imageUpdating ? "Updating..." : "Update Image"}
|
||||
onPress={handleUpdateImage}
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={styles.updateImageButton}
|
||||
buttonBackground={colors.Profile}
|
||||
buttonBackground={colors.pastelBlue}
|
||||
|
||||
/>
|
||||
</View>
|
||||
|
||||
{!editing ? (
|
||||
<>
|
||||
{/* Profile Details */}
|
||||
<View style={styles.detailsSection}>
|
||||
<Text style={styles.sectionTitle}>Personal Information</Text>
|
||||
<View style={{ marginBottom: 16 }}>
|
||||
|
||||
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="person" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<Ionicons name="person" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Name</Text>
|
||||
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="mail" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<Ionicons name="mail" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Email</Text>
|
||||
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="call" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<Ionicons name="call" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Mobile</Text>
|
||||
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="at-circle" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<Ionicons name="at-circle" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Username</Text>
|
||||
<Text style={styles.detailText}>{user.username}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="location" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<Ionicons name="location" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Address</Text>
|
||||
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="male-female" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<Ionicons name="male-female" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Gender</Text>
|
||||
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="key" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<Ionicons name="key" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Role</Text>
|
||||
<Text style={styles.detailText}>{user.role || "User"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title="Edit Profile"
|
||||
onPress={() => setEditing(true)}
|
||||
icon="create"
|
||||
style={styles.editButton}
|
||||
buttonBackground={colors.Profile}
|
||||
buttonBackground={colors.pastelBlue}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Edit Form */}
|
||||
<View style={styles.editSection}>
|
||||
<Text style={styles.sectionTitle}>Edit Profile</Text>
|
||||
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
@@ -429,6 +412,7 @@ const Profile = () => {
|
||||
onChangeText={(text) => setUser({ ...user, firstName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
@@ -436,6 +420,7 @@ const Profile = () => {
|
||||
onChangeText={(text) => setUser({ ...user, lastName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
@@ -444,6 +429,7 @@ const Profile = () => {
|
||||
icon="mail"
|
||||
keyboardType="email-address"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
@@ -488,59 +474,61 @@ const Profile = () => {
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
// backgroundColor: colors.pastelBlue,
|
||||
paddingBottom: '30%',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8fafc",
|
||||
backgroundColor: "#f8fafc"
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 10,
|
||||
fontSize: 16,
|
||||
color: "#64748b",
|
||||
color: "#64748b"
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 16,
|
||||
paddingTop: 50,
|
||||
// paddingTop: 50,
|
||||
// backgroundColor: "#6366f1",
|
||||
borderBottomLeftRadius: 20,
|
||||
borderBottomRightRadius: 20,
|
||||
// elevation: 4,
|
||||
// shadowColor: "#000",
|
||||
// shadowOffset: { width: 0, height: 2 },
|
||||
// shadowOpacity: 0.2,
|
||||
// shadowRadius: 4,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: "700",
|
||||
color: "#000",
|
||||
},
|
||||
headerIcons: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
color: "#000"
|
||||
},
|
||||
refreshButton: {
|
||||
padding: 4,
|
||||
},
|
||||
logoutButton: {
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
profileCard: {
|
||||
borderRadius: 20,
|
||||
margin: 16,
|
||||
backgroundColor: "#fff",
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 10,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
elevation: 5,
|
||||
// backgroundColor: "#fff",
|
||||
// padding: 20,
|
||||
// shadowColor: "#000",
|
||||
// shadowOpacity: 0.1,
|
||||
// shadowRadius: 10,
|
||||
// shadowOffset: { width: 0, height: 4 },
|
||||
// elevation: 5,
|
||||
},
|
||||
profileImageSection: {
|
||||
alignItems: "center",
|
||||
@@ -564,7 +552,7 @@ const styles = StyleSheet.create({
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "#6366f1",
|
||||
backgroundColor: colors.pastelBlue,
|
||||
borderRadius: 20,
|
||||
width: 40,
|
||||
height: 40,
|
||||
@@ -615,6 +603,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
editSection: {
|
||||
marginBottom: 20,
|
||||
flex: 1,
|
||||
},
|
||||
editButtons: {
|
||||
gap: 12,
|
||||
@@ -625,7 +614,66 @@ const styles = StyleSheet.create({
|
||||
cancelButton: {
|
||||
marginTop: 4,
|
||||
},
|
||||
// Add any other styles you might need
|
||||
inputContainer: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 6,
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
},
|
||||
inputIcon: {
|
||||
position: "absolute",
|
||||
left: 12,
|
||||
zIndex: 1,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#d1d5db",
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
backgroundColor: "#fff",
|
||||
color: "#1f2937",
|
||||
fontSize: 16,
|
||||
flex: 1,
|
||||
},
|
||||
inputWithIcon: {
|
||||
paddingLeft: 40,
|
||||
},
|
||||
buttonSecondary: {
|
||||
backgroundColor: "#f1f5f9",
|
||||
},
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ef4444",
|
||||
},
|
||||
buttonOutline: {
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 1,
|
||||
borderColor: "#6366f1",
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
buttonTextSecondary: {
|
||||
color: "#334155",
|
||||
},
|
||||
buttonTextDanger: {
|
||||
color: "#fff",
|
||||
},
|
||||
buttonTextOutline: {
|
||||
color: "#6366f1",
|
||||
},
|
||||
buttonIcon: {
|
||||
marginRight: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default Profile;
|
||||
export default Profile;
|
||||
@@ -36,3 +36,48 @@ export interface JoinRequest {
|
||||
status: "PENDING";
|
||||
userAvatar?: string;
|
||||
}
|
||||
|
||||
|
||||
// src/types.ts
|
||||
|
||||
// Type for the data received from the GET group details API
|
||||
export interface GroupDetails {
|
||||
id: string;
|
||||
groupName: string;
|
||||
description: string;
|
||||
startDate: [number, number, number];
|
||||
endDate: [number, number, number] | null;
|
||||
contributionAmount: number;
|
||||
minParticipants: number;
|
||||
maxParticipants: number;
|
||||
portalCharge: number | null;
|
||||
latePaymentCharge: number | null;
|
||||
cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
|
||||
customCycleDays: number;
|
||||
withdrawalMethod: 'RANDOM' | 'SEQUENTIAL';
|
||||
status: 'PENDING' | 'ACTIVE' | 'COMPLETED';
|
||||
visibility: 'PUBLIC' | 'PRIVATE';
|
||||
organizerId: string;
|
||||
organizerFirstName: string;
|
||||
organizerLastName: string;
|
||||
organizerMobile: string;
|
||||
organizerEmail: string;
|
||||
organizerRole: 'ORGANIZER';
|
||||
organizerUserId: number;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
// Type for the payload sent to the edit group API
|
||||
export interface EditGroupPayload {
|
||||
groupName: string;
|
||||
description: string;
|
||||
visibility: 'PUBLIC' | 'PRIVATE';
|
||||
cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
|
||||
contributionAmount: number;
|
||||
maxParticipants: number;
|
||||
latePaymentCharge: number;
|
||||
customCycleDays: number;
|
||||
startDate: string; // "YYYY-MM-DD"
|
||||
endDate: string | null; // "YYYY-MM-DD"
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ export const GROUP_CREATION_URL = `${BASE_URL}fund/groups/{organizerId}`
|
||||
export const PROFILE_URL =`${BASE_URL}user/profile/view`
|
||||
export const PUBLIC_GROUPS_URL =`${BASE_URL}fund/user/public`
|
||||
export const JOIN_GROUP_URL = `${BASE_URL}fund`;
|
||||
export const MY_GROUPS_URL =`https://api.godemo.in/FundCollect/api/fund/getAll/my/groups`
|
||||
export const MY_GROUPS_URL =`https://api.godemo.in/FundCollect/api/fund/my/join/groups`
|
||||
|
||||
export const REQUESTS_URL =`https://api.godemo.in/FundCollect/api/fund/group/pending/request`
|
||||
//https://api.godemo.in/FundCollect/api/fund/groups/2a80cdaa-8532-4b8a-87f0-9c1023d18a7f/join/64
|
||||
|
||||
Reference in New Issue
Block a user