# All files / atlas-mobile-ts/src/components Home.tsx

0% Statements 0/14
0% Branches 0/8
0% Functions 0/5
0% Lines 0/13

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
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93

     ﻿/* 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, { memo } from "react";
    import { SafeAreaView, Text, TouchableOpacity, View } from "react-native";
    import { LMComment } from "../hooks/useComments";
    import { Landmark } from "../hooks/useLandmarks";
    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 Comment: 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>
        )}

    /**
     * Props for the {@link LandmarkDetails} component.
     */
    export interface LandmarkDetailsProps {
        /**
         * The {@link Landmark} object being displayed/edited in the {@link LandmarkDetails} modal.
         */
        landmark: Landmark | undefined
        /**
         * A callback passed from the parent {@link Map} that toggles the visibility of the {@link LandmarkDetails} modal.
         */
        setVisible: (state: boolean) => void;
        /**
         * A callback passed from the parent {@link Map} that toggles the ability to edit the {@link Landmark} in {@link LandmarkDetails} modal.
         */
        setEditing: (state: boolean) => void;
        /**
         * A flag that determines whether the properties of the {@link Landmark} displayed in the {@link LandmarkDetails} modal can be edited
         */
        editingEnabled: boolean
    }

    /**
     * Component that renders the details of a selected {@link Landmark} and allows the user to edit those details. Contained within a [react-native-modal]{@link https://github.com/react-native-modal/react-native-modal}.
     * @component
     * @category Map
     */
    const Home: React.FC = () => {
        return (
            <SafeAreaView >
               <Text>Home placeholder</Text>
            </SafeAreaView>
        )
    }

    export default memo(Home);