Add logic for posts and comments

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,13 @@
       ]),
       subredditTitle () {
         return this.selectedSubreddit ? `- ${this.selectedSubreddit}` : ''
+      },
+      isHome () {
+        if (this.$route.name === 'Subreddit') {
+          return true
+        } else {
+          return false
+        }
       }
     },
     methods: {
@@ -37,5 +53,8 @@
 </script>
 
 <style>
-
+  .back-button {
+    position: absolute;
+    right: 10px;
+  }
 </style>

src/components/AppLayoutSidebarSearchField.vue

@@ -8,7 +8,6 @@
           :search-input.sync="search"
           v-model="select"
           label="Explore subreddits"
-          autocomplete
           dense
           cache-items
           @input="onSelectionChange"

src/components/CommentsItem.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="comments-item">
+    <v-icon color="black">chat</v-icon>
+    <span>{{ comment.body }}</span>
+    <div class="comments-reply" v-for="reply in comment.replies">
+      <comments-item :comment="reply"></comments-item>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CommentsItem',
+    props: {
+      comment: {
+        type: Object,
+        default: function () { return {} }
+      }
+    }
+  }
+</script>
+
+<style>
+  .comments-item {
+    margin-top: 10px;
+  }
+  .comments-reply {
+    border-left: 1px solid black;
+    border-bottom: 1px solid black;
+    padding-left: 10px;
+    padding-bottom: 10px;
+  }
+</style>

src/components/PostsItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="posts-item">
+    <h1>{{ openedPost.title }}</h1>
+    <div class="post-item__content"
+         v-if="!openedPost.post_hint">
+      <span v-if="openedPost.selftext">
+        {{ openedPost.selftext }}
+      </span>
+      <a v-else :href="openedPost.url">
+        {{ openedPost.url }}
+      </a>
+    </div>
+    <div class="post-item__image"
+         v-if="openedPost.post_hint && openedPost.post_hint === 'image'">
+      <img :src="openedPost.url"/>
+    </div>
+    <div class="post-item__image"
+         v-if="openedPost.post_hint && openedPost.post_hint === 'link'">
+      <a :href="openedPost.url">
+        {{ openedPost.url }}
+      </a>
+    </div>
+    <div class="post-item__comments"
+         v-if="openedPost.num_comments !== 0">
+      <h3>Comments</h3>
+      <div class="post-item__comment"
+           v-for="comment in comments">
+        <comments-item :comment="comment"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {mapGetters, mapActions} from 'vuex'
+  import CommentsItem from './CommentsItem'
+
+  export default {
+    name: 'PostsItem',
+    components: {CommentsItem},
+    mounted () {
+      this.getComments(this.openedPost)
+    },
+    methods: {
+      ...mapActions('posts', [
+        'getComments'
+      ])
+    },
+    computed: {
+      ...mapGetters('posts', {
+        openedPost: 'openedPost',
+        comments: 'comments'
+      })
+    }
+  }
+</script>
+
+<style>
+  .post-item__comments {
+    margin-top: 10px;
+  }
+</style>
+

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,16 @@
         return moment(date).fromNow()
       }
     },
-
     methods: {
+      ...mapActions('posts', [
+        'setOpenedPost'
+      ]),
       isURL (str) {
         // eslint-disable-next-line no-useless-escape
         return /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(str)
+      },
+      openPost () {
+        this.setOpenedPost(this.post)
       }
     }
   }
@@ -66,4 +78,8 @@
     line-height: 24px;
     width: 20px;
   }
+
+  .posts-list-item a {
+    text-decoration: none;
+  }
 </style>

src/main.js

@@ -6,6 +6,7 @@ import 'vuetify/src/stylus/app.styl'
 import {
   Vuetify,
   VApp,
+  VBtn,
   VGrid,
   VNavigationDrawer,
   VFooter,
@@ -31,6 +32,7 @@ import { sync } from 'vuex-router-sync'
 Vue.use(Vuetify, {
   components: {
     VApp,
+    VBtn,
     VGrid,
     VNavigationDrawer,
     VFooter,

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Subreddit from '@/components/Subreddit'
+import PostsItem from '@/components/PostsItem'
 
 Vue.use(Router)
 
@@ -11,6 +12,11 @@ export default new Router({
       path: '/',
       name: 'Subreddit',
       component: Subreddit
+    },
+    {
+      path: '/:id',
+      name: 'Post',
+      component: PostsItem
     }
   ]
 })

src/store/modules/posts.js

@@ -5,14 +5,22 @@ export default {
   state: {
     error: null,
     isLoading: false,
-    posts: []
+    openedPost: localStorage.getItem('openedPost') ? JSON.parse(localStorage.getItem('openedPost')) : '',
+    posts: [],
+    comments: []
   },
   getters: {
     isLoading: state => state.isLoading,
     error: state => state.error,
-    posts: state => state.posts
+    posts: state => state.posts,
+    openedPost: state => state.openedPost,
+    comments: state => state.comments
   },
   mutations: {
+    updateOpenedPost (state, payload) {
+      state.openedPost = payload
+      localStorage.setItem('openedPost', JSON.stringify(state.openedPost))
+    },
     updateError (state, payload) {
       state.error = payload
     },
@@ -22,6 +30,9 @@ export default {
     updatePosts (state, payload) {
       state.posts = payload
     },
+    updateComments (state, payload) {
+      state.comments = payload
+    },
     concatenatePosts (state, payload) {
       state.posts = [...state.posts, ...payload]
     }
@@ -31,6 +42,14 @@ export default {
       commit('updatePosts', [])
     },
 
+    resetComments ({commit}) {
+      commit('updateComments', [])
+    },
+
+    setOpenedPost ({commit}, post) {
+      commit('updateOpenedPost', post)
+    },
+
     async getPostsFromSubreddit ({commit}, subreddit) {
       commit('updateError', null)
       commit('updateIsLoading', true)
@@ -55,6 +74,19 @@ export default {
       } finally {
         commit('updateIsLoading', false)
       }
+    },
+
+    async getComments ({commit}, post) {
+      commit('updateError', null)
+      commit('updateIsLoading', true)
+      try {
+        let comments = await PostsApi.fetchComments(post)
+        commit('updateComments', comments)
+      } catch (err) {
+        commit('updateError', err.message)
+      } finally {
+        commit('updateIsLoading', false)
+      }
     }
   }
 }