[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

1 files changed, 133 insertions, 0 deletions

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;