mobileapp/components/LandmarkDetails.js

import React, { useState, useEffect, useRef } from 'react';
import { TextInput, Image, ScrollView, View, Text, StyleSheet, TouchableOpacity, Keyboard, Alert, Dimensions} from 'react-native';
import { format } from 'date-fns';
import { Controller, useForm } from 'react-hook-form';
import { useMockState } from '../contexts/MockContext';
import Icon from 'react-native-vector-icons/FontAwesome'
import { Icons } from '../globals';
import { v4 as uuidv4 } from 'uuid';

const LandmarkDetails = ({closeModal, editLandmark}) => {
    const {dispatch, state} = useMockState();
    const [ownedByUser, setOwned] = useState(state.username === state.selectedLandmark.postedBy);
    const [keyboardShown, setKeyboard] = useState(false);
    const [commentText, setComment] = useState('');
    const [commentPosted, setPosted] = useState(false);
    const [commentInputOffset, setOffset] = useState({});
    const commentInput = useRef()
    
    const _keyboardDidShow = (e) => {
        setKeyboard(true);
        setOffset({
            position: 'absolute',
            bottom: e.endCoordinates.height / 2 - 22,
            marginHorizontal: -20,
            paddingLeft: 10,
            width: Dimensions.get('window').width
        });
    }

    const _keyboardDidHide = (e) => {
        setKeyboard(false);
        setOffset({});
        commentInput.current.blur();
        console.log(commentPosted)
        console.log(commentText)
        // only show alert if comment wasn't posted
        if (!commentPosted && commentText != '') {
            
            Alert.alert(
                'Discard comment?',
                '',
                [
                    {
                        text: 'Keep writing', onPress: () => commentInput.current.focus(),
                    },
                    {
                        text: 'Discard', onPress: () => {
                            setComment('');
                            setOffset({});
                            setPosted(false);
                        },
                        style: 'cancel'
                    }
                ]
            )
        }
    }
        
    useEffect(() => {
        Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
        Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

        return () => {
            Keyboard.removeListener('keyboardDidShow', _keyboardDidShow);
            Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
        }
    })

    const postComment = () => {
        let currentLandmark;
        dispatch({type: "UPDATE_LANDMARKS", payload: state.landmarks.map(l => {
            if (l.id === state.selectedLandmark.id) {
                const newComment = {
                    id: uuidv4(),
                    dateAdded: new Date(),
                    name: "cdmoss",
                    text: commentText
                }

                currentLandmark = {...l, comments: [...l.comments, newComment]};
                dispatch({type: "UPDATE_SELECTED_LANDMARK", payload: currentLandmark});    
                return currentLandmark;
            }

            return l;
        })});   

        setComment('');
        setPosted(true);
        Keyboard.dismiss();
        setPosted(false);
    }

    const notifyError = (errors) => {
        Alert.alert('Comment must include text.');
    }

    const endorseLandmark = () => {
        dispatch({type: "UPDATE_LANDMARKS", payload: state.landmarks.map(l => {
            if (l.id == state.selectedLandmark.id) {
                const newRating = l.rating + 1;
                const updatedLandmark = {...l, rating: newRating};
                dispatch({type: "UPDATE_SELECTED_LANDMARK", payload: updatedLandmark});    
                return updatedLandmark;
            }
            return l;
        })})
    }

    const removeEndorsement = () => {
        dispatch({type: "UPDATE_LANDMARKS", payload: state.landmarks.map(l => {
            if (l.id == state.selectedLandmark.id) {
                const newRating = l.rating - 1;
                const updatedLandmark = {...l, rating: newRating};
                dispatch({type: "UPDATE_SELECTED_LANDMARK", payload: updatedLandmark});    
                return updatedLandmark;
            }
            return l;
        })})
    }
    
    const deleteLandmark = () => {
        dispatch({type: "UPDATE_LANDMARKS", payload: state.landmarks.filter(l => l.id !== state.selectedLandmark.id)});
        closeModal('Successfully deleted landmark.');
    }

    return (
        <View style={styles.container}>
            <View style={styles.detailsHeader}>
                <Icon.Button style={styles.headerBtn} onPress={() => closeModal()} name="times"/>
                <Text style={styles.rating}><Icon style={styles.headerBtn} name="thumbs-up" size={18}/> {state.selectedLandmark.rating}</Text>
                {ownedByUser ?
                <View style={{flexDirection: 'row'}}>
                    <Icon.Button style={styles.headerBtn} onPress={editLandmark} name="edit"/>
                    <Icon.Button style={styles.headerBtn} onPress={deleteLandmark} name="trash"/>
                </View>
                : null}
                {!ownedByUser && state.selectedLandmark.rating == 0 ? <Icon.Button style={styles.headerBtn} onPress={endorseLandmark} name="thumbs-up"/> : null}
                {!ownedByUser && state.selectedLandmark.rating > 0 ? 
                <View style={{flexDirection: 'row'}}>
                    <Text style={{marginRight: 5, color: 'lightgrey'}}>
                        You like this landmark 
                    </Text>
                    <TouchableOpacity onPress={removeEndorsement} style={{alignItems: 'center', padding: 0}}>
                        <Text style={{marginRight: 10, color: '#005A9C'}}>(Undo)</Text>
                    </TouchableOpacity>
                </View> : null}
            </View>
            <View style={styles.titleContainer}>
                <Text style={styles.title}>{state.selectedLandmark.title}</Text>
                <View style={{ backgroundColor: 'white', borderRadius: 25, height: 40, width: 40 ,justifyContent: 'center', alignItems: 'center'}}>
                    <Image style={styles.titleIcon} source={Icons[state.selectedLandmark.icon]} />
                </View> 
            </View>
            <View style={styles.detailsContainer}>
                <ScrollView><Text style={styles.desc}>{state.selectedLandmark.desc}</Text></ScrollView>
                <Text style={styles.date}>{format(state.selectedLandmark.dateAdded, "MMMM do, yyyy h:mma")}</Text>
                <Text style={{fontSize: 15, color: 'white'}}>Comments:</Text>
                <View style={styles.commentsBox}>
                    <ScrollView>
                        <TouchableOpacity>
                        {state.selectedLandmark.comments.sort((a, b) => {return b.dateAdded - a.dateAdded}).map(comment => {
                            return(
                                <View style={styles.commentContainer} key={comment.id}>
                                    <View style={styles.commentHeader}>
                                        <Text style={{fontWeight: 'bold'}} >{comment.name}</Text>
                                        <Text style={{fontSize: 12, color: 'lightgrey'}}>{format(comment.dateAdded, "MMMM do, yyyy h:mma")}</Text>
                                    </View>
                                    <Text style={{padding: 10}}>{comment.text}</Text>
                                </View>
                            );
                        })}
                        </TouchableOpacity>
                    </ScrollView>
                    <View style={[styles.commentInputContainer, commentInputOffset]}>
                        <TextInput 
                            ref={commentInput}
                            multiline={true} 
                            style={[styles.addComment]}
                            placeholder="Add comment..."
                            onChangeText={text => setComment(text)}
                            value={commentText}
                        ></TextInput>
                        {keyboardShown && commentText != '' ? 
                        <View style={styles.postBtn} onPress={postComment}>
                            <Icon.Button 
                                name='paper-plane' 
                                color='black' 
                                style={{backgroundColor: 'white'}}
                                onPress={postComment}/>
                        </View> : null }
                    </View>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    detailsHeader: {
        borderBottomWidth: 1,
        borderColor: 'lightgrey',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#df3f3f',
        marginBottom: 10,
    },
    headerBtn: {
        backgroundColor: '#df3f3f',
        padding: 10,
        justifyContent: 'center',
    },
    container: {
        marginBottom: 30,
        backgroundColor: '#df3f3f',
    },
    detailsContainer: {
        marginHorizontal: 20
    },
    titleContainer: {
        marginHorizontal: 20,
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    titleIcon: {
        height: 30,
        width: 22,
    },
    title: {
        color: 'white',
        fontSize: 20,
        marginBottom: 20,
    },
    rating: {
        color: 'white',
    },  
    desc: {
        color: 'white',
        height: 50,
    },  
    date: {
        color: 'lightgray',
        marginBottom: 10,
        alignSelf: "flex-end",
    },
    commentsBox: {
        height: 275,
        backgroundColor: 'white',
        marginTop: 10,
        padding: 10,
        marginBottom: 20,
        borderColor: 'black',
    },
    commentContainer: {
        padding: 10
    },
    commentHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    commentBody: {
        padding: 10
    },
    commentInputContainer: {
        backgroundColor: 'white',
        flexDirection: 'row',
        borderTopWidth: 1,
        borderColor: 'grey',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: 300
    },
    addComment: {
        backgroundColor: 'white',
        width: 270,
    },
    postBtn: {
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        width: 75,
        height: 60
    },
    btnContainer: {
        backgroundColor: '#df3f3f',
        marginTop: 10,
        height: 70,
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        padding: 20,
    },
    btn: {
        borderColor: 'white',
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: 20,
        marginVertical: 20,
        borderWidth: 1,
        width: 170,
        height: 50
    },
    btnText: {
        color: 'white',
    }
})

export default LandmarkDetails;