create-gufran-expo-app 2.0.3 → 2.0.5

package/template/src/screens/clubs/Announcements.tsx

@@ -1,426 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { View, Text, StyleSheet, FlatList, StatusBar, Platform, TouchableOpacity, Image, RefreshControl, Keyboard, ActivityIndicator } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { Strings, theme } from '@constants';
-import { moderateScale } from '@utils/scaling';
-import { Fonts } from '@constants/Fonts';
-import SVG from '@assets/icons';
-import { AnnouncementsScreenProps } from '@navigation';
-import { useInfiniteAnnouncements, Announcement } from '@services/mainServices';
-
-export const Announcements: React.FC<AnnouncementsScreenProps> = ({ navigation, route }) => {
-    const { selectedClub, selectedMember: initialSelectedMember } = route?.params ?? {}
-    const clubId = selectedClub?.id || 0;
-    console.log("Announcements selectedClub", selectedClub);
-    const pageSize = 10; // Default page size
-
-    // Use infinite query for announcements
-    const {
-        data,
-        isLoading,
-        isError,
-        error,
-        fetchNextPage,
-        hasNextPage,
-        isFetchingNextPage,
-        refetch,
-        isRefetching,
-    } = useInfiniteAnnouncements(clubId, pageSize);
-
-    // Flatten all pages into a single array
-    const announcementsData = useMemo(() => {
-        if (!data?.pages) return [];
-        return data.pages.flatMap(page => {
-            const pageData = page?.data?.data;
-            if (!pageData) return [];
-
-            // Handle both structures: { announcements: [] } or direct array
-            if (Array.isArray(pageData)) {
-                return pageData;
-            }
-
-            // Handle object structure with announcements property
-            if (pageData && typeof pageData === 'object' && 'announcements' in pageData) {
-                return pageData.announcements || [];
-            }
-
-            return [];
-        });
-    }, [data]);
-
-    const keyExtractor = (item: Announcement, index: number): string => {
-        // Create a unique key using message and sentOn date
-        const messageHash = item.message?.substring(0, 20) || '';
-        const dateHash = item.sentOn || index.toString();
-        return `announcement-${dateHash}-${index}`;
-    };
-
-    // Pull to refresh
-    const onRefresh = useCallback(async () => {
-        await refetch();
-    }, [refetch]);
-
-    // Handle load more when reaching the end
-    const handleLoadMore = useCallback(async () => {
-        console.log('handleLoadMore called - hasNextPage:', hasNextPage, 'isFetchingNextPage:', isFetchingNextPage);
-        if (hasNextPage && !isFetchingNextPage) {
-            console.log('Fetching next page...');
-            await fetchNextPage();
-        } else {
-            console.log('Not fetching - hasNextPage:', hasNextPage, 'isFetchingNextPage:', isFetchingNextPage);
-        }
-    }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-
-
-
-
-    const renderEmptyComponent = () => {
-        if (isLoading) {
-            return (
-                <View style={styles.emptyContainer}>
-                    <ActivityIndicator size="large" color={theme.colors.primary} />
-                    <Text style={styles.emptyListText}>Loading announcements...</Text>
-                </View>
-            );
-        }
-
-        if (isError) {
-            return (
-                <View style={styles.emptyContainer}>
-                    <Text style={styles.errorText}>Failed to load announcements</Text>
-                    <Text style={styles.emptySubText}>{error?.message || 'Please try again'}</Text>
-                    <TouchableOpacity style={styles.retryButton} onPress={() => refetch()}>
-                        <Text style={styles.retryButtonText}>Retry</Text>
-                    </TouchableOpacity>
-                </View>
-            );
-        }
-
-        return (
-            <View style={styles.emptyContainer}>
-                <Text style={styles.emptyListText}>No announcements found</Text>
-                <Text style={styles.emptySubText}>Try refreshing or check back later</Text>
-            </View>
-        );
-    };
-
-    const renderFooter = () => {
-        if (!isFetchingNextPage) return null;
-        return (
-            <View style={styles.footerLoader}>
-                <ActivityIndicator size="small" color={theme.colors.primary} />
-                <Text style={styles.footerText}>Loading more...</Text>
-            </View>
-        );
-    };
-
-    const handleScroll = useCallback(() => {
-        Keyboard.dismiss();
-    }, []);
-
-
-
-    const formatSentOn = (sentOn?: string | number | Date): string => {
-        if (!sentOn) return '';
-
-        const tryFormat = (d: Date) => {
-            const day = String(d.getDate()).padStart(2, '0');
-            const month = String(d.getMonth() + 1).padStart(2, '0');
-            const year = d.getFullYear();
-            let hours = d.getHours();
-            const minutes = String(d.getMinutes()).padStart(2, '0');
-            const ampm = hours >= 12 ? 'pm' : 'am';
-            hours = hours % 12;
-            if (hours === 0) hours = 12;
-            return `${day}/${month}/${year}, ${hours}:${minutes} ${ampm}`;
-        };
-
-        let date = new Date(sentOn);
-
-        if (isNaN(date.getTime()) && typeof sentOn === 'string') {
-            // Fallback parser for formats like: "29 Oct 2025 07:13 PM"
-            const match = sentOn.match(/^(\d{1,2})\s([A-Za-z]{3})\s(\d{4})\s(\d{1,2}):(\d{2})\s?(AM|PM)$/i);
-            if (match) {
-                const [, dStr, monStr, yStr, hStr, mStr, apStr] = match;
-                const monthMap: Record<string, number> = {
-                    Jan: 0, Feb: 1, Mar: 2, Apr: 3, May: 4, Jun: 5,
-                    Jul: 6, Aug: 7, Sep: 8, Oct: 9, Nov: 10, Dec: 11,
-                };
-                const monthIndex = monthMap[monStr as keyof typeof monthMap];
-                if (monthIndex !== undefined) {
-                    let hour24 = parseInt(hStr, 10) % 12;
-                    const isPM = /pm/i.test(apStr);
-                    if (isPM) hour24 += 12;
-                    const year = parseInt(yStr, 10);
-                    const day = parseInt(dStr, 10);
-                    const minute = parseInt(mStr, 10);
-                    date = new Date(year, monthIndex, day, hour24, minute, 0, 0);
-                }
-            }
-        }
-
-        if (isNaN(date.getTime())) return String(sentOn);
-
-        return tryFormat(date);
-    };
-
-
-    const renderAnnouncementItem = ({ item }: { item: Announcement }) => {
-        if (!item) return null;
-
-        return (
-            <View style={styles.announcementCard}>
-                {/* Message Content */}
-                <Text style={styles.announcementMessage}>{item.message}</Text>
-
-                {/* Image if available */}
-                {item.image && (
-                    <Image
-                        source={{ uri: item.image }}
-                        style={styles.announcementImage}
-                        resizeMode="cover"
-                    />
-                )}
-
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-
-                    <Text style={styles.announcementBy}>By Club Admin</Text>
-
-                    {/* Date/Time */}
-                    {item.sentOn && (
-                        <Text style={styles.announcementDate}>{formatSentOn(item.sentOn)}</Text>
-                    )}
-                </View>
-            </View>
-        );
-    };
-
-
-    return (
-        <View style={styles.container}>
-            <StatusBar
-                barStyle="light-content"
-                backgroundColor={theme.colors.blue}
-                translucent={Platform.OS === 'android' ? true : false}
-            />
-            {Platform.OS === 'ios' && <View style={styles.statusBarBackground} />}
-            <SafeAreaView style={styles.header} >
-                <View style={{ flexDirection: 'row', paddingHorizontal: theme.spacing.lg }}>
-                    <TouchableOpacity onPress={() => navigation.goBack()}>
-                        <SVG.arrowLeft_white width={moderateScale(25)} height={moderateScale(25)} />
-                    </TouchableOpacity>
-                    <View style={{ flexDirection: 'row' }}>
-                        <View style={styles.userConSty}>
-                            {!!selectedClub?.clubImage ? (<Image
-                                // onLoadEnd={() => setIsLoading(false)}
-                                // onLoad={() => setIsLoading(true)}
-                                // onLoadStart={() => setIsLoading(true)}
-                                source={{ uri: selectedClub?.clubImage }}
-                                resizeMode='cover'
-                                style={styles.userDetailsSty} />
-                            ) : (
-                                <View style={styles.placeholderLogoHeader}>
-                                    <SVG.UsersIcon width={moderateScale(20)} height={moderateScale(20)} />
-                                </View>
-                            )}
-                        </View>
-                        <Text style={styles.userNameSty}>{selectedClub?.clubName || 'Unknown Club'}</Text>
-                    </View>
-                </View>
-                <Text style={styles.headerTitle}>{Strings.Announcements.ANNOUNCEMENTS}</Text>
-                <View style={styles.content}>
-                    <FlatList
-                        data={announcementsData}
-                        renderItem={renderAnnouncementItem}
-                        keyExtractor={keyExtractor}
-                        style={styles.clubsList}
-                        showsVerticalScrollIndicator={false}
-                        contentContainerStyle={styles.flatListContent}
-                        removeClippedSubviews={false}
-                        initialNumToRender={10}
-                        ListEmptyComponent={renderEmptyComponent}
-                        onScroll={handleScroll}
-                        scrollEventThrottle={16}
-                        refreshControl={
-                            <RefreshControl
-                                refreshing={isRefetching}
-                                onRefresh={onRefresh}
-                                colors={[theme.colors.primary]}
-                                tintColor={theme.colors.primary}
-                            />
-                        }
-                        onEndReached={handleLoadMore}
-                        onEndReachedThreshold={0.5}
-                        ListFooterComponent={renderFooter}
-                        maxToRenderPerBatch={10}
-                        updateCellsBatchingPeriod={50}
-                        windowSize={10}
-                    />
-                </View>
-            </SafeAreaView>
-
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: theme.colors.blue,
-    },
-    statusBarBackground: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: Platform.OS === 'ios' ? 44 : 0, // Status bar height for iOS
-        backgroundColor: theme.colors.blue,
-        zIndex: 1000,
-    },
-    header: {
-        flex: 1,
-        backgroundColor: theme.colors.blue,
-        paddingVertical: theme.spacing.xs,
-        paddingTop: Platform.OS === 'android' ? theme.spacing.lg : theme.spacing.xs,
-    },
-    headerTitle: {
-        marginTop: moderateScale(20),
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(22),
-        color: theme.colors.white,
-        paddingHorizontal: theme.spacing.lg,
-        marginBottom: theme.spacing.sm,
-    },
-    content: {
-        flex: 1,
-        backgroundColor: theme.colors.white,
-        paddingHorizontal: theme.spacing.lg,
-        paddingTop: theme.spacing.md,
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-    },
-    clubsList: {
-        flex: 1,
-    },
-    flatListContent: {
-        paddingBottom: theme.spacing.xl,
-    },
-    emptyContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: theme.spacing.xl,
-    },
-    emptyListText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.text,
-        textAlign: 'center',
-        marginBottom: theme.spacing.xs,
-    },
-    emptySubText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.textSecondary,
-        textAlign: 'center',
-    },
-    footerLoader: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: theme.spacing.md,
-        gap: theme.spacing.sm,
-    },
-    footerText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.sm,
-        color: theme.colors.textSecondary,
-    },
-    errorText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.error,
-        textAlign: 'center',
-        marginBottom: theme.spacing.md,
-    },
-    retryButton: {
-        backgroundColor: theme.colors.primary,
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.sm,
-        borderRadius: theme.borderRadius.md,
-    },
-    retryButtonText: {
-        fontFamily: Fonts.outfitMedium,
-        fontSize: theme.typography.fontSize.md,
-        color: theme.colors.white,
-        textAlign: 'center',
-    },
-    userConSty: {
-        marginHorizontal: moderateScale(10),
-        width: moderateScale(30),
-        height: moderateScale(30),
-        borderRadius: moderateScale(15),
-        borderWidth: 1.5,
-        borderColor: theme.colors.imageBorder,
-        backgroundColor: theme.colors.background,
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    userNameSty: {
-        marginTop: moderateScale(5),
-        color: theme.colors.white,
-        fontFamily: Fonts.outfitMedium,
-        fontSize: moderateScale(15)
-    },
-    userDetailsSty: {
-        width: moderateScale(30),
-        height: moderateScale(30),
-        borderRadius: moderateScale(15),
-    },
-    placeholderLogoHeader: {
-        width: moderateScale(20),
-        height: moderateScale(20),
-        borderRadius: moderateScale(10),
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-
-    // New Announcement Card Styles
-    announcementCard: {
-        backgroundColor: theme.colors.lightLavenderGray,
-        borderRadius: moderateScale(12),
-        padding: theme.spacing.md,
-        marginBottom: theme.spacing.md,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 3,
-    },
-    announcementMessage: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(15),
-        color: theme.colors.text,
-        lineHeight: moderateScale(22),
-        marginBottom: theme.spacing.sm,
-    },
-    announcementImage: {
-        width: '100%',
-        height: moderateScale(200),
-        borderRadius: moderateScale(8),
-        marginBottom: theme.spacing.sm,
-        backgroundColor: theme.colors.border,
-    },
-    announcementDate: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: theme.colors.textSecondary,
-        marginTop: theme.spacing.xs,
-    },
-    announcementBy: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: theme.colors.black,
-        marginTop: theme.spacing.xs,
-    },
-});