atlas-mobile-ts/src/components/Home.tsx

/* 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);