mobileapp/screens/LandmarkForm.js

import React, { useEffect, useRef, useState } from 'react';
import { ScrollView, View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, Alert} from 'react-native';
import { TextInput } from 'react-native-paper';
import { Controller, useForm } from 'react-hook-form';
import { useMapState } from '../contexts/MapContext';
import Modal from 'react-native-modalbox';
import { Icons } from '../globals';
import Icon from 'react-native-vector-icons/FontAwesome';
import { v4 as uuidv4 } from 'uuid';

const editTheme = {
    colors: {
        primary: 'black',
        text: 'black'
    }
}

const LandmarkForm = ({navigation}) => {
    const {mapState, mapDispatch} = useMapState();
    const { control, isDirty, handleSubmit, setValue, formState } = useForm({
        mode: 'all'
      });
    const [selectedIcon, setIcon] = useState(mapState.selectedLandmark.icon);
    const iconSelector = useRef();

    useEffect(() => {
        setValue('title', mapState.selectedLandmark.title);
        setValue('desc', mapState.selectedLandmark.desc);
        setIcon(mapState.selectedLandmark.icon)
    }, [mapState]);

    const saveLandmark = (formData) => {
        let currentLandmark = mapState.landmarks.filter(l => l.id === mapState.selectedLandmark.id)[0];
        console.log(currentLandmark)
        if (currentLandmark != null) {
            // we're updating an existing landmark
            // api call
            // dispatch({type: "UPDATE_LANDMARKS", payload: mapState.landmarks.map(l => {
            //     if (l.id === mapState.selectedLandmark.id) {
            //         currentLandmark = {...l, title: formData.title, desc: formData.desc, icon: selectedIcon};
            //         dispatch({type: "UPDATE_SELECTED_LANDMARK", payload: currentLandmark});
            //         return currentLandmark;
            //     }

            //     return l;
            // })});   
            console.log('here')
            navigation.navigate('Map');
        }
        
        else {
            // we're adding a new landmark
            const newLandmark =  {
                id: uuidv4(),
                postedBy: 'cdmoss',
                dateAdded: Date.now(),
                title: formData.title,
                desc: formData.desc,
                icon: selectedIcon,
                longitude: mapState.selectedLandmark.longitude,
                latitude: mapState.selectedLandmark.latitude,
                comments: []
            };
            // api call
            //dispatch({type: "UPDATE_LANDMARKS", payload: [...mapState.landmarks, newLandmark]})
            navigation.navigate('Map');
        }
    }

    const openSelector = () => {
        iconSelector.current.open();
    }

    const updateIcon = (icon) => {
        setIcon(icon);
        iconSelector.current.close();
    }

    const closeModal = () => {
        iconSelector.current.close();
    }

    return (
        <View style={styles.container}>
            <View style={styles.inputContainer}>
                <ScrollView>
                <Controller 
                    control={control}
                    render={({ field: { onBlur, onChange, value }}) => (
                        <TextInput 
                            multiline={true} 
                            theme={editTheme}
                            underlineColor="white" 
                            style={[styles.title, styles.input]}
                            placeholder="Title"
                            value={value}
                            onBlur={value => onBlur(value)}
                            onChangeText={value => onChange(value)}
                        ></TextInput>
                    )}
                    name="title"
                    rules={{ required: true, maxLength: 100 }} />
                {formState.errors.title?.type === "required" && <Text style={styles.errorText}>Title is required.</Text>}
                <Controller
                    control={control}
                    render={({ field: { onChange, onBlur, value }}) => (
                    <TextInput 
                        multiline={true} 
                        theme={editTheme} 
                        style={[styles.desc, styles.input]}
                        placeholder="Description"
                        value={value}
                        on={value => onBlur(value)}
                        onChangeText={value => onChange(value)}
                    ></TextInput>
                    )}
                    name="desc"
                    rules={{ required: true, maxLength: 500 }} />
                    {formState.errors.desc?.type === "required" && <Text style={styles.errorText}>Description is required.</Text>}
                    {formState.errors.desc?.type === "maxLength" && <Text style={styles.errorText}>Description must be less than 500 characters.</Text>}
                <Text style={styles.label}>Type</Text>
                <TouchableOpacity onPress={openSelector}>
                    <View style={styles.selectedIconContainer}>
                        <View style={styles.selectedIcon}>
                            <Image style={{height: 30, width: 22}} source={Icons[selectedIcon]}/>
                            <Text style={{marginLeft: 15, color: 'black'}}>{selectedIcon}</Text>
                        </View>
                        <Icon style={iconSelector.isOpen ? { transform: [{rotate: '180deg'}] } : null} name="chevron-down" />
                    </View> 
                </TouchableOpacity>
                </ScrollView>
            </View>
            <TouchableOpacity style={{margin: 20, alignSelf: 'flex-end', zIndex: 5}} onPress={handleSubmit(saveLandmark)}>
                <Text style={{fontSize: 15, color: 'white'}}>Save Changes</Text>
            </TouchableOpacity>
            <Modal position={"bottom"} ref={iconSelector} style={{height: 400}} >
                <TouchableOpacity 
                    style={{flexDirection: 'row', justifyContent: 'center', paddingVertical: 10}} 
                    onPress={closeModal}>
                    <Icon name="chevron-down"/>
                </TouchableOpacity>
                <ScrollView style={{marginBottom: 100}}>
                    {Object.entries(Icons).map(icon => {
                        return(
                        <TouchableOpacity style={styles.iconChoice} key={icon[0]} onPress={() => updateIcon(icon[0])} >
                            <Image style={{height: 30, width: 22}} source={icon[1]}/>
                            <Text style={{marginLeft: 15}}>{icon[0]}</Text>
                        </TouchableOpacity>) 
                    })}
                </ScrollView>
            </Modal>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
        flex: 1,
        backgroundColor: '#df3f3f',
    },
    inputContainer: {
        height: 500,
        paddingHorizontal: 20,
        paddingBottom: 20,
        paddingTop: 70,
    },
    label: {
        color: 'white',
        marginTop: 20,
        marginBottom: 8
    },
    title: {
        fontSize: 20,
        marginBottom: 20,
    },
    input: {
        backgroundColor: 'white',
    },
    desc: {
        color: 'white',
    },  
    iconPicker: {
        color: 'white',
    },
    selectedIconContainer: {
        backgroundColor: 'white',
        paddingHorizontal: 30,
        padding: 15,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    errorText: {
        alignSelf: 'flex-end',
        color: 'black',
        fontSize: 15
    },
    selectedIcon: {
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
    },
    iconChoice: {
        marginHorizontal: 30,
        paddingVertical: 10,
        flexDirection: 'row',
        
        alignItems: 'center',
        borderBottomWidth: 1,
    },
    chevronRotate: {
        transform: [{ rotate: '180deg'}]
    }
    
})

export default LandmarkForm;