Add "View N comments" button below posts

This replaces the old comment button that was in the post action bar

src/components/pages/feed.js

@@ -12,6 +12,7 @@ const TEST_POSTS = [
         id: 1,
         avatar: TEST_IMAGE,
         username: "njms",
+        replies_count: 3,
         favourited: false,
         reblogged: false,
         content: "Also learning Claire de Lune feels a lot like reading the communist manifesto",
@@ -26,6 +27,7 @@ const TEST_POSTS = [
         username: "njms",
         favourited: false,
         reblogged: false,
+        replies_count: 0,
         content: "Also learning Claire de Lune feels a lot like reading the communist manifesto",
         timestamp: 1596745156000,
         media_attachments: [

src/components/posts/post-action-bar.js

@@ -62,10 +62,6 @@ const PostActionBarJsx = (props) => {
             active: require("assets/eva-icons/post-actions/heart-active.png"),
             inactive: require("assets/eva-icons/post-actions/heart-inactive.png")
         },
-        comment: {
-            active: require("assets/eva-icons/post-actions/comment-active.png"),
-            inactive: require("assets/eva-icons/post-actions/comment-inactive.png")
-        },
         reblog: {
             active: require("assets/eva-icons/post-actions/reblog-active.png"),
             inactive: require("assets/eva-icons/post-actions/reblog-inactive.png")
@@ -83,12 +79,6 @@ const PostActionBarJsx = (props) => {
                 state = { state }
                 callback = { () => favouritedCallback(state, setState) } />
 
-            <PostActionJsx
-                field = "commenting"
-                pack = { icons.comment }
-                state = { state }
-                callback = { () => commentCallback(state, setState) } />
-            
             <PostActionJsx
                 field = "reblogged"
                 pack = { icons.reblog }
@@ -105,16 +95,17 @@ const PostActionBarJsx = (props) => {
     )
 }
 
+const SCREEN_WIDTH = Dimensions.get("window").width;
 const styles = {
     flexContainer: {
         display: "flex",
         flexDirection: "row",
-        padding: Dimensions.get("window").width / 40
+        padding: SCREEN_WIDTH / 40
     },
     icon: {
         width: 30,
         height: 30,
-        marginRight: Dimensions.get("window").width / 20
+        marginRight: SCREEN_WIDTH / 20
     },
     lastIcon: {
         marginLeft: "auto"

src/components/posts/post.js

@@ -18,6 +18,14 @@ const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthum
 // This will be used in RawPostJsx
 const { SlideInMenu } = renderers;
 
+function pluralize(n, singular, plural) {
+    if (n < 2) {
+        return singular;
+    } else {
+        return plural;
+    }
+}
+
 function getAutoHeight(w1, h1, w2) {
     /*
     Given the original dimensions and the new width, calculate what would
@@ -44,7 +52,6 @@ function timeToAge(time1, time2) {
     */
 
     const between = (n, lower, upper) => n >= lower && n < upper;
-    const pluralize = (n, singular, plural) => n < 2 ? singular : plural;
 
     const diff = time1 - time2;
 
@@ -69,6 +76,17 @@ function timeToAge(time1, time2) {
 }
 
 export const RawPostJsx = (props) => {
+    const repliesCount = props.data.replies_count;
+
+    let commentsText;
+    if (repliesCount == 0) {
+        commentsText = "View comments";
+    } else {
+        commentsText = "View "
+            + repliesCount
+            + pluralize(repliesCount, " comment", " comments");
+    }
+
     return (
         <View>
             <View style = { styles.postHeader }>
@@ -107,6 +125,12 @@ export const RawPostJsx = (props) => {
                 <Text>
                     <strong>{ props.data.username }</strong>&nbsp;{ props.data.content }
                 </Text>
+                <TouchableWithoutFeedback>
+                    <View>
+                        <Text style = { styles.comments }>{ commentsText }</Text>
+                    </View>
+                </TouchableWithoutFeedback>
+
                 <Text style = { styles.captionDate }>
                     { timeToAge((new Date()).getTime(), props.data.timestamp) }
                 </Text>
@@ -237,10 +261,13 @@ const styles = {
     caption: {
         padding: SCREEN_WIDTH / 24,
     },
+    comments: {
+        paddingTop: SCREEN_WIDTH / 50,
+        color: "#666",
+    },
     captionDate: {
         fontSize: "0.8em",
         color: "#666",
-        paddingTop: 10
     }
 };