Merge pull request #2885 from weseek/feat/gw-4081

feat/gw-4081

src/client/js/components/LikeButton.jsx

@@ -15,18 +15,9 @@ class LikeButton extends React.Component {
   }
 
   async handleClick() {
-    const { appContainer, pageContainer } = this.props;
-    const pageId = pageContainer.state.pageId;
-    const bool = !pageContainer.state.isLiked;
+    const { pageContainer } = this.props;
     try {
-      await appContainer.apiv3.put('/page/likes', { pageId, bool });
-      if (pageContainer.state.isLiked) {
-        pageContainer.setState({ sumOfLikers: pageContainer.state.sumOfLikers - 1 });
-      }
-      else {
-        pageContainer.setState({ sumOfLikers: pageContainer.state.sumOfLikers + 1 });
-      }
-      pageContainer.setState({ isLiked: bool });
+      pageContainer.toggleLike();
     }
     catch (err) {
       toastError(err);

src/client/js/services/PageContainer.js

@@ -139,15 +139,27 @@ export default class PageContainer extends Container {
   }
 
   async initStateOthers() {
+
+    this.retrieveLikeInfo();
+    this.retrieveBookmarkInfo();
+    this.checkAndUpdateImageUrlCached(this.state.likerUsers);
+  }
+
+  async retrieveLikeInfo() {
     const like = await this.appContainer.apiv3Get('/page/like-info', { _id: this.state.pageId });
     this.setState({
       sumOfLikers: like.data.sumOfLikers,
       likerUsers: like.data.users.liker,
       isLiked: like.data.isLiked,
     });
+  }
 
-    this.retrieveBookmarkInfo();
-    this.checkAndUpdateImageUrlCached(this.state.likerUsers);
+  async toggleLike() {
+    const bool = !this.state.isLiked;
+    await this.appContainer.apiv3Put('/page/likes', { pageId: this.state.pageId, bool });
+    this.setState({ isLiked: bool });
+
+    return this.retrieveLikeInfo();
   }
 
   async retrieveBookmarkInfo() {