[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, 103 insertions, 0 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
new file mode 100644
index 00000000..65c0b066
--- /dev/null
+++ b/src/components/comments/AddComment.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import {Image, StyleSheet, TextInput, View} from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
+import {AuthContext} from '../../routes';
+import {TaggBigInput} from '../onboarding';
+import {postMomentComment} from '../../services';
+
+/**
+ * This file provides the add comment view for a user.
+ * Displays the logged in user's profile picture to the left and then provides space to add a comment.
+ * Comment is posted when enter is pressed as requested by product team.
+ */
+
+export interface AddCommentProps {
+  setNewCommentsAvailable: Function;
+  moment_id: string;
+}
+
+const AddComment: React.FC<AddCommentProps> = ({
+  setNewCommentsAvailable,
+  moment_id,
+}) => {
+  const [comment, setComment] = React.useState('');
+  const {
+    avatar,
+    user: {userId, username},
+    logout,
+  } = React.useContext(AuthContext);
+
+  const handleCommentUpdate = (comment: string) => {
+    setComment(comment);
+  };
+
+  const postComment = async () => {
+    try {
+      const token = await AsyncStorage.getItem('token');
+      if (!token) {
+        logout();
+        return;
+      }
+      const postedComment = await postMomentComment(
+        userId,
+        comment,
+        moment_id,
+        token,
+      );
+
+      if (postedComment) {
+        //Set the current comment to en empty string if the comment was posted successfully.
+        handleCommentUpdate('');
+
+        //Indicate the MomentCommentsScreen that it needs to download the new comments again
+        setNewCommentsAvailable(true);
+      }
+    } catch (err) {
+      console.log('Error while posting comment!');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Image
+        style={styles.avatar}
+        source={
+          avatar
+            ? {uri: avatar}
+            : require('../../assets/images/avatar-placeholder.png')
+        }
+      />
+      <TaggBigInput
+        style={styles.text}
+        multiline
+        placeholder="Add a comment....."
+        placeholderTextColor="gray"
+        onChangeText={handleCommentUpdate}
+        onSubmitEditing={postComment}
+        value={comment}
+      />
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {flexDirection: 'row'},
+  text: {
+    position: 'relative',
+    right: '18%',
+    backgroundColor: 'white',
+    width: '70%',
+    paddingLeft: '2%',
+    paddingRight: '2%',
+    paddingBottom: '1%',
+    paddingTop: '1%',
+    height: 60,
+  },
+  avatar: {
+    height: 40,
+    width: 40,
+    borderRadius: 30,
+    marginRight: 15,
+  },
+});
+
+export default AddComment;