fix(link-tracking): fixes in link-tracking

internal_packages/link-tracking/lib/link-tracking-composer-extension.es6

@@ -32,7 +32,7 @@ export default class LinkTrackingComposerExtension extends ComposerExtension {
       draftBody.unquoted = draftBody.unquoted.replace(RegExpUtils.linkTagRegex(), (match, prefix, url, suffix, content, closingTag) => {
         const encoded = encodeURIComponent(url);
         const redirectUrl = `http://${PLUGIN_URL}/${draft.accountId}/${messageUid}/${links.length}?redirect=${encoded}`;
-        links.push({originalUrl: url, clickCount: 0, clickData: [], redirectUrl: redirectUrl});
+        links.push({url: url, click_count: 0, click_data: [], redirect_url: redirectUrl});
         return prefix + redirectUrl + suffix + content + closingTag;
       });
 

internal_packages/link-tracking/lib/link-tracking-icon.jsx

@@ -29,7 +29,7 @@ export default class LinkTrackingIcon extends React.Component {
       // If there's metadata, return the total number of link clicks in the most recent metadata
       const mostRecentMetadata = metadataObjs.pop();
       return {
-        clicks: sum(mostRecentMetadata.links || [], link => link.clickCount || 0),
+        clicks: sum(mostRecentMetadata.links || [], link => link.click_count || 0),
       };
     }
     return {clicks: null};
@@ -44,7 +44,7 @@ export default class LinkTrackingIcon extends React.Component {
     return (<span>
       <RetinaImg
         className={clicks > 0 ? "clicked" : ""}
-        url="nylas://link-tracking/assets/linktracking-icon@2x.png"
+        name="icon-composer-linktracking.png"
         mode={RetinaImg.Mode.ContentIsMask} />
       <span className="link-click-count">{clicks > 0 ? clicks : ""}</span>
     </span>)

internal_packages/link-tracking/lib/link-tracking-message-extension.es6

@@ -7,10 +7,9 @@ export default class LinkTrackingMessageExtension extends MessageViewExtension {
     if ((metadata.links || []).length === 0) { return }
     const links = {}
     for (const link of metadata.links) {
-      links[link.redirectUrl] = link
+      links[link.redirect_url] = link
     }
 
-
     message.body = message.body.replace(RegExpUtils.linkTagRegex(), (match, openTagPrefix, aTagHref, openTagSuffix, content, closingTag) => {
       if (links[aTagHref]) {
         const openTag = openTagPrefix + aTagHref + openTagSuffix
@@ -22,12 +21,12 @@ export default class LinkTrackingMessageExtension extends MessageViewExtension {
         if (!content) { return match; }
         if (content.search("link-tracking-dot") >= 0) { return match; }
 
-        const originalUrl = links[aTagHref].originalUrl;
+        const originalUrl = links[aTagHref].url;
         const dotImgSrcPrefix = "nylas://link-tracking/assets/";
         const dotStyles = "margin-left: 1px; vertical-align: super; margin-right: 2px; zoom: 0.55;"
 
-        if (links[aTagHref].clickCount > 0) {
-          title = ` title="Number of clicks: ${links[aTagHref].clickCount} | ${originalUrl}" `;
+        if (links[aTagHref].click_count > 0) {
+          title = ` title="Number of clicks: ${links[aTagHref].click_count} | ${originalUrl}" `;
           dotSrc = dotImgSrcPrefix + "ic-tracking-visited@2x.png"
         } else {
           title = ` title="Never been clicked | ${originalUrl}" `

internal_packages/link-tracking/lib/link-tracking-panel.jsx

@@ -25,8 +25,8 @@ export default class LinkTrackingPanel extends React.Component {
   _renderContents() {
     return this.state.links.map(link => {
       return (<tr className="link-info">
-        <td className="link-url">{link.originalUrl}</td>
-        <td className="link-count">{link.clickCount + " clicks"}</td>
+        <td className="link-url">{link.url}</td>
+        <td className="link-count">{link.click_count + " clicks"}</td>
       </tr>)
     })
   }

internal_packages/link-tracking/lib/main.es6

@@ -1,6 +1,6 @@
 import {ComponentRegistry, DatabaseStore, Message, ExtensionRegistry, Actions} from 'nylas-exports';
 import LinkTrackingButton from './link-tracking-button';
-import LinkTrackingIcon from './link-tracking-icon';
+// import LinkTrackingIcon from './link-tracking-icon';
 import LinkTrackingComposerExtension from './link-tracking-composer-extension';
 import LinkTrackingMessageExtension from './link-tracking-message-extension';
 // import LinkTrackingPanel from './link-tracking-panel';
@@ -45,7 +45,7 @@ function afterDraftSend({draftClientId}) {
 
 export function activate() {
   ComponentRegistry.register(LinkTrackingButton, {role: 'Composer:ActionButton'});
-  ComponentRegistry.register(LinkTrackingIcon, {role: 'ThreadListIcon'});
+  // ComponentRegistry.register(LinkTrackingIcon, {role: 'ThreadListIcon'});
   // ComponentRegistry.register(LinkTrackingPanel, {role: 'message:BodyHeader'});
   ExtensionRegistry.Composer.register(LinkTrackingComposerExtension);
   ExtensionRegistry.MessageView.register(LinkTrackingMessageExtension);
@@ -56,7 +56,7 @@ export function serialize() {}
 
 export function deactivate() {
   ComponentRegistry.unregister(LinkTrackingButton);
-  ComponentRegistry.unregister(LinkTrackingIcon);
+  // ComponentRegistry.unregister(LinkTrackingIcon);
   // ComponentRegistry.unregister(LinkTrackingPanel);
   ExtensionRegistry.Composer.unregister(LinkTrackingComposerExtension);
   ExtensionRegistry.MessageView.unregister(LinkTrackingMessageExtension);

internal_packages/link-tracking/package.json

@@ -22,4 +22,4 @@
   },
   "dependencies": {},
   "license": "GPL-3.0"
-}
+}

internal_packages/open-tracking/lib/main.es6

@@ -25,7 +25,7 @@ function afterDraftSend({draftClientId}) {
       const uid = metadata.uid;
 
       // set metadata against the message
-      Actions.setMetadata(message, PLUGIN_ID, {openCount: 0, openData: []});
+      Actions.setMetadata(message, PLUGIN_ID, {open_count: 0, open_data: []});
 
       // post the uid and message id pair to the plugin server
       const data = {uid: uid, message_id: message.id, thread_id: 1};

internal_packages/open-tracking/lib/open-tracking-icon.jsx

@@ -24,30 +24,25 @@ export default class OpenTrackingIcon extends React.Component {
     const metadataObjs = messages.map(msg => msg.metadataForPluginId(plugin.appId)).filter(meta => meta);
     return {
       hasMetadata: metadataObjs.length > 0,
-      opened: metadataObjs.every(m => m.openCount > 0),
+      opened: metadataObjs.length > 0 && metadataObjs.every(m => m.open_count > 0),
     };
   }
 
-  _renderIcon = () => {
-    if (!this.state.hasMetadata) {
-      return <span />;
-    }
-    return this.renderImage()
-  };
-
-  renderImage() {
+  _renderImage() {
     return (
       <RetinaImg
         className={this.state.opened ? "opened" : "unopened"}
-        url="nylas://open-tracking/assets/icon-composer-eye@2x.png"
+        url="nylas://open-tracking/assets/icon-tracking-read@2x.png"
         mode={RetinaImg.Mode.ContentIsMask} />
     );
   }
 
   render() {
+    if (!this.state.hasMetadata) { return false }
+    const title = this.state.opened ? "This message has been read at least once" : "This message has not been read";
     return (
-      <div className="open-tracking-icon">
-        {this._renderIcon()}
+      <div title={title} className="open-tracking-icon">
+        {this._renderImage()}
       </div>
     );
   }

internal_packages/open-tracking/lib/open-tracking-message-status.jsx

@@ -21,7 +21,7 @@ export default class OpenTrackingMessageStatus extends React.Component {
     }
     return {
       hasMetadata: true,
-      opened: metadata.openCount > 0,
+      opened: metadata.open_count > 0,
     };
   }
 
@@ -41,8 +41,9 @@ export default class OpenTrackingMessageStatus extends React.Component {
   render() {
     if (!this.state.hasMetadata) { return false }
     const txt = this.state.opened ? "Read" : "Unread";
+    const title = this.state.opened ? "This message has been read at least once" : "This message has not been read";
     return (
-      <span className={`read-receipt-message-status ${txt}`}>{this.renderImage()}&nbsp;&nbsp;{txt}</span>
+      <span title={title} className={`read-receipt-message-status ${txt}`}>{this.renderImage()}&nbsp;&nbsp;{txt}</span>
     )
   }
 }

internal_packages/open-tracking/stylesheets/main.less

@@ -19,13 +19,14 @@
   font-weight: bold;
 }
 .open-tracking-icon {
-  width: 16px;
-  margin-right: 4px;
+  height: 10px;
+  margin: -9px 0 0 4px;
 }
 
 .read-receipt-message-status {
   color: @text-color-very-subtle;
   margin-left: 10px;
+  cursor: default;
   &.Unread {
     img.content-mask {
       background-color: @text-color-very-subtle;