react-cimpress-comment - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

lib/Comments.js

@@ -34,3 +34,3 @@ import React, { Component } from 'react';
         commentsIds: []
-      }, () => this.fetchComments(this.state.visible));
+      }, () => this.forceFetchComments(this.state.visible));
     }
@@ -58,30 +58,36 @@ }
     if (isVisible && this.props.resourceUri) {
+      this.forceFetchComments();
+    }
+  }
+
+  forceFetchComments() {
+    this.setState({
+      loading: true
+    });
+    this.commentsClient.fetchComments().then(responseJson => {
       this.setState({
-        loading: true
+        loading: false
       });
-      this.commentsClient.fetchComments().then(responseJson => {
-        this.setState({
-          loading: false
-        });
-        this.setState({
-          commentsIds: responseJson.sort((a, b) => {
-            if (this.props.newestFirst === true) {
-              return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-            } else {
-              return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
-            }
-          }).map(c => c.id),
-          commentObjects: responseJson.reduce((acc, curr) => {
-            acc[curr.id] = curr;
-            return acc;
-          }, {})
-        });
-      }).catch(err => {
-        this.setState({
-          loading: false,
-          failed: true
-        });
-        console.log(err);
+      this.setState({
+        commentsIds: responseJson.sort((a, b) => {
+          if (this.props.newestFirst === true) {
+            return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+          } else {
+            return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+          }
+        }).map(c => c.id),
+        commentObjects: responseJson.reduce((acc, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        }, {})
       });
-    }
+    }).catch(err => {
+      this.setState({
+        loading: false,
+        failed: true
+      });
+      console.log(err);
+    }).then(() => {
+      this.reportCommentCount();
+    });
   }
@@ -102,8 +108,12 @@
     return this.commentsClient.postComment(comment).then(() => this.fetchComments(this.state.visible)).then(() => {
-      if (this.props.onPost) {
-        this.props.onPost(this.state.commentsIds.length);
-      }
+      this.reportCommentCount();
     });
   }
 
+  reportCommentCount() {
+    if (this.props.commentCountRefreshed) {
+      this.props.commentCountRefreshed(this.state.commentsIds.length);
+    }
+  }
+
   render() {
@@ -190,3 +200,3 @@
   editComments: PropTypes.bool,
-  onPost: PropTypes.func
+  commentCountRefreshed: PropTypes.func
 };

lib/CommentsDrawerLink.js

@@ -9,3 +9,2 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import PropTypes from 'prop-types';
-import CommentsClient from './CommentsClient';
 
@@ -17,30 +16,23 @@ export default class _CommentsDrawerLink extends React.Component {
     this.commentServiceUrl = 'https://comment.staging.trdlnk.cimpress.io';
-    this.commentsClient = new CommentsClient(props.accessToken, props.resourceUri);
     this.state = {
       commentsDrawerOpen: false,
-      availableComments: 0
+      availableComments: 0,
+      opacity: 0
     };
-    this.reloadCommentCount();
   }
 
-  componentWillReceiveProps(newProps) {
-    this.commentsClient = new CommentsClient(newProps.accessToken, newProps.resourceUri);
-    this.reloadCommentCount();
+  componentWillReceiveProps() {
+    this.setState({
+      opacity: 0
+    });
   }
 
-  reloadCommentCount() {
-    this.commentsClient.fetchComments().then(comments => this.setState({
-      availableComments: comments ? comments.length : 0
-    })).catch(() => this.setState({
-      availableComments: 0
-    }));
+  updateCommentCount(commentCount) {
+    this.setState({
+      availableComments: commentCount,
+      opacity: commentCount === 0 ? 0 : 1
+    });
   }
 
   render() {
-    let badge = React.createElement(
-      'span',
-      { className: 'comment-count-badge' },
-      this.state.availableComments
-    );
-
     return React.createElement(
@@ -59,3 +51,7 @@ 'span',
             }) }),
-          this.state.availableComments > 0 ? badge : null
+          React.createElement(
+            'span',
+            { key: 'test', className: 'comment-count-badge', style: { opacity: this.state.opacity } },
+            this.state.availableComments
+          )
         )
@@ -80,3 +76,3 @@ ),
           ) },
-        React.createElement(Comments, _extends({}, this.props, { onPost: this.reloadCommentCount.bind(this) }))
+        React.createElement(Comments, _extends({}, this.props, { commentCountRefreshed: this.updateCommentCount.bind(this) }))
       )
@@ -83,0 +79,0 @@ );

package.json

 {
   "name": "react-cimpress-comment",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Visualizes comment(s) for a particular platform resource",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

625

increased by0.97%

Worsened metrics

Total package byte prevSize

33679

decreased by-0.22%

No dependency changes