notifications: update for new boxing model

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

@@ -26,8 +26,8 @@ export class HarkApi extends BaseApi<StoreState> {
     return this.action('hark-group-hook', 'hark-group-hook-action', action);
   }
 
-  private actOnNotification(frond: string, intTime: BigInteger, index: NotifIndex) {
-    const time = decToUd(intTime.toString());
+  private actOnNotification(frond: string, intTime: BigInteger | undefined, index: NotifIndex) {
+    const time = intTime ? decToUd(intTime.toString()) : null;
     return this.harkAction({
       [frond]: {
         time,
@@ -55,7 +55,7 @@ export class HarkApi extends BaseApi<StoreState> {
   }
 
   async archive(intTime: BigInteger, index: NotifIndex) {
-    const time = decToUd(intTime.toString());
+    const time = intTime ? decToUd(intTime.toString()) : null;
     const action = {
       archive: {
         time,
@@ -66,7 +66,9 @@ export class HarkApi extends BaseApi<StoreState> {
   }
 
   read(time: BigInteger, index: NotifIndex) {
-    return this.actOnNotification('read-note', time, index);
+    return this.harkAction({
+      'read-note': index
+    });
   }
 
   readIndex(index: NotifIndex) {

pkg/interface/src/logic/reducers/hark-update.ts

@@ -72,24 +72,7 @@ export function reduce(data, state) {
 }
 
 function calculateCount(json: any, state: HarkState) {
-  let count = 0;
-  _.forEach(state.unreads.graph, (graphs) => {
-    _.forEach(graphs, (graph) => {
-      if (typeof graph?.notifications === 'object') {
-        count += graph?.notifications.length;
-      } else {
-        count += 0;
-      }
-    });
-  });
-  _.forEach(state.unreads.group, (group) => {
-    if (typeof group?.notifications === 'object') {
-      count += group?.notifications.length;
-    } else {
-      count += 0;
-    }
-  });
-  state.notificationsCount = count;
+  state.notificationsCount = Object.keys(state.unreadNotes).length;
   return state;
 }
 
@@ -369,9 +352,11 @@ const dnd = (json: any, state: HarkState): HarkState => {
 const timebox = (json: any, state: HarkState): HarkState => {
   const data = _.get(json, 'timebox', false);
   if (data) {
-    const time = makePatDa(data.time);
-    if (!data.archive) {
+    if (data.time) {
+      const time = makePatDa(data.time);
       state.notifications = state.notifications.set(time, data.notifications);
+    } else {
+      state.unreadNotes = data.notifications;
     }
   }
   return state;
@@ -466,21 +451,24 @@ function archive(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'archive', false);
   if (data) {
     const { index } = data;
-    removeNotificationFromUnread(state, index, makePatDa(data.time));
-    const time = makePatDa(data.time);
-    const timebox = state.notifications.get(time);
-    if (!timebox) {
-      console.warn('Modifying nonexistent timebox');
-      return state;
-    }
-    const [archived, unarchived] = _.partition(timebox, idxNotif =>
-      notifIdxEqual(index, idxNotif.index)
-    );
-    if(unarchived.length === 0) {
-      console.log('deleting entire timebox');
-      state.notifications = state.notifications.delete(time);
+    if(data.time) {
+      const time = makePatDa(data.time);
+      const timebox = state.notifications.get(time);
+      if (!timebox) {
+        console.warn('Modifying nonexistent timebox');
+        return state;
+      }
+      const [archived, unarchived] = _.partition(timebox, idxNotif =>
+        notifIdxEqual(index, idxNotif.index)
+      );
+      if(unarchived.length === 0) {
+        console.log('deleting entire timebox');
+        state.notifications = state.notifications.delete(time);
+      } else {
+        state.notifications = state.notifications.set(time, unarchived);
+      }
     } else {
-      state.notifications = state.notifications.set(time, unarchived);
+      state.unreadNotes = state.unreadNotes.filter(({ index: idx }) => !notifIdxEqual(idx, index)) 
     }
   }
   return state;

pkg/interface/src/views/apps/notifications/graph.tsx

@@ -280,8 +280,9 @@ export function GraphNotification(props: {
   const groups = useGroupState((state) => state.groups);
 
   const onClick = useCallback(() => {
-    if(!association) {
+    if(dm) {
       history.push(`/~landscape/messages/dm/~${authors[0]}`);
+      return;
     }
     if (
       !(
@@ -300,7 +301,7 @@ export function GraphNotification(props: {
         )
       );
     }
-  }, [api, timebox, index, read]);
+  }, [api, timebox, index, read, history.push, authors, dm]);
 
   const authorsInHeader =
     dm ||

pkg/interface/src/views/apps/notifications/inbox.tsx

@@ -189,7 +189,7 @@ function DaySection({
             api={api}
             notification={not}
             unread={unread}
-            time={date}
+            time={!unread ? date : undefined}
           />
         ))
       )}

pkg/interface/src/views/apps/notifications/notification.tsx

@@ -66,8 +66,9 @@ export function NotificationWrapper(props: {
 
   const isMobile = useLocalState(s => s.mobile);
 
-  const onArchive = useCallback(async () => {
-    if (!(time && notification)) {
+  const onArchive = useCallback(async (e) => {
+    e.stopPropagation();
+    if (!notification) {
       return;
     }
     return api.hark.archive(time, notification.index);
@@ -79,16 +80,8 @@ export function NotificationWrapper(props: {
   const isMuted =
     time && notification && getMuted(notification, groupConfig, graphConfig);
 
-  const onChangeMute = useCallback(async () => {
-    if (!notification) {
-      return;
-    }
-    const func = isMuted ? 'unmute' : 'mute';
-    return api.hark[func](notification);
-  }, [notification, api, isMuted]);
-
   const onClick = (e: any) => {
-    if (!(time && notification) || read) {
+    if (!notification || read) {
       return;
     }
     return api.hark.read(time, notification.index);
@@ -127,9 +120,9 @@ export function NotificationWrapper(props: {
           justifyContent="flex-end"
           opacity={[0, hovering ? 1 : 0]}
         >
-          {time && notification && (
+          {notification && (
             <StatelessAsyncAction
-              name={time.toString()}
+              name=""
               borderRadius={1}
               onClick={onArchive}
               backgroundColor="white"