mobileapp/components/PlaceDetails.js

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

const PlaceDetails = ({closeModal, addLandmark}) => {
    const {mapState, mapDispatch} = useMapState();
    const [ownedByUser, setOwned] = useState(mapState.username === mapState.selectedLandmark.postedBy);
    const [keyboardShown, setKeyboard] = useState(false);
    const [commentText, setComment] = useState('');
    const [commentPosted, setPosted] = useState(false);
    const [commentInputOffset, setOffset] = useState({});
    const placePicker = useRef();
    const placeMenu = useRef();
    const commentInput = useRef()

    const _keyboardDidShow = (e) => {
        setKeyboard(true);
        console.log(mapState.selectedPlace);
    }

    const _keyboardDidHide = (e) => {
        setKeyboard(false);
        setOffset({});
        commentInput.current.blur();
        // 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 currentPlace;
        // api call
        // dispatch({type: "UPDATE_PLACES", payload: mapState.places.map(place => {
        //     if (place.id === mapState.selectedPlace.id) {
        //         const newTip = {
        //             id: uuidv4(),
        //             dateAdded: new Date(),
        //             name: "cdmoss",
        //             text: commentText,
        //             rating: 0,
        //         }

        //         currentPlace = {...place, tips: [...place.tips, newTip]};
        //         dispatch({type: "UPDATE_SELECTED_PLACE", payload: currentPlace})
        //         return currentPlace;
        //     }

        //     return place;
        // })});   

        setComment('');
        Keyboard.dismiss();
    }

    const setSelectedPlace = (place) => {
        mapDispatch({type: "UPDATE_SELECTED_PLACE", payload: {
            id: place.id, 
            name: place.properties.name,
            desc: place.properties.desc,
            tips: place.properties.tips,
            dateAdded: place.properties.dateAdded,
            postedBy: place.properties.postedBy,
            rating: place.properties.rating,
          }});
    }

    const likeTip = (tip) => {
        console.log("Tip rating before: " + tip.rating);
        let currentPlace = {};
        let currentTip = {};
        // api call
        // mapDispatch({type: "UPDATE_PLACES", payload: mapState.places.map(place => {
        //     if (place.id == mapState.selectedPlace.id) {
        //         currentPlace = {...place, tips:
        //             place.tips.map(t => {
        //                 if (t.id == tip.id) {
        //                     currentTip = {...t, rating: t.rating + 1, liked: true};
        //                     console.log("Tip rating after " + currentTip.rating);
        //                     return currentTip;
        //                 }
                        
        //                 return t;
        //             }
        //         )}
        //         mapDispatch({type: "UPDATE_SELECTED_PLACE", payload: currentPlace})
        //         return currentPlace;
        //     }

        //     return place;
        // })})
    }

    const unlikeTip = (tip) => {
        console.log('test')
        let currentPlace = {};
        let currentTip = {};
        //api call
        // dispatch({type: "UPDATE_PLACES", payload: mapState.places.map(place => {
        //     if (place.id == mapState.selectedPlace.id) {
        //         currentPlace = {...place, tips:
        //             place.tips.map(t => {
        //                 if (t.id == tip.id) {
        //                     currentTip = {...t, rating: t.rating - 1, liked: false};
        //                     console.log("Tip rating after " + currentTip.rating);
        //                     return currentTip;
        //                 }
                        
        //                 return t;
        //             }
        //         )}
        //         mapDispatch({type: "UPDATE_SELECTED_PLACE", payload: currentPlace})
        //         return currentPlace;
        //     }

        //     return place;
        // })})
    }

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

    return (
        <View style={{backgroundColor: '#df3f3f',}}>
            <View style={{flexDirection: 'row', height: 35, justifyContent: 'space-between', alignContent: 'center', borderBottomColor: 'white', borderBottomWidth: 1}}>
                <Icon.Button name="times" style={{width: 40, backgroundColor: '#df3f3f', }} onPress={closeModal}/>
                {mapState.selectedPlaces.length > 1 ?
                <Menu
                    ref={placePicker}
                    contentStyle={{backgroundColor: 'white', zIndex: 10}}anchor
                    button={
                        <TouchableOpacity style={{flexDirection: 'row', height: '100%', alignItems: 'center'}} onPress={() => placePicker.current.show()}>
                            <Text style={{color: 'white'}}>{mapState.selectedPlace.name}</Text>
                            <Icon style={{marginLeft: 5, color: 'white'}} name="chevron-down" />
                        </TouchableOpacity>}>     
                    {mapState.selectedPlaces.map(p => {
                        return(
                        <MenuItem 
                            key={p.id} 
                            onPress={() => {
                                setSelectedPlace(p);
                                placePicker.current.hide();
                            }} >{p.properties.name}</MenuItem>
                        )
                    })}
                </Menu> : <Text style={{textAlignVertical: 'center', color: 'white'}}>{mapState.selectedPlaces.map(p => p.properties.name)[0]}</Text> }
                <Menu 
                    ref={placeMenu}
                    button={<Icon.Button onPress={() => placeMenu.current.show()} name="ellipsis-h" style={{paddingLeft: 10, paddingRight: 0, backgroundColor: '#df3f3f'}} />}>
                    <MenuItem onPress={() => {
                        addLandmark();
                        placeMenu.current.hide();
                    }} >Add landmark here</MenuItem>
                    <MenuItem onPress={() => {
                        placeMenu.current.hide()
                    }} >Cancel</MenuItem>
                </Menu>
            </View> 
            <View style={{margin: 20}}>
                <Text style={{marginBottom: 20, fontSize: 15, color: 'white'}}>Tips</Text>
                <View style={{backgroundColor: 'white',}}>
                    <View style={{height: 220}}>
                        <ScrollView>
                            <TouchableOpacity activeOpacity={1}>
                            {mapState.selectedPlace.tips ? 
                            mapState.selectedPlace.tips.sort((a, b) => {return b.dateAdded - a.dateAdded}).map(tip => {
                                console.log(tip.dateAdded)
                                return(
                                    <View style={styles.commentContainer} key={tip.id}>
                                        <View style={styles.commentHeader}>
                                            <Text style={{fontWeight: 'bold'}} >{tip.name}</Text>
                                            <Text style={{fontSize: 12, color: 'lightgrey'}}>{tip.dateAdded.toString()}</Text>
                                        </View>
                                        <Text>{tip.text}</Text>
                                        <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
                                            <Text style={{padding: 5, textAlign: 'right', color: 'black'}}>{tip.rating}</Text>
                                            {tip.liked ?
                                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                            <Icon size={20} style={{alignSelf: 'center', marginLeft: 2, opacity: .5, zIndex: 5}} color="black" name="thumbs-up"/>
                                                <Text style={{alignSelf: 'center', marginLeft: 5, opacity: .5, zIndex: 5, color: "black"}} >You like this</Text>
                                                <TouchableOpacity style={{marginLeft: 5}} onPress={() => unlikeTip(tip)}>
                                                    <Text style={{color: '#A9A9A9'}}>(Unlike)</Text>
                                                </TouchableOpacity>
                                            </View> :
                                            <TouchableOpacity style={{justifyContent: 'center', }}>
                                                <Icon size={20} style={{marginLeft: 2, zIndex: 5}} onPress={() => likeTip(tip)} color="black" name="thumbs-up"/>
                                            </TouchableOpacity>}
                                        </View>
                                    </View>
                                );
                            }) : 
                            <Text>There are no tips for this place.</Text>}
                            </TouchableOpacity>
                        </ScrollView>
                    </View>
                    <View style={[styles.commentInputContainer, commentInputOffset]}>
                        <TextInput 
                            ref={commentInput}
                            multiline={true} 
                            style={[styles.addComment]}
                            placeholder="Add tip..."
                            onChangeText={text => setComment(text)}
                            value={commentText}
                        ></TextInput>
                        {keyboardShown && commentText != '' ? 
                        <View style={styles.postBtn}>
                        <Icon.Button 
                            name='paper-plane' 
                            color='black' 
                            style={{backgroundColor: 'white', margin: 0}}
                            onPress={postComment}/>
                    </View> : null }
                    </View>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    menuModal: {
        backgroundColor: '#df3f3f',
        height: 400,
    },
    commentContainer: {
        margin: 10,
    },
    commentHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    commentBody: {
        padding: 10
    },
    commentInputContainer: {
        marginHorizontal: 10,
        borderTopWidth: 1,
        borderColor: 'grey',
        justifyContent: 'space-between',
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    addComment: {
        width: '80%',
        backgroundColor: 'white',
    },
    postBtn: {
        marginVertical: 10,
        justifyContent: 'center',
        alignItems: 'center',
        width: '20%'
    },
})

export default PlaceDetails;