react-cimpress-comment - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

lib/Comment.js

@@ -9,24 +9,41 @@ import React, { Component } from 'react';
 import TimeAgo from 'react-timeago';
+import CommentClient from './CommentClient';
 
-export default class Comment extends React.Component {
+let globalCacheKey = Symbol();
+let globalCache = {};
 
+export default class _Comment extends React.Component {
+
   constructor(props) {
     super(props);
+    this.commentClient = new CommentClient(props.accessToken, props.commentUri);
     this.state = {
-      comment: '',
-      createdBy: null,
-      createdByName: null,
-      createdAt: null,
-      updatedBy: null,
-      updatedByName: null,
-      updatedAt: null,
+      comment: props.comment ? props.comment.comment : '',
+      createdBy: props.comment ? props.comment.createdBy : '',
+      createdByName: props.comment ? this[globalCacheKey][props.comment.createdBy] : null,
+      createdAt: props.comment ? props.comment.createdAt : '',
+      updatedBy: props.comment ? props.comment.updatedBy : '',
+      updatedByName: props.comment ? this[globalCacheKey][props.comment.updatedBy] : null,
+      updatedAt: props.comment ? props.comment.updatedAt : '',
       visible: false,
-      ready: false
+      ready: props.comment != null
     };
   }
 
+  get [globalCacheKey]() {
+    return globalCache;
+  }
+
   componentWillReceiveProps(newProps) {
+    this.commentClient = new CommentClient(newProps.accessToken, newProps.commentUri);
     if (newProps.commentUri !== this.props.commentUri) {
       this.setState({
-        ready: false
+        comment: newProps.comment ? newProps.comment.comment : '',
+        createdBy: newProps.comment ? newProps.comment.createdBy : '',
+        createdAt: newProps.comment ? newProps.comment.createdAt : '',
+        updatedBy: newProps.comment ? newProps.comment.updatedBy : '',
+        updatedAt: newProps.comment ? newProps.comment.updatedAt : '',
+        updatedByName: newProps.comment ? this[globalCacheKey][newProps.comment.updatedBy] : null,
+        createdByName: newProps.comment ? this[globalCacheKey][newProps.comment.createdBy] : null,
+        ready: newProps.comment != null
       }, () => this.fetchComment(this.state.visible));
@@ -36,3 +53,3 @@ }
 
-  fetchUserName(userId) {
+  fetchUserName(userId, stateToUpdate) {
     let url = `https://api.cimpress.io/auth/access-management/v1/principals/${userId}`;
@@ -47,2 +64,7 @@ let headers = new Headers();
     };
+    if (this[globalCacheKey][userId]) {
+      this.setState({
+        [stateToUpdate]: this[globalCacheKey][userId]
+      });
+    }
     return fetch(url, init).then(response => {
@@ -54,3 +76,6 @@ if (response.status === 200) {
     }).then(responseJson => {
-      return responseJson.profile.name;
+      this[globalCacheKey][userId] = responseJson.profile.name;
+      this.setState({
+        [stateToUpdate]: responseJson.profile.name
+      });
     }).catch(err => {
@@ -62,24 +87,3 @@ console.log(err);
   putComment(comment) {
-    let headers = new Headers();
-    headers.append('Authorization', `Bearer ${this.props.accessToken}`);
-    headers.append('Content-Type', 'application/json');
-    let payload = {
-      comment: comment
-    };
-    console.log(payload);
-    let init = {
-      method: 'PUT',
-      headers: headers,
-      mode: 'cors',
-      cache: 'default',
-      body: JSON.stringify(payload)
-    };
-    return fetch(this.props.commentUri, init).then(response => {
-      console.log(response);
-      if (response.status === 200) {
-        return Promise.resolve();
-      } else {
-        throw new Error('Unable to update comment');
-      }
-    });
+    return this.commentClient.putComment(comment);
   }
@@ -92,15 +96,3 @@
     if (isVisible) {
-      let headers = new Headers();
-      headers.append('Authorization', `Bearer ${this.props.accessToken}`);
-      let init = {
-        method: 'GET',
-        headers: headers,
-        mode: 'cors',
-        cache: 'default'
-      };
-      fetch(this.props.commentUri, init).then(response => {
-        if (response.status === 200) {
-          return response.json();
-        }
-      }).then(responseJson => {
+      return this.commentClient.fetchComment().then(responseJson => {
         this.setState({
@@ -112,17 +104,11 @@ comment: responseJson.comment,
           updatedAt: responseJson.updatedAt,
+          updatedByName: this[globalCacheKey][responseJson.updatedBy],
+          createdByName: this[globalCacheKey][responseJson.createdBy],
           ready: true
         });
         if (responseJson.updatedBy) {
-          this.fetchUserName(responseJson.updatedBy).then(userName => {
-            this.setState({
-              updatedByName: userName
-            });
-          });
+          this.fetchUserName(responseJson.updatedBy, 'updatedByName');
         }
         if (responseJson.createdBy) {
-          this.fetchUserName(responseJson.createdBy).then(userName => {
-            this.setState({
-              createdByName: userName
-            });
-          });
+          this.fetchUserName(responseJson.createdBy, 'createdByName');
         }
@@ -136,3 +122,9 @@ }).catch(err => {
   change(e) {
-    this.putComment(e.comment).then(() => this.setState({ comment: e.comment })).catch(err => {
+    this.putComment(e.comment).then(responseJson => this.setState({
+      comment: responseJson.comment,
+      updatedBy: responseJson.updatedBy,
+      createdBy: responseJson.createdBy,
+      createdAt: responseJson.createdAt,
+      updatedAt: responseJson.updatedAt
+    })).catch(err => {
       console.log(err);
@@ -192,3 +184,3 @@ });
             ReactPlaceholder,
-            { showLoadingAnimation: true, type: 'text', rows: 2, ready: this.state.ready },
+            { showLoadingAnimation: true, type: 'text', rows: 1, ready: this.state.ready },
             commentBody
@@ -202,7 +194,8 @@ )
 
-Comment.propTypes = {
+_Comment.propTypes = {
   className: PropTypes.string,
   accessToken: PropTypes.string,
   commentUri: PropTypes.string,
+  comment: PropTypes.object,
   editComments: PropTypes.bool
 };

lib/Comments.js

@@ -8,13 +8,17 @@ import React, { Component } from 'react';
 import { TextField, shapes } from '@cimpress/react-components';
+import CommentsClient from './CommentsClient';
+
 let { Spinner } = shapes;
 
-export default class Comments extends React.Component {
+export default class _Comments extends React.Component {
 
   constructor(props) {
     super(props);
-    this.commentServiceUrl = "https://comment.staging.trdlnk.cimpress.io";
+    this.commentServiceUrl = 'https://comment.staging.trdlnk.cimpress.io';
+    this.commentsClient = new CommentsClient(props.accessToken, props.resourceUri);
     this.state = {
       visible: false,
       loading: false,
-      comments: [],
+      commentsIds: [],
+      commentObjects: {},
       commentToAdd: '',
@@ -26,5 +30,7 @@ failed: false
   componentWillReceiveProps(newProps) {
+    this.commentsClient = new CommentsClient(newProps.accessToken, newProps.resourceUri);
     if (newProps.resourceUri !== this.props.resourceUri) {
       this.setState({
-        ready: true
+        failed: false,
+        commentsIds: []
       }, () => this.fetchComments(this.state.visible));
@@ -38,6 +44,10 @@ }
 
-  addComment() {
-    this.postComment(this.state.commentToAdd).then(() => {
-      this.setState({ commentToAdd: '' });
-    });
+  addComment(e) {
+    if (e.keyCode) {
+      if (e.keyCode === 13) {
+        this.postComment(this.state.commentToAdd);
+      }
+    } else {
+      this.postComment(this.state.commentToAdd);
+    }
   }
@@ -53,26 +63,8 @@
       });
-      let encodedUri = encodeURIComponent(this.props.resourceUri);
-      let url = `${this.commentServiceUrl}/v0/resources/${encodedUri}`;
-      let headers = new Headers();
-      headers.append('Authorization', `Bearer ${this.props.accessToken}`);
-      let init = {
-        method: 'GET',
-        headers: headers,
-        mode: 'cors',
-        cache: 'default'
-      };
-      fetch(url, init).then(response => {
+      this.commentsClient.fetchComments().then(responseJson => {
         this.setState({
           loading: false
         });
-        if (response.status === 200) {
-          return response.json();
-        } else if (response.status === 404) {
-          return this.createResource().then(responseJson => responseJson.comments);
-        } else {
-          throw new Error('Unable to fetch comments');
-        }
-      }).then(responseJson => {
         this.setState({
-          comments: responseJson.comments.sort((a, b) => {
+          commentsIds: responseJson.sort((a, b) => {
             if (this.props.newestFirst === true) {
@@ -83,3 +75,7 @@ return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
             }
-          }).map(c => c.id)
+          }).map(c => c.id),
+          commentObjects: responseJson.reduce((acc, curr) => {
+            acc[curr.id] = curr;
+            return acc;
+          }, {})
         });
@@ -96,57 +92,21 @@ }).catch(err => {
 
-  createResource() {
-    let url = `${this.commentServiceUrl}/v0/resources`;
-    let headers = new Headers();
-    headers.append('Authorization', `Bearer ${this.props.accessToken}`);
-    headers.append('Content-Type', 'application/json');
-    let payload = {
-      URI: this.props.resourceUri,
-      comments: []
-    };
-    let init = {
-      method: 'POST',
-      headers: headers,
-      mode: 'cors',
-      cache: 'default',
-      body: JSON.stringify(payload)
-    };
-    return fetch(url, init).then(response => {
-      if (response.status === 201) {
-        return response.json();
-      } else {
-        throw new Error('Unable to create resource');
+  postComment(comment) {
+    let tempId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
+    if (this.props.newestFirst) {
+      this.state.commentsIds.unshift(tempId);
+    } else {
+      this.state.commentsIds.push(tempId);
+    }
+    this.setState({
+      commentToAdd: '',
+      commentsIds: this.state.commentsIds.slice(0),
+      commentsObjects: Object.assign({ [tempId]: { comment } }, this.state.commentObjects)
+    });
+    return this.commentsClient.postComment(comment).then(() => this.fetchComments(this.state.visible)).then(() => {
+      if (this.props.onPost) {
+        this.props.onPost(this.state.commentsIds.length);
       }
-    }).catch(err => {
-      console.log(err);
     });
   }
 
-  postComment(comment) {
-    let encodedUri = encodeURIComponent(this.props.resourceUri);
-    let url = `${this.commentServiceUrl}/v0/resources/${encodedUri}/comments`;
-    let headers = new Headers();
-    headers.append('Authorization', `Bearer ${this.props.accessToken}`);
-    headers.append('Content-Type', 'application/json');
-    let payload = {
-      comment: comment,
-      URI: this.props.resourceUri
-    };
-    let init = {
-      method: 'POST',
-      headers: headers,
-      mode: 'cors',
-      cache: 'default',
-      body: JSON.stringify(payload)
-    };
-    return fetch(url, init).then(response => {
-      if (response.status === 200) {
-        return response.json();
-      } else if (response.status === 404) {}
-    }).then(() => {
-      return this.fetchComments(this.state.visible);
-    }).catch(err => {
-      console.log(err);
-    });
-  }
-
   render() {
@@ -164,5 +124,5 @@
       );
-    } else if (this.state.comments.length > 0) {
-      comments = this.state.comments.map((id, index) => React.createElement(Comment, { className: 'comment ' + (index % 2 === 0 ? 'comment-even' : 'comment-odd'), key: id, accessToken: this.props.accessToken,
-        commentUri: url + id, editComments: this.props.editComments }));
+    } else if (this.state.commentsIds.length > 0) {
+      comments = this.state.commentsIds.map((id, index) => React.createElement(Comment, { className: 'comment ' + (index % 2 === 0 ? 'comment-even' : 'comment-odd'), key: id, accessToken: this.props.accessToken,
+        commentUri: url + id, comment: this.state.commentObjects[id], editComments: this.props.editComments }));
     } else if (this.state.loading) {
@@ -203,2 +163,3 @@ comments = React.createElement(
       onChange: this.onInputChange.bind(this),
+      onKeyDown: this.addComment.bind(this),
       rightAddon: React.createElement(
@@ -229,7 +190,8 @@ 'button',
 
-Comments.propTypes = {
+_Comments.propTypes = {
   accessToken: PropTypes.string.isRequired,
   resourceUri: PropTypes.string.isRequired,
   newestFirst: PropTypes.bool,
-  editComments: PropTypes.bool
+  editComments: PropTypes.bool,
+  onPost: PropTypes.func
 };

lib/index.js

@@ -1,3 +0,6 @@
-let Comments = require("./Comments");
+import _Comments from './Comments';
+import _CommentsDrawerLink from './CommentsDrawerLink';
 
-module.exports = Comments;
+export class Comments extends _Comments {}
+
+export class CommentsDrawerLink extends _CommentsDrawerLink {}

package.json

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

README.md

@@ -29,2 +29,16 @@ # react-cimpress-comment
 
-![Demo](./demo.gif)
+![Demo](./demo.gif)
+
+There is also a variant of the component that places the comments in a drawer, and provides a button with comment count as a badge that opens the drawer.
+
+    render() {
+
+        return (
+          <div>
+            <CommentsDrawerLink resourceUri={"https://some_resource_server.cimpress.io/v0/resource/resourceId"}
+                      newestFirst={false} editComments={true} accessToken={"accessToken"}/>
+          </div>
+        );
+      }
+
+![Demo](./demo-drawer.gif)

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

Total package byte prevSize

33656

increased by30.02%

Number of package files

10

increased by42.86%

Lines of code

617

increased by42.49%

Number of lines in readme file

43

increased by48.28%

Worsened metrics

Number of medium supply chain risk alerts

7

increased by16.67%

No dependency changes