managment screen upadte
This commit is contained in:
Abin Toppo
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"postman.settings.dotenv-detection-notification-visibility": false
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,43 @@
|
||||
// src/components/JoinedGroupCard.tsx
|
||||
|
||||
import React, { FC } from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
import { JoinedGroup } from '../types';
|
||||
|
||||
interface JoinedGroupCardProps {
|
||||
item: JoinedGroup;
|
||||
}
|
||||
|
||||
export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => (
|
||||
<View style={styles.card}>
|
||||
<View>
|
||||
<Text style={styles.cardTitle}>{item.groupName}</Text>
|
||||
<Text style={styles.cardSubtitle}>Created by {item.createdBy}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: 'bold',
|
||||
color: '#343a40',
|
||||
},
|
||||
cardSubtitle: {
|
||||
fontSize: 14,
|
||||
color: '#6c757d',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,164 @@
|
||||
// components/MyGroupCard.tsx
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from "./colors";
|
||||
|
||||
interface MyGroup {
|
||||
id: string;
|
||||
groupName: string;
|
||||
description: string;
|
||||
visibility: "PUBLIC" | "PRIVATE";
|
||||
createdByName: string;
|
||||
currentParticipants: number;
|
||||
maxParticipants: number;
|
||||
contributionAmount: number;
|
||||
cycleType: "MONTHLY" | "QUARTERLY" | "YEARLY";
|
||||
status: "PENDING" | "ACTIVE" | "COMPLETED";
|
||||
}
|
||||
|
||||
interface Props {
|
||||
item: MyGroup;
|
||||
onManage: (group: MyGroup) => void;
|
||||
}
|
||||
|
||||
export const MyGroupCard: React.FC<Props> = ({ item, onManage }) => {
|
||||
const getStatusColor = () => {
|
||||
switch (item.status) {
|
||||
case "ACTIVE":
|
||||
return colors.pastelGreen;
|
||||
case "PENDING":
|
||||
return colors.pastelOrange; // amber
|
||||
case "COMPLETED":
|
||||
return colors.pastelBlue;
|
||||
default:
|
||||
return "#adb5bd";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
{/* Left Content */}
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle} numberOfLines={1}>
|
||||
{item.groupName}
|
||||
</Text>
|
||||
<View style={[styles.statusBadge, { backgroundColor: getStatusColor() }]}>
|
||||
<Text style={styles.statusBadgeText}>{item.status === "ACTIVE" ? "Active" : "Not Active"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.cardSubtitle} numberOfLines={2}>
|
||||
{item.description}
|
||||
</Text>
|
||||
|
||||
<View style={styles.cardMetaContainer}>
|
||||
<Text style={styles.cardMetaText}>
|
||||
<Ionicons name="person-outline" size={14} /> {item.currentParticipants}/{item.maxParticipants}
|
||||
</Text>
|
||||
<Text style={styles.cardMetaText}>
|
||||
<Ionicons name="cash-outline" size={14} /> ₹{item.contributionAmount}
|
||||
</Text>
|
||||
<Text style={styles.cardMetaText}>
|
||||
<Ionicons name="time-outline" size={14} /> {item.cycleType}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.createdBy}>Created by {item.createdByName}</Text>
|
||||
</View>
|
||||
|
||||
{/* Manage Button */}
|
||||
<TouchableOpacity style={styles.manageButton} onPress={() => onManage(item)}>
|
||||
<Ionicons name="settings-outline" size={24} color={colors.textDark} />
|
||||
<Text style={styles.manageButtonText}>Manage</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
elevation: 2,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 6,
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: "bold",
|
||||
color: "#343a40",
|
||||
flex: 1,
|
||||
marginRight: 10,
|
||||
},
|
||||
cardSubtitle: {
|
||||
fontSize: 14,
|
||||
color: "#6c757d",
|
||||
marginBottom: 8,
|
||||
},
|
||||
cardMetaContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
marginBottom: 6,
|
||||
},
|
||||
manageButtonText: {
|
||||
fontSize: 12,
|
||||
color: colors.textDark,
|
||||
},
|
||||
cardMetaText: {
|
||||
fontSize: 13,
|
||||
color: "#495057",
|
||||
fontWeight: "500",
|
||||
marginRight: 16,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
statusBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 5,
|
||||
elevation: 1,
|
||||
},
|
||||
statusBadgeText: {
|
||||
color: colors.textDark,
|
||||
fontSize: 10,
|
||||
fontWeight: "bold",
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
manageButton: {
|
||||
width: 100,
|
||||
borderRadius:10,
|
||||
flexDirection:"row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
padding: 6,
|
||||
marginLeft: 10,
|
||||
elevation:2,
|
||||
backgroundColor: colors.pastelOrange,
|
||||
},
|
||||
createdBy: {
|
||||
fontSize: 12,
|
||||
color: "#868e96",
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
|
||||
export default MyGroupCard;
|
||||
@@ -0,0 +1,139 @@
|
||||
// src/components/RequestCard.tsx
|
||||
|
||||
import React, { FC } from 'react';
|
||||
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from './colors'; // Assuming your colors are defined here
|
||||
import { JoinRequest } from '../types';
|
||||
|
||||
interface RequestCardProps {
|
||||
item: JoinRequest;
|
||||
onApprove: (req: JoinRequest) => void;
|
||||
onDecline: (req: JoinRequest) => void;
|
||||
}
|
||||
|
||||
export const RequestCard: FC<RequestCardProps> = ({ item, onApprove, onDecline }) => {
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
{/* Top section with user avatar and info */}
|
||||
<View style={styles.userInfoSection}>
|
||||
<Image
|
||||
source={{ uri: item.userAvatar || `https://i.pravatar.cc/150?u=${item.userId}` }}
|
||||
style={styles.avatar}
|
||||
/>
|
||||
<View style={styles.userInfo}>
|
||||
<Text style={styles.userName} numberOfLines={1}>{item.userName}</Text>
|
||||
<Text style={styles.userMeta}><Ionicons name="call-outline" size={14} color={colors.textSecondary} /> {item.mobile}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Middle section for the group name */}
|
||||
<View style={styles.groupInfoSection}>
|
||||
<Text style={styles.requestText}>
|
||||
Wants to join the group: <Text style={styles.groupName}>{item.groupName}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Bottom section with action buttons */}
|
||||
<View style={styles.actionsSection}>
|
||||
<TouchableOpacity style={[styles.actionButton, styles.declineButton]} onPress={() => onDecline(item)}>
|
||||
<Ionicons name="close-outline" size={20} color={colors.danger} />
|
||||
<Text style={[styles.actionButtonText, { color: colors.danger }]}>Decline</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.actionButton, styles.approveButton]} onPress={() => onApprove(item)}>
|
||||
{/* Corrected icon color and updated text color for better contrast */}
|
||||
<Ionicons name="checkmark-outline" size={20} color={colors.textPrimary} />
|
||||
<Text style={[styles.actionButtonText, { color: colors.textPrimary }]}>Approve</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// Assuming a colors object like this for context:
|
||||
// const colors = {
|
||||
// white: '#FFFFFF',
|
||||
// textPrimary: '#212121',
|
||||
// textSecondary: '#757575',
|
||||
// border: '#EEEEEE',
|
||||
// danger: '#C62828',
|
||||
// lightDanger: '#FFEBEE',
|
||||
// pastelOrange: '#FFDAB9', // The requested color
|
||||
// };
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 16,
|
||||
marginVertical: 8,
|
||||
elevation: 4,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 10,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
padding: 8,
|
||||
},
|
||||
userInfoSection: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
avatar: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
marginRight: 12,
|
||||
},
|
||||
userInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
userName: {
|
||||
fontSize: 17,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textDark,
|
||||
},
|
||||
userMeta: {
|
||||
fontSize: 14,
|
||||
color: colors.textLight,
|
||||
marginTop: 4,
|
||||
},
|
||||
groupInfoSection: {
|
||||
paddingVertical: 16,
|
||||
},
|
||||
requestText: {
|
||||
fontSize: 15,
|
||||
color: colors.textDark,
|
||||
lineHeight: 22,
|
||||
},
|
||||
groupName: {
|
||||
fontWeight: 'bold',
|
||||
color: colors.textDark,
|
||||
},
|
||||
actionsSection: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
gap: 12,
|
||||
},
|
||||
actionButton: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
},
|
||||
declineButton: {
|
||||
backgroundColor: colors.lightDanger,
|
||||
},
|
||||
approveButton: {
|
||||
// Set background color as requested
|
||||
backgroundColor: colors.pastelOrange,
|
||||
},
|
||||
actionButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginLeft: 8,
|
||||
},
|
||||
});
|
||||
@@ -7,6 +7,7 @@ import Profile from "../screens/profile/Profile";
|
||||
import Home from "../screens/home/Home";
|
||||
import colors from "../components/colors";
|
||||
import Setting from "../screens/setting/Setting";
|
||||
import ManagementScreen from "../screens/management/ManagementScreen";
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
@@ -23,7 +24,7 @@ const activeTabColors: { [key: string]: string } = {
|
||||
Home: colors.pastelPink, // Soft pink
|
||||
Profile: colors.pastelBlue, // Light sky blue
|
||||
Group: colors.pastelGreen, // Gentle mint green
|
||||
Settings: colors.pastelOrange, // Warm pastel yellow
|
||||
Management: colors.pastelOrange, // Warm pastel yellow
|
||||
};
|
||||
|
||||
// Icon/Text colors on active tabs
|
||||
@@ -31,7 +32,7 @@ const activeIconColors: { [key: string]: string } = {
|
||||
Home: "#333",
|
||||
Profile: "#333",
|
||||
Group: "#333",
|
||||
Settings: "#333",
|
||||
Management: "#333",
|
||||
}
|
||||
|
||||
|
||||
@@ -65,7 +66,7 @@ export default function BottomTabs() {
|
||||
// Determine icon based on route
|
||||
if (route.name === "Home") iconName = focused ? "home" : "home-outline";
|
||||
else if (route.name === "Profile") iconName = focused ? "person" : "person-outline";
|
||||
else if (route.name === "Settings") iconName = focused ? "settings" : "settings-outline";
|
||||
else if (route.name === "Management") iconName = focused ? "settings" : "settings-outline";
|
||||
else if (route.name === "Group") iconName = focused ? "people" : "people-outline";
|
||||
|
||||
// 3. Get the active background color and icon color from the maps
|
||||
@@ -83,11 +84,11 @@ export default function BottomTabs() {
|
||||
],
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
(route.name === "Management"{<Ionicons
|
||||
name={iconName}
|
||||
size={TAB_CONFIG.iconSize}
|
||||
color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
|
||||
/>
|
||||
/>}:null)
|
||||
</View>
|
||||
);
|
||||
},
|
||||
@@ -96,7 +97,7 @@ export default function BottomTabs() {
|
||||
<Tab.Screen name="Home" component={Home} />
|
||||
<Tab.Screen name="Profile" component={Profile} />
|
||||
<Tab.Screen name="Group" component={GroupScreen} />
|
||||
<Tab.Screen name="Settings" component={Setting} />
|
||||
<Tab.Screen name="Management" component={ManagementScreen} />
|
||||
</Tab.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -109,7 +109,7 @@ export default function GroupCreationForm() {
|
||||
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
|
||||
<View style={styles.titleContainer}><Text style={styles.title}>Group Creation</Text></View>
|
||||
|
||||
<CustomInput label="Group Name" placeholder="Enter your group name" value={form.groupName} onChangeText={(val) => handleChange("groupName", val)} icon="people" error={errors.groupName} />
|
||||
<CustomInput label="Group Name" placeholder="Enter your group name" value={form.groupName} onChangeText={(val) => handleChange("groupName", val)} icon="people" />
|
||||
<CustomInput label="Description" placeholder="Enter a short description" value={form.description} onChangeText={(val) => handleChange("description", val)} multiline icon="document-text" error={errors.description} />
|
||||
|
||||
<Text style={styles.label}>Visibility</Text>
|
||||
@@ -124,8 +124,8 @@ export default function GroupCreationForm() {
|
||||
</View>
|
||||
|
||||
<View style={styles.participantsRow}>
|
||||
<View style={styles.participantInput}><CustomInput label="Min" placeholder="Min" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" error={errors.minParticipants} /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Max" placeholder="Max" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Min" placeholder="Min" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Max" placeholder="Max" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" /></View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.label}>Contribution Amount (INR)</Text>
|
||||
@@ -134,14 +134,14 @@ export default function GroupCreationForm() {
|
||||
</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" />
|
||||
<View style={styles.amountInput}><CustomInput label="" placeholder="Amount" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} /></View>
|
||||
<View style={styles.amountInput}><CustomInput label="" placeholder="Amount" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" /></View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.label}>Cycle Type</Text>
|
||||
<View style={styles.cycleTypeContainer}>
|
||||
{cycleTypes.map((type) => (<TouchableOpacity key={type} onPress={() => handleChange("cycleType", type)} style={[styles.cycleTypeButton, form.cycleType === type && styles.cycleTypeSelected]}><Text style={[styles.cycleTypeButtonText, form.cycleType === type && styles.cycleTypeSelectedText]}>{type.charAt(0) + type.slice(1).toLowerCase()}</Text></TouchableOpacity>))}
|
||||
</View>
|
||||
{form.cycleType === "CUSTOM" && (<CustomInput label="Custom Cycle Days" placeholder="Enter number of days" value={form.customCycleDays} onChangeText={(val) => handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" error={errors.customCycleDays} />)}
|
||||
{form.cycleType === "CUSTOM" && (<CustomInput label="Custom Cycle Days" placeholder="Enter number of days" value={form.customCycleDays} onChangeText={(val) => handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" />)}
|
||||
|
||||
<Text style={styles.label}>Start Date</Text>
|
||||
<TouchableOpacity style={[styles.datePickerButton, errors.startDate && styles.errorBorder]} onPress={() => setCalendarVisible(true)}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -20,8 +20,10 @@ 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";
|
||||
|
||||
import { BASE_URL, JOIN_GROUP_URL } from "../utils/ApiUrls";
|
||||
import colors from "../components/colors";
|
||||
import { ApiResponse } from "./home/UserProfileStatus";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
const { width } = Dimensions.get('window');
|
||||
const PUBLIC_GROUPS_URL = "https://api.godemo.in/FundCollect/api/fund/user/public";
|
||||
|
||||
@@ -89,6 +91,7 @@ export default function GroupScreen() {
|
||||
const [featuredGroups, setFeaturedGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [role, setRole] = useState<string | null>(null);
|
||||
|
||||
const fetchGroups = async () => {
|
||||
if (loading) return;
|
||||
@@ -137,6 +140,49 @@ export default function GroupScreen() {
|
||||
Alert.alert("Error", "An unexpected error occurred.");
|
||||
}
|
||||
};
|
||||
const userStatus = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await fetch(`${BASE_URL}user/profile/status`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
const json: ApiResponse = await response.json();
|
||||
|
||||
console.log("👤 Profile Status Response:", json);
|
||||
if (json.status === "success") {
|
||||
setRole(json.data.role);
|
||||
|
||||
if (json.data.profileStatus === false) {
|
||||
|
||||
}
|
||||
} else {
|
||||
setError(json.message || "Failed to fetch status");
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Something went wrong. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
userStatus();
|
||||
}, [])
|
||||
);
|
||||
|
||||
|
||||
const handleViewGroup = (group: Group) => {
|
||||
@@ -205,11 +251,16 @@ export default function GroupScreen() {
|
||||
|
||||
<View style={styles.tabHeader}>
|
||||
<View style={styles.segmentedControl}>
|
||||
{["My Groups", "Joined", "Public"].map((tab) => (
|
||||
|
||||
{role === "ORGANIZER" ? (["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>
|
||||
))}
|
||||
))) : (["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>
|
||||
))) }
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setIsGridView(!isGridView)} style={styles.layoutToggleButton}>
|
||||
<Ionicons name={isGridView ? "list" : "grid"} size={22} color="#555" />
|
||||
@@ -219,7 +270,9 @@ export default function GroupScreen() {
|
||||
{/* 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')} />
|
||||
{role === "ORGANIZER" && (
|
||||
<FAB style={styles.fab} icon={() => <MaterialIcons name="group-add" size={24} color="#333" />} onPress={() => navigation.navigate('GroupCreation')} />
|
||||
)}
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
@@ -241,12 +294,12 @@ const styles = StyleSheet.create({
|
||||
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 },
|
||||
segmentButtonActive: { backgroundColor: colors.pastelGreen, 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 },
|
||||
fab: { position: "absolute", right: 20, bottom: 90, width: 60, height: 60, justifyContent: "center", alignItems: "center", backgroundColor: colors.pastelGreen, 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' },
|
||||
@@ -258,7 +311,7 @@ const styles = StyleSheet.create({
|
||||
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 },
|
||||
joinButton: { flex: 1, backgroundColor: colors.pastelGreen, paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginLeft: 5 },
|
||||
joinButtonDisabled: { backgroundColor: '#bdc3c7' },
|
||||
joinButtonText: { color: '#333', fontWeight: 'bold', fontSize: 14 },
|
||||
});
|
||||
|
||||
@@ -136,7 +136,13 @@ const UserProfileStatus: React.FC = () => {
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, { backgroundColor: "#ccc", marginTop: 8 }]}
|
||||
onPress={() => setShowModal(false)}
|
||||
onPress={() => { if (intervalId) {
|
||||
clearInterval(intervalId);
|
||||
setIntervalId(null);
|
||||
}
|
||||
|
||||
setShowModal(false);
|
||||
}}
|
||||
>
|
||||
<Text style={[styles.buttonText, { color: "#333" }]}>Close</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
// src/screens/ManagementScreen.tsx
|
||||
|
||||
import React, { useState, useCallback, FC } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
ListRenderItemInfo,
|
||||
} from "react-native";
|
||||
import { useNavigation, useFocusEffect } from "@react-navigation/native";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { RootStackParamList } from "../../navigation/AppNavigator";
|
||||
import { APPROVE_REQUEST_URL, BASE_URL, DECLINE_REQUEST_URL, MY_GROUPS_URL, REQUESTS_URL } from "../../utils/ApiUrls";
|
||||
import colors from "../../components/colors";
|
||||
import AppView from "../../components/AppView";
|
||||
import { apiCall } from "../../utils/ApiHelper";
|
||||
|
||||
import { MyGroup, JoinedGroup, JoinRequest, ApiResponse } from '../../types';
|
||||
import { MyGroupCard } from "../../components/MyGroupCard";
|
||||
import { JoinedGroupCard } from "../../components/JoinedGroupCard";
|
||||
import { RequestCard } from "../../components/RequestCard";
|
||||
|
||||
type GroupManagementNavProp = StackNavigationProp<RootStackParamList>;
|
||||
type ActiveTab = "My Groups" | "Joined Groups" | "Requests";
|
||||
|
||||
const ManagementScreen: FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>("My Groups");
|
||||
const navigation = useNavigation<GroupManagementNavProp>();
|
||||
const [myGroups, setMyGroups] = useState<MyGroup[]>([]);
|
||||
const [joinedGroups, setJoinedGroups] = useState<JoinedGroup[]>([]);
|
||||
const [requests, setRequests] = useState<JoinRequest[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const userRole = "ORGANIZER";
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (userRole === "ORGANIZER") {
|
||||
// Fetch all data concurrently
|
||||
const [myGroupsRes,joinedGroupsRes,requestsRes] = await Promise.all([
|
||||
apiCall(MY_GROUPS_URL, "GET") as Promise<ApiResponse<MyGroup[]>>,
|
||||
apiCall(DECLINE_REQUEST_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>, // Assuming this is also needed
|
||||
apiCall(REQUESTS_URL, "GET") as Promise<ApiResponse<JoinRequest[]>>,
|
||||
]);
|
||||
setMyGroups(myGroupsRes.data || []);
|
||||
setJoinedGroups(joinedGroupsRes.data || []);
|
||||
setRequests(requestsRes.data || []);
|
||||
} else {
|
||||
// Fetch only joined groups for non-organizers
|
||||
// const joinedGroupsRes = await apiCall(JOINED_GROUPS_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>;
|
||||
// setJoinedGroups(joinedGroupsRes.data || []);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Fetch Data Error:", e);
|
||||
setError("Failed to fetch data. Please pull to refresh.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [userRole, loading]);
|
||||
|
||||
useFocusEffect(useCallback(() => { fetchData(); }, []));
|
||||
|
||||
const handleAction = async (url: string, body: object, successMessage: string, failureMessage: string, action: string) => {
|
||||
// ... (logic remains the same)
|
||||
console.log(url)
|
||||
try {
|
||||
setLoading(true); // Optionally show a loading state during the action
|
||||
// Make the POST request with an empty body
|
||||
const res = await apiCall(url, "PUT", {}) as ApiResponse<null> | null;
|
||||
|
||||
if (res && res.statusCode === 200) {
|
||||
// Use the success message from the API response
|
||||
Alert.alert("Success", res.message || `Request ${action}d successfully.`);
|
||||
fetchData(); // Refresh the list of requests
|
||||
} else {
|
||||
throw new Error(res?.message || failureMessage);
|
||||
}
|
||||
} catch (err: any) {
|
||||
Alert.alert("Error", err.message || "An unexpected error occurred.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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 renderContent = () => {
|
||||
if (error) {
|
||||
return <Text style={styles.emptyText}>{error}</Text>;
|
||||
}
|
||||
|
||||
switch (activeTab) {
|
||||
case "My Groups":
|
||||
if (loading) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={myGroups}
|
||||
renderItem={({ item }: ListRenderItemInfo<MyGroup>) => <MyGroupCard item={item} onManage={handleManageGroup} />}
|
||||
keyExtractor={(item) => item.id}
|
||||
ListEmptyComponent={<Text style={styles.emptyText}>You haven't created any groups yet.</Text>}
|
||||
onRefresh={fetchData}
|
||||
refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
/>
|
||||
);
|
||||
case "Joined Groups":
|
||||
if (loading && joinedGroups.length === 0) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={joinedGroups}
|
||||
renderItem={({ item }: ListRenderItemInfo<JoinedGroup>) => <JoinedGroupCard item={item} />}
|
||||
keyExtractor={(item) => item.id}
|
||||
ListEmptyComponent={<Text style={styles.emptyText}>You haven't joined any groups yet.</Text>}
|
||||
onRefresh={fetchData}
|
||||
refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
/>
|
||||
);
|
||||
case "Requests":
|
||||
if (loading && requests.length === 0) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={requests}
|
||||
renderItem={({ item }: ListRenderItemInfo<JoinRequest>) => <RequestCard item={item} onApprove={handleApprove} onDecline={handleDecline} />}
|
||||
keyExtractor={(item) => item.requestId}
|
||||
ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>}
|
||||
onRefresh={fetchData}
|
||||
refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
/>
|
||||
);
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
const tabs: ActiveTab[] = userRole === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups"];
|
||||
|
||||
return (
|
||||
<AppView style={styles.container} paddingHorizontal={0}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Group Management</Text>
|
||||
</View>
|
||||
<View style={styles.segmentedControl}>
|
||||
{tabs.map((tab) => (
|
||||
<TouchableOpacity key={tab} style={[styles.segmentButton, activeTab === tab && styles.segmentActive]} onPress={() => setActiveTab(tab)}>
|
||||
<Text style={[styles.segmentText, activeTab === tab && styles.segmentTextActive]}>{tab}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.contentArea}>
|
||||
{renderContent()}
|
||||
</View>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f6fa'
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 15,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: '#1d2129',
|
||||
},
|
||||
segmentedControl: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#e9ecef',
|
||||
borderRadius: 10,
|
||||
marginHorizontal: 20,
|
||||
marginBottom: 20,
|
||||
padding: 3,
|
||||
},
|
||||
segmentButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
alignItems: 'center',
|
||||
borderRadius: 8,
|
||||
},
|
||||
segmentActive: {
|
||||
backgroundColor: colors.pastelOrange, // Example color
|
||||
elevation: 3,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
},
|
||||
segmentText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#6c757d',
|
||||
},
|
||||
segmentTextActive: {
|
||||
color: colors.textDark, // Example color
|
||||
},
|
||||
contentArea: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
loader: {
|
||||
marginTop: 50,
|
||||
},
|
||||
emptyText: {
|
||||
textAlign: 'center',
|
||||
marginTop: 60,
|
||||
fontSize: 16,
|
||||
color: '#6c757d',
|
||||
},
|
||||
});
|
||||
|
||||
export default ManagementScreen;
|
||||
+118
-178
@@ -9,21 +9,20 @@ 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";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming you use expo-cli or have this package
|
||||
import { launchImageLibrary } from "react-native-image-picker";
|
||||
import { CustomButton, CustomInput } from "../../components/common/Custom";
|
||||
import colors from "../../components/colors";
|
||||
import SwitchNavigator from "./SwitchNavigator";
|
||||
import { useFocusEffect } from "@react-navigation/native";
|
||||
import { CommonActions, useFocusEffect, useNavigation } from "@react-navigation/native";
|
||||
import { ApiResponse } from "../home/UserProfileStatus";
|
||||
import { BASE_URL } from "../../utils/ApiUrls";
|
||||
|
||||
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
type UserProfile = {
|
||||
id: string;
|
||||
@@ -50,10 +49,12 @@ 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 () => {
|
||||
const fetchUserProfile = async (isRefreshing = false) => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
@@ -62,17 +63,17 @@ const Profile = () => {
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
setFetching(true);
|
||||
const response = await fetch(
|
||||
`${BASE_URL}user/profile/view`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (!isRefreshing) {
|
||||
setFetching(true);
|
||||
}
|
||||
|
||||
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") {
|
||||
@@ -84,7 +85,10 @@ const Profile = () => {
|
||||
console.error("❌ Error fetching profile:", error);
|
||||
Alert.alert("Error", "Could not connect to server");
|
||||
} finally {
|
||||
setFetching(false);
|
||||
if (!isRefreshing) {
|
||||
setFetching(false);
|
||||
}
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -97,25 +101,22 @@ 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") {
|
||||
@@ -168,31 +169,23 @@ 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");
|
||||
@@ -225,11 +218,9 @@ const Profile = () => {
|
||||
});
|
||||
|
||||
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");
|
||||
}
|
||||
@@ -240,19 +231,52 @@ 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(() => {
|
||||
userStatus();
|
||||
}, [])
|
||||
);
|
||||
|
||||
console.log("login user data :", user);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
console.log("user image :", user?.filePath);
|
||||
const getProfileImage = () => {
|
||||
if (user?.imageBlob) {
|
||||
return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
@@ -263,7 +287,6 @@ const Profile = () => {
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
|
||||
|
||||
if (fetching || !user) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
@@ -277,13 +300,18 @@ const Profile = () => {
|
||||
<View style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>User Profile</Text>
|
||||
<TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
|
||||
<Ionicons name="refresh" size={24} color={colors.Profile} />
|
||||
</TouchableOpacity>
|
||||
<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>
|
||||
</View>
|
||||
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
@@ -291,16 +319,23 @@ 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}>
|
||||
{/* 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 || ''} />}
|
||||
{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
|
||||
@@ -312,27 +347,19 @@ const Profile = () => {
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title={imageUpdating ? "Updating..." : "Update Image"}
|
||||
onPress={handleUpdateImage}
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={styles.updateImageButton}
|
||||
buttonBackground={colors.Profile}
|
||||
|
||||
/>
|
||||
</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} />
|
||||
<View>
|
||||
@@ -340,7 +367,6 @@ const Profile = () => {
|
||||
<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} />
|
||||
<View>
|
||||
@@ -348,7 +374,6 @@ const Profile = () => {
|
||||
<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} />
|
||||
<View>
|
||||
@@ -356,7 +381,6 @@ const Profile = () => {
|
||||
<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} />
|
||||
<View>
|
||||
@@ -364,7 +388,6 @@ const Profile = () => {
|
||||
<Text style={styles.detailText}>{user.username}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="location" size={20} color={colors.Profile} style={styles.detailIcon} />
|
||||
<View>
|
||||
@@ -372,7 +395,6 @@ const Profile = () => {
|
||||
<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} />
|
||||
<View>
|
||||
@@ -380,7 +402,6 @@ const Profile = () => {
|
||||
<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} />
|
||||
<View>
|
||||
@@ -389,7 +410,6 @@ const Profile = () => {
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title="Edit Profile"
|
||||
onPress={() => setEditing(true)}
|
||||
@@ -400,10 +420,8 @@ const Profile = () => {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Edit Form */}
|
||||
<View style={styles.editSection}>
|
||||
<Text style={styles.sectionTitle}>Edit Profile</Text>
|
||||
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
@@ -411,7 +429,6 @@ const Profile = () => {
|
||||
onChangeText={(text) => setUser({ ...user, firstName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
@@ -419,7 +436,6 @@ const Profile = () => {
|
||||
onChangeText={(text) => setUser({ ...user, lastName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
@@ -428,7 +444,6 @@ const Profile = () => {
|
||||
icon="mail"
|
||||
keyboardType="email-address"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
@@ -480,19 +495,18 @@ const Profile = () => {
|
||||
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",
|
||||
@@ -500,24 +514,23 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
padding: 16,
|
||||
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"
|
||||
color: "#000",
|
||||
},
|
||||
headerIcons: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
},
|
||||
refreshButton: {
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
logoutButton: {
|
||||
padding: 4,
|
||||
},
|
||||
profileCard: {
|
||||
borderRadius: 20,
|
||||
margin: 16,
|
||||
@@ -602,7 +615,6 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
editSection: {
|
||||
marginBottom: 20,
|
||||
flex: 1,
|
||||
},
|
||||
editButtons: {
|
||||
gap: 12,
|
||||
@@ -613,79 +625,7 @@ const styles = StyleSheet.create({
|
||||
cancelButton: {
|
||||
marginTop: 4,
|
||||
},
|
||||
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,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#6366f1",
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
shadowColor: "#6366f1",
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 6,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
elevation: 4,
|
||||
},
|
||||
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,
|
||||
},
|
||||
// Add any other styles you might need
|
||||
});
|
||||
|
||||
export default Profile;
|
||||
@@ -0,0 +1,38 @@
|
||||
// src/types.ts
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
status: "success" | "error";
|
||||
message: string;
|
||||
data?: T;
|
||||
statusCode: number;
|
||||
}
|
||||
|
||||
export interface MyGroup {
|
||||
id: string;
|
||||
groupName: string;
|
||||
description: string;
|
||||
visibility: "PUBLIC" | "PRIVATE";
|
||||
createdByName: string;
|
||||
currentParticipants: number;
|
||||
maxParticipants: number;
|
||||
contributionAmount: number;
|
||||
cycleType: "MONTHLY" | "QUARTERLY" | "YEARLY";
|
||||
status: "PENDING" | "ACTIVE" | "COMPLETED";
|
||||
}
|
||||
|
||||
export interface JoinedGroup {
|
||||
id: string;
|
||||
groupName: string;
|
||||
createdBy: string;
|
||||
}
|
||||
|
||||
export interface JoinRequest {
|
||||
requestId: string;
|
||||
groupId: string;
|
||||
groupName: string;
|
||||
userId: number;
|
||||
userName: string;
|
||||
mobile: string;
|
||||
status: "PENDING";
|
||||
userAvatar?: string;
|
||||
}
|
||||
@@ -6,4 +6,9 @@ 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 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
|
||||
export const APPROVE_REQUEST_URL =`https://api.godemo.in/FundCollect/api/fund/requests/`
|
||||
export const DECLINE_REQUEST_URL =`https://api.godemo.in/FundCollect/api/fund/user/my/groups`
|
||||
Reference in New Issue
Block a user