Add logic for posts and comments

package.json

@@ -22,6 +22,7 @@
     "roboto-fontface": "^0.9.0",
     "vue": "^2.5.2",
     "vue-infinite-scroll": "^2.0.2",
+    "vue-linkify": "^1.0.1",
     "vue-router": "^3.0.1",
     "vuetify": "^1.0.18",
     "vuex": "^3.0.1",

src/api/PostsApi.js

@@ -1,13 +1,13 @@
 import http from './httpService'
 
 const RedditApi = (() => {
-  // const beautifyReplies = (comments) => {
-  //   return comments.map(comment => {
-  //     comment.replies = comment.replies ? comment.replies.data.children.map(reply => reply.data).filter(c => c.body) : [];
-  //     this.beautifyReplies(comment.replies);
-  //     return comment;
-  //   })
-  // }
+  const beautifyReplies = (comments) => {
+    return comments.map(comment => {
+      comment.replies = comment.replies ? comment.replies.data.children.map(reply => reply.data).filter(c => c.body) : []
+      beautifyReplies(comment.replies)
+      return comment
+    })
+  }
 
   const redditCollectionToPosts = (response) => {
     return response.data.data.children.map(c => c.data)
@@ -19,6 +19,13 @@ const RedditApi = (() => {
       return redditCollectionToPosts(response)
     },
 
+    async fetchComments (post) {
+      let response = await http.get(`${post.permalink}.json`)
+      const editedComments = response.data.map(res => res.data.children.map(c => c.data).filter(c => c.body))
+        .map(beautifyReplies.bind(this))
+      return editedComments[1]
+    },
+
     async fetchMorePosts (prevPost, subreddit) {
       let response = await http.get(`${subreddit}.json?count=25&after=${prevPost.name}`)
       return redditCollectionToPosts(response)

src/components/AppLayoutNavbar.vue

@@ -5,7 +5,16 @@
     color="primary"
   >
     <v-toolbar-side-icon @click.stop="changeSidebarState"></v-toolbar-side-icon>
-    <v-toolbar-title>Vue Reddit PWA {{subredditTitle}}</v-toolbar-title>
+    <v-toolbar-title>
+      <span >Vue Reddit PWA {{ subredditTitle }}</span>
+    </v-toolbar-title>
+    <div v-if="!isHome" class="back-button">
+      <router-link :to="{ path: '/' }">
+        <v-btn icon>
+          <v-icon>reply</v-icon>
+        </v-btn>
+      </router-link>
+    </div>
   </v-toolbar>
 </template>
 
@@ -26,6 +35,9 @@
       ]),
       subredditTitle () {
         return this.selectedSubreddit ? `- ${this.selectedSubreddit}` : ''
+      },
+      isHome () {
+        return this.$route.name === 'Subreddit'
       }
     },
     methods: {
@@ -37,5 +49,8 @@
 </script>
 
 <style>
-
+  .back-button {
+    position: absolute;
+    right: 10px;
+  }
 </style>

src/components/AppLayoutSidebarSearchField.vue

@@ -2,13 +2,12 @@
   <v-container class="app-layout-sidebar-search-field">
     <v-layout>
       <v-flex>
-        <v-select
+        <v-autocomplete
           :loading="searchLoading"
           :items="items"
           :search-input.sync="search"
           v-model="select"
           label="Explore subreddits"
-          autocomplete
           dense
           cache-items
           @input="onSelectionChange"

src/components/PostsListItem.vue

@@ -1,29 +1,36 @@
 <template>
-  <v-list-tile :key="post.title" avatar @click="" class="posts-list-item">
-    <v-list-tile-avatar>
-      <img :src="thumbnail"/>
-    </v-list-tile-avatar>
-    <v-list-tile-content>
-      <v-list-tile-title v-html="post.title"/>
-      <v-list-tile-sub-title>
-        <div>
-          Submitted {{timeAgo}} by <a>{{post.author}}</a>
-        </div>
-        <div class="posts-list-item-metrics">
-          <span>
-            <v-icon>keyboard_arrow_up</v-icon> {{post.ups}}
-          </span>
-          <a>
-            <v-icon color="blue darken-2" small class="posts-list-item-comment-icon">comment</v-icon> {{post.num_comments}} comments
-          </a>
-        </div>
-      </v-list-tile-sub-title>
-    </v-list-tile-content>
-  </v-list-tile>
+  <div class="posts-list-item">
+    <router-link :to="{ path: `${post.id}` }">
+      <v-list-tile :key="post.title" avatar @click="openPost()">
+        <v-list-tile-avatar>
+          <img :src="thumbnail"/>
+        </v-list-tile-avatar>
+        <v-list-tile-content>
+          <v-list-tile-title v-html="post.title"/>
+          <v-list-tile-sub-title>
+            <div>
+              Submitted {{timeAgo}} by <a>{{post.author}}</a>
+            </div>
+            <div class="posts-list-item-metrics">
+            <span>
+              <v-icon>keyboard_arrow_up</v-icon> {{post.ups}}
+            </span>
+              <a @click="moveToComments()">
+                <v-icon color="blue darken-2" small class="posts-list-item-comment-icon">comment</v-icon>
+                {{post.num_comments}} comments
+              </a>
+            </div>
+          </v-list-tile-sub-title>
+        </v-list-tile-content>
+      </v-list-tile>
+    </router-link>
+  </div>
 </template>
 
 <script>
   import moment from 'moment'
+  import { mapActions } from 'vuex'
+
   export default {
     name: 'PostsListItem',
     props: {
@@ -41,11 +48,20 @@
         return moment(date).fromNow()
       }
     },
-
     methods: {
+      ...mapActions('posts', [
+        'setSelectedPost'
+      ]),
       isURL (str) {
         // eslint-disable-next-line no-useless-escape
         return /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(str)
+      },
+      openPost () {
+        this.setSelectedPost(this.post)
+        window.open(
+          this.post.url,
+          'blank'
+        )
       }
     }
   }
@@ -66,4 +82,8 @@
     line-height: 24px;
     width: 20px;
   }
+
+  .posts-list-item a {
+    text-decoration: none;
+  }
 </style>

src/components/SelectedPost.vue

@@ -0,0 +1,132 @@
+<template>
+  <v-card>
+    <v-card-title primary-title>
+      <div class="card-header">
+        <div class="card-header__statistics">
+          <span class="card-header__statistics__ups">
+            <v-icon>keyboard_arrow_up</v-icon> {{ selectedPost.ups }}
+          </span>
+          Submitted by <a class="card-header__statistics__author">{{ selectedPost.author }}</a> {{timeAgo}}
+        </div>
+        <div>
+          <h1 class="selected-post-title">{{ selectedPost.title }}</h1>
+        </div>
+        <div class="card-header__comments">
+          <v-icon color="blue darken-2" small class="posts-list-item-comment-icon">comment</v-icon>
+          {{ selectedPost.num_comments }} comments
+        </div>
+      </div>
+    </v-card-title>
+    <v-card-text>
+      <div class="post-item__content post-item__url-content"
+           v-if="selectedPost.post_hint && selectedPost.post_hint === 'image'">
+        <img class="post-item__image" :src="selectedPost.url"/>
+      </div>
+      <div class="post-item__content post-item__url-content"
+           v-if="selectedPost.post_hint && selectedPost.post_hint === 'link'">
+        <a :href="selectedPost.url">
+          {{ selectedPost.url }}
+        </a>
+      </div>
+      <div class="post-item__content post-item__text-content"
+           v-if="!selectedPost.post_hint">
+        <span v-if="selectedPost.selftext">
+          {{ selectedPost.selftext }}
+        </span>
+        <a v-else :href="selectedPost.url">
+          {{ selectedPost.url }}
+        </a>
+      </div>
+      <div class="post-item__comment">
+        <h2 class="stepper-header">Comments</h2>
+        <div v-for="comment in comments">
+          <selected-post-comment :comment="comment"/>
+        </div>
+      </div>
+    </v-card-text>
+    <v-card-actions v-if="selectedPost.num_comments !== 0">
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+  import moment from 'moment'
+  import {mapGetters, mapActions} from 'vuex'
+  import SelectedPostComment from './SelectedPostComment'
+
+  export default {
+    name: 'SelectedPost',
+    components: { SelectedPostComment },
+    mounted () {
+      this.getComments(this.selectedPost)
+    },
+    methods: {
+      ...mapActions('posts', [
+        'getComments'
+      ])
+    },
+    computed: {
+      ...mapGetters('posts', {
+        selectedPost: 'selectedPost',
+        comments: 'comments'
+      }),
+      timeAgo () {
+        const date = new Date(parseInt(this.selectedPost.created_utc, 10) * 1000)
+        return moment(date).fromNow()
+      }
+    }
+  }
+</script>
+
+<style>
+  .card-header {
+    margin-left: 10px;
+  }
+
+  .card-header__statistics {
+    margin-bottom: 10px;
+  }
+
+  .card-header__statistics__ups {
+    margin-right: 20px;
+  }
+
+  .card-header__statistics__author {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+
+  .card-header__comments {
+    margin-top: 10px;
+  }
+
+  .post-item__text-content,  .post-item__url-content{
+    margin-left: 10px;
+  }
+
+  .post-item__image {
+    width: 80%;
+    height: 80%;
+  }
+
+  .selected-post-title {
+    color: rgba(0,0,0,0.54);
+  }
+
+  .v-stepper--vertical .v-stepper__step {
+    padding-left: 10px;
+  }
+
+  .v-stepper--vertical .v-stepper__content {
+    margin-left: 20px;
+    padding-top: 5px;
+    padding-left: 15px;
+    border-left: 1px solid #b3d4fc;
+  }
+
+  .stepper-header {
+    color: rgba(0,0,0,0.54);
+    margin-left: 10px;
+    margin-top: 15px;
+  }
+</style>

src/components/SelectedPostComment.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="comments-item">
+    <div class="comments-reply">
+      <v-stepper vertical>
+        <v-stepper-step editable step="index" complete>
+          <div class="posts-list-item-metrics">
+            <span>
+              <span style="margin-right: 20px;">{{ comment.author }}</span>
+              <v-icon>keyboard_arrow_up</v-icon> {{ comment.score }}
+              <span style="margin-left: 20px;">{{ timeAgo }}</span>
+            </span>
+          </div>
+        </v-stepper-step>
+        <v-stepper-content step="index">
+          <span v-linkified>{{ comment.body }}</span>
+          <div v-for="reply in comment.replies">
+            <selected-post-comment :comment="reply"/>
+          </div>
+        </v-stepper-content>
+      </v-stepper>
+    </div>
+  </div>
+</template>
+
+<script>
+  import moment from 'moment'
+
+  export default {
+    name: 'SelectedPostComment',
+    props: {
+      comment: {
+        type: Object,
+        default: () => {}
+      }
+    },
+    computed: {
+      timeAgo () {
+        const date = new Date(parseInt(this.comment.created_utc, 10) * 1000)
+        return moment(date).fromNow()
+      }
+    }
+  }
+</script>
+
+<style>
+  .comments-item {
+    margin-top: 10px;
+  }
+</style>