# All files / atlas-mobile-ts/src/components/Map/Panels/LandmarkDetailsPanel CommentView.tsx

0% Statements 0/11
0% Branches 0/8
0% Functions 0/4
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55

     ﻿/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
     * Unauthorized copying of this file, via any medium is strictly prohibited
     * Proprietary and confidential
     * Written and maintained by the Click & Push Development team
     * <dev@clicknpush.ca>, January 2022
     */

    import { FontAwesome } from "@expo/vector-icons"
    import { format, parseISO } from "date-fns"
    import React from "react"
    import { TouchableOpacity, View, Text } from "react-native"
    import { LMComment } from "../../../../hooks/useComments"
    import { authStore } from "../../../../libs/auth/AuthStore"

    /**
     * Props for the {@link Comment} component.
     */
     export interface CommentProps {
        /**
         * The [comment]{@link LMComment} object being displayed by the {@link Comment} component.
         */
        comment: LMComment
        /**
         * Whether or not this comment is selected and should be highlighted
         */
        selected: boolean
        focusComment: (id: string) => void
        startEditingComment: (comment: LMComment) => void
        deleteComment: (id: string) => void
    }

    /**
     * Component that displays a {@link LMComment} object in a clean format.
     * @component
     */
     export const CommentView: React.FC<CommentProps> = ({comment, selected, focusComment: selectComment, startEditingComment: startEditingComment, deleteComment}) => {
        return (
            <TouchableOpacity style={[{paddingHorizontal: 10}, selected ? {backgroundColor: '#E8E8E8'}: null]} onPress={() => selectComment(comment.id)}>
                <View style={{paddingTop: 10,  flexDirection: 'row', justifyContent: 'space-between'}}>
                    <Text style={{fontWeight: 'bold'}}>{comment.poster_name}:</Text>
                    <Text style={{fontSize: 12, color: 'gray'}}>{format(parseISO(comment.timestamp.toString()), "MMMM do, yyyy h:mma")}</Text>
                </View>
                <View style={{marginVertical: 10}}>
                    <Text style={{paddingBottom: 10}} >{comment.content}</Text>
                    <View style={{flexDirection: 'row', alignSelf: 'flex-end'}}>
                        {comment.edited ? <Text style={{color: 'grey', alignSelf: 'flex-end'}}>Edited</Text> : null}
                        {selected && comment.poster == authStore.userId ?
                        <View style={{marginTop: 10, flexDirection: 'row', alignSelf: 'flex-end'}}>
                            <FontAwesome size={25} name="edit" style={{paddingTop: 1, marginLeft: 20}} onPress={() => startEditingComment(comment)}/>
                            <FontAwesome color="red" size={25} style={{marginLeft: 15}} name="trash" onPress={() => deleteComment(comment.id)}/>
                        </View> : null}
                    </View>
                </View>
            </TouchableOpacity>
        )}