[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>

1 files changed, 75 insertions, 8 deletions

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;