Merge pull request #69 from BinaryStudioAcademy/feature/comments-store-redesign

Feature/comments store redesign

Author: nemoipaha

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

@@ -205,11 +205,12 @@ export default {
 
         async onLikeOrDislikeTweet() {
             try {
-                await this.likeOrDislikeTweet(this.tweet.id);
-
-                this.showSuccessMessage('Success');
+                await this.likeOrDislikeTweet({
+                    id: this.tweet.id,
+                    userId: this.user.id
+                });
             } catch (error) {
-                this.showErrorMessage('Error');
+                console.error(error.message);
             }
         }
     },

frontend/src/services/Normalizer.js

@@ -1,35 +1,40 @@
 // map api response into our custom format
 
 export const userMapper = user => ({
-    ...user,
+    id: user.id,
+    avatar: user.avatar,
+    email: user.email,
+    nickname: user.nickname,
     firstName: user.first_name,
     lastName: user.last_name,
 });
 
 export const emptyUser = () => ({
     id: null,
+    avatar: null,
     email: '',
+    nickname: '',
     firstName: '',
     lastName: '',
-    avatar: null,
-    nickname: '',
 });
 
 export const commentMapper = comment => ({
-    ...comment,
+    id: comment.id,
+    body: comment.body,
     authorId: comment.author_id,
+    tweetId: comment.tweet_id,
     created: comment.created_at,
     updated: comment.updated_at,
     author: userMapper(comment.author),
 });
 
 export const likeMapper = like => ({
-    userId: like.user_id,
-    createdAt: like.created_at
+    userId: like.user_id
 });
 
 export const tweetMapper = tweet => ({
-    ...tweet,
+    id: tweet.id,
+    text: tweet.text,
     imageUrl: tweet.image_url,
     created: tweet.created_at,
     author: userMapper(tweet.author),

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

@@ -13,7 +13,7 @@ export default {
                 direction: 'asc',
             });
 
-            commit(SET_COMMENTS, { tweetId, comments });
+            commit(SET_COMMENTS, comments);
             commit(SET_LOADING, false, { root: true });
 
             return Promise.resolve();
@@ -30,7 +30,7 @@ export default {
         try {
             const comment = await api.post('/comments', { tweet_id: tweetId, body: text });
 
-            commit(ADD_COMMENT, { tweetId, comment });
+            commit(ADD_COMMENT, comment);
             commit(`tweet/${INCREMENT_COMMENTS_COUNT}`, tweetId, { root: true });
             commit(SET_LOADING, false, { root: true });
 

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

@@ -1,5 +1,17 @@
+import moment from 'moment';
+
 export default {
-    getCommentsByTweetId: state => tweetId => state.comments[tweetId] || [],
+    getCommentsSortedByCreatedDateAsc: state => Object
+        .values(state.comments)
+        .sort(
+            (a, b) => (
+                moment(a.created).isBefore(moment(b.created)) ? -1 : 1
+            )
+        ),
+
+    getCommentsByTweetId: (state, getters) => tweetId => getters
+        .getCommentsSortedByCreatedDateAsc
+        .filter(comment => comment.tweetId === tweetId),
 
     tweetIsCommentedByUser: (state, getters) => (tweetId, userId) => getters
         .getCommentsByTweetId(tweetId)

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

@@ -2,17 +2,23 @@ import { SET_COMMENTS, ADD_COMMENT } from './mutationTypes';
 import { commentMapper } from '@/services/Normalizer';
 
 export default {
-    [SET_COMMENTS]: (state, { tweetId, comments }) => {
+    [SET_COMMENTS]: (state, comments) => {
+        let commentsByIdMap = {};
+
+        comments.forEach(comment => {
+            commentsByIdMap = {
+                ...commentsByIdMap,
+                [comment.id]: commentMapper(comment)
+            };
+        });
+
+        state.comments = commentsByIdMap;
+    },
+
+    [ADD_COMMENT]: (state, comment) => {
         state.comments = {
             ...state.comments,
-            [tweetId]: comments.map(commentMapper)
+            [comment.id]: commentMapper(comment)
         };
     },
-
-    [ADD_COMMENT]: (state, { tweetId, comment }) => {
-        state.comments[tweetId] = [
-            ...state.comments[tweetId],
-            commentMapper(comment)
-        ];
-    },
 };

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

@@ -138,16 +138,22 @@ export default {
         }
     },
 
-    async likeOrDislikeTweet({ commit }, id) {
+    async likeOrDislikeTweet({ commit }, { id, userId }) {
         commit(SET_LOADING, true, { root: true });
 
         try {
             const data = await api.put(`/tweets/${id}/like`);
 
             if (data.status === 'added') {
-                commit(LIKE_TWEET, id);
+                commit(LIKE_TWEET, {
+                    id,
+                    userId
+                });
             } else {
-                commit(DISLIKE_TWEET, id);
+                commit(DISLIKE_TWEET, {
+                    id,
+                    userId
+                });
             }
 
             commit(SET_LOADING, false, { root: true });

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

@@ -11,12 +11,16 @@ import { tweetMapper } from '@/services/Normalizer';
 
 export default {
     [SET_TWEETS]: (state, tweets) => {
+        let storeTweets = {};
+
         tweets.forEach(tweet => {
-            state.tweets = {
-                ...state.tweets,
+            storeTweets = {
+                ...storeTweets,
                 [tweet.id]: tweetMapper(tweet)
             };
         });
+
+        state.tweets = storeTweets;
     },
 
     [SET_TWEET_IMAGE]: (state, { id, imageUrl }) => {
@@ -38,11 +42,15 @@ export default {
         state.tweets[id].commentsCount++;
     },
 
-    [LIKE_TWEET]: (state, id) => {
+    [LIKE_TWEET]: (state, { id, userId }) => {
         state.tweets[id].likesCount++;
+
+        state.tweets[id].likes.push({ userId });
     },
 
-    [DISLIKE_TWEET]: (state, id) => {
+    [DISLIKE_TWEET]: (state, { id, userId }) => {
         state.tweets[id].likesCount--;
+
+        state.tweets[id].likes = state.tweets[id].likes.filter(like => like.userId !== userId);
     }
 };