React-Nav-Melon/components/organisms/Cards/CommentCard.js

import { Image, StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import AntIcon from 'react-native-vector-icons/AntDesign'
import ButtonWrapper from '../../atoms/ButtonWrapper'
import LineIcon from 'react-native-vector-icons/SimpleLineIcons'
import colors from '../../../theme/colors'
import fonts from '../../../theme/fonts'
import images from '../../../assets/images/images'
import { Menu, Provider } from 'react-native-paper'

const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeCount, }) => {

    // * Like Counter
    const [isDisliked, setDisliked] = useState(false)
    const [isLiked, setLiked] = useState(false)
    const [likeCounter, setLikeCounter] = useState(likeCount ?? 123)
    const [dislikeCounter, setDislikeCounter] = useState(dislikeCount ?? 452)

    // * Menu Visibility
    const [optionsMenuVisible, setOptionsMenuVisible] = React.useState(false);
    const openOptionsMenu = () => setOptionsMenuVisible(true);
    const closeOptionsMenu = () => setOptionsMenuVisible(false);
    const toggleOptionsMenu = () => setOptionsMenuVisible(!optionsMenuVisible)

    const [optionsMenuAnchor, setOptionsMenuAnchor] = React.useState({ y: 0, x: 0 })
    const onOptionsMenuPress = (event) => {
        const { nativeEvent } = event;
        console.log(nativeEvent)
        const anchor = {
            x: nativeEvent.locationX,
            y: nativeEvent.locationY,
            // x:0,
            // y:0
        };

        setOptionsMenuAnchor(anchor);
        toggleOptionsMenu()
    }


    const handleToggleDislike = () => {
        setDisliked(!isDisliked)
        setDislikeCounter(isDisliked === true ? dislikeCounter - 1 : dislikeCounter + 1)
    }

    const handleToggleLike = () => {
        setLiked(!isLiked)
        setLikeCounter(isLiked === true ? likeCounter - 1 : likeCounter + 1)
    }



    return (
        <Provider>
            <View style={styles.commentContainer}>
               
                <View style={styles.header}>
                    <View style={{ flexDirection: 'row' }}>
                        <Image source={images.imageCard} style={styles.profileIcon} />
                        <View style={{ justifyContent: 'center' }}>
                            <Text style={styles.name}>Semina Gurung</Text>
                            <Text style={styles.timestamp}>2 days ago</Text>
                        </View>
                    </View>
                    <View>
                        <Menu
                            visible={optionsMenuVisible}
                            onDismiss={closeOptionsMenu}
                            anchor={ <ButtonWrapper onPress={onOptionsMenuPress} buttonStyle={styles.buttonStyle}>
                            <LineIcon name='options-vertical' color={styles.icon.color} size={styles.icon.fontSize} />
                        </ButtonWrapper>}
                        >
                            <Menu.Item onPress={() => { }} title="Item 1" />
                            <Menu.Item onPress={() => { }} title="Item 2" />
                            <Menu.Item onPress={() => { }} title="Item 3" />
                        </Menu>

                    </View>

                </View>
               
                <Text style={{ paddingVertical: fonts.getSize(13), fontFamily: fonts.type.regular, fontSize: fonts.getSize(11) }}>
                    Lorem Ip sum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply du
                </Text>
                <View style={styles.header}>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <View style={{ flexDirection: 'row', paddingRight: fonts.getSize(16) }}>
                            <Image source={images.imageCard} style={styles.replyIcon} />
                            <Image source={images.imageCard} style={styles.replyIcon} />
                            <Image source={images.imageCard} style={styles.replyIcon} />
                        </View>
                        <Text style={styles.utilText}>View 14 replies</Text>
                    </View>
                    <View style={styles.utilContainer}>
                        <ButtonWrapper
                            buttonStyle={styles.utilButtons}
                            onPress={() => {
                                handleToggleLike()
                            }}
                        >
                            <Text style={styles.utilText}>{`${likeCounter}`}</Text>
                            <AntIcon name={isLiked ? "like1" : "like2"} color={styles.icon.color} size={16} />
                        </ButtonWrapper>
                        <ButtonWrapper
                            buttonStyle={styles.utilButtons}
                            onPress={() => {
                                handleToggleDislike()
                            }}
                        >
                            <Text style={styles.utilText}>{`${dislikeCounter}`}</Text>
                            <AntIcon name={isDisliked ? "dislike1" : "dislike2"} color={styles.icon.color} size={16} />
                        </ButtonWrapper>
                    </View>
                </View>
            </View>
        </Provider>                  
    )
}

export default CommentCard

const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    commentContainer: {
        width: '100%',
        height: 150,
        // height: 'auto',
        paddingVertical: fonts.getSize(4)
    },
    profileIcon: {
        height: 42,
        width: 42,
        borderRadius: 42,
        marginRight: fonts.getSize(8),

    },
    buttonStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        height: 'auto',
        width: 'auto'
    },
    icon: {
        color: colors.topColor,
        fontSize: fonts.getSize(16)
    },
    name: {
        fontFamily: fonts.type.regular,
        color: colors.black,
        fontSize: fonts.getSize(12)
    },
    timestamp: {
        fontFamily: fonts.type.regular,
        color: colors.gray,
        fontSize: fonts.getSize(9)
    },
    replyIcon: {
        height: 22,
        width: 22,
        borderColor: colors.white,
        borderWidth: 1,
        borderRadius: 24,
        marginRight: -8
    },
    utilContainer: {
        flexDirection: 'row',
        gap: 12
    },
    utilButtons: {
        flexDirection: 'row',
        alignItems: 'baseline'
    },
    utilText: {
        fontFamily: fonts.type.medium,
        color: colors.black,
        paddingRight: 4
    },

})