interface: fix unread counts on tiles

pkg/interface/src/logic/lib/hark.ts

@@ -13,6 +13,7 @@ import _ from 'lodash';
 import f from 'lodash/fp';
 import { pluralize } from './util';
 import useMetadataState from '../state/metadata';
+import { emptyHarkStats } from '../state/hark';
 
 export function getLastSeen(
   unreads: Unreads,
@@ -28,13 +29,16 @@ export function getLastSeen(
   );
 }
 
+export function getHarkStats(unreads: Unreads, path: string) {
+  return unreads?.[path] ?? emptyHarkStats();
+}
+
 export function getUnreadCount(
   unreads: Unreads,
-  path: string,
-  index: string
+  path: string
 ): number {
-  const graphUnreads = unreads.graph?.[path]?.[index]?.unreads ?? 0;
-  return typeof graphUnreads === 'number' ? graphUnreads : graphUnreads.size;
+  const { count, each } = getHarkStats(unreads, path);
+  return count + each.length;
 }
 
 export function getNotificationCount(unreads: Unreads, path: string): number {

pkg/interface/src/logic/state/hark.ts

@@ -121,7 +121,7 @@ const useHarkState = createState<HarkState>(
   ]
 );
 
-const emptyStats = () => ({
+export const emptyHarkStats = () => ({
       last: 0,
       count: 0,
       each: []
@@ -132,7 +132,7 @@ export function useHarkDm(ship: string) {
     useCallback(
       (s) => {
         const key = `/graph/~${window.ship}/dm-inbox/${patp2dec(ship)}`;
-        return s.unreads[key] || emptyStats();
+        return s.unreads[key] || emptyHarkStats();
       },
       [ship]
     )
@@ -141,15 +141,19 @@ export function useHarkDm(ship: string) {
 
 export function useHarkStat(path: string) {
   return useHarkState(
-    useCallback(s => s.unreads[path] || emptyStats(), [path])
+    useCallback(s => s.unreads[path] || emptyHarkStats(), [path])
   );
 }
 
+export function selHarkGraph(graph: string) {
+  const [,, ship, name] = graph.split('/');
+  const path = `/graph/${ship}/${name}`;
+  return (s: HarkState) => (s.unreads[path] || emptyHarkStats());
+}
+
 export function useHarkGraph(graph: string) {
-  const [, ship, name] = useMemo(() => graph.split('/'), [graph]);
-  return useHarkState(
-    useCallback(s => s.unreads[`/graph/${ship}/${name}`], [ship, name])
-  );
+  const sel = useMemo(() => selHarkGraph(graph), [graph]);
+  return useHarkState(sel);
 }
 
 export function useHarkGraphIndex(graph: string, index: string) {

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -3,18 +3,16 @@ import { Association, Associations, Unreads } from '@urbit/api';
 import f from 'lodash/fp';
 import moment from 'moment';
 import React, { useRef } from 'react';
-import { getNotificationCount, getUnreadCount } from '~/logic/lib/hark';
+import { getNotificationCount } from '~/logic/lib/hark';
 import { TUTORIAL_GROUP, TUTORIAL_GROUP_RESOURCE, TUTORIAL_HOST } from '~/logic/lib/tutorialModal';
 import { alphabeticalOrder } from '~/logic/lib/util';
 import useGroupState from '~/logic/state/group';
-import useHarkState from '~/logic/state/hark';
+import useHarkState, { selHarkGraph } from '~/logic/state/hark';
 import useMetadataState from '~/logic/state/metadata';
 import useSettingsState, { selectCalmState, SettingsState } from '~/logic/state/settings';
 import { useTutorialModal } from '~/views/components/useTutorialModal';
 import Tile from '../components/tiles/tile';
 
-interface GroupsProps {}
-
 const sortGroupsAlph = (a: Association, b: Association) =>
   a.group === TUTORIAL_GROUP_RESOURCE
     ? -1
@@ -22,13 +20,22 @@ const sortGroupsAlph = (a: Association, b: Association) =>
     ? 1
     : alphabeticalOrder(a.metadata.title, b.metadata.title);
 
-const getGraphUnreads = (associations: Associations, unreads: Unreads) => (path: string) =>
-  f.flow(
-    f.pickBy((a: Association) => a.group === path),
-    f.map('resource'),
-    f.map(rid => getUnreadCount(unreads, rid, '/')),
-    f.reduce(f.add, 0)
-  )(associations.graph);
+const getGraphUnreads = (associations: Associations) => {
+  const state = useHarkState.getState();
+  const selUnread = (graph: string) => {
+    const { count, each } = selHarkGraph(graph)(state);
+    const result =  count + each.length;
+    console.log(graph, result);
+    return result;
+  };
+  return (path: string) =>
+    f.flow(
+      f.pickBy((a: Association) => a.group === path),
+      f.map('resource'),
+      f.map(selUnread),
+      f.reduce(f.add, 0)
+    )(associations.graph);
+};
 
 const getGraphNotifications = (associations: Associations, unreads: Unreads) => (path: string) =>
   f.flow(
@@ -38,8 +45,7 @@ const getGraphNotifications = (associations: Associations, unreads: Unreads) =>
     f.reduce(f.add, 0)
   )(associations.graph);
 
-export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
-  const { inbox, ...boxProps } = props;
+export default function Groups(props: Parameters<typeof Box>[0]) {
   const unreads = useHarkState(state => state.unreads);
   const groupState = useGroupState(state => state.groups);
   const associations = useMetadataState(state => state.associations);
@@ -47,7 +53,7 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
   const groups = Object.values(associations?.groups || {})
     .filter(e => e?.group in groupState)
     .sort(sortGroupsAlph);
-  const graphUnreads = getGraphUnreads(associations || {} as Associations, unreads);
+  const graphUnreads = getGraphUnreads(associations || {} as Associations);
   const graphNotifications = getGraphNotifications(associations || {} as Associations, unreads);
 
   return (