Merge pull request #55 from BinaryStudioAcademy/feature/comment-count

Feature/comment count

Author: nemoipaha

frontend/.eslintrc.js

@@ -44,6 +44,7 @@ module.exports = {
             tabWidth: 4
         }],
         'no-trailing-spaces': 'off',
+        'no-plusplus': 'off'
     },
     parserOptions: {
         parser: 'babel-eslint',

frontend/src/components/common/Navbar.vue

@@ -1,5 +1,10 @@
 <template>
-    <nav class="navbar" role="navigation" aria-label="main navigation">
+    <nav
+        v-if="user.id"
+        class="navbar"
+        role="navigation"
+        aria-label="main navigation"
+    >
         <div class="navbar-brand">
             <a
                 role="button"
@@ -105,9 +110,12 @@ export default {
         }),
     },
 
-    created() {
-        this.fetchAuthenticatedUser()
-            .catch(error => console.log(`Error occurred: ${error.message}`));
+    async created() {
+        try {
+            await this.fetchAuthenticatedUser();
+        } catch (error) {
+            console.log(`Error occurred: ${error.message}`);
+        }
     },
 
     methods: {

frontend/src/components/common/TweetPreview.vue

@@ -33,13 +33,13 @@
                 <nav class="level is-mobile">
                     <div class="level-left">
                         <a class="level-item">
-                            <span class="icon is-medium">
+                            <span class="icon is-medium has-text-info">
                                 <font-awesome-icon icon="comments" />
                             </span>
-                            {{ tweet.comments_count || 0 }}
+                            {{ tweet.commentsCount }}
                         </a>
                         <a class="level-item">
-                            <span class="icon is-medium">
+                            <span class="icon is-medium has-text-info">
                                 <font-awesome-icon icon="heart" />
                             </span>
                             {{ tweet.likes_count || 0 }}

frontend/src/components/view/tweet/Comment.vue

@@ -15,8 +15,20 @@
                     <br>
                     {{ comment.body }}
                     <br>
-                    <small><a>Like</a> · <a>Reply</a> · {{ comment.created | createdDate }}</small>
+                    <small>
+                        {{ comment.created | createdDate }}
+                    </small>
                 </p>
+                <nav class="level is-mobile">
+                    <div class="level-left">
+                        <a class="level-item">
+                            <span class="icon is-medium has-text-info">
+                                <font-awesome-icon icon="heart" />
+                            </span>
+                            {{ comment.likesCount }}
+                        </a>
+                    </div>
+                </nav>
             </div>
         </div>
     </article>
@@ -36,5 +48,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+nav {
+    margin-left: -8px;
+}
 
+.content {
+    p {
+        margin-bottom: 0;
+    }
+}
 </style>

frontend/src/components/view/tweet/NewCommentForm.vue

@@ -12,6 +12,7 @@
                         class="textarea"
                         v-model="text"
                         placeholder="Add a comment..."
+                        @keyup.ctrl.exact.enter="onPostComment"
                     />
                 </p>
             </div>
@@ -67,6 +68,7 @@ export default {
                 tweetId: this.tweetId,
                 text: this.text,
             });
+
             this.clearInput();
         },
     },

frontend/src/components/view/tweet/TweetContainer.vue

@@ -32,9 +32,28 @@
                                 <br>
                                 {{ tweet.text }}
                                 <br>
-                                <a>Like</a>
                             </p>
 
+                            <nav class="level is-mobile">
+                                <div class="level-left">
+                                    <a class="level-item">
+                                        <span
+                                            class="icon is-medium has-text-info"
+                                            :class="{ 'has-text-danger': tweetIsCommentedByUser(tweet.id, user.id) }"
+                                        >
+                                            <font-awesome-icon icon="comments" />
+                                        </span>
+                                        {{ tweet.commentsCount }}
+                                    </a>
+                                    <a class="level-item">
+                                        <span class="icon is-medium has-text-info">
+                                            <font-awesome-icon icon="heart" />
+                                        </span>
+                                        {{ tweet.likes_count || 0 }}
+                                    </a>
+                                </div>
+                            </nav>
+
                             <figure v-if="tweet.imageUrl" class="image is-3by1 tweet-image">
                                 <img
                                     :src="tweet.imageUrl"
@@ -45,7 +64,7 @@
                         </div>
                     </div>
 
-                    <div v-if="isTweetOwner" class="column is-narrow is-12-mobile">
+                    <div v-if="isTweetOwner(tweet.id, user.id)" class="column is-narrow is-12-mobile">
                         <div class="buttons">
                             <b-button type="is-warning" @click="onEditTweet">Edit</b-button>
                             <b-button type="is-danger" @click="onDeleteTweet">Delete</b-button>
@@ -117,20 +136,18 @@ export default {
         }),
 
         ...mapGetters('tweet', [
-            'getTweetById'
+            'getTweetById',
+            'isTweetOwner'
         ]),
 
         ...mapGetters('comment', [
-            'getCommentsByTweetId'
+            'getCommentsByTweetId',
+            'tweetIsCommentedByUser'
         ]),
 
         tweet() {
             return this.getTweetById(this.$route.params.id);
         },
-
-        isTweetOwner() {
-            return this.user.id === this.tweet.author.id;
-        }
     },
 
     methods: {

frontend/src/services/Normalizer.js

@@ -13,13 +13,15 @@ export const commentMapper = comment => ({
     authorId: comment.author_id,
     created: comment.created_at,
     updated: comment.updated_at,
-    author: userMapper(comment.author)
+    author: userMapper(comment.author),
+    // @todo fix backend api
+    likesCount: comment.likes_count || 0
 });
 
 export const tweetMapper = tweet => ({
     ...tweet,
     imageUrl: tweet.image_url,
     created: tweet.created_at,
     author: userMapper(tweet.author),
-    comments: tweet.comments.map(commentMapper)
+    commentsCount: tweet.comments_count
 });

frontend/src/store/modules/comment/actions.js

@@ -1,6 +1,7 @@
 import api from '@/api/Api';
 import { SET_LOADING } from '../../mutationTypes';
 import { SET_COMMENTS, ADD_COMMENT } from './mutationTypes';
+import { INCREMENT_COMMENTS_COUNT } from '../tweet/mutationTypes';
 import { commentMapper } from '@/services/Normalizer';
 
 export default {
@@ -30,6 +31,7 @@ export default {
             const comment = await api.post('/comments', { tweet_id: tweetId, body: text });
 
             commit(ADD_COMMENT, { tweetId, comment });
+            commit(`tweet/${INCREMENT_COMMENTS_COUNT}`, tweetId, { root: true });
             commit(SET_LOADING, false, { root: true });
 
             return Promise.resolve(commentMapper(comment));

frontend/src/store/modules/comment/getters.js

@@ -1,3 +1,7 @@
 export default {
     getCommentsByTweetId: state => tweetId => state.comments[tweetId] || [],
+
+    tweetIsCommentedByUser: (state, getters) => (tweetId, userId) => getters
+        .getCommentsByTweetId(tweetId)
+        .find(comment => comment.authorId === userId),
 };

frontend/src/store/modules/tweet/getters.js

@@ -6,5 +6,8 @@ export default {
             moment(a.created).isBefore(moment(b.created)) ? 1 : -1
         )
     ),
-    getTweetById: state => id => state.tweets[id]
+
+    getTweetById: state => id => state.tweets[id],
+
+    isTweetOwner: (state, getters) => (tweetId, userId) => getters.getTweetById(tweetId).author.id === userId,
 };