MessageUserItem.tsx

import { StackScreenProps } from '@react-navigation/stack';
import firebase from 'firebase';
import * as React from 'react';
import { Dimensions, FlatList, StyleProp, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { TouchableHighlight } from 'react-native-gesture-handler';
import { IChat, IUserMeta } from '../../application/API/Messages';
import { IUser, IUserBasic } from '../../application/API/Users';
import { margin } from '../../application/StyleHelpers';

import { GetInitials, IsColourDark, StringToColor, TruncateString } from '../../application/UtilityFunctions';

import { MessagesParamList } from '../../types';
import HumanSince from '../../components/HumanSince';

interface IAvatarInformation {
    name: string,
    background: string,
    forecolor: string
}

interface Props extends StackScreenProps<any, any> {
    style?: StyleProp<any>,
    chat: IChat
}

interface State {
    avatar: IAvatarInformation
}

export class MessageUserItem extends React.Component<Props, State> {
    currentUser: firebase.User;
    otherUser: IUserMeta;

    constructor(props: Props) {
        super(props);

        this.currentUser = (firebase.auth().currentUser as firebase.User);
        this.otherUser = this.getOtherUser();

        let avatar = this.getAvatarColors();
        this.state = { avatar }; // Initialize the state

        this.messageSelected = this.messageSelected.bind(this);
        this.profileSelected = this.profileSelected.bind(this);
    }

    getOtherUser(): IUserMeta {
        const {uid} = this.currentUser;
        const {chat} = this.props;

        var keys: string[] = Object.keys(chat.users);
        keys.splice (keys.indexOf(uid), 1);

        const otherUserUid: string = keys[0];
        return chat.users[otherUserUid] as IUser;
    }

    getAvatarColors(): IAvatarInformation {
        let name = GetInitials(this.otherUser.displayName).toUpperCase();
        let background = StringToColor(this.otherUser.displayName);
        let forecolor = IsColourDark(background) ? '#FFFFFF' : '#000000';

        return { name, background, forecolor }
    }

    messageSelected(): void {
        var {navigation} = this.props;
        
        // Navigate to the user message page
        const params: IUserBasic = {
            displayName: this.otherUser.displayName,
            userId: this.otherUser.userId
        };

        navigation?.navigate('Root', {
            screen: 'TabMessages',
            params: {
                screen: 'MessagesViewScreen',
                params: { user: params }
            }
        });
    }

    profileSelected(): void {
        var {navigation} = this.props;
        
        // Navigate to the user message page
        const params: IUserBasic = {
            displayName: this.otherUser.displayName,
            userId: this.otherUser.userId
        };

        alert("Selected user: " + params.displayName);
    }

    render() {
        // Merge any styles passed into the item with the container styles
        let rootStyles = { ...styles.container, ...this.props.style };
        let imageContainer = { ...styles.imageContainer, backgroundColor: this.state.avatar.background };

        return (
            <View style={rootStyles}>
                <View style={styles.borderBox}>
                    <View style={styles.userContainer}>
                        <TouchableHighlight onPress={this.profileSelected} activeOpacity={0.8} underlayColor="#DDDDDD">
                            <View style={{justifyContent: 'center', alignItems: 'center', padding: 5}}>
                                <Text style={imageContainer}> 
                                    {this.state.avatar.name}
                                </Text>
                            </View>
                        </TouchableHighlight>

                        <View style={styles.bodyContents}>
                            <TouchableHighlight onPress={this.messageSelected} activeOpacity={0.8} underlayColor="#DDDDDD">
                                <View style={{flex: 1, flexGrow: 1}}> 
                                    <View style={styles.nameContainer}>
                                        <Text style={styles.nameFullName}>{this.otherUser.displayName}</Text>
                                        <Text style={styles.nameDate}><HumanSince date={this.props.chat.dateUpdatedAt}/> &gt;</Text>
                                    </View>
                                    <Text style={styles.message}>
                                        {TruncateString(this.props.chat.lastMessage)}
                                    </Text>
                                </View>
                            </TouchableHighlight>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: { },

    userContainer: {
        //backgroundColor: '#0f0',
        margin: 10,
        flexDirection: 'row',
        flex: 1
    },

    bodyContents: {
        flexGrow: 1,
        flex: 1,
    },
    
    message: {
        //backgroundColor: '#ff0',
        flex: 1,
        flexGrow: 1,
        fontStyle: 'italic'
    },

    imageContainer: {
        width: 50,
        height: 50,
        marginRight: 10,
        textAlign: 'center', 
        fontWeight: 'bold',
        fontSize: 18,
        marginTop: 0,
        alignContent: 'center',
        textAlignVertical: "center",

        borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2
    },

    nameContainer: {
        flex: 1,
        flexDirection: 'row',
    },

    nameFullName: {
        flexGrow: 1
    },

    nameDate: {
        minWidth: 60,
        marginRight: 5,
    },

    borderBox: {
        backgroundColor: '#F1F1F1',
        borderRadius: 8,
    },
});