create-gufran-expo-app 2.0.0 → 2.0.2

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

@@ -0,0 +1,360 @@
+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

@@ -0,0 +1,238 @@
+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,
+    },
+});
+