fixed unread notification logic and added unread badges to post previews

pkg/arvo/app/publish.hoon

@@ -1268,7 +1268,13 @@
   ::
       %read
     =.  unread.sat  (~(del in unread.sat) who.act coll.act post.act)
-    [make-tile-moves this]
+    :_  this
+    %+  welp  make-tile-moves
+    ::
+    %+  turn  (prey:pubsub:userlib /primary bol)
+    |=  [b=bone *]
+    ^-  move
+    [b %diff %publish-update %unread %.n (sy [who.act coll.act post.act] ~)]
   ::
   ==
 ::

pkg/arvo/mar/publish/update.hoon

@@ -19,6 +19,21 @@
           [%coll s+col.upd]
           [%title s+title.upd]
       ==
+    ::
+        %unread
+      %-  pairs
+      :~  [%add b+add.upd]
+          :+  %posts
+            %a
+          %+  turn  ~(tap in keys.upd)
+          |=  [who=@p coll=@tas post=@tas]
+          ^-  ^json
+          %-  pairs
+          :~  [%who (ship who)]
+              [%coll s+coll]
+              [%post s+post]
+          ==
+      ==
     ::
     ==
     ::

pkg/arvo/sur/publish.hoon

@@ -108,5 +108,6 @@
 ::
 +$  update
   $%  [%invite add=? who=@p col=@tas title=@t]
+      [%unread add=? keys=(set [who=@p coll=@tas post=@tas])]
   ==
 --

pkg/interface/publish/src/js/components/blog.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import { PostPreview } from '/components/lib/post-preview';
 import _ from 'lodash';
 import { PathControl } from '/components/lib/path-control';
 import { BlogData } from '/components/lib/blog-data';
@@ -158,6 +157,13 @@ export class Blog extends Component {
   }
 
   buildPostPreviewProps(post, blog, pinned){
+    let unread =  (-1 === _.findIndex(this.props.unread, {
+        post: post.post.info.filename,
+        coll: blog.info.filename,
+        who: blog.info.owner.slice(1),
+      }))
+      ? false: true;
+
     return {
       postTitle: post.post.info.title,
       postName:  post.post.info.filename,
@@ -169,6 +175,7 @@ export class Blog extends Component {
       blogOwner: blog.info.owner,
       date: post.post.info["date-created"],
       pinned: pinned,
+      unread: unread,
     }
   }
 

pkg/interface/publish/src/js/components/lib/next-prev.js

@@ -70,7 +70,7 @@ class Preview extends Component {
           <div className="w-336 relative"
             style={{height:210}}>
             <Link to={postLink} className="db">
-              <TitleSnippet title={previewProps.postTitle} />
+              <TitleSnippet badge={false} title={previewProps.postTitle} />
               <div className="w-100" style={{height:16}}></div>
               <PostSnippet
                 body={previewProps.postBody}

pkg/interface/publish/src/js/components/lib/post-preview.js

@@ -47,7 +47,7 @@ export class PostPreview extends Component {
       <div className="w-336 relative"
         style={{height:195, marginBottom: 72, marginRight:16}}>
         <Link to={postLink}>
-          <TitleSnippet title={this.props.post.postTitle}/>
+          <TitleSnippet badge={this.props.post.unread} title={this.props.post.postTitle}/>
           <PostSnippet
             body={this.props.post.postBody}
           />

pkg/interface/publish/src/js/components/lib/recent-preview.js

@@ -47,7 +47,7 @@ export class RecentPreview extends Component {
       <div className="w-336 relative"
         style={{height:240, marginBottom: 72, marginRight: 16}}>
         <Link to={postLink}>
-          <TitleSnippet title={this.props.post.postTitle}/>
+          <TitleSnippet badge={this.props.post.unread} title={this.props.post.postTitle}/>
           <PostSnippet
             body={this.props.post.postBody}
           />

pkg/interface/publish/src/js/components/lib/title-snippet.js

@@ -7,12 +7,24 @@ export class TitleSnippet extends Component {
   }
 
   render() {
-    return (
-      <p className="body-large b two-lines"
-        style={{WebkitBoxOrient: "vertical"}}>
-        {this.props.title}
-      </p>
-    );
+    if (this.props.badge) {
+      return (
+        <div className="body-large two-lines b"
+            style={{WebkitBoxOrient: "vertical"}}>
+          <span className="h2 green-medium"> • </span>
+          <span>
+            {this.props.title}
+          </span>
+        </div>
+      );
+    } else {
+      return (
+        <p className="body-large b two-lines"
+          style={{WebkitBoxOrient: "vertical"}}>
+          {this.props.title}
+        </p>
+      );
+    }
   }
 }
 

pkg/interface/publish/src/js/components/post.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import { PostPreview } from '/components/lib/post-preview';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 import { PostBody } from '/components/lib/post-body';
@@ -348,6 +347,15 @@ export class Post extends Component {
       });
 
       this.props.setSpinner(false);
+
+      let read = {
+        read: {
+          who: ship,
+          coll: blogId,
+          post: postId,
+        }
+      };
+      this.props.api.action("publish", "publish-action", read);
     }
 
     if (!this.state.temporary){
@@ -365,6 +373,15 @@ export class Post extends Component {
             { text: post.info.title, url: postUrl },
           ],
         });
+
+        let read = {
+          read: {
+            who: ship,
+            coll: blogId,
+            post: postId,
+          }
+        };
+        this.props.api.action("publish", "publish-action", read);
       }
       if (oldComments != comments) {
         this.setState({comments: comments});

pkg/interface/publish/src/js/components/recent.js

@@ -51,6 +51,13 @@ export class Recent extends Component {
     let col = this.retrieveColl(coll, who);
     let com = this.retrieveComments(post, coll, who);
 
+    let unread =  (-1 === _.findIndex(this.props.unread, {
+        post: post,
+        coll: coll,
+        who: who,
+      }))
+      ? false: true;
+
     return {
       postTitle: pos.info.title,
       postName:  post,
@@ -60,7 +67,8 @@ export class Recent extends Component {
       collectionName:  coll,
       author: pos.info.creator.slice(1),
       blogOwner: who,
-      date: pos.info["date-created"]
+      date: pos.info["date-created"],
+      unread: unread,
     }
 
   }

pkg/interface/publish/src/js/reducers/update.js

@@ -3,22 +3,34 @@ import _ from 'lodash';
 export class UpdateReducer {
   reduce(json, state){
     if (json.invite) {
-      this.reduceInvite(json, state);
+      this.reduceInvite(json.invite, state);
+    } else if (json.unread) {
+      this.reduceUnread(json.unread, state);
     }
   }
 
   reduceInvite(json, state) {
     let val = {
-      title: json.invite.title,
-      coll:  json.invite.coll,
-      who:   json.invite.who,
+      title: json.title,
+      coll:  json.coll,
+      who:   json.who,
     };
-    if (json.invite.add) {
+    if (json.add) {
       state.invites.push(val);
     } else {
       let idx = _.findIndex(state.invites, val)
       _.pullAt(state.invites, [idx]);
     }
-    
+  }
+
+  reduceUnread(json, state) {
+    if (json.add) {
+      state.unread = _.uniq(state.unread.concat(json.posts));
+    } else {
+      let idx = json.posts.map((val) => {
+        return _.findIndex(state.unread, val);
+      });
+      _.pullAt(state.unread, idx);
+    }
   }
 }