add pageContainer

src/client/js/components/LikeButton.jsx

@@ -4,25 +4,24 @@ import PropTypes from 'prop-types';
 import { toastError } from '../util/apiNotification';
 import { withUnstatedContainers } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
+import PageContainer from '../services/PageContainer';
 
 class LikeButton extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.state = {
-      isLiked: props.isLiked,
-    };
-
     this.handleClick = this.handleClick.bind(this);
   }
 
   async handleClick() {
-    const { appContainer, pageId } = this.props;
-    const bool = !this.state.isLiked;
+    const { appContainer, pageContainer } = this.props;
+    const pageId = pageContainer.state.pageId;
+    const bool = !pageContainer.state.isLiked;
     try {
       await appContainer.apiv3.put('/page/likes', { pageId, bool });
-      this.setState({ isLiked: bool });
+      pageContainer.setState({ sumOfLikers: pageContainer.state.sumOfLikers + 1 });
+      pageContainer.setState({ isLiked: bool });
     }
     catch (err) {
       toastError(err);
@@ -34,20 +33,26 @@ class LikeButton extends React.Component {
   }
 
   render() {
+    const { pageContainer } = this.props;
     // if guest user
     if (!this.isUserLoggedIn()) {
       return <div></div>;
     }
 
     return (
-      <button
-        type="button"
-        onClick={this.handleClick}
-        className={`btn rounded-circle btn-like border-0 d-edit-none
-        ${this.state.isLiked ? 'active' : ''}`}
-      >
-        <i className="icon-like"></i>
-      </button>
+      <div className="d-flex">
+        <button
+          type="button"
+          onClick={this.handleClick}
+          className={`btn rounded-circle btn-like border-0 d-edit-none
+        ${pageContainer.state.isLiked ? 'active' : ''}`}
+        >
+          <i className="icon-like"></i>
+        </button>
+        <div className="total-likes">
+          {pageContainer.state.sumOfLikers}
+        </div>
+      </div>
     );
   }
 
@@ -56,13 +61,12 @@ class LikeButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const LikeButtonWrapper = withUnstatedContainers(LikeButton, [AppContainer]);
+const LikeButtonWrapper = withUnstatedContainers(LikeButton, [AppContainer, PageContainer]);
 
 LikeButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
-  pageId: PropTypes.string,
-  isLiked: PropTypes.bool,
   size: PropTypes.string,
 };