manage group
This commit is contained in:
Abin Toppo
@@ -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",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user