create-gufran-expo-app 2.0.3 → 2.0.5

package/template/src/screens/chat/ChatThreadsScreen.tsx

@@ -1,360 +0,0 @@
-import React, { useCallback } from "react";
-import {
-    View,
-    Text,
-    StyleSheet,
-    FlatList,
-    StatusBar,
-    Platform,
-    TouchableOpacity,
-    Image,
-    RefreshControl,
-    Keyboard,
-} from "react-native";
-import moment from "moment";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useFocusEffect } from "@react-navigation/native";
-import { useTeamThreads, ChatThread } from "@services/mainServices";
-import { ChatThreadsScreenProps } from "@navigation";
-import { moderateScale } from "@utils/scaling";
-import { Fonts } from "@constants/Fonts";
-import { theme } from "@constants";
-import SVG from "@assets/icons";
-
-export const ChatThreadsScreen: React.FC<ChatThreadsScreenProps> = ({
-    navigation,
-    route,
-}) => {
-    const { team }: any = route?.params ?? {};
-    const teamId = team?.teamId;
-    const memberId = team?.memberId;
-    const clubImage = team?.teamProfileImage;
-
-    const {
-        data: threadsResponse,
-        isLoading,
-        isError,
-        error,
-        refetch,
-    } = useTeamThreads(teamId, memberId);
-
-    // Get threads data from response
-    const threads = threadsResponse?.data?.data || [];
-
-    useFocusEffect(useCallback(() => {
-        refetch();
-    }, [refetch]));
-
-    // Refresh data
-    const onRefresh = useCallback(() => {
-        refetch();
-    }, [refetch]);
-
-    const handleThreadPress = (item: any) => {
-
-        navigation.navigate("ChatScreen", {
-            itemDetails: item,
-            memberId: memberId,
-            teamId: teamId,
-            team: team,
-            userType: "teams"
-        });
-    };
-
-
-
-    const renderThreadCard = ({ item }: { item: ChatThread }) => {
-        return (
-            <TouchableOpacity
-                style={styles.threadCard}
-                onPress={() => handleThreadPress(item)}
-            >
-                <View style={styles.threadInfo}>
-                    <View style={styles.threadHeader}>
-                        <Text style={styles.threadName} numberOfLines={1}>
-                            {item?.threadName}
-                        </Text>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.sm }}>
-                            {item?.isMute && (
-                                <SVG.mute width={moderateScale(18)} height={moderateScale(18)} />
-                            )}
-                            {item?.unreadMessageCount > 0 && (
-                                <View style={styles.notificationBadge}>
-                                    <Text style={styles.notificationText}>{item?.unreadMessageCount}</Text>
-                                </View>
-                            )}
-                        </View>
-                    </View>
-
-                    {item?.lastMessageText == "Attachment_Image" ? (
-                        <Text style={styles.lastMessage} numberOfLines={1}>
-                            Attachment Image
-                        </Text>
-                    ) : (
-                        <Text style={styles.lastMessage} numberOfLines={1}>
-                            {item?.lastMessageText || 'No messages yet'}
-                        </Text>
-                    )}
-
-
-                    {item?.lastMessageSentAt && (
-                        <View>
-                            <Text style={styles.lastMessageTime}>{moment(new Date(item?.lastMessageSentAt + "Z")).format('DD/MM/YYYY, hh:mm A')}</Text>
-                        </View>
-                    )}
-                </View>
-            </TouchableOpacity>
-        );
-    };
-
-    const renderEmptyComponent = () => {
-        if (isLoading) {
-            return (
-                <View style={styles.loadingContainer}>
-                    <Text style={styles.loadingText}>Loading chat threads...</Text>
-                </View>
-            );
-        }
-
-        return (
-            <View style={styles.emptyContainer}>
-                <Text style={styles.emptyText}>No chat threads available</Text>
-                <Text style={styles.emptySubText}>Start a conversation to see threads here</Text>
-            </View>
-        );
-    };
-
-    const handleScroll = useCallback(() => {
-        Keyboard.dismiss();
-    }, []);
-
-    return (
-        <SafeAreaView style={styles.container}>
-            <StatusBar backgroundColor={theme.colors.blue} barStyle="light-content" />
-            {Platform.OS === "android" && <View style={styles.statusBarBackground} />}
-
-            <View style={styles.header}>
-                <View style={styles.headerTopRow}>
-                    <TouchableOpacity onPress={() => navigation.goBack()}>
-                        <SVG.arrowLeft_white
-                            width={moderateScale(25)}
-                            height={moderateScale(25)}
-                        />
-                    </TouchableOpacity>
-                    <View style={{ flexDirection: "row", flex: 1 }}>
-                        <View style={styles.userConSty}>
-                            {!!clubImage ? (
-                                <Image
-                                    source={{ uri: clubImage }}
-                                    style={styles.userDetailsSty}
-                                    resizeMode='cover'
-                                />
-                            ) : (
-                                <View style={styles.placeholderLogoHeader}>
-                                    <SVG.UsersIcon
-                                        width={moderateScale(20)}
-                                        height={moderateScale(20)}
-                                    />
-                                </View>
-                            )}
-                        </View>
-                        <View style={styles.clubInfoContainer}>
-                            <Text style={styles.userNameSty}>
-                                {team?.teamName || "Unknown Member"}
-                            </Text>
-                            <Text style={styles.totalMembersSty}>
-                                {team?.totalMembers || 0}{" "}
-                                {(team?.totalMembers || 0) === 1 ? "member" : "members"}
-                            </Text>
-                        </View>
-                    </View>
-                </View>
-
-            </View>
-            <View style={styles.contentList}>
-                <Text style={styles.sectionHeading}>Chat Threads</Text>
-                <FlatList
-                    data={threads}
-                    renderItem={renderThreadCard}
-                    keyExtractor={(item) => item?.id?.toString() || Math.random().toString()}
-                    style={styles.clubsList}
-                    showsVerticalScrollIndicator={false}
-                    contentContainerStyle={styles.flatListContent}
-                    removeClippedSubviews={false}
-                    initialNumToRender={10}
-                    ListEmptyComponent={renderEmptyComponent}
-                    onScroll={handleScroll}
-                    scrollEventThrottle={16}
-                    refreshControl={
-                        <RefreshControl
-                            refreshing={isLoading}
-                            onRefresh={onRefresh}
-                            colors={[theme.colors.primary]}
-                            tintColor={theme.colors.primary}
-                        />
-                    }
-                />
-            </View>
-        </SafeAreaView>
-    );
-};
-
-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,
-        backgroundColor: theme.colors.blue,
-        zIndex: 1000,
-    },
-    header: {
-        backgroundColor: theme.colors.blue,
-        paddingTop: Platform.OS === "android" ? theme.spacing.lg : theme.spacing.xs,
-        paddingBottom: theme.spacing.xl,
-    },
-    headerTopRow: {
-        flexDirection: "row",
-        paddingHorizontal: theme.spacing.lg,
-        paddingBottom: theme.spacing.sm,
-    },
-    clubInfoContainer: {
-        marginLeft: moderateScale(4),
-        justifyContent: 'center',
-    },
-    userNameSty: {
-        color: theme.colors.white,
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(16),
-    },
-    totalMembersSty: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(11),
-        color: theme.colors.appleGreen,
-    },
-    userDetailsSty: {
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(18),
-    },
-    userConSty: {
-        marginLeft: moderateScale(12),
-        marginRight: theme.spacing.xs,
-        width: moderateScale(36),
-        height: moderateScale(36),
-        borderRadius: moderateScale(20),
-        borderWidth: 1.5,
-        borderColor: theme.colors.imageBorder,
-        backgroundColor: theme.colors.imageBorder,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    placeholderLogoHeader: {
-        width: moderateScale(20),
-        height: moderateScale(20),
-        borderRadius: moderateScale(10),
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    sectionHeading: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(18),
-        color: theme.colors.black,
-        marginBottom: theme.spacing.md,
-    },
-    emptyContainer: {
-        alignItems: "center",
-        paddingVertical: theme.spacing.xl,
-    },
-    emptyText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-    },
-    loadingContainer: {
-        alignItems: "center",
-        paddingVertical: theme.spacing.xl,
-    },
-    loadingText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-        marginTop: theme.spacing.md,
-    },
-    clubsList: {
-        flex: 1,
-    },
-    flatListContent: {
-        paddingBottom: theme.spacing.xl,
-    },
-    contentList: {
-        flex: 1,
-        backgroundColor: theme.colors.background,
-        borderTopLeftRadius: moderateScale(30),
-        borderTopRightRadius: moderateScale(30),
-        marginTop: -theme.spacing.xl,
-        paddingHorizontal: theme.spacing.lg,
-        paddingTop: theme.spacing.lg,
-    },
-    threadCard: {
-        flexDirection: 'row',
-        padding: theme.spacing.md,
-        backgroundColor: theme.colors.lightLavenderGray,
-        marginBottom: theme.spacing.sm,
-        borderRadius: theme.borderRadius.xl,
-
-    },
-    threadInfo: {
-        flex: 1,
-        justifyContent: 'center',
-    },
-    threadHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: theme.spacing.xs,
-    },
-    threadName: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.black,
-        flex: 1,
-    },
-    lastMessage: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-        marginBottom: theme.spacing.xs,
-    },
-    lastMessageTime: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: theme.colors.black,
-        alignSelf: 'flex-end',
-    },
-    emptySubText: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(12),
-        color: theme.colors.textSecondary,
-        marginTop: theme.spacing.xs,
-        textAlign: 'center',
-    },
-    notificationBadge: {
-        backgroundColor: theme.colors.error,
-        borderRadius: moderateScale(10),
-        minWidth: moderateScale(25),
-        height: moderateScale(20),
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    notificationText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(12),
-        color: theme.colors.white,
-    },
-});

package/template/src/screens/chat/ReportMessageScreen.tsx

@@ -1,238 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { 
-    View, 
-    Text, 
-    StyleSheet, 
-    TouchableOpacity, 
-    KeyboardAvoidingView, 
-    Platform, 
-    ScrollView,
-    TextInput,
-    Alert,
-    StatusBar
-} from "react-native";
-import { theme } from "../../constants";
-import { moderateScale } from "../../utils/scaling";
-import { Fonts } from "../../constants/Fonts";
-
-interface ReportMessageScreenProps {
-    navigation: any;
-    route: {
-        params: {
-            message: any;
-            memberId: string;
-            onReportSubmit?: (reason: string, message: any) => void;
-        };
-    };
-}
-
-export const ReportMessageScreen: React.FC<ReportMessageScreenProps> = ({ navigation, route }) => {
-    const { message, memberId, onReportSubmit } = route.params;
-    const [reportReason, setReportReason] = useState('');
-
-    useEffect(() => {
-        // Set navigation options
-        navigation.setOptions({
-            presentation: 'transparentModal',
-            headerShown: false,
-        });
-    }, [navigation]);
-
-    const handleReportSubmit = () => {
-        if (!reportReason.trim()) {
-            Alert.alert("Error", "Please provide a reason for reporting this message.");
-            return;
-        }
-
-        // Call the callback function if provided
-        if (onReportSubmit) {
-            onReportSubmit(reportReason, message);
-        }
-
-        // Log the report
-        console.log("Reporting message:", {
-            messageId: message?._id,
-            reason: reportReason,
-            reportedBy: memberId
-        });
-
-        Alert.alert(
-            "Report Submitted",
-            "Your report has been submitted successfully. We will review it shortly.",
-            [
-                {
-                    text: "OK",
-                    onPress: () => navigation.goBack()
-                }
-            ]
-        );
-    };
-
-    const handleClose = () => {
-        navigation.goBack();
-    };
-
-    return (
-        <View style={styles.container}>
-            <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
-            <KeyboardAvoidingView
-                behavior={Platform.OS === "ios" ? "padding" : "height"}
-                style={styles.keyboardAvoidingView}
-            >
-                <TouchableOpacity 
-                    style={styles.overlay}
-                    activeOpacity={1}
-                    onPress={handleClose}
-                >
-                    <TouchableOpacity 
-                        activeOpacity={1}
-                        onPress={(e) => e.stopPropagation()}
-                        style={styles.modalContent}
-                    >
-                        <View style={styles.modalHeader}>
-                            <Text style={styles.modalTitle}>Report Message</Text>
-                            <TouchableOpacity onPress={handleClose}>
-                                <Text style={styles.closeButton}>✕</Text>
-                            </TouchableOpacity>
-                        </View>
-
-                        <ScrollView 
-                            style={styles.modalBody} 
-                            showsVerticalScrollIndicator={false}
-                            keyboardShouldPersistTaps="handled"
-                        >
-                            <Text style={styles.modalSubtitle}>
-                                Why are you reporting this message?
-                            </Text>
-
-                            <TextInput
-                                style={styles.reportInput}
-                                placeholder="Please describe the issue..."
-                                placeholderTextColor="#999"
-                                multiline
-                                numberOfLines={6}
-                                value={reportReason}
-                                onChangeText={setReportReason}
-                                textAlignVertical="top"
-                            />
-                        </ScrollView>
-
-                        <View style={styles.modalFooter}>
-                            <TouchableOpacity
-                                style={styles.cancelButton}
-                                onPress={handleClose}
-                            >
-                                <Text style={styles.cancelButtonText}>Cancel</Text>
-                            </TouchableOpacity>
-                            <TouchableOpacity
-                                style={styles.submitButton}
-                                onPress={handleReportSubmit}
-                            >
-                                <Text style={styles.submitButtonText}>Submit Report</Text>
-                            </TouchableOpacity>
-                        </View>
-                    </TouchableOpacity>
-                </TouchableOpacity>
-            </KeyboardAvoidingView>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: 'transparent',
-    },
-    keyboardAvoidingView: {
-        flex: 1,
-    },
-    overlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    modalContent: {
-        backgroundColor: theme.colors.white,
-        borderRadius: moderateScale(16),
-        width: '90%',
-        maxHeight: '80%',
-        overflow: 'hidden',
-        borderWidth: 1,
-    },
-    modalHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: moderateScale(16),
-        borderBottomWidth: 1,
-        borderBottomColor: theme.colors.border,
-    },
-    modalTitle: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(18),
-        color: theme.colors.black,
-    },
-    closeButton: {
-        fontSize: moderateScale(24),
-        color: theme.colors.textSecondary,
-        fontWeight: '300',
-    },
-    modalBody: {
-        padding: moderateScale(16),
-        flexGrow: 1,
-    },
-    modalSubtitle: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.textSecondary,
-        marginBottom: moderateScale(12),
-    },
-    reportInput: {
-        fontFamily: Fonts.outfitRegular,
-        fontSize: moderateScale(14),
-        color: theme.colors.black,
-        backgroundColor: theme.colors.lightLavenderGray,
-        borderRadius: moderateScale(8),
-        padding: moderateScale(12),
-        minHeight: moderateScale(120),
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-    },
-    modalFooter: {
-        flexDirection: 'row',
-        borderTopWidth: 1,
-        borderTopColor: theme.colors.border,
-        padding: moderateScale(16),
-    },
-    cancelButton: {
-        flex: 1,
-        paddingVertical: moderateScale(12),
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginRight: moderateScale(8),
-        borderRadius: moderateScale(8),
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-    },
-    cancelButtonText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.black,
-    },
-    submitButton: {
-        flex: 1,
-        paddingVertical: moderateScale(12),
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: theme.colors.blue,
-        borderRadius: moderateScale(8),
-        marginLeft: moderateScale(8),
-    },
-    submitButtonText: {
-        fontFamily: Fonts.outfitSemiBold,
-        fontSize: moderateScale(16),
-        color: theme.colors.white,
-    },
-});
-