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