added more details to report modal

src/components/Map/Panels/LandmarkDetailsPanel/CommentsContainer.tsx

@@ -107,7 +107,7 @@ export const CommentsContainer: React.FC<CommentsContainerProps> = (props) => {
         </View>
         </> : 
         <View>
-            <SecondaryButton text="Login to add comments" onPress={() => {props.toggleLmDetails(false); props.authNavigation.navigate("Account")}} style={{marginBottom: 20}}/>
+            <SecondaryButton text="Login to add comments" onPress={() => {props.toggleLmDetails(false); props.authNavigation.navigate("Account")}} style={{marginBottom: 20, marginTop: 20}}/>
         </View>}
     </View>)
 }

src/components/Map/Panels/LandmarkDetailsPanel/DetailsHeader.tsx

@@ -150,7 +150,7 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = (props) => {
                             </View>
                         </TouchableOpacity>}
                     <View style={{ flexDirection: 'row' }}>
-                        <Report isLandmark = {true} />
+                        <Report isLandmark = {true} landmark = {props.landmark} />
                         <TouchOpaq
                             func={() => props.toggleDetailsPanel(false)}
                             col={"white"}

src/components/Map/Panels/LandmarkDetailsPanel/Report.tsx

@@ -11,8 +11,10 @@ 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";
 
 interface ReportProps {
+    landmark?: Landmark,
     isLandmark: boolean
 }
 
@@ -20,11 +22,23 @@ export const Report: React.FC<ReportProps> = (props) => {
     const toggleModal = () => {
         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);
+    };
+
     const [modalVisible, setModalVisible] = useState(false);
-    const [value, onChangeText] = React.useState('');
+    const [text, onChangeText] = React.useState('');
     const [selectedReasons, setSelectedReasons] = useState([]);
 
-
     const reasons = props.isLandmark ?
         [
             { value: '92iijs7yta', label: 'Does not exist' },
@@ -45,14 +59,11 @@ export const Report: React.FC<ReportProps> = (props) => {
         ];
 
     const onSelectedReasonsChange = (selectedReasons) => {
-
         setSelectedReasons(selectedReasons);
-
         for (let i = 0; i < selectedReasons.length; i++) {
             var tempItem = reasons.find(item => item.value === selectedReasons[i]);
             console.log(tempItem);
         }
-
     };
 
     return (
@@ -76,7 +87,7 @@ export const Report: React.FC<ReportProps> = (props) => {
                 useNativeDriverForBackdrop={true}
                 onBackdropPress={() => setModalVisible(false)}>
                 <View style={styles.modalView}>
-                    <View >
+                    <View style={{width: '100%'}}>
                         {props.isLandmark ?
                             <Text style={styles.modalText}>Report Landmark</Text>
                             :
@@ -99,21 +110,26 @@ export const Report: React.FC<ReportProps> = (props) => {
                                 </Select>
                             </View>
                         </View>
+                        <TextInput
+                            style={styles.input}
+                            onChangeText={onChangeText}
+                            value={text}
+                            placeholder="Other comments..."
+                            keyboardType="default"
+                        />
+                    </View>
+                    <View style={{flexDirection: 'row'}}>
+                        <Pressable
+                            style={styles.cancel}
+                            onPress={toggleModal}>
+                            <Text style={{ color: 'white', textAlign: 'center' }}>Cancel</Text>
+                        </Pressable>
+                        <Pressable
+                            style={styles.submit}
+                            onPress={sendReport}>
+                            <Text style={{ color: 'white', textAlign: 'center' }}>Submit</Text>
+                        </Pressable>
                     </View>
-                    <TextInput
-                        editable
-                        multiline
-                        numberOfLines={4}
-                        maxLength={40}
-                        onChangeText={text => onChangeText(text)}
-                        defaultValue={value}
-                        style={{ padding: 10 }}>
-                    </TextInput>
-                    {/* <Pressable
-                            style={[styles.button, styles.buttonClose]}
-                            onPress={() => setModalVisible(!modalVisible)}>
-                            <Text style={styles.textStyle}>Cancel</Text>
-                        </Pressable> */}
                 </View>
             </Modal>
         </View>
@@ -121,12 +137,6 @@ export const Report: React.FC<ReportProps> = (props) => {
 }
 
 const styles = StyleSheet.create({
-    centeredView: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginTop: 22,
-    },
     modalView: {
         flex: 1,
         justifyContent: 'space-between',
@@ -145,24 +155,38 @@ const styles = StyleSheet.create({
         shadowRadius: 4,
         elevation: 5,
     },
-    button: {
-        borderRadius: 20,
-        padding: 10,
-        elevation: 2,
-    },
-    buttonOpen: {
-        backgroundColor: '#F194FF',
-    },
-    buttonClose: {
-        backgroundColor: '#2196F3',
-    },
-    textStyle: {
-        color: 'white',
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
     modalText: {
         marginBottom: 15,
         textAlign: 'center',
+    },
+    input: {
+        height: 40,
+        margin: 12,
+        marginTop: 60,
+        borderWidth: 1,
+        borderRadius: 10,
+        padding: 10,
+    },
+    cancel: {
+        width: 100,
+        height: 40,
+        margin: 12,
+        borderWidth: 1,
+        borderRadius: 10,
+        borderColor: 'white',
+        padding: 10,
+        backgroundColor: '#df3f3f',
+        color: 'white'
+    },
+    submit: {
+        width: 100,
+        height: 40,
+        margin: 12,
+        borderWidth: 1,
+        borderRadius: 10,
+        borderColor: 'white',
+        padding: 10,
+        backgroundColor: '#3fafdf',
+        color: 'white'
     }
 })