4 files changed, 234 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;
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
new file mode 100644
index 00000000..02840d47
--- /dev/null
+++ b/src/components/comments/CommentTile.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {Text, View} from 'react-native-animatable';
+import {ProfilePreview} from '../profile';
+import {CommentType} from '../../types';
+import {StyleSheet} from 'react-native';
+import {getTimePosted} from '../../utils';
+import ClockIcon from '../../assets/icons/clock-icon-01.svg';
+
+/**
+ * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
+ */
+
+interface CommentTileProps {
+  comment_object: CommentType;
+}
+
+const CommentTile: React.FC<CommentTileProps> = ({comment_object}) => {
+  const timePosted = getTimePosted(comment_object.date_time);
+  return (
+    <View style={styles.container}>
+      <ProfilePreview
+        profilePreview={{
+          id: comment_object.commenter__id,
+          username: comment_object.commenter__username,
+          first_name: '',
+          last_name: '',
+        }}
+        isComment={true}
+      />
+      <View style={styles.body}>
+        <Text style={styles.comment}>{comment_object.comment}</Text>
+        <View style={styles.clockIconAndTime}>
+          <ClockIcon style={styles.clockIcon} />
+          <Text style={styles.date_time}>{' ' + timePosted}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: '3%',
+    marginRight: '3%',
+    borderBottomWidth: 1,
+    borderColor: 'lightgray',
+    marginBottom: '3%',
+  },
+  body: {
+    marginLeft: 56,
+  },
+  comment: {
+    position: 'relative',
+    top: -5,
+    marginBottom: '2%',
+  },
+  date_time: {
+    color: 'gray',
+  },
+  clockIcon: {
+    width: 12,
+    height: 12,
+    alignSelf: 'center',
+  },
+  clockIconAndTime: {
+    flexDirection: 'row',
+    marginBottom: '3%',
+  },
+});
+
+export default CommentTile;
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
new file mode 100644
index 00000000..74b4194c
--- /dev/null
+++ b/src/components/comments/CommentsCount.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {Text} from 'react-native-animatable';
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import CommentIcon from '../../assets/icons/moment-comment-icon.svg';
+import {useNavigation} from '@react-navigation/native';
+
+/**
+ * Provides a view for the comment icon and the comment count.
+ * When the user clicks on this view, a new screen opens to display all the comments.
+ */
+
+type CommentsCountProps = {
+  comments_count: string;
+  isProfileView: boolean;
+  moment_id: string;
+};
+
+const CommentsCount: React.FC<CommentsCountProps> = ({
+  comments_count,
+  isProfileView,
+  moment_id,
+}) => {
+  const navigation = useNavigation();
+  const navigateToCommentsScreen = async () => {
+    navigation.navigate('MomentCommentsScreen', {
+      isProfileView: isProfileView,
+      moment_id: moment_id,
+    });
+  };
+  return (
+    <>
+      <TouchableOpacity onPress={() => navigateToCommentsScreen()}>
+        <CommentIcon style={styles.image} />
+        <Text style={styles.count}>
+          {comments_count !== '0' ? comments_count : ''}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    position: 'relative',
+    width: 21,
+    height: 21,
+  },
+
+  count: {
+    position: 'relative',
+    fontWeight: 'bold',
+    color: 'white',
+    paddingTop: '2%',
+  },
+});
+
+export default CommentsCount;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
new file mode 100644
index 00000000..6293f799
--- /dev/null
+++ b/src/components/comments/index.ts
@@ -0,0 +1,3 @@
+export {default as CommentsCount} from '../comments/CommentsCount';
+export {default as CommentTile} from './CommentTile';
+export {default as AddComment} from './AddComment';