[TMA 236] Comments PR (#64)

* Added comments count and retrieve comments

* Working draft

* The one before cleanup

* Finally

* Added time icon and major refactoring

* Small fix for social media taggs

* Addressed review comments

4 files changed, 169 insertions, 31 deletions

diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 639c0965..91f76f9b 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,15 +1,22 @@
 import React, {useEffect, useState} from 'react';
 import {StyleSheet, View, Image} from 'react-native';
 import {Button} from 'react-native-elements';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
-import {UserType} from '../../types';
+import {
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  StatusBarHeight,
+  getTimePosted,
+} from '../../utils';
+import {UserType, CommentType} from '../../types';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {CaptionScreenHeader} from '../../components/profile';
+import {CaptionScreenHeader} from '../../components';
 import {AuthContext} from '../../routes/authentication';
 import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
-import moment from 'moment';
 import Animated from 'react-native-reanimated';
+import {CommentsCount} from '../../components';
+import AsyncStorage from '@react-native-community/async-storage';
+import {getMomentCommentsCount} from '../../services';
 
 const NO_USER: UserType = {
   userId: '',
@@ -45,10 +52,13 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   const {isProfileView} = route.params;
   const {
     user: {userId},
+    logout,
   } = React.useContext(AuthContext);
   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 handleCaptionUpdate = (caption: string) => {
     setCaption(caption);
   };
@@ -58,35 +68,20 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
       setUser(NO_USER);
     }
     const timePeriod = async () => {
-      const datePosted = moment(date_time);
-      const now = moment();
-      var time = date_time;
-      var difference = now.diff(datePosted, 'seconds');
+      setElapsedTime(getTimePosted(date_time));
+    };
 
-      //Creating elapsedTime string to display to user
-      // 0 to less than 1 minute
-      if (difference < 60) {
-        time = difference + 'seconds';
-      }
-      // 1 minute to less than 1 hour
-      else if (difference >= 60 && difference < 60 * 60) {
-        difference = now.diff(datePosted, 'minutes');
-        time = difference + (difference === 1 ? 'minute' : 'minutes');
+    const loadComments = async () => {
+      const token = await AsyncStorage.getItem('token');
+      if (!token) {
+        logout();
+        return;
       }
-      //1 hour to less than 1 day
-      else if (difference >= 60 * 60 && difference < 24 * 60 * 60) {
-        difference = now.diff(datePosted, 'hours');
-        time = difference + (difference === 1 ? 'hour' : 'hours');
-      }
-      //1 day to less than 7 days
-      else if (difference >= 24 * 60 * 60 && difference < 7 * 24 * 60 * 60) {
-        difference = now.diff(datePosted, 'days');
-        time = difference + (difference === 1 ? 'day' : 'days');
-      }
-
-      setElapsedTime(time);
+      getMomentCommentsCount(moment_id, setCommentsCount, token);
     };
+
     timePeriod();
+    loadComments();
   }, [date_time, userId]);
 
   return (
@@ -109,10 +104,16 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
         source={{uri: path_hash}}
         resizeMode={'cover'}
       />
+
       <View style={styles.bodyContainer}>
-        <Animated.Text style={styles.text}>{caption}</Animated.Text>
+        <CommentsCount
+          comments_count={comments_count}
+          isProfileView={isProfileView}
+          moment_id={moment_id}
+        />
         <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
       </View>
+      <Animated.Text style={styles.text}>{caption}</Animated.Text>
     </View>
   );
 };
@@ -155,6 +156,8 @@ const styles = StyleSheet.create({
     position: 'relative',
     paddingBottom: '1%',
     paddingTop: '1%',
+    marginLeft: '5%',
+    marginRight: '5%',
     color: '#ffffff',
     fontWeight: 'bold',
   },
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
new file mode 100644
index 00000000..30dde8b4
--- /dev/null
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import {RouteProp, useNavigation} from '@react-navigation/native';
+import {ProfileStackParams} from '../../routes/profile';
+import {CenteredView, CommentTile, OverlayView} from '../../components';
+import {CommentType} from '../../types';
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {SCREEN_WIDTH} from '../../utils/screenDimensions';
+import {Button} from 'react-native-elements';
+import {AddComment} from '../../components/';
+import {useEffect} from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
+import {AuthContext} from '../../routes/authentication';
+import {getMomentComments} from '../..//services';
+
+/**
+ * Comments Screen for an image uploaded
+ * Displays all comments for a particular moment uploaded by the user followed by a text area to add the comment.
+ * Comment is posted when return is pressed on the keypad.
+ */
+
+type MomentCommentsScreenRouteProps = RouteProp<
+  ProfileStackParams,
+  'MomentCommentsScreen'
+>;
+
+interface MomentCommentsScreenProps {
+  route: MomentCommentsScreenRouteProps;
+}
+
+const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
+  const navigation = useNavigation();
+  const {isProfileView, moment_id} = route.params;
+  const [commentsList, setCommentsList] = React.useState([]);
+  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+  const {logout} = React.useContext(AuthContext);
+
+  useEffect(() => {
+    const loadComments = async () => {
+      const token = await AsyncStorage.getItem('token');
+      if (!token) {
+        logout();
+        return;
+      }
+      getMomentComments(moment_id, setCommentsList, token);
+      setNewCommentsAvailable(false);
+    };
+    if (newCommentsAvailable) {
+      loadComments();
+    }
+  }, [newCommentsAvailable]);
+
+  return (
+    <CenteredView>
+      <View style={styles.modalView}>
+        <View style={styles.header}>
+          <Button
+            title="X"
+            buttonStyle={styles.button}
+            titleStyle={styles.buttonText}
+            onPress={() => {
+              navigation.goBack();
+            }}
+          />
+          <Text style={styles.headerText}>
+            {commentsList.length + ' Comments'}
+          </Text>
+        </View>
+        <ScrollView
+          style={styles.modalScrollView}
+          contentContainerStyle={styles.modalScrollViewContent}>
+          {commentsList &&
+            commentsList.map((comment: CommentType) => (
+              <CommentTile key={comment.comment_id} comment_object={comment} />
+            ))}
+        </ScrollView>
+        <AddComment
+          setNewCommentsAvailable={setNewCommentsAvailable}
+          moment_id={moment_id}
+        />
+      </View>
+    </CenteredView>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {flexDirection: 'row'},
+  headerText: {
+    position: 'relative',
+    left: '180%',
+    alignSelf: 'center',
+    fontSize: 18,
+    fontWeight: '500',
+  },
+  container: {
+    position: 'relative',
+    top: '5%',
+    left: '5%',
+    backgroundColor: 'white',
+    borderRadius: 5,
+    width: SCREEN_WIDTH / 1.1,
+    height: '55%',
+  },
+  button: {
+    backgroundColor: 'transparent',
+  },
+  buttonText: {
+    color: 'black',
+    fontSize: 18,
+    fontWeight: '400',
+  },
+  modalView: {
+    width: '85%',
+    height: '70%',
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOpacity: 30,
+    shadowOffset: {width: 0, height: 2},
+    shadowRadius: 5,
+    borderRadius: 8,
+    paddingBottom: 15,
+    paddingHorizontal: 20,
+    paddingTop: 5,
+    justifyContent: 'space-between',
+  },
+  modalScrollViewContent: {
+    justifyContent: 'center',
+  },
+  modalScrollView: {
+    marginBottom: 10,
+  },
+});
+
+export default MomentCommentsScreen;
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 5a2e638e..0ac6d1ef 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import React from 'react';
-import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {Alert, ScrollView, StatusBar, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {AVATAR_GRADIENT} from '../../constants';
 import {
@@ -43,6 +43,7 @@ const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({route}) => {
     socialAccounts,
   } = context;
 
+
   const handle = socialAccounts[socialMediaType].handle;
   const posts = socialAccounts[socialMediaType].posts || [];
   const headerHeight = headerBarHeightWithImage();
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index 6319c17d..9dfbe409 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -2,3 +2,4 @@ export {default as ProfileScreen} from './ProfileScreen';
 export {default as SocialMediaTaggs} from './SocialMediaTaggs';
 export {default as CaptionScreen} from './CaptionScreen';
 export {default as IndividualMoment} from './IndividualMoment';
+export {default as MomentCommentsScreen} from './MomentCommentsScreen';