|
@@ -6,65 +6,98 @@
|
|
|
*/
|
|
|
|
|
|
import { FontAwesome } from "@expo/vector-icons"
|
|
|
-import React from "react"
|
|
|
+import React, { useEffect } from "react"
|
|
|
import { useState } from "react"
|
|
|
-import { Text, StyleSheet, Pressable, TextInput, TouchableOpacity, View } from "react-native"
|
|
|
-import Modal from "react-native-modal";
|
|
|
-import Select from "react-native-multiple-select";
|
|
|
-import { Landmark } from "../../../../data/landmarks";
|
|
|
+import { Alert, Text, StyleSheet, Pressable, TextInput, TouchableOpacity, View, Keyboard } from "react-native"
|
|
|
+import Modal from "react-native-modal"
|
|
|
+import Select from "react-native-multiple-select"
|
|
|
+import { LMComment } from "../../../../data/comments"
|
|
|
+import { Landmark } from "../../../../data/landmarks"
|
|
|
+
|
|
|
+import { lmTypes as allLmTypes, lmTypesIndoor, catTypes } from "../../../../utils/GlobalUtils";
|
|
|
+
|
|
|
|
|
|
interface ReportProps {
|
|
|
landmark?: Landmark,
|
|
|
+ comment?: LMComment
|
|
|
isLandmark: boolean
|
|
|
}
|
|
|
|
|
|
export const Report: React.FC<ReportProps> = (props) => {
|
|
|
+ let lmTypes = lmTypesIndoor
|
|
|
+
|
|
|
+ const [keyboardIsVisible, setKeyboardIsVisible] = useState(false)
|
|
|
+ useEffect(() => {
|
|
|
+ const showListener = Keyboard.addListener("keyboardDidShow", () => {
|
|
|
+ setKeyboardIsVisible(true)
|
|
|
+ })
|
|
|
+ const hideListener = Keyboard.addListener("keyboardDidHide", () => {
|
|
|
+ setKeyboardIsVisible(false)
|
|
|
+ })
|
|
|
+
|
|
|
+ return () => {
|
|
|
+ showListener.remove()
|
|
|
+ hideListener.remove()
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
+
|
|
|
const toggleModal = () => {
|
|
|
- setModalVisible(!modalVisible);
|
|
|
- };
|
|
|
+ setModalVisible(!modalVisible)
|
|
|
+ }
|
|
|
|
|
|
const sendReport = () => {
|
|
|
- var report = "Report submitted for landmark " + props.landmark?.id
|
|
|
- report += "Reason(s) for report: \n"
|
|
|
- for (let i = 0; i < selectedReasons.length; i++) {
|
|
|
- var tempItem = reasons.find(item => item.value === selectedReasons[i]).label;
|
|
|
- console.log(tempItem);
|
|
|
- report += tempItem + "\n";
|
|
|
- }
|
|
|
- text ? report += "\nExtra comments: " + text : null
|
|
|
- console.log(report);
|
|
|
- };
|
|
|
+ // var report = props.isLandmark ?
|
|
|
+ // "Report submitted for landmark '" + props.landmark?.title + "':\n\tID: " + props.landmark?.id
|
|
|
+ // + "\n\tLandmark author: " + props.landmark?.user
|
|
|
+ // + "\n\tCoordinates: " + props.landmark?.longitude + " " + props.landmark?.latitude
|
|
|
+ // + "\n\tLandmark type: " + props.landmark?.landmark_type
|
|
|
+ // :
|
|
|
+ // "Report submitted for a comment on landmark " + props.comment?.landmark
|
|
|
+ // + '\n\tComment: "' + props.comment?.content + '"'
|
|
|
+ // report += "\nReason(s) for report: \n\t"
|
|
|
+ // for (let i = 0; i < selectedReasons.length; i++) {
|
|
|
+ // var tempItem = reasons.find(item => item.value === selectedReasons[i]).label
|
|
|
+ // console.log(tempItem)
|
|
|
+ // report += tempItem + ((i == selectedReasons.length - 1) ? "\n" : "\n\t")
|
|
|
+ // }
|
|
|
+ // text ? report += "Extra comments: " + text : null
|
|
|
+ // console.log(report)
|
|
|
+ // Alert.alert('Report submitted', 'Thank you for making the Atlas a safer place!')
|
|
|
+ // setModalVisible(!modalVisible)
|
|
|
+ console.log(lmTypes[6].label)
|
|
|
+ }
|
|
|
|
|
|
- const [modalVisible, setModalVisible] = useState(false);
|
|
|
- const [text, onChangeText] = React.useState('');
|
|
|
- const [selectedReasons, setSelectedReasons] = useState([]);
|
|
|
+ const [modalVisible, setModalVisible] = useState(false)
|
|
|
+ const [text, onChangeText] = React.useState('')
|
|
|
+ const [selectedReasons, setSelectedReasons] = useState([])
|
|
|
|
|
|
const reasons = props.isLandmark ?
|
|
|
[
|
|
|
- { value: '92iijs7yta', label: 'Does not exist' },
|
|
|
+ { value: '92iijs7yta', label: 'Landmark does not exist' },
|
|
|
+ { value: 'hsyasajs', label: 'Inaccurate tag' },
|
|
|
{ value: 'a0s0a8ssbsd', label: 'Spam' },
|
|
|
{ value: '16hbajsabsd', label: 'Sexually explicit material' },
|
|
|
{ value: 'nahs75a5sg', label: 'Hate speech or symbols' },
|
|
|
- { value: '667atsas', label: 'Promotion of violence' }
|
|
|
+ { value: '667atsas', label: 'Promotion of violence' },
|
|
|
]
|
|
|
:
|
|
|
[
|
|
|
- { value: '92iijs7yta', label: 'Misinformation' },
|
|
|
- { value: 'a0s0a8ssbsd', label: 'Spam' },
|
|
|
- { value: '16hbajsabsd', label: 'Sexually explicit material' },
|
|
|
- { value: 'nahs75a5sg', label: 'Hate speech or symbols' },
|
|
|
- { value: '667atsas', label: 'Promotion of violence' },
|
|
|
- { value: 'hsyasajs', label: 'Harassment or bullying' },
|
|
|
- { value: 'djsjudksjd', label: 'Impersonation' }
|
|
|
- ];
|
|
|
+ { value: '92iijs7ytb', label: 'Misinformation' },
|
|
|
+ { value: 'a0s0a8ssbse', label: 'Spam' },
|
|
|
+ { value: '16hbajsabse', label: 'Sexually explicit material' },
|
|
|
+ { value: 'nahs75a5sh', label: 'Hate speech or symbols' },
|
|
|
+ { value: '667atsat', label: 'Promotion of violence' },
|
|
|
+ { value: 'hsyasajt', label: 'Harassment or bullying' },
|
|
|
+ { value: 'djsjudksje', label: 'Impersonation' }
|
|
|
+ ]
|
|
|
|
|
|
const onSelectedReasonsChange = (selectedReasons) => {
|
|
|
- setSelectedReasons(selectedReasons);
|
|
|
+ setSelectedReasons(selectedReasons)
|
|
|
for (let i = 0; i < selectedReasons.length; i++) {
|
|
|
- var tempItem = reasons.find(item => item.value === selectedReasons[i]);
|
|
|
- console.log(tempItem);
|
|
|
+ var tempItem = reasons.find(item => item.value === selectedReasons[i])
|
|
|
+ console.log(tempItem)
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<View>
|
|
@@ -87,7 +120,7 @@ export const Report: React.FC<ReportProps> = (props) => {
|
|
|
useNativeDriverForBackdrop={true}
|
|
|
onBackdropPress={() => setModalVisible(false)}>
|
|
|
<View style={styles.modalView}>
|
|
|
- <View style={{width: '100%'}}>
|
|
|
+ <View style={{ width: '100%' }}>
|
|
|
{props.isLandmark ?
|
|
|
<Text style={styles.modalText}>Report Landmark</Text>
|
|
|
:
|
|
@@ -118,7 +151,7 @@ export const Report: React.FC<ReportProps> = (props) => {
|
|
|
keyboardType="default"
|
|
|
/>
|
|
|
</View>
|
|
|
- <View style={{flexDirection: 'row'}}>
|
|
|
+ {!keyboardIsVisible && <View style={{ flexDirection: 'row' }}>
|
|
|
<Pressable
|
|
|
style={styles.cancel}
|
|
|
onPress={toggleModal}>
|
|
@@ -129,7 +162,7 @@ export const Report: React.FC<ReportProps> = (props) => {
|
|
|
onPress={sendReport}>
|
|
|
<Text style={{ color: 'white', textAlign: 'center' }}>Submit</Text>
|
|
|
</Pressable>
|
|
|
- </View>
|
|
|
+ </View>}
|
|
|
</View>
|
|
|
</Modal>
|
|
|
</View>
|