add reporting feature files to new branch

android/build.gradle

@@ -22,7 +22,14 @@ buildscript {
     }
 }
 
+def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
+
 allprojects {
+    configurations.all {
+        resolutionStrategy {
+            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
+        }
+    }
     repositories {
         mavenLocal()
         maven {

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

@@ -11,6 +11,7 @@ import React from "react"
 import { TouchableOpacity, View, Text } from "react-native"
 import { LMComment } from "../../../../data/comments"
 import { useAuth } from "../../../../data/Auth/AuthContext"
+import { Report } from "./Report"
 
 /**
  * Props for the {@link Comment} component.
@@ -46,11 +47,16 @@ import { useAuth } from "../../../../data/Auth/AuthContext"
                 <Text style={{paddingBottom: 10}} >{comment.content}</Text>
                 <View style={{flexDirection: 'row', alignSelf: 'flex-end'}}>
                     {comment.edited ? <Text style={{color: 'grey', alignSelf: 'flex-end'}}>Edited</Text> : null}
-                    {selected && comment.poster == userId ?
-                    <View style={{marginTop: 10, flexDirection: 'row', alignSelf: 'flex-end'}}>
-                        <FontAwesome size={25} name="edit" style={{paddingTop: 1, marginLeft: 20}} onPress={() => startEditingComment(comment)}/>
-                        <FontAwesome color="red" size={25} style={{marginLeft: 15}} name="trash" onPress={() => deleteComment(comment.id)}/>
-                    </View> : null}
+                    {selected ?
+                        comment.poster == userId ?
+                            <View style={{marginTop: 10, flexDirection: 'row', alignSelf: 'flex-end'}}>
+                                <FontAwesome size={25} name="edit" style={{paddingTop: 1, marginLeft: 20}} onPress={() => startEditingComment(comment)}/>
+                                <FontAwesome color="red" size={25} style={{marginLeft: 15}} name="trash" onPress={() => deleteComment(comment.id)}/>
+                            </View> :
+                            <View style={{marginTop: 10, flexDirection: 'row', alignSelf: 'flex-end'}}>
+                                <Report isLandmark={false} />
+                            </View>
+                        : null}
                 </View>
             </View>
         </TouchableOpacity>

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

@@ -6,14 +6,16 @@
  */
 
 import { FontAwesome } from "@expo/vector-icons";
-import React from "react";
-import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React, { useState } from "react";
+import { Button, Alert, StyleSheet, Text, TextInput, TouchableOpacity, View, Dimensions, Platform, Pressable } from "react-native";
 import { QueryStatus } from "react-query";
 import { useAuth } from "../../../../data/Auth/AuthContext";
 import { Landmark } from "../../../../data/landmarks";
 import { UserProfile } from "../../../../data/profiles";
 import { MainTabsNavigationProp } from "../../../../navigation/MainTabsNavigator";
+import { Report } from "./Report";
 import TouchOpaq from './TouchOpaq';
+// import { TextInput } from "react-native-paper";
 
 interface DetailsHeaderProps {
     landmark?: Landmark,
@@ -39,8 +41,7 @@ interface DetailsHeaderProps {
  * @param 
  */
 export const DetailsHeader: React.FC<DetailsHeaderProps> = (props) => {
-    const {landmarkOwnedByUser, anonUserId, setAlert} = useAuth()
-
+    const { landmarkOwnedByUser, anonUserId, setAlert } = useAuth()
     const photosAreBusy = () => {
         return props.processingPhoto ||
             props.addPhotoStatus == "loading" ||
@@ -135,7 +136,7 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = (props) => {
                                     title: "Authentication required",
                                     type: "warning",
                                     message: "Oops! In order to rate landmarks, you have to log in.",
-                                    callback: () => {props.toggleLmDetails(false); props.authNavigation.navigate("Account")},
+                                    callback: () => { props.toggleLmDetails(false); props.authNavigation.navigate("Account") },
                                     callbackButtonText: 'Go to login'
                                 });
                             }
@@ -148,12 +149,15 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = (props) => {
                                 <FontAwesome style={{ marginLeft: 5, marginTop: 2 }} color="white" size={25} name="thumbs-up" />
                             </View>
                         </TouchableOpacity>}
+                    <View style={{ flexDirection: 'row' }}>
+                        <Report isLandmark = {true} />
                         <TouchOpaq
                             func={() => props.toggleDetailsPanel(false)}
                             col={"white"}
                             size={25}
                             name={"close"}
                         />
+                    </View>
 
                 </View>
             )

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

@@ -0,0 +1,168 @@
+/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ * Proprietary and confidential
+ * Written and maintained by the Click & Push Development team 
+ * <dev@clicknpush.ca>, January 2023
+ */
+
+import { FontAwesome } from "@expo/vector-icons"
+import React 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";
+
+interface ReportProps {
+    isLandmark: boolean
+}
+
+export const Report: React.FC<ReportProps> = (props) => {
+    const toggleModal = () => {
+        setModalVisible(!modalVisible);
+    };
+    const [modalVisible, setModalVisible] = useState(false);
+    const [value, onChangeText] = React.useState('');
+    const [selectedReasons, setSelectedReasons] = useState([]);
+
+
+    const reasons = props.isLandmark ?
+        [
+            { value: '92iijs7yta', label: 'Does not exist' },
+            { value: 'a0s0a8ssbsd', label: 'Spam' },
+            { value: '16hbajsabsd', label: 'Sexually explicit material' },
+            { value: 'nahs75a5sg', label: 'Hate speech or symbols' },
+            { 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' }
+        ];
+
+    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 (
+        <View>
+            <TouchableOpacity onPress={toggleModal}>
+                <View>
+                    {props.isLandmark ?
+                        <FontAwesome style={{ marginLeft: 5, marginTop: 2, marginRight: 10 }} color="white" size={25} name="flag" />
+                        :
+                        <FontAwesome style={{ paddingTop: 1, marginLeft: 20 }} color="red" size={25} name="flag" />
+                    }
+                </View>
+            </TouchableOpacity>
+            <Modal
+                backdropTransitionOutTiming={0}
+                hideModalContentWhileAnimating={true}
+                isVisible={modalVisible}
+                animationIn={'slideInUp'}
+                animationOut={'slideOutDown'}
+                useNativeDriver={true}
+                useNativeDriverForBackdrop={true}
+                onBackdropPress={() => setModalVisible(false)}>
+                <View style={styles.modalView}>
+                    <View >
+                        {props.isLandmark ?
+                            <Text style={styles.modalText}>Report Landmark</Text>
+                            :
+                            <Text style={styles.modalText}>Report Comment</Text>
+                        }
+                        <View style={{ justifyContent: 'flex-start' }}>
+                            <Text style={{ marginRight: 10, marginBottom: 5 }}>Reason(s) for reporting:</Text>
+                            <View style={{ alignSelf: 'stretch', borderColor: "blue", borderWidth: 0, width: '100%', justifyContent: 'center' }}>
+                                <Select
+                                    styleRowList={{ borderColor: "red", borderWidth: 0 }}
+                                    textColor='black'
+                                    itemTextColor='black'
+                                    items={reasons}
+                                    displayKey="label"
+                                    uniqueKey="value"
+                                    submitButtonText="Confirm"
+                                    submitButtonColor='black'
+                                    onSelectedItemsChange={onSelectedReasonsChange}
+                                    selectedItems={selectedReasons}>
+                                </Select>
+                            </View>
+                        </View>
+                    </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>
+    )
+}
+
+const styles = StyleSheet.create({
+    centeredView: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 22,
+    },
+    modalView: {
+        flex: 1,
+        justifyContent: 'space-between',
+        alignSelf: 'stretch',
+        margin: 20,
+        backgroundColor: 'white',
+        borderRadius: 20,
+        padding: 35,
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        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',
+    }
+})

src/utils/RequestUtils.ts

@@ -11,8 +11,8 @@
 //export const API_URL = 'http://192.168.3.81:8000'
 // export const API_URL = 'https://staging.clicknpush.ca'
 
-//export const API_URL = 'https://app.clicknpush.ca'
-export const API_URL = 'http://192.168.1.106:8000' // Nathan
+export const API_URL = 'https://app.clicknpush.ca'
+// export const API_URL = 'http://192.168.1.106:8000' // Nathan
 //export const API_URL = 'http://192.168.1.64:8000'   // Chase
 //export const API_URL = 'http://192.168.0.22:8000'       // Eric