568 lines
18 KiB
TypeScript
568 lines
18 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
ToastAndroid,
|
|
RefreshControl,
|
|
} from 'react-native';
|
|
import { useNavigation, useRoute, RouteProp, useFocusEffect } from '@react-navigation/native';
|
|
import { useSelector } from 'react-redux';
|
|
import { responsiveFontSize } from 'react-native-responsive-dimensions';
|
|
import LucideIcon from '../../components/common/LucideIcon';
|
|
import {
|
|
APPROVE_REQUEST_URL,
|
|
DECLINE_REQUEST_URL,
|
|
GET_JOINED_GROUP_URL,
|
|
MY_GROUPS_URL,
|
|
REQUESTS_URL,
|
|
USER_REQUEST
|
|
} from '../../utils/ApiUrls';
|
|
import AppView from '../../components/AppView';
|
|
import { useTheme } from '../../hooks/ui/useTheme';
|
|
import { useFetch } from '../../hooks/core/useFetch';
|
|
import { useUpdate } from '../../hooks/core/useUpdate';
|
|
import { MyGroup, JoinRequest } from '../../types';
|
|
import MyGroupCard from '../../components/MyGroupCard';
|
|
import { JoinedGroupCard } from '../../components/JoinedGroupCard';
|
|
import { RequestCard } from '../../components/RequestCard';
|
|
import { UserRequested } from '../../components/UserRequested';
|
|
import SkeletonLoader from '../../components/common/SkeletonLoader';
|
|
import FontsFamily from '../../constents/FontsFamily';
|
|
import { RootTabParamList } from '../../navigation/BottomTabs';
|
|
|
|
type ManagementRouteProp = RouteProp<RootTabParamList, 'Management'>;
|
|
type ActiveTab = 'My Groups' | 'Joined Groups' | 'Requests' | 'My Requests';
|
|
type RequestSubTab = 'Join Requests' | 'My Requests';
|
|
type GroupStatusFilter = 'ALL' | 'PENDING' | 'APPROVED' | 'ACTIVE' | 'DELAY' | 'COMPLETED' | 'REJECTED' | 'CANCELLED';
|
|
|
|
const GROUP_STATUS_FILTERS: GroupStatusFilter[] = [
|
|
'ALL',
|
|
'PENDING',
|
|
'APPROVED',
|
|
'ACTIVE',
|
|
'DELAY',
|
|
'COMPLETED',
|
|
'REJECTED',
|
|
'CANCELLED',
|
|
];
|
|
|
|
const JOINED_GROUP_STATUS_FILTERS: GroupStatusFilter[] = [
|
|
'ALL',
|
|
'ACTIVE',
|
|
'DELAY',
|
|
'COMPLETED',
|
|
'APPROVED'
|
|
];
|
|
|
|
const getListFromResponse = <T,>(response: any): T[] => {
|
|
if (!response) return [];
|
|
if (Array.isArray(response?.data?.content)) return response.data.content;
|
|
if (Array.isArray(response?.data)) return response.data;
|
|
return [];
|
|
};
|
|
|
|
const ManagementScreen: React.FC = () => {
|
|
const theme = useTheme();
|
|
const user = useSelector((state: any) => state.user);
|
|
const navigation = useNavigation<any>();
|
|
const route = useRoute<ManagementRouteProp>();
|
|
|
|
const [activeTab, setActiveTab] = useState<ActiveTab>(
|
|
user.role === 'ORGANIZER' ? 'My Groups' : 'Joined Groups'
|
|
);
|
|
const [myGroupStatusFilter, setMyGroupStatusFilter] = useState<GroupStatusFilter>('APPROVED');
|
|
const [joinedGroupStatusFilter, setJoinedGroupStatusFilter] = useState<GroupStatusFilter>('ALL');
|
|
const [requestSubTab, setRequestSubTab] = useState<RequestSubTab>('Join Requests');
|
|
|
|
useEffect(() => {
|
|
if (!route.params?.actionTab) return;
|
|
const routeTab = route.params.actionTab as ActiveTab;
|
|
setActiveTab(routeTab);
|
|
}, [route.params?.actionTab]);
|
|
|
|
const myGroupsParams = {
|
|
...(myGroupStatusFilter && myGroupStatusFilter !== 'ALL'
|
|
? { status: myGroupStatusFilter }
|
|
: {}),
|
|
page: 0,
|
|
size: 10,
|
|
};
|
|
|
|
const joinedGroupsParams = {
|
|
...(joinedGroupStatusFilter && joinedGroupStatusFilter !== 'ALL'
|
|
? { status: joinedGroupStatusFilter }
|
|
: {}),
|
|
page: 0,
|
|
size: 10,
|
|
};
|
|
|
|
const requestsParams = { page: 0, size: 10 };
|
|
const myRequestsParams = { page: 0, size: 10 };
|
|
|
|
const alwaysFreshFetchOptions = {
|
|
staleTime: 0,
|
|
gcTime: 0,
|
|
refetchOnMount: 'always' as const,
|
|
refetchOnReconnect: true,
|
|
};
|
|
|
|
|
|
// Data Fetching
|
|
const {
|
|
data: myGroupsRes,
|
|
isLoading: myLoading,
|
|
isFetching: myFetching,
|
|
refetch: refetchMy,
|
|
} = useFetch<any>(
|
|
MY_GROUPS_URL,
|
|
myGroupsParams,
|
|
{ enabled: user.role === 'ORGANIZER' && activeTab === 'My Groups', ...alwaysFreshFetchOptions }
|
|
);
|
|
const {
|
|
data: joinedRes,
|
|
isLoading: joinedLoading,
|
|
isFetching: joinedFetching,
|
|
refetch: refetchJoined,
|
|
} = useFetch<any>(
|
|
GET_JOINED_GROUP_URL,
|
|
joinedGroupsParams,
|
|
{ enabled: activeTab === 'Joined Groups', ...alwaysFreshFetchOptions }
|
|
);
|
|
const {
|
|
data: requestsRes,
|
|
isLoading: requestsLoading,
|
|
isFetching: requestsFetching,
|
|
refetch: refetchRequests,
|
|
} = useFetch<any>(
|
|
REQUESTS_URL,
|
|
requestsParams,
|
|
{
|
|
enabled: user.role === 'ORGANIZER' && activeTab === 'Requests' && requestSubTab === 'Join Requests',
|
|
...alwaysFreshFetchOptions,
|
|
}
|
|
);
|
|
const {
|
|
data: userReqRes,
|
|
isLoading: userReqLoading,
|
|
isFetching: userReqFetching,
|
|
refetch: refetchUserReq,
|
|
} = useFetch<any>(
|
|
USER_REQUEST,
|
|
myRequestsParams,
|
|
{
|
|
enabled:
|
|
activeTab === 'My Requests' ||
|
|
(user.role === 'ORGANIZER' && activeTab === 'Requests' && requestSubTab === 'My Requests'),
|
|
...alwaysFreshFetchOptions,
|
|
}
|
|
);
|
|
|
|
const { mutate: updateRequest } = useUpdate<any, any>('');
|
|
|
|
const myGroups = getListFromResponse<MyGroup>(myGroupsRes);
|
|
const joinedGroups = getListFromResponse<any>(joinedRes);
|
|
const incomingRequests = getListFromResponse<JoinRequest>(requestsRes);
|
|
const myRequests = getListFromResponse<any>(userReqRes);
|
|
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const onRefresh = useCallback(async () => {
|
|
setRefreshing(true);
|
|
const refreshTasks = [refetchJoined(), refetchUserReq()];
|
|
|
|
if (user.role === 'ORGANIZER') {
|
|
refreshTasks.push(refetchMy(), refetchRequests());
|
|
}
|
|
|
|
await Promise.all(refreshTasks).finally(() => {
|
|
setRefreshing(false);
|
|
});
|
|
}, [refetchMy, refetchJoined, refetchRequests, refetchUserReq, user.role]);
|
|
|
|
const refetchActiveTab = useCallback(async () => {
|
|
if (activeTab === 'My Groups' && user.role === 'ORGANIZER') {
|
|
await refetchMy();
|
|
return;
|
|
}
|
|
|
|
if (activeTab === 'Joined Groups') {
|
|
await refetchJoined();
|
|
return;
|
|
}
|
|
|
|
if (activeTab === 'Requests' && user.role === 'ORGANIZER') {
|
|
if (requestSubTab === 'Join Requests') {
|
|
await refetchRequests();
|
|
} else {
|
|
await refetchUserReq();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (activeTab === 'My Requests') {
|
|
await refetchUserReq();
|
|
}
|
|
}, [activeTab, requestSubTab, refetchMy, refetchJoined, refetchRequests, refetchUserReq, user.role]);
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
refetchActiveTab();
|
|
}, [refetchActiveTab])
|
|
);
|
|
|
|
const tabs: ActiveTab[] =
|
|
user.role === 'ORGANIZER'
|
|
? ['My Groups', 'Joined Groups', 'Requests']
|
|
: ['Joined Groups', 'My Requests'];
|
|
|
|
const handleApprove = (req: JoinRequest) => {
|
|
updateRequest({ resource: `${APPROVE_REQUEST_URL}${req.requestId}/approve`, payload: {} } as any, {
|
|
onSuccess: () => {
|
|
ToastAndroid.show('Request approved successfully', ToastAndroid.SHORT);
|
|
refetchRequests();
|
|
},
|
|
onError: (err) => ToastAndroid.show(err.message || 'Failed to approve', ToastAndroid.SHORT),
|
|
});
|
|
};
|
|
|
|
const handleDecline = (req: JoinRequest) => {
|
|
updateRequest({ resource: `${DECLINE_REQUEST_URL}${req.requestId}/reject?reason=no Reason`, payload: {} } as any, {
|
|
onSuccess: () => {
|
|
ToastAndroid.show('Request declined', ToastAndroid.SHORT);
|
|
refetchRequests();
|
|
},
|
|
onError: (err) => ToastAndroid.show(err.message || 'Failed to decline', ToastAndroid.SHORT),
|
|
});
|
|
};
|
|
|
|
const handleManageGroup = (group: MyGroup) => navigation.navigate('ManagementTabs', { groupId: group.id });
|
|
|
|
const renderSkeletons = () => (
|
|
<View style={styles.skeletonContainer}>
|
|
{[1, 2, 3].map(i => (
|
|
<SkeletonLoader key={i} width="100%" height={120} style={{ marginBottom: 16, borderRadius: 16 }} />
|
|
))}
|
|
</View>
|
|
);
|
|
|
|
const getFilteredData = () => {
|
|
switch (activeTab) {
|
|
case 'My Groups': return myGroups;
|
|
case 'Joined Groups': return joinedGroups;
|
|
case 'Requests':
|
|
return requestSubTab === 'Join Requests' ? incomingRequests : myRequests;
|
|
case 'My Requests': return myRequests;
|
|
default: return [];
|
|
}
|
|
};
|
|
|
|
const isMyGroupsLoading = myLoading || myFetching;
|
|
const isJoinedGroupsLoading = joinedLoading || joinedFetching;
|
|
const isRequestsLoading = requestsLoading || requestsFetching;
|
|
const isUserRequestsLoading = userReqLoading || userReqFetching;
|
|
|
|
const isActiveTabLoading =
|
|
activeTab === 'My Groups'
|
|
? isMyGroupsLoading
|
|
: activeTab === 'Joined Groups'
|
|
? isJoinedGroupsLoading
|
|
: activeTab === 'Requests'
|
|
? requestSubTab === 'Join Requests'
|
|
? isRequestsLoading
|
|
: isUserRequestsLoading
|
|
: isUserRequestsLoading;
|
|
|
|
const listData = refreshing || isActiveTabLoading ? [] : getFilteredData();
|
|
|
|
return (
|
|
<AppView paddingHorizontal={0}>
|
|
<View style={styles.header}>
|
|
<View style={styles.headerTitleRow}>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={[styles.title, { color: theme.colors.textPrimary }]}>Account Hub</Text>
|
|
<Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>Manage your circles and requests</Text>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={onRefresh}
|
|
disabled={refreshing}
|
|
style={styles.refreshBtn}
|
|
>
|
|
<LucideIcon
|
|
name="sync-outline"
|
|
size={20}
|
|
color={theme.colors.textSecondary}
|
|
style={refreshing ? { opacity: 0.5 } : {}}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={[styles.tabContainer, { backgroundColor: theme.colors.borderLight }]}>
|
|
{tabs.map((tab) => (
|
|
<TouchableOpacity
|
|
key={tab}
|
|
onPress={() => setActiveTab(tab)}
|
|
style={[
|
|
styles.tab,
|
|
activeTab === tab && { backgroundColor: theme.colors.card, borderRadius: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2 }
|
|
]}
|
|
>
|
|
<Text style={[
|
|
styles.tabText,
|
|
{ color: activeTab === tab ? theme.colors.textPrimary : theme.colors.textMuted },
|
|
activeTab === tab && { fontFamily: FontsFamily.nunitoBold }
|
|
]}>
|
|
{tab}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{user.role === 'ORGANIZER' && activeTab === 'My Groups' && (
|
|
<View style={styles.statusFilterContainer}>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.statusFilterRow}
|
|
>
|
|
{GROUP_STATUS_FILTERS.map((status, index) => {
|
|
const isActive = myGroupStatusFilter === status;
|
|
return (
|
|
<TouchableOpacity
|
|
key={status}
|
|
onPress={() => setMyGroupStatusFilter(status)}
|
|
style={[
|
|
styles.statusFilterChip,
|
|
index !== GROUP_STATUS_FILTERS.length - 1 && styles.statusFilterChipSpaced,
|
|
{
|
|
borderColor: isActive ? theme.colors.primary : theme.colors.border,
|
|
backgroundColor: isActive ? theme.colors.primarySoft : theme.colors.surface,
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.statusFilterText,
|
|
{
|
|
color: isActive ? theme.colors.textPrimary : theme.colors.textSecondary,
|
|
},
|
|
]}
|
|
>
|
|
{status}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
)}
|
|
|
|
{activeTab === 'Joined Groups' && (
|
|
<View style={styles.statusFilterContainer}>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.statusFilterRow}
|
|
>
|
|
{JOINED_GROUP_STATUS_FILTERS.map((status, index) => {
|
|
const isActive = joinedGroupStatusFilter === status;
|
|
return (
|
|
<TouchableOpacity
|
|
key={status}
|
|
onPress={() => setJoinedGroupStatusFilter(status)}
|
|
style={[
|
|
styles.statusFilterChip,
|
|
index !== JOINED_GROUP_STATUS_FILTERS.length - 1 && styles.statusFilterChipSpaced,
|
|
{
|
|
borderColor: isActive ? theme.colors.primary : theme.colors.border,
|
|
backgroundColor: isActive ? theme.colors.primarySoft : theme.colors.surface,
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.statusFilterText,
|
|
{
|
|
color: isActive ? theme.colors.textPrimary : theme.colors.textSecondary,
|
|
},
|
|
]}
|
|
>
|
|
{status}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
)}
|
|
|
|
|
|
|
|
{activeTab === 'Requests' && user.role === 'ORGANIZER' && (
|
|
<View style={styles.statusFilterContainer}>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.statusFilterRow}
|
|
>
|
|
{(['Join Requests', 'My Requests'] as RequestSubTab[]).map((tab, index) => {
|
|
const isActive = requestSubTab === tab;
|
|
return (
|
|
<TouchableOpacity
|
|
key={tab}
|
|
onPress={() => setRequestSubTab(tab)}
|
|
style={[
|
|
styles.statusFilterChip,
|
|
index !== (['Join Requests', 'My Requests'] as RequestSubTab[]).length - 1 && styles.statusFilterChipSpaced,
|
|
{
|
|
borderColor: isActive ? theme.colors.primary : theme.colors.border,
|
|
backgroundColor: isActive ? theme.colors.primarySoft : theme.colors.surface,
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.statusFilterText,
|
|
{
|
|
color: isActive ? theme.colors.textPrimary : theme.colors.textSecondary,
|
|
},
|
|
]}
|
|
>
|
|
{tab}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
)}
|
|
|
|
<FlatList
|
|
data={listData}
|
|
contentContainerStyle={styles.listContent}
|
|
keyExtractor={(item, index) => String(item.id || item.requestId || index)}
|
|
renderItem={({ item }) => {
|
|
if (activeTab === 'My Groups') return <MyGroupCard item={item} onManage={handleManageGroup} />;
|
|
if (activeTab === 'Joined Groups') return <JoinedGroupCard item={item} />;
|
|
if (activeTab === 'Requests') {
|
|
if (requestSubTab === 'Join Requests') {
|
|
return <RequestCard item={item} onApprove={handleApprove} onDecline={handleDecline} />;
|
|
} else {
|
|
return <UserRequested item={item} />;
|
|
}
|
|
}
|
|
if (activeTab === 'My Requests') return <UserRequested item={item} />;
|
|
return null;
|
|
}}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refreshing}
|
|
onRefresh={onRefresh}
|
|
colors={[theme.colors.primary]}
|
|
/>
|
|
}
|
|
ListEmptyComponent={
|
|
!isActiveTabLoading && !refreshing ? (
|
|
<View style={styles.emptyState}>
|
|
<LucideIcon name="documents-outline" size={64} color={theme.colors.textMuted} />
|
|
<Text style={[styles.emptyText, { color: theme.colors.textSecondary }]}>Nothing to show here</Text>
|
|
</View>
|
|
) : renderSkeletons()
|
|
}
|
|
/>
|
|
</AppView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
header: {
|
|
paddingHorizontal: 14,
|
|
paddingTop: 10,
|
|
paddingBottom: 12,
|
|
zIndex: 10,
|
|
},
|
|
headerTitleRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
refreshBtn: {
|
|
padding: 8,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: responsiveFontSize(3.2),
|
|
fontFamily: FontsFamily.nunitoBold,
|
|
},
|
|
subtitle: {
|
|
fontSize: responsiveFontSize(1.6),
|
|
fontFamily: FontsFamily.nunitoRegular,
|
|
marginTop: 4,
|
|
},
|
|
tabContainer: {
|
|
flexDirection: 'row',
|
|
marginHorizontal: 12,
|
|
padding: 5,
|
|
borderRadius: 16,
|
|
marginBottom: 12,
|
|
zIndex: 10,
|
|
},
|
|
tab: {
|
|
flex: 1,
|
|
paddingVertical: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
tabText: {
|
|
fontSize: responsiveFontSize(1.4),
|
|
fontFamily: FontsFamily.nunitoMedium,
|
|
},
|
|
statusFilterContainer: {
|
|
minHeight: 46,
|
|
maxHeight: 46,
|
|
marginBottom: 10,
|
|
},
|
|
statusFilterRow: {
|
|
paddingHorizontal: 12,
|
|
alignItems: 'center',
|
|
},
|
|
statusFilterChip: {
|
|
borderWidth: 1,
|
|
borderRadius: 999,
|
|
minHeight: 34,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 0,
|
|
justifyContent: 'center',
|
|
alignSelf: 'center',
|
|
},
|
|
statusFilterChipSpaced: {
|
|
marginRight: 8,
|
|
},
|
|
statusFilterText: {
|
|
fontSize: responsiveFontSize(1.25),
|
|
fontFamily: FontsFamily.nunitoSemiBold,
|
|
},
|
|
listContent: {
|
|
paddingBottom: 86,
|
|
},
|
|
skeletonContainer: {
|
|
paddingHorizontal: 12,
|
|
},
|
|
emptyState: {
|
|
alignItems: 'center',
|
|
marginTop: 64,
|
|
},
|
|
emptyText: {
|
|
marginTop: 16,
|
|
fontSize: responsiveFontSize(1.6),
|
|
fontFamily: FontsFamily.nunitoMedium,
|
|
},
|
|
});
|
|
|
|
export default ManagementScreen;
|