1 files changed, 98 insertions, 0 deletions
diff --git a/frontend/app/screens/messaging/comments.js b/frontend/app/screens/messaging/comments.js
new file mode 100644
index 0000000..3b772c5
--- /dev/null
+++ b/frontend/app/screens/messaging/comments.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  FlatList,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  RkStyleSheet,
+  RkText,
+} from 'react-native-ui-kitten';
+import { Avatar } from '../../components';
+import { data } from '../../data';
+import NavigationType from '../../config/navigation/propTypes';
+
+const moment = require('moment');
+
+export class Comments extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  static navigationOptions = {
+    title: 'Comments'.toUpperCase(),
+  };
+
+  constructor(props) {
+    super(props);
+    const postId = this.props.navigation.getParam('postId', undefined);
+    this.state = {
+      data: data.getComments(postId),
+    };
+  }
+
+  extractItemKey = (item) => `${item.id}`;
+
+  onItemPressed = (item) => {
+    const navigationParams = { id: item.user.id };
+    this.props.navigation.navigate('ProfileV1', navigationParams);
+  };
+
+  renderSeparator = () => (
+    <View style={styles.separator} />
+  );
+
+  renderItem = ({ item }) => (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={() => this.onItemPressed(item)}>
+        <Avatar rkType='circle' style={styles.avatar} img={item.user.photo} />
+      </TouchableOpacity>
+      <View style={styles.content}>
+        <View style={styles.contentHeader}>
+          <RkText rkType='header5'>{`${item.user.firstName} ${item.user.lastName}`}</RkText>
+          <RkText rkType='secondary4 hintColor'>
+            {moment().add(item.time, 'seconds').format('LT')}
+          </RkText>
+        </View>
+        <RkText rkType='primary3 mediumLine'>{item.text}</RkText>
+      </View>
+    </View>
+  );
+
+  render = () => (
+    <FlatList
+      style={styles.root}
+      data={this.state.data}
+      extraData={this.state}
+      ItemSeparatorComponent={this.renderSeparator}
+      keyExtractor={this.extractItemKey}
+      renderItem={this.renderItem}
+    />
+  );
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  container: {
+    paddingLeft: 19,
+    paddingRight: 16,
+    paddingVertical: 12,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  content: {
+    marginLeft: 16,
+    flex: 1,
+  },
+  contentHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: theme.colors.border.base,
+  },
+}));