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, PaperProvider } 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 [menuVisible, setMenuVisible] = React.useState(false);
    const openMenu = () => setMenuVisible(true);
    const closeMenu = () => setMenuVisible(false);

    const menuAnchor = () => <ButtonWrapper onPress={openMenu} buttonStyle={styles.buttonStyle}>
        <LineIcon name='options-vertical' color={styles.icon.color} size={styles.icon.fontSize} />
    </ButtonWrapper>

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

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



    return (
        <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>

                <PaperProvider>
                    <Menu
                        visible={menuVisible}
                        onDismiss={closeMenu}
                    // anchor={
                    //     menuAnchor()
                    // }>
                    >
                        <Menu.Item onPress={() => { }} title="Item 1" />
                        <Menu.Item onPress={() => { }} title="Item 2" />
                        <Menu.Item onPress={() => { }} title="Item 3" />
                        
                    </Menu>
                    <ButtonWrapper onPress={openMenu} buttonStyle={styles.buttonStyle}>
                            <LineIcon name='options-vertical' color={styles.icon.color} size={styles.icon.fontSize} />
                        </ButtonWrapper>
                </PaperProvider>

            </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>
    )
}

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
    },

})