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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | 5x 2x 2x 2x 2x 2x 2x 2x 2x 2x 14x | import { FontAwesome } from "@expo/vector-icons";
import React, { memo, useEffect, useState } from "react";
import { ActivityIndicator, Dimensions, Image, Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
import Picker from 'react-native-picker-select';
import { colors, Icons, IconStrings } from "../globals";
import { Landmark, useLandmarks } from "../hooks/useLandmarks";
import { SecondaryButton } from "./Auth/Buttons";
/**
* Props for the {@link AddLandmark} component.
*/
export interface AddLandmarkProps {
/**
* The {@link landmark} object to be added.
*/
landmark?: Landmark;
/**
* A call back that toggles the visibility state of the {@link AddLandmark} modal. Passed down from {@link AddLandmark}.
*/
setVisible: (state: boolean) => void;
}
/**
* Component that renders a form for adding a new {@link Landmark}. Contained within a [react-native-modal]{@link https://github.com/react-native-modal/react-native-modal}.
* @component
* @category Map
*/
const AddLandmark: React.FC<AddLandmarkProps> = ({landmark, setVisible}) => {
const {
addLandmarkAsync,
resetAddLm,
addLandmarkStatus,
newLandmark,
getLandmarksStatus
} = useLandmarks(undefined);
/**
* Holds the state of the landmark object to be added.
*/
const currentLandmarkState = undefined;
const [currentLandmark, setLandmark] = useState<Landmark | undefined>(currentLandmarkState);
useEffect(() => {
/**
* Updates this component's {@linkcode currentLandmarkState} when the {@linkcode landmark} prop passed down from the parent {@link Map}'s {@linkcode newLandmark} is changed.
* Embedded in a useEffect that listens to the {@linkcode landmark} prop.
* @memberOf AddLandmark
*/
const updateLandmarkStateFromParent = () => {
setLandmark(landmark), [landmark]
}
})
useEffect(() => {
/**
* Resets the {@link addLandmarkAsync} mutation on successful add.
* Embedded in a useEffect that listens to the {@link addLandmarkStatus} value from the {@link useLandmarks} hook.
* @memberOf AddLandmark
*/
const resetAddMutationOnSuccess = () => {
if (addLandmarkStatus == 'success') {
resetAddLm();
}
}
resetAddMutationOnSuccess();
}, [addLandmarkStatus]);
/**
* Calls {@link addLandmarkAsync} from {@link useLandmarks} to initate the process of adding a landmark, then closes the modal.
*/
const submit = async () => {
await addLandmarkAsync(currentLandmark)
setVisible(false);
}
/**
* Closes the modal.
*/
const close = () => {
setVisible(false)
}
return (
<View style={{backgroundColor: colors.red, paddingBottom: 20, height: Dimensions.get("window").height * .6, }}>
{addLandmarkStatus == 'idle' ?
<>
<View style={{
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: "row",
marginBottom: 15,
borderBottomWidth: 1,
borderBottomColor: 'white',
paddingHorizontal: 20,
paddingVertical: 10}}>
<Text style={{color: 'white', fontSize: 15}}>Add landmark here?</Text>
<FontAwesome name="times" color='white' size={25} onPress={close} />
</View>
<View style={{paddingHorizontal: 20, paddingBottom: 20 }}>
<TextInput
multiline={true}
style={{backgroundColor: 'white', paddingHorizontal: 10, paddingTop: 10, paddingBottom: 10, marginBottom: 20, height: 150}}
placeholder="Description"
onChangeText={value => setLandmark({...currentLandmark, description: value})}>
{currentLandmark?.description}
</TextInput>
<View style={{flexDirection: 'row'}}>
<Picker
style={{
inputIOS: {color: 'white'},
inputAndroid: {color: 'white'},
viewContainer: {marginVertical: 10, flex: 1}, placeholder: {color: 'white'}}}
textInputProps={{placeholderTextColor: 'white', selectionColor: 'white'}}
Icon={() => <FontAwesome name="chevron-down" color='white' size={20} />}
placeholder={{label: "Select a landmark type...", value: 0}}
value={currentLandmark?.landmark_type}
onValueChange={(value) => {
setLandmark({...currentLandmark, landmark_type: value, title: IconStrings[value]})
console.log(value)
}}
useNativeAndroidPickerStyle={true}
items={Object.keys(Icons)?.map(icon => {
return (
{label: IconStrings[parseInt(icon)].toUpperCase(), value: icon, key: icon}
)})}
/>
{currentLandmark?.landmark_type ? <Image style={{marginLeft: 20}} source={Icons[currentLandmark.landmark_type]}/>
: null}
</View>
</View>
{currentLandmark?.landmark_type ?
<View style={{justifyContent: 'flex-end', flexDirection: 'row', paddingHorizontal: 20}}>
{currentLandmark.description && currentLandmark.title ?
<View style={{flexDirection: 'row' }}>
<TouchableOpacity onPress={async () => submit()}><Text style={{color: 'white', marginRight: 20}}>Add</Text></TouchableOpacity>
<TouchableOpacity onPress={close}><Text style={{color: 'white'}}>Cancel</Text></TouchableOpacity>
</View> : null}
</View> : null}
<TouchableWithoutFeedback style={{height: '100%'}} onPress={() => Keyboard.dismiss()}><Text></Text></TouchableWithoutFeedback>
</> :
<View style={{height: '100%', justifyContent: "space-evenly", alignItems: "center"}}>
<Text style={{color: 'white', fontSize: 20}}>{
addLandmarkStatus == "loading" ? 'Uploading landmark...' :
addLandmarkStatus == "error" ? 'Something went wrong when trying to upload the landmark.' : null }
</Text>
{
addLandmarkStatus == "loading" ? <ActivityIndicator color='white' size="large"/> :
addLandmarkStatus == "error" ? <SecondaryButton text="Okay" onPress={close}/> : null
}
</View> }
</View>
)
}
export default memo(AddLandmark); |