[TMA-383] Added report button moment (#114)

* Added button on individual moment page to report an issue

* Report issue button disappears when clicked on and reappears when alert is
closed

* Small change

* Moved sendReport() to a ReportingService

* following user's report button now appears

* Update ReportingService.ts

Added alert

* Added back report button

* moved button back to the bottom

* Small change

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

7 files changed, 133 insertions, 11 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 1ec5511e..f905bfe3 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -61,7 +61,11 @@ const Moment: React.FC<MomentProps> = ({title, images, isProfileView}) => {
         style={styles.scrollContainer}>
         {images &&
           images.map((imageObj: MomentType) => (
-            <MomentTile key={imageObj.moment_id} moment={imageObj} />
+            <MomentTile
+              key={imageObj.moment_id}
+              moment={imageObj}
+              isProfileView={isProfileView}
+            />
           ))}
         {(images === undefined || images.length === 0) && !isProfileView && (
           <TouchableOpacity onPress={() => navigateToImagePicker()}>
diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index 1d483875..787957e0 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -2,17 +2,25 @@ import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
 import {MomentType} from 'src/types';
+import {ProfileContext} from '../../routes';
 
 interface MomentTileProps {
   moment: MomentType;
+  isProfileView: boolean;
 }
-const MomentTile: React.FC<MomentTileProps> = ({moment}) => {
+const MomentTile: React.FC<MomentTileProps> = ({moment, isProfileView}) => {
   const navigation = useNavigation();
+
+  //Username is needed by the IndividualMoment screen
+  const {
+    user: {username},
+  } = React.useContext(ProfileContext);
+
   const {path_hash} = moment;
   return (
     <TouchableOpacity
       onPress={() => {
-        navigation.push('IndividualMoment', {moment});
+        navigation.push('IndividualMoment', {moment, isProfileView, username});
       }}>
       <View style={styles.image}>
         <Image style={styles.image} source={{uri: path_hash}} />
diff --git a/src/constants/api.ts b/src/constants/api.ts
index f69ef943..eac529c4 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -21,6 +21,7 @@ export const FOLLOW_USER_ENDPOINT: string = API_URL + 'follow/';
 export const UNFOLLOW_USER_ENDPOINT: string = API_URL + 'unfollow/';
 export const FOLLOWERS_ENDPOINT: string = API_URL + 'followers/';
 export const FOLLOWING_ENDPOINT: string = API_URL + 'following/';
+export const REPORT_ISSUE_ENDPOINT: string = API_URL + 'report/';
 export const BLOCK_USER_ENDPOINT: string = API_URL + 'block/';
 
 // Register Social Link (Non-integrated)
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index cba646f8..b1e86214 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -23,6 +23,7 @@ export type ProfileStackParams = {
   IndividualMoment: {
     moment: MomentType;
     isProfileView: boolean;
+    username: string;
   };
   MomentCommentsScreen: {
     isProfileView: boolean;
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index a6f917b7..29a624cf 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -8,16 +8,19 @@ import {
   StatusBarHeight,
   getTimePosted,
 } from '../../utils';
-import {UserType, CommentType} from '../../types';
+import {UserType} from '../../types';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {CaptionScreenHeader} from '../../components';
-import {AuthContext} from '../../routes/authentication';
+import {AuthContext, ProfileContext} from '../../routes/';
 import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
 import Animated from 'react-native-reanimated';
 import {CommentsCount} from '../../components';
 import AsyncStorage from '@react-native-community/async-storage';
 import {getMomentCommentsCount} from '../../services';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {Alert} from 'react-native';
+import {sendReport} from '../../services/ReportingService';
 
 const NO_USER: UserType = {
   userId: '',
@@ -50,22 +53,24 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
     date_time,
     moment_id,
   } = route.params.moment;
-  const {isProfileView} = route.params;
+  const {isProfileView, username} = route.params;
   const {
-    user: {userId},
+    user: {userId: loggedInUserId, username: loggedInusername},
     logout,
   } = React.useContext(AuthContext);
+  const isOwnProfile = username === loggedInusername;
   const [user, setUser] = useState<UserType>(NO_USER);
   const [caption, setCaption] = React.useState(route.params.moment.caption);
   const [elapsedTime, setElapsedTime] = React.useState<string>();
   const [comments_count, setCommentsCount] = React.useState('');
+  const [isReporting, setIsReporting] = React.useState(false);
 
   const handleCaptionUpdate = (caption: string) => {
     setCaption(caption);
   };
 
   useEffect(() => {
-    if (!userId) {
+    if (!loggedInUserId) {
       setUser(NO_USER);
     }
     const timePeriod = async () => {
@@ -83,7 +88,44 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
 
     timePeriod();
     loadComments();
-  }, [date_time, userId]);
+  }, [date_time, loggedInUserId]);
+
+  const sendReportAlert = async () => {
+    const token = await AsyncStorage.getItem('token');
+    setIsReporting(true);
+    Alert.alert(
+      'Report Issue',
+      undefined,
+      [
+        {
+          text: 'Mark as inappropriate',
+          onPress: () =>
+            sendReport(
+              moment_id,
+              'Mark as inappropriate',
+              token ? token : '',
+              setIsReporting,
+            ),
+        },
+        {
+          text: 'Cancel',
+          onPress: () => setIsReporting(false),
+          style: 'cancel',
+        },
+        {
+          text: 'Mark as abusive',
+          onPress: () =>
+            sendReport(
+              moment_id,
+              'Mark as abusive',
+              token ? token : '',
+              setIsReporting,
+            ),
+        },
+      ],
+      {cancelable: false},
+    );
+  };
 
   return (
     <BlurView
@@ -118,7 +160,14 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
         />
         <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
       </View>
-      <Animated.Text style={styles.text}>{caption}</Animated.Text>
+      <Animated.Text style={styles.captionText}>{caption}</Animated.Text>
+      {isProfileView && !isOwnProfile && !isReporting && (
+        <TouchableOpacity onPress={sendReportAlert}>
+          <Animated.Text style={styles.reportIssue}>
+            {'Report an issue'}
+          </Animated.Text>
+        </TouchableOpacity>
+      )}
     </BlurView>
   );
 };
@@ -126,7 +175,10 @@ const styles = StyleSheet.create({
   contentContainer: {
     width: SCREEN_WIDTH,
     paddingTop: StatusBarHeight,
-    paddingBottom: SCREEN_HEIGHT,
+    height: SCREEN_HEIGHT,
+    flex: 2,
+    flexDirection: 'column',
+    paddingBottom: 0,
   },
   buttonsContainer: {
     flexDirection: 'row',
@@ -166,6 +218,21 @@ const styles = StyleSheet.create({
     color: '#ffffff',
     fontWeight: 'bold',
   },
+  captionText: {
+    position: 'relative',
+    paddingBottom: '34%',
+    paddingTop: '1%',
+    marginLeft: '5%',
+    marginRight: '5%',
+    color: '#ffffff',
+    fontWeight: 'bold',
+  },
+  reportIssue: {
+    position: 'relative',
+    color: 'white',
+    textAlign: 'center',
+    textDecorationLine: 'underline',
+  },
 });
 
 export default IndividualMoment;
diff --git a/src/services/ReportingService.ts b/src/services/ReportingService.ts
new file mode 100644
index 00000000..2650a703
--- /dev/null
+++ b/src/services/ReportingService.ts
@@ -0,0 +1,40 @@
+//Common moments api abstracted out here
+
+import {REPORT_ISSUE_ENDPOINT} from '../constants';
+import {Alert} from 'react-native';
+
+export const sendReport = async (
+  moment_id: string,
+  message: string,
+  token: string,
+  callback: Function,
+) => {
+  try {
+    let response = await fetch(REPORT_ISSUE_ENDPOINT, {
+      method: 'POST',
+      body: JSON.stringify({
+        resource_id: moment_id,
+        type: 'content',
+        reason: message,
+      }),
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+    });
+
+    let statusCode = response.status;
+    if (statusCode === 200) {
+      Alert.alert('Marked as ' + message.split(' ')[2]);
+    } else {
+      Alert.alert('Something went wrong!', 'Please try again.');
+    }
+    callback(false);
+  } catch (error) {
+    Alert.alert('Something went wrong!', 'Please try again.');
+    console.log(
+      'Something went wrong! 😭',
+      'Unable able to retrieve data',
+      error,
+    );
+  }
+};
diff --git a/src/services/index.ts b/src/services/index.ts
index 3d74290c..016511b3 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -2,4 +2,5 @@ export * from './UserProfileService';
 export * from './SocialLinkingService';
 export * from './MomentServices';
 export * from './UserFollowServices';
+export * from './ReportingService';
 export * from './BlockUserService';