Merge pull request #179 from coralproject/my-comments-designs

my comments design tweaks

client/coral-plugin-history/Comment.css

@@ -1,3 +1,11 @@
+.myComment {
+  border-bottom: 1px solid lightgrey;
+}
+
+.myComment:last-child {
+  border-bottom: none;
+}
+
 .assetURL {
   font-size: 16px;
   color: black;

client/coral-plugin-history/Comment.js

@@ -4,9 +4,9 @@ import styles from './Comment.css';
 
 const Comment = props => {
   return (
-    <div>
+    <div className={styles.myComment}>
       <p className="myCommentAsset">
-        <a className={`${styles.assetURL} myCommentAnchor`} href={`${props.asset.url}#${props.comment.id}`}>{`${props.asset.url}#${props.comment.id}`}</a>
+        <a className={`${styles.assetURL} myCommentAnchor`} href={`${props.asset.url}#${props.comment.id}`}>{props.asset.url}</a>
       </p>
       <p className={`${styles.commentBody} myCommentBody`}>{props.comment.body}</p>
     </div>

client/coral-plugin-history/CommentHistory.js

@@ -5,7 +5,6 @@ import styles from './CommentHistory.css';
 const CommentHistory = props => {
   return (
     <div className={`${styles.header} commentHistory`}>
-      <h2>All Comments</h2>
       <div className="commentHistory__list">
         {props.comments.map((comment, i) => {
           const asset = props.assets.find(asset => asset.id === comment.asset_id);

client/coral-settings/containers/SettingsContainer.js

@@ -34,18 +34,28 @@ class SignInContainer extends Component {
   render() {
     const {loggedIn, userData, showSignInDialog, items, user} = this.props;
     const {activeTab} = this.state;
+
+    const commentsMostRecentFirst = user
+      .myComments.map(id => items.comments[id])
+      .sort(({created_at:a}, {created_at:b}) => {
+        // descending order, created_at
+        // js date strings can be sorted lexigraphically.
+        const aLessThanB = a < b ? 1 : 0;
+        return a > b ? -1 : aLessThanB;
+      });
+
     return (
       <RestrictedContent restricted={!loggedIn} restrictedComp={<NotLoggedIn showSignInDialog={showSignInDialog} />}>
         <SettingsHeader {...this.props} />
         <TabBar onChange={this.handleTabChange} activeTab={activeTab} cStyle='material'>
-          <Tab>All Comments (120)</Tab>
+          <Tab>All Comments ({user.myComments.length})</Tab>
           <Tab>Profile Settings</Tab>
         </TabBar>
         <TabContent show={activeTab === 0}>
           {
             user.myComments.length && user.myAssets.length
             ? <CommentHistory
-              comments={user.myComments.map(id => items.comments[id])}
+              comments={commentsMostRecentFirst}
               assets={user.myAssets.map(id => items.assets[id])} />
             : <p>Loading comment history...</p>
           }

tests/client/coral-plugin-history/Comment.spec.js

@@ -21,7 +21,8 @@ describe('coral-plugin-history/Comment', () => {
   it('should render the asset url as a link', () => {
     const wrapper = mount(<Comment asset={asset} comment={comment} />);
     expect(wrapper.find('.myCommentAnchor')).to.have.length(1);
-    expect(wrapper.find('.myCommentAnchor').text()).to.equal('https://google.com#123');
+    expect(wrapper.find('.myCommentAnchor').text()).to.equal('https://google.com');
+    expect(wrapper.find('.myCommentAnchor').props().href).to.equal('https://google.com#123');
   });
 
   it('should render the comment with styles', () => {