add getting sumOfBookmarks

src/client/js/components/BookmarkButton.jsx

@@ -10,6 +10,7 @@ class BookmarkButton extends React.Component {
 
     this.state = {
       isBookmarked: false,
+      sumOfBookmarks: 0,
     };
 
     this.handleClick = this.handleClick.bind(this);
@@ -28,6 +29,8 @@ class BookmarkButton extends React.Component {
       if (response.data.bookmark != null) {
         this.setState({ isBookmarked: true });
       }
+      const result = await crowi.apiv3.get('/bookmarks/countBookmarks', { pageId });
+      this.setState({ sumOfBookmarks: result.data.sumOfBookmarks });
     }
     catch (err) {
       toastError(err);
@@ -59,17 +62,22 @@ class BookmarkButton extends React.Component {
     }
 
     return (
-      <button
-        type="button"
-        href="#"
-        title="Bookmark"
-        onClick={this.handleClick}
-        className={`btn rounded-circle btn-bookmark border-0 d-edit-none
+      <div className="d-flex">
+        <button
+          type="button"
+          href="#"
+          title="Bookmark"
+          onClick={this.handleClick}
+          className={`btn rounded-circle btn-bookmark border-0 d-edit-none
           ${`btn-${this.props.size}`}
           ${this.state.isBookmarked ? 'active' : ''}`}
-      >
-        <i className="icon-star"></i>
-      </button>
+        >
+          <i className="icon-star"></i>
+        </button>
+        <div>
+          {this.state.sumOfBookmarks}
+        </div>
+      </div>
     );
   }