explore Groups
This commit is contained in:
Abin Toppo
@@ -1,17 +1,23 @@
|
||||
import React from "react";
|
||||
import { StatusBar, StyleSheet, View } from "react-native";
|
||||
import { StatusBar, StyleSheet, View, ViewStyle } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
type AppViewProps = {
|
||||
children: React.ReactNode;
|
||||
backgroundColor?: string;
|
||||
barStyle?: "default" | "light-content" | "dark-content";
|
||||
paddingHorizontal?: number;
|
||||
paddingTop?: number;
|
||||
style?: ViewStyle;
|
||||
};
|
||||
|
||||
export default function AppView({
|
||||
children,
|
||||
backgroundColor = "#f5f5f5",
|
||||
barStyle = "dark-content",
|
||||
paddingHorizontal = 16, // default
|
||||
paddingTop = 8, // default
|
||||
style,
|
||||
}: AppViewProps) {
|
||||
return (
|
||||
<SafeAreaView style={[styles.safeArea, { backgroundColor }]}>
|
||||
@@ -20,7 +26,15 @@ export default function AppView({
|
||||
backgroundColor={backgroundColor}
|
||||
barStyle={barStyle}
|
||||
/>
|
||||
<View style={styles.container}>{children}</View>
|
||||
<View
|
||||
style={[
|
||||
styles.container,
|
||||
{ paddingHorizontal, paddingTop },
|
||||
style, // user custom overrides
|
||||
]}
|
||||
>
|
||||
{children}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
@@ -31,7 +45,5 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 8,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ const TAB_CONFIG = {
|
||||
inactiveColor: "#8e8e93",
|
||||
backgroundColor: "#fff",
|
||||
height: 70,
|
||||
iconSize: 26,
|
||||
iconSize: 28,
|
||||
};
|
||||
|
||||
// 1. Define a color map for active tabs
|
||||
@@ -28,7 +28,7 @@ const activeIconColors: { [key: string]: string } = {
|
||||
Home: "#333",
|
||||
Profile: "#333",
|
||||
Group: "#333",
|
||||
Settings: "#e17055",
|
||||
Settings: "#333",
|
||||
}
|
||||
|
||||
|
||||
@@ -128,14 +128,14 @@ const styles = StyleSheet.create({
|
||||
marginHorizontal: 10,
|
||||
},
|
||||
label: {
|
||||
paddingVertical: 5,
|
||||
fontSize: 12,
|
||||
marginBottom: 5,
|
||||
},
|
||||
iconContainer: {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: 50, // Reduced size for a sleeker look
|
||||
height: 50, // Reduced size
|
||||
width: 80, // Reduced size for a sleeker look
|
||||
height: 60, // Reduced size
|
||||
marginTop: 10,
|
||||
borderRadius: 15,
|
||||
},
|
||||
|
||||
+122
-156
@@ -1,15 +1,79 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Modal, ActivityIndicator } from "react-native";
|
||||
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 CustomButton from "../components/CustomButton";
|
||||
|
||||
// --- Simplified Dialog Component ---
|
||||
const ThemedDialog = ({ visible, isSuccess, onClose }: { visible: boolean; isSuccess: boolean; onClose: () => void; }) => {
|
||||
if (!visible) return null;
|
||||
|
||||
const dialogConfig = {
|
||||
success: {
|
||||
icon: "checkmark-circle" as const,
|
||||
color: "#2ecc71",
|
||||
title: "Success!",
|
||||
message: "Your group has been created.",
|
||||
buttonText: "Awesome!",
|
||||
},
|
||||
failure: {
|
||||
icon: "close-circle" as const,
|
||||
color: "#e74c3c",
|
||||
title: "Oops!",
|
||||
message: "Something went wrong. Please try again.",
|
||||
buttonText: "Try Again",
|
||||
},
|
||||
};
|
||||
|
||||
const config = isSuccess ? dialogConfig.success : dialogConfig.failure;
|
||||
|
||||
return (
|
||||
<Modal animationType="fade" transparent={true} visible={visible} onRequestClose={onClose}>
|
||||
<View style={styles.modalBackdrop}>
|
||||
<View style={styles.dialogBox}>
|
||||
<Ionicons name={config.icon} size={60} color={config.color} />
|
||||
<Text style={styles.dialogTitle}>{config.title}</Text>
|
||||
<Text style={styles.dialogMessage}>{config.message}</Text>
|
||||
{/* Only show button for failure case */}
|
||||
{!isSuccess && (
|
||||
<TouchableOpacity style={styles.dialogButton} onPress={onClose}>
|
||||
<Text style={styles.dialogButtonText}>{config.buttonText}</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default function GroupReview({ route, navigation }: any) {
|
||||
const { form } = route.params;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
// --- Simplified State ---
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
|
||||
// --- Automatic Navigation Effect ---
|
||||
useEffect(() => {
|
||||
// If the modal is visible and the operation was a success...
|
||||
if (modalVisible && isSuccess) {
|
||||
// ...wait for 2 seconds, then navigate.
|
||||
const timer = setTimeout(() => {
|
||||
setModalVisible(false); // Close the dialog
|
||||
navigation.reset({ // Reset the navigation stack
|
||||
index: 0,
|
||||
routes: [{ name: 'Home',}],
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
return () => clearTimeout(timer); // Cleanup timer on unmount
|
||||
}
|
||||
}, [modalVisible, isSuccess, navigation]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
contributionAmount: Number(form.contributionAmount) || 0,
|
||||
@@ -17,35 +81,24 @@ export default function GroupReview({ route, navigation }: any) {
|
||||
maxParticipants: Number(form.maxParticipants) || 0,
|
||||
minParticipants: Number(form.minParticipants) || 0,
|
||||
};
|
||||
await apiCall(GROUP_CREATION_URL, "POST", payload);
|
||||
const res = await apiCall(GROUP_CREATION_URL, "POST", payload) as { statusCode?: number };
|
||||
|
||||
if (res?.statusCode === 201) {
|
||||
setIsSuccess(true);
|
||||
} else {
|
||||
throw new Error("Failed to create group.");
|
||||
}
|
||||
} catch (error) {
|
||||
setIsSuccess(false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setModalVisible(true); // Show the dialog for both success and failure
|
||||
}
|
||||
};
|
||||
|
||||
const TimelineSection = ({ icon, title, children }: { icon: any; title: string; children: React.ReactNode }) => (
|
||||
<View style={styles.section}>
|
||||
<View style={styles.timeline}>
|
||||
<View style={styles.timelineIcon}>
|
||||
<Ionicons name={icon} size={22} color="#fff" />
|
||||
</View>
|
||||
<View style={styles.timelineLine} />
|
||||
</View>
|
||||
<View style={styles.content}>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
<View style={styles.card}>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderRow = (label: string, value: string | number) => {
|
||||
if (!value && typeof value !== 'number') return null;
|
||||
return (
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<Text style={styles.value}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
// --- UI COMPONENTS ---
|
||||
const TimelineSection = ({ icon, title, children }: { icon: any; title: string; children: React.ReactNode }) => ( <View style={styles.section}> <View style={styles.timeline}> <View style={styles.timelineIcon}> <Ionicons name={icon} size={22} color="#fff" /> </View> <View style={styles.timelineLine} /> </View> <View style={styles.content}> <Text style={styles.sectionTitle}>{title}</Text> <View style={styles.card}> {children} </View> </View> </View> );
|
||||
const renderRow = (label: string, value: string | number) => { if (!value && typeof value !== 'number') return null; return ( <View style={styles.row}> <Text style={styles.label}>{label}</Text> <Text style={styles.value}>{value}</Text> </View> ); };
|
||||
|
||||
return (
|
||||
<AppView>
|
||||
@@ -55,137 +108,50 @@ export default function GroupReview({ route, navigation }: any) {
|
||||
<Text style={styles.subtitle}>Confirm the details to launch your group.</Text>
|
||||
</View>
|
||||
|
||||
<TimelineSection icon="information-circle-outline" title="Basic Information">
|
||||
{renderRow("Name", form.groupName)}
|
||||
{form.description ? (
|
||||
<View style={styles.descriptionContainer}>
|
||||
<Text style={styles.label}>Description</Text>
|
||||
<Text style={styles.descriptionText}>{form.description}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</TimelineSection>
|
||||
{/* --- Timeline Sections --- */}
|
||||
<TimelineSection icon="information-circle-outline" title="Basic Information">{renderRow("Name", form.groupName)}{form.description ? ( <View style={styles.descriptionContainer}> <Text style={styles.label}>Description</Text> <Text style={styles.descriptionText}>{form.description}</Text> </View> ) : null}</TimelineSection>
|
||||
<TimelineSection icon="shield-checkmark-outline" title="Rules & Privacy">{renderRow("Visibility", form.visibility)}{renderRow("Distribution", form.fundDistribution)}{renderRow("Min Members", form.minParticipants)}{renderRow("Max Members", form.maxParticipants)}</TimelineSection>
|
||||
<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>
|
||||
|
||||
<TimelineSection icon="shield-checkmark-outline" title="Rules & Privacy">
|
||||
{renderRow("Visibility", form.visibility)}
|
||||
{renderRow("Distribution", form.fundDistribution)}
|
||||
{renderRow("Min Members", form.minParticipants)}
|
||||
{renderRow("Max Members", form.maxParticipants)}
|
||||
</TimelineSection>
|
||||
|
||||
<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>
|
||||
<CustomButton title="Create Group" onPress={handleSubmit} />
|
||||
<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> </> )}
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
|
||||
{/* --- Simplified Dialog Call --- */}
|
||||
<ThemedDialog
|
||||
visible={modalVisible}
|
||||
isSuccess={isSuccess}
|
||||
onClose={() => setModalVisible(false)}
|
||||
/>
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 20,
|
||||
backgroundColor: "#f5f6fa",
|
||||
},
|
||||
header: {
|
||||
marginBottom: 30,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
},
|
||||
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,
|
||||
},
|
||||
timelineLine: {
|
||||
flex: 1,
|
||||
width: 2,
|
||||
backgroundColor: '#e0e0e0',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
paddingLeft: 10,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#444',
|
||||
marginBottom: 10,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: 15,
|
||||
elevation: 2,
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f5f5f5',
|
||||
},
|
||||
label: {
|
||||
fontSize: 15,
|
||||
color: "#666",
|
||||
fontWeight: "500",
|
||||
},
|
||||
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',
|
||||
},
|
||||
btnText: {
|
||||
color: "#333",
|
||||
fontWeight: "bold",
|
||||
fontSize: 18,
|
||||
marginLeft: 10,
|
||||
},
|
||||
// ... (All previous styles remain the same)
|
||||
container: { padding: 20, backgroundColor: "#f5f6fa" },
|
||||
header: { marginBottom: 30, alignItems: 'flex-start' },
|
||||
title: { fontSize: 28, fontWeight: "bold", color: "#333" },
|
||||
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 },
|
||||
timelineLine: { flex: 1, width: 2, backgroundColor: '#e0e0e0' },
|
||||
content: { flex: 1, paddingLeft: 10, paddingBottom: 20 },
|
||||
sectionTitle: { fontSize: 18, fontWeight: 'bold', color: '#444', marginBottom: 10 },
|
||||
card: { backgroundColor: "#fff", borderRadius: 12, padding: 15, elevation: 2 },
|
||||
row: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' },
|
||||
label: { fontSize: 15, color: "#666", fontWeight: "500" },
|
||||
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' },
|
||||
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 },
|
||||
dialogButtonText: { color: '#333', fontWeight: 'bold', fontSize: 16 },
|
||||
});
|
||||
|
||||
+233
-149
@@ -1,180 +1,264 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
TextInput,
|
||||
Dimensions,
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
ScrollView,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { FAB } from "react-native-paper";
|
||||
import { MaterialIcons } from '@react-native-vector-icons/material-icons';
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import { MaterialIcons } from "@react-native-vector-icons/material-icons";
|
||||
import { useNavigation, useFocusEffect } from "@react-navigation/native";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
import AppView from "../components/AppView";
|
||||
import { apiCall } from "../utils/ApiHelper";
|
||||
import { JOIN_GROUP_URL } from "../utils/ApiUrls";
|
||||
|
||||
// --- Placeholder Data ---
|
||||
const myGroupsData = [
|
||||
{ id: '1', name: 'Family Savings', members: 5 },
|
||||
{ id: '2', name: 'Office Lunch Club', members: 12 },
|
||||
];
|
||||
const joinedGroupsData = [
|
||||
{ id: '3', name: 'Apartment Committee', members: 8 },
|
||||
];
|
||||
const publicGroupsData = [
|
||||
{ id: '4', name: 'City Runners', members: 50 },
|
||||
{ id: '5', name: 'Book Readers', members: 25 },
|
||||
];
|
||||
const { width } = Dimensions.get('window');
|
||||
const PUBLIC_GROUPS_URL = "https://api.godemo.in/FundCollect/api/fund/user/public";
|
||||
|
||||
// --- Placeholder Group List Component ---
|
||||
const GroupList = ({ data }: { data: any[] }) => {
|
||||
if (data.length === 0) {
|
||||
return <Text style={styles.emptyText}>No groups found.</Text>;
|
||||
|
||||
// --- Types ---
|
||||
interface Group {
|
||||
id: string;
|
||||
groupName: string;
|
||||
description: string;
|
||||
maxParticipants: number;
|
||||
currentParticipants: number;
|
||||
contributionAmount: number;
|
||||
cycleType: string;
|
||||
createdByName: string;
|
||||
}
|
||||
|
||||
// --- UI Components ---
|
||||
const GroupCard = ({ item, onJoin, onView, isGrid }: { item: Group; onJoin: (groupId: string) => void; onView: (group: Group) => void; isGrid?: boolean; }) => {
|
||||
const isFull = item.currentParticipants >= item.maxParticipants;
|
||||
const cardStyle = isGrid ? styles.gridCard : styles.listCard;
|
||||
|
||||
return (
|
||||
<View style={cardStyle}>
|
||||
<Text style={styles.groupName} numberOfLines={1}>{item.groupName}</Text>
|
||||
<Text style={styles.groupDescription} numberOfLines={isGrid ? 2 : 1}>{item.description}</Text>
|
||||
<View style={styles.groupMeta}>
|
||||
<Text style={styles.groupMetaText}>{item.currentParticipants}/{item.maxParticipants} Members</Text>
|
||||
<Text style={styles.groupMetaText}>{item.cycleType}</Text>
|
||||
</View>
|
||||
<View style={styles.buttonContainer}>
|
||||
<TouchableOpacity style={styles.viewButton} onPress={() => onView(item)}>
|
||||
<Text style={styles.viewButtonText}>View</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.joinButton, isFull && styles.joinButtonDisabled]}
|
||||
onPress={() => onJoin(item.id)}
|
||||
disabled={isFull}
|
||||
>
|
||||
<Text style={styles.joinButtonText}>{isFull ? "Full" : "Join"}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const FeaturedGroupCard = ({ item }: { item: Group }) => (
|
||||
<View style={styles.featuredCard}>
|
||||
<Image source={{ uri: `https://i.pravatar.cc/150?u=${item.id}` }} style={styles.featuredImage} />
|
||||
<View style={styles.featuredContent}>
|
||||
<Text style={styles.featuredName} numberOfLines={1}>{item.groupName}</Text>
|
||||
<Text style={styles.featuredCreator}>by {item.createdByName}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
export default function GroupScreen() {
|
||||
const [activeTab, setActiveTab] = useState("Public");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [isGridView, setIsGridView] = useState(false);
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
|
||||
const [myGroups, setMyGroups] = useState<Group[]>([]);
|
||||
const [joinedGroups, setJoinedGroups] = useState<Group[]>([]);
|
||||
const [publicGroups, setPublicGroups] = useState<Group[]>([]);
|
||||
const [featuredGroups, setFeaturedGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchGroups = async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await apiCall(PUBLIC_GROUPS_URL, "GET") as { data?: Group[] };
|
||||
if (res && res.data) {
|
||||
setPublicGroups(res.data);
|
||||
setFeaturedGroups(res.data.slice(0, 5));
|
||||
} else {
|
||||
throw new Error("No data received");
|
||||
}
|
||||
} catch (e) {
|
||||
setError("Failed to fetch groups. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useFocusEffect(React.useCallback(() => { fetchGroups(); }, []));
|
||||
|
||||
const filterData = (data: Group[]) => {
|
||||
if (!searchQuery.trim()) return data;
|
||||
return data.filter(g =>
|
||||
g.groupName.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
const handleJoinGroup = async (groupId: string, userId: string) => {
|
||||
console.log("Joining group:", groupId, "User:", userId);
|
||||
try {
|
||||
const url = `${JOIN_GROUP_URL}/groups/${groupId}/join/0`;
|
||||
console.log("Joining group URL:", url);
|
||||
const res = await apiCall(url, "POST") as { statusCode?: number; message?: string };
|
||||
|
||||
console.log("JOIN_GROUP_URL response:", res);
|
||||
|
||||
if (res.statusCode === 200) {
|
||||
Alert.alert("Success", "You requested to join the group.");
|
||||
} else {
|
||||
Alert.alert("Error", res.message || "Failed to join group.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Join Group Error:", error);
|
||||
Alert.alert("Error", "An unexpected error occurred.");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleViewGroup = (group: Group) => {
|
||||
// navigation.navigate('GroupDetails', { group });
|
||||
Alert.alert("View Group", `Viewing details for ${group.groupName}`);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
let data;
|
||||
switch (activeTab) {
|
||||
case "My Groups": data = myGroups; break;
|
||||
case "Joined": data = joinedGroups; break;
|
||||
case "Public": data = publicGroups; break;
|
||||
default: data = [];
|
||||
}
|
||||
|
||||
if (loading && !publicGroups.length) return <ActivityIndicator size="large" color="#62b59a" style={{ marginTop: 40 }} />;
|
||||
if (error) return <Text style={styles.emptyText}>{error}</Text>;
|
||||
|
||||
const filteredData = filterData(data);
|
||||
if (filteredData.length === 0 && !loading) return <Text style={styles.emptyText}>No groups found.</Text>;
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={data}
|
||||
data={filteredData}
|
||||
key={isGridView ? 'grid' : 'list'}
|
||||
numColumns={isGridView ? 2 : 1}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<View style={styles.groupCard}>
|
||||
<Text style={styles.groupName}>{item.name}</Text>
|
||||
<Text style={styles.groupMembers}>{item.members} members</Text>
|
||||
</View>
|
||||
<GroupCard
|
||||
item={item}
|
||||
onJoin={activeTab === 'Public' ? handleJoinGroup : () => { }}
|
||||
onView={handleViewGroup}
|
||||
isGrid={isGridView}
|
||||
/>
|
||||
)}
|
||||
columnWrapperStyle={isGridView ? { justifyContent: 'space-between' } : null}
|
||||
contentContainerStyle={{ paddingBottom: 150 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default function GroupScreen() {
|
||||
const [activeTab, setActiveTab] = useState("My Groups");
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case "My Groups":
|
||||
return <GroupList data={myGroupsData} />;
|
||||
case "Joined":
|
||||
return <GroupList data={joinedGroupsData} />;
|
||||
case "Public":
|
||||
return <GroupList data={publicGroupsData} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppView>
|
||||
<View style={styles.container}>
|
||||
{/* --- Header and Segmented Control --- */}
|
||||
<Text style={styles.title}>Your Groups</Text>
|
||||
<AppView paddingHorizontal={0} style={styles.container}>
|
||||
{/* Fixed Header */}
|
||||
<View style={styles.headerContainer}>
|
||||
<Text style={styles.title}>Explore Groups</Text>
|
||||
<View style={styles.searchContainer}>
|
||||
<Ionicons name="search" size={20} color="#888" style={styles.searchIcon} />
|
||||
<TextInput style={styles.searchInput} placeholder="Search for groups..." placeholderTextColor="#888" value={searchQuery} onChangeText={setSearchQuery} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Scrollable Content */}
|
||||
<ScrollView style={styles.container}>
|
||||
<Text style={styles.sectionTitle}>Featured</Text>
|
||||
<FlatList
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
data={featuredGroups}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => <FeaturedGroupCard item={item} />}
|
||||
style={styles.featuredList}
|
||||
ListEmptyComponent={!loading && featuredGroups.length === 0 ? <Text style={styles.emptyFeaturedText}>No featured groups.</Text> : null}
|
||||
/>
|
||||
|
||||
<View style={styles.tabHeader}>
|
||||
<View style={styles.segmentedControl}>
|
||||
{["My Groups", "Joined", "Public"].map((tab) => (
|
||||
<TouchableOpacity
|
||||
key={tab}
|
||||
style={[
|
||||
styles.segmentButton,
|
||||
activeTab === tab && styles.segmentButtonActive,
|
||||
]}
|
||||
onPress={() => setActiveTab(tab)}
|
||||
>
|
||||
<Text style={[
|
||||
styles.segmentText,
|
||||
activeTab === tab && styles.segmentTextActive,
|
||||
]}>
|
||||
{tab}
|
||||
</Text>
|
||||
<TouchableOpacity key={tab} style={[styles.segmentButton, activeTab === tab && styles.segmentButtonActive]} onPress={() => setActiveTab(tab)}>
|
||||
<Text style={[styles.segmentText, activeTab === tab && styles.segmentTextActive]}>{tab}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* --- Dynamic Content Area --- */}
|
||||
<View style={styles.contentArea}>
|
||||
{renderContent()}
|
||||
<TouchableOpacity onPress={() => setIsGridView(!isGridView)} style={styles.layoutToggleButton}>
|
||||
<Ionicons name={isGridView ? "list" : "grid"} size={22} color="#555" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<FAB
|
||||
style={styles.fab}
|
||||
icon={() => <MaterialIcons name="group-add" size={24} color="#333" />}
|
||||
onPress={() => navigation.navigate('GroupCreation')}
|
||||
/>
|
||||
</View>
|
||||
{/* The list now renders inside a simple View, as FlatList handles its own scroll */}
|
||||
<View style={styles.contentArea}>{renderContent()}</View>
|
||||
</ScrollView>
|
||||
<FAB style={styles.fab} icon={() => <MaterialIcons name="group-add" size={24} color="#333" />} onPress={() => navigation.navigate('GroupCreation')} />
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
backgroundColor: '#f5f6fa',
|
||||
},
|
||||
title: {
|
||||
fontSize: 26,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 20,
|
||||
},
|
||||
segmentedControl: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#e0e0e0',
|
||||
borderRadius: 10,
|
||||
padding: 4,
|
||||
marginBottom: 20,
|
||||
},
|
||||
segmentButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
segmentButtonActive: {
|
||||
backgroundColor: '#fff',
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
},
|
||||
segmentText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#555',
|
||||
},
|
||||
segmentTextActive: {
|
||||
color: '#333',
|
||||
},
|
||||
contentArea: {
|
||||
flex: 1,
|
||||
},
|
||||
fab: {
|
||||
position: "absolute",
|
||||
right: 20,
|
||||
bottom: 90,
|
||||
width: 70,
|
||||
height: 70,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#83f5cc",
|
||||
borderRadius: 35,
|
||||
elevation: 4,
|
||||
},
|
||||
// --- Group List Styles ---
|
||||
groupCard: {
|
||||
backgroundColor: '#fff',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 12,
|
||||
elevation: 1,
|
||||
},
|
||||
groupName: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
groupMembers: {
|
||||
fontSize: 14,
|
||||
color: '#777',
|
||||
marginTop: 4,
|
||||
},
|
||||
emptyText: {
|
||||
textAlign: 'center',
|
||||
marginTop: 50,
|
||||
fontSize: 16,
|
||||
color: '#888',
|
||||
},
|
||||
container: { flex: 1, backgroundColor: '#f5f6fa' },
|
||||
headerContainer: { backgroundColor: '#f5f6fa', paddingTop: 40, paddingHorizontal: 16 },
|
||||
title: { fontSize: 28, fontWeight: "bold", color: "#222", marginBottom: 10 },
|
||||
searchContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderRadius: 12, paddingHorizontal: 10, elevation: 2, marginBottom: 20 },
|
||||
searchIcon: { marginRight: 8 },
|
||||
searchInput: { flex: 1, height: 45, fontSize: 16, color: '#333' },
|
||||
sectionTitle: { fontSize: 20, fontWeight: 'bold', color: '#333', marginBottom: 12, paddingHorizontal: 16 },
|
||||
featuredList: { paddingLeft: 16, marginBottom: 20 },
|
||||
featuredCard: { width: width * 0.45, marginRight: 15, backgroundColor: '#fff', borderRadius: 12, elevation: 3, overflow: 'hidden' },
|
||||
featuredImage: { width: '100%', height: 100 },
|
||||
featuredContent: { padding: 10 },
|
||||
featuredName: { fontSize: 14, fontWeight: 'bold', color: '#333' },
|
||||
featuredCreator: { fontSize: 12, color: '#777', marginTop: 2 },
|
||||
tabHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, marginBottom: 16 },
|
||||
segmentedControl: { flex: 1, flexDirection: 'row', backgroundColor: '#e9ecef', borderRadius: 10, padding: 4, marginRight: 10 },
|
||||
segmentButton: { flex: 1, paddingVertical: 10, borderRadius: 8, alignItems: 'center' },
|
||||
segmentButtonActive: { backgroundColor: '#fff', elevation: 2, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 },
|
||||
segmentText: { fontSize: 14, fontWeight: '600', color: '#555' },
|
||||
segmentTextActive: { color: '#333' },
|
||||
layoutToggleButton: { padding: 8 },
|
||||
contentArea: { paddingHorizontal: 16 },
|
||||
fab: { position: "absolute", right: 20, bottom: 90, width: 60, height: 60, justifyContent: "center", alignItems: "center", backgroundColor: "#83f5cc", borderRadius: 30, elevation: 4 },
|
||||
listCard: { backgroundColor: '#fff', padding: 16, borderRadius: 12, marginBottom: 12, elevation: 1 },
|
||||
gridCard: { backgroundColor: '#fff', padding: 12, borderRadius: 12, marginBottom: 12, elevation: 1, width: (width - 48) / 2 },
|
||||
groupName: { fontSize: 16, fontWeight: 'bold', color: '#333' },
|
||||
groupDescription: { fontSize: 14, color: '#666', marginVertical: 4 },
|
||||
groupMeta: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8, borderTopWidth: 1, borderTopColor: '#f0f0f0', paddingTop: 8, marginBottom: 10 },
|
||||
groupMetaText: { fontSize: 12, color: '#888', fontWeight: '500', textTransform: 'capitalize' },
|
||||
emptyText: { textAlign: 'center', marginTop: 40, fontSize: 16, color: '#888' },
|
||||
emptyFeaturedText: { marginLeft: 20, color: '#888' },
|
||||
buttonContainer: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 },
|
||||
viewButton: { flex: 1, backgroundColor: '#e9ecef', paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginRight: 5 },
|
||||
viewButtonText: { color: '#333', fontWeight: 'bold', fontSize: 14 },
|
||||
joinButton: { flex: 1, backgroundColor: '#83f5cc', paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginLeft: 5 },
|
||||
joinButtonDisabled: { backgroundColor: '#bdc3c7' },
|
||||
joinButtonText: { color: '#333', fontWeight: 'bold', fontSize: 14 },
|
||||
});
|
||||
|
||||
@@ -2,5 +2,8 @@ export const BASE_URL = "https://api.godemo.in/FundCollect"
|
||||
export const LOGIN_URL = `${BASE_URL}/api/user/generate/otp?mobile=`
|
||||
export const VARIFY_OTP_URL = `${BASE_URL}/api/user/otp/verify`
|
||||
export const ORGRAGISTRATION = `${BASE_URL}/api/organizer/registration/apply`
|
||||
export const GROUP_CREATION_URL = `${BASE_URL}/api/group/create`
|
||||
export const GROUP_CREATION_URL = `${BASE_URL}/api/fund/groups/{organizerId}`
|
||||
export const PROFILE_URL =`${BASE_URL}/api/user/profile/view`
|
||||
export const PUBLIC_GROUPS_URL =`${BASE_URL}/api/fund/user/public`
|
||||
export const JOIN_GROUP_URL = `${BASE_URL}/api/fund`;
|
||||
//https://api.godemo.in/FundCollect/api/fund/groups/2a80cdaa-8532-4b8a-87f0-9c1023d18a7f/join/64
|
||||
Reference in New Issue
Block a user