From 5caf5fa00d5fb9f2031cd51f469b422e393e8c52 Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Tue, 11 Feb 2020 16:47:00 +0100
Subject: [PATCH 1/5] link fe: display unread counts for public channels

Was previously only displaying for the private channel.
---
 pkg/interface/link/src/js/components/lib/channel-sidebar.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pkg/interface/link/src/js/components/lib/channel-sidebar.js b/pkg/interface/link/src/js/components/lib/channel-sidebar.js
index a845abd90..b7a75d104 100644
--- a/pkg/interface/link/src/js/components/lib/channel-sidebar.js
+++ b/pkg/interface/link/src/js/components/lib/channel-sidebar.js
@@ -45,6 +45,9 @@ export class ChannelsSidebar extends Component {
 
         let selected = (props.selected === path);
         let linkCount = !!props.links[path] ? props.links[path].totalItems : 0;
+        const unseenCount = !!props.links[path]
+          ? props.links[path].unseenCount
+          : linkCount
 
         return (
           <ChannelsItem
@@ -53,6 +56,7 @@ export class ChannelsSidebar extends Component {
             members={props.paths[path]}
             selected={selected}
             linkCount={linkCount}
+            unseenCount={unseenCount}
             name={name}/>
         )
       });

From 94feb5bf2e97be6c65727fc01cd3c987c616ef88 Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Tue, 11 Feb 2020 16:50:42 +0100
Subject: [PATCH 2/5] link fe: ensure item and page counts

Getting updates for things we hadn't gotten initial data on would leave
us without any counters. This defaults them to zero, if we don't have
any yet.
---
 pkg/interface/link/src/js/reducers/link-update.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/link/src/js/reducers/link-update.js b/pkg/interface/link/src/js/reducers/link-update.js
index d183e8457..3c90cc31c 100644
--- a/pkg/interface/link/src/js/reducers/link-update.js
+++ b/pkg/interface/link/src/js/reducers/link-update.js
@@ -76,7 +76,7 @@ export class LinkUpdateReducer {
         data.pages, state.links[path]
       );
       state.links[path].unseenCount =
-        state.links[path].unseenCount + data.pages.length;
+        (state.links[path].unseenCount || 0) + data.pages.length;
     }
   }
 
@@ -160,7 +160,14 @@ export class LinkUpdateReducer {
 
 //
 
-  _addNewItems(items, pages = {local: {}}, page = 0) {
+  _addNewItems(items, pages, page = 0) {
+    if (!pages) {
+      pages = {
+        local: {},
+        totalPages: 0,
+        totalItems: 0
+      };
+    }
     const i = page;
     if (!pages[i]) {
       pages[i] = [];

From e801316368ac5dd13f2e7ab0f3eaab56863fce7e Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Tue, 11 Feb 2020 17:16:07 +0100
Subject: [PATCH 3/5] link fe: display correct member counts

We were passing in a contacts object, which may not always contain all
group members. We now pass in a groups object (set of ships) instead,
and derive contributor count from that.
---
 .../link/src/js/components/lib/channel-sidebar.js         | 8 ++++----
 pkg/interface/link/src/js/components/lib/channels-item.js | 6 ++++--
 pkg/interface/link/src/js/components/root.js              | 7 ++++---
 pkg/interface/link/src/js/components/skeleton.js          | 2 +-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/link/src/js/components/lib/channel-sidebar.js b/pkg/interface/link/src/js/components/lib/channel-sidebar.js
index b7a75d104..aa1d72515 100644
--- a/pkg/interface/link/src/js/components/lib/channel-sidebar.js
+++ b/pkg/interface/link/src/js/components/lib/channel-sidebar.js
@@ -10,7 +10,7 @@ export class ChannelsSidebar extends Component {
     const { props, state } = this;
 
     let privateChannel =
-      Object.keys(props.paths)
+      Object.keys(props.groups)
       .filter((path) => {
         return (path === "/~/default")
       })
@@ -25,7 +25,7 @@ export class ChannelsSidebar extends Component {
           <ChannelsItem
             key={path}
             link={path}
-            members={props.paths[path]}
+            memberList={props.groups[path]}
             selected={selected}
             linkCount={linkCount}
             unseenCount={unseenCount}
@@ -34,7 +34,7 @@ export class ChannelsSidebar extends Component {
       })
 
     let channelItems =
-      Object.keys(props.paths)
+      Object.keys(props.groups)
       .filter((path) => {
         return (!path.startsWith("/~/"))
       })
@@ -53,7 +53,7 @@ export class ChannelsSidebar extends Component {
           <ChannelsItem
             key={path}
             link={path}
-            members={props.paths[path]}
+            memberList={props.groups[path]}
             selected={selected}
             linkCount={linkCount}
             unseenCount={unseenCount}
diff --git a/pkg/interface/link/src/js/components/lib/channels-item.js b/pkg/interface/link/src/js/components/lib/channels-item.js
index 4f230b3d4..9d90b143e 100644
--- a/pkg/interface/link/src/js/components/lib/channels-item.js
+++ b/pkg/interface/link/src/js/components/lib/channels-item.js
@@ -9,8 +9,10 @@ export class ChannelsItem extends Component {
     let selectedClass = (props.selected) 
     ? "bg-gray5 bg-gray1-d b--gray4 b--gray2-d" 
     : "b--transparent";
-    
-    let memberCount = Object.keys(props.members).length;
+
+    let memberCount = props.memberList
+      ? props.memberList.size
+      : 0;
     const unseenCount = props.unseenCount > 0
       ? <span className="green2">{" " + props.unseenCount + " unread"}</span>
       : null;
diff --git a/pkg/interface/link/src/js/components/root.js b/pkg/interface/link/src/js/components/root.js
index a1b424eb5..893621866 100644
--- a/pkg/interface/link/src/js/components/root.js
+++ b/pkg/interface/link/src/js/components/root.js
@@ -31,6 +31,7 @@ export class Root extends Component {
     const { props, state } = this;
 
     let paths = !!state.contacts ? state.contacts : {};
+    const groups = !!state.groups ? state.groups : {};
 
     let links = !!state.links ? state.links : {};
     let comments = !!state.comments ? state.comments : {};
@@ -43,7 +44,7 @@ export class Root extends Component {
             return (
               <Skeleton
                 active="channels"
-                paths={paths}
+                groups={groups}
                 rightPanelHide={true}
                 sidebarShown={true}
                 links={links}>
@@ -84,7 +85,7 @@ export class Root extends Component {
               return (
                 <Skeleton
                   spinner={state.spinner}
-                  paths={paths}
+                  groups={groups}
                   active="links"
                   selected={groupPath}
                   sidebarShown={state.sidebarShown}
@@ -133,7 +134,7 @@ export class Root extends Component {
               return (
                 <Skeleton
                   spinner={state.spinner}
-                  paths={paths}
+                  groups={groups}
                   active="links"
                   selected={groupPath}
                   sidebarShown={state.sidebarShown}
diff --git a/pkg/interface/link/src/js/components/skeleton.js b/pkg/interface/link/src/js/components/skeleton.js
index e2eae620b..99a081058 100644
--- a/pkg/interface/link/src/js/components/skeleton.js
+++ b/pkg/interface/link/src/js/components/skeleton.js
@@ -27,7 +27,7 @@ export class Skeleton extends Component {
         <div className={`cf w-100 h-100 flex ` + popoutBorder}>
         <ChannelsSidebar
             popout={popout}
-            paths={this.props.paths} 
+            groups={this.props.groups}
             active={this.props.active}
             selected={this.props.selected}
             sidebarShown={this.props.sidebarShown}

From 8d7d1af3aa0d0c4c4218773ae2fbb0c3662d43d1 Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Tue, 11 Feb 2020 17:39:03 +0100
Subject: [PATCH 4/5] link fe: rename members -> contacts and refactor

Renames the somewhat ambiguous "members" property into "contacts", to
more clearly indicate the source/nature of the data within. (Avoid
confusion with "members of a group", which is contained in groups
instead.)

Also refactors the retrieving of appropriately-defaulted contact values
into a utility function.
---
 .../link/src/js/components/lib/comments.js    | 16 +++++---------
 pkg/interface/link/src/js/components/link.js  |  5 +++--
 .../link/src/js/components/links-list.js      | 21 ++-----------------
 pkg/interface/link/src/js/components/root.js  | 10 ++++-----
 pkg/interface/link/src/js/lib/util.js         | 13 ++++++++++++
 5 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/pkg/interface/link/src/js/components/lib/comments.js b/pkg/interface/link/src/js/components/lib/comments.js
index bd80497e8..c76a706b3 100644
--- a/pkg/interface/link/src/js/components/lib/comments.js
+++ b/pkg/interface/link/src/js/components/lib/comments.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { CommentItem } from './comment-item';
 import { CommentsPagination } from './comments-pagination';
 
-import { uxToHex } from '../../lib/util';
+import { getContactDetails } from '../../lib/util';
 import { api } from '../../api';
 
 export class Comments extends Component {
@@ -48,20 +48,14 @@ export class Comments extends Component {
       let commentObj = commentsPage[entry]
       let { ship, time, udon } = commentObj;
 
-      let members = !!props.members
-      ? props.members
-      : {};
+      let contacts = !!props.contacts
+        ? props.contacts
+        : {};
 
-      let nickname = !!members[ship]
-      ? members[ship].nickname
-      : "";
+      const {nickname, color} = getContactDetails(contacts[ship]);
 
       let nameClass = nickname ? "inter" : "mono";
 
-      let color = !!members[ship]
-      ? uxToHex(members[ship].color)
-      : "000000";
-
       return(
         <CommentItem
           key={time}
diff --git a/pkg/interface/link/src/js/components/link.js b/pkg/interface/link/src/js/components/link.js
index f127c912b..6ad9002d6 100644
--- a/pkg/interface/link/src/js/components/link.js
+++ b/pkg/interface/link/src/js/components/link.js
@@ -5,6 +5,7 @@ import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
 import { api } from '../api';
 import { Route, Link } from 'react-router-dom';
 import { Comments } from './lib/comments';
+import { getContactDetails } from '../lib/util';
 
 export class LinkDetail extends Component {
   constructor(props) {
@@ -71,7 +72,7 @@ export class LinkDetail extends Component {
 
     let comments = commentCount + " comment" + (commentCount === 1 ? "" : "s");
 
-    let nickname = !!props.members[ship] ? props.members[ship].nickname : "";
+    const { nickname } = getContactDetails(props.contacts[ship]);
 
     let activeClasses = this.state.comment
       ? "black b--black pointer"
@@ -137,7 +138,7 @@ export class LinkDetail extends Component {
               key={props.groupPath + props.commentPage}
               comments={props.comments}
               commentPage={props.commentPage}
-              members={props.members}
+              contacts={props.contacts}
               popout={props.popout}
               url={props.url}
               linkPage={props.page}
diff --git a/pkg/interface/link/src/js/components/links-list.js b/pkg/interface/link/src/js/components/links-list.js
index dfaa09457..21932b81d 100644
--- a/pkg/interface/link/src/js/components/links-list.js
+++ b/pkg/interface/link/src/js/components/links-list.js
@@ -6,8 +6,7 @@ import { LinkItem } from '/components/lib/link-item.js';
 import { LinkSubmit } from '/components/lib/link-submit.js';
 import { Pagination } from '/components/lib/pagination.js';
 
-//TODO look at uxToHex wonky functionality
-import { uxToHex } from '../lib/util';
+import { getContactDetails } from '../lib/util';
 
 //TODO Avatar support once it's in
 export class Links extends Component {
@@ -62,23 +61,7 @@ export class Links extends Component {
         ? props.comments[url].totalItems
         : linksObj[linkIndex].commentCount || 0;
 
-      if (!props.members[ship]) {
-        members[ship] = {'nickname': '', 'avatar': 'TODO', 'color': '0x0'};
-      } else {
-        members = props.members;
-      }
-
-      let color = uxToHex('0x0');
-      let nickname = "";
-
-      // restore this to props.members
-      if (members[ship].nickname) {
-        nickname = members[ship].nickname;
-      }
-
-      if (members[ship].color !== "") {
-        color = uxToHex(members[ship].color);
-      }
+      const {nickname, color} = getContactDetails(props.contacts[ship]);
 
       return (
         <LinkItem
diff --git a/pkg/interface/link/src/js/components/root.js b/pkg/interface/link/src/js/components/root.js
index 893621866..7ad790833 100644
--- a/pkg/interface/link/src/js/components/root.js
+++ b/pkg/interface/link/src/js/components/root.js
@@ -30,7 +30,7 @@ export class Root extends Component {
   render() {
     const { props, state } = this;
 
-    let paths = !!state.contacts ? state.contacts : {};
+    let contacts = !!state.contacts ? state.contacts : {};
     const groups = !!state.groups ? state.groups : {};
 
     let links = !!state.links ? state.links : {};
@@ -64,7 +64,7 @@ export class Root extends Component {
 
               let groupPath =
               `/${props.match.params.ship}/${props.match.params.channel}`;
-              let groupMembers = paths[groupPath] || {};
+              let contactDetails = contacts[groupPath] || {};
 
               let page = props.match.params.page || 0;
 
@@ -94,7 +94,7 @@ export class Root extends Component {
                   links={links}>
                   <Links
                   {...props}
-                  members={groupMembers}
+                  contacts={contactDetails}
                   links={channelLinks}
                   comments={channelComments}
                   seen={channelSeen}
@@ -114,7 +114,7 @@ export class Root extends Component {
 
               let popout = props.match.url.includes("/popout/");
 
-              let groupMembers = paths[groupPath] || {};
+              let contactDetails = contacts[groupPath] || {};
 
               let index = props.match.params.index || 0;
               let page = props.match.params.page || 0;
@@ -146,7 +146,7 @@ export class Root extends Component {
                   page={page}
                   url={url}
                   linkIndex={index}
-                  members={groupMembers}
+                  contacts={contactDetails}
                   groupPath={groupPath}
                   popout={popout}
                   sidebarShown={state.sidebarShown}
diff --git a/pkg/interface/link/src/js/lib/util.js b/pkg/interface/link/src/js/lib/util.js
index 5ca04c8d1..a6420d6f2 100644
--- a/pkg/interface/link/src/js/lib/util.js
+++ b/pkg/interface/link/src/js/lib/util.js
@@ -14,6 +14,17 @@ export function uuid() {
   return str.slice(0,-1);
 }
 
+export function getContactDetails(contact) {
+  contact = contact || {
+    'nickname': '',
+    'avatar': 'TODO',
+    'color': '0x0'
+  };
+  const nickname = contact.nickname || '';
+  const color = uxToHex(contact.color || '0x0');
+  return {nickname, color};
+}
+
 // encodes string into base64url,
 // by encoding into base64 and replacing non-url-safe characters.
 //
@@ -117,6 +128,8 @@ export function deSig(ship) {
   return ship.replace('~', '');
 }
 
+//TODO look at uxToHex wonky functionality
+//TODO what does "wonky functionality" refer to?
 export function uxToHex(ux) {
   let value = ux.substr(2).replace('.', '').padStart(6, '0');
   return value;

From 9a29e72560158aa928058e90339d82a26d9553cc Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Tue, 11 Feb 2020 17:41:32 +0100
Subject: [PATCH 5/5] link fe: prefix ship names in comments with sig

---
 pkg/interface/link/src/js/components/lib/comment-item.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/link/src/js/components/lib/comment-item.js b/pkg/interface/link/src/js/components/lib/comment-item.js
index d2d8fa61c..65c5b4ee3 100644
--- a/pkg/interface/link/src/js/components/lib/comment-item.js
+++ b/pkg/interface/link/src/js/components/lib/comment-item.js
@@ -41,7 +41,7 @@ export class CommentItem extends Component {
           />
           <p className="gray2 f9 flex items-center ml2">
             <span className={"black white-d " + props.nameClass}>
-            {((props.nickname) ? props.nickname : props.ship)}
+            {props.nickname ? props.nickname : '~'+props.ship}
             </span>
             <span className="ml2">
               {this.state.timeSinceComment}