Added unread symbol for Spaces, DMs and Home (#82)

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './DrawerBreadcrumb.scss';
 
@@ -6,51 +6,108 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { selectSpace } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 import Button from '../../atoms/button/Button';
 import ScrollView from '../../atoms/scroll/ScrollView';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
 
 import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
 
 function DrawerBreadcrumb({ spaceId }) {
+  const [, forceUpdate] = useState({});
   const scrollRef = useRef(null);
+  const { roomList, notifications } = initMatrix;
   const mx = initMatrix.matrixClient;
   const spacePath = navigation.selectedSpacePath;
 
+  function onNotiChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    if (navigation.selectedSpacePath.includes(roomId)) {
+      forceUpdate({});
+    }
+    if (navigation.selectedSpacePath[0] === cons.tabs.HOME) {
+      if (!roomList.isOrphan(roomId)) return;
+      if (roomList.directs.has(roomId)) return;
+      forceUpdate({});
+    }
+  }
+
   useEffect(() => {
     requestAnimationFrame(() => {
       if (scrollRef?.current === null) return;
       scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
     });
+    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+    return () => {
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+    };
   }, [spaceId]);
 
   if (spacePath.length === 1) return null;
 
+  function getHomeNotiExcept(childId) {
+    const orphans = roomList.getOrphans();
+    const childIndex = orphans.indexOf(childId);
+    if (childId !== -1) orphans.splice(childIndex, 1);
+
+    let noti = null;
+
+    orphans.forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+
+  function getNotiExcept(roomId, childId) {
+    if (!notifications.hasNoti(roomId)) return null;
+
+    const noti = notifications.getNoti(roomId);
+    if (!notifications.hasNoti(childId)) return noti;
+    if (noti.from === null) return noti;
+    if (noti.from.has(childId) && noti.from.size === 1) return null;
+
+    const childNoti = notifications.getNoti(childId);
+
+    return {
+      total: noti.total - childNoti.total,
+      highlight: noti.highlight - childNoti.highlight,
+    };
+  }
+
   return (
     <div className="breadcrumb__wrapper">
       <ScrollView ref={scrollRef} horizontal vertical={false} invisible>
         <div className="breadcrumb">
           {
             spacePath.map((id, index) => {
-              if (index === 0) {
-                return (
-                  <Button key={id} onClick={() => selectSpace(id)}>
-                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
-                  </Button>
-                );
-              }
+              const noti = (id !== cons.tabs.HOME && index < spacePath.length)
+                ? getNotiExcept(id, (index === spacePath.length - 1) ? null : spacePath[index + 1])
+                : getHomeNotiExcept((index === spacePath.length - 1) ? null : spacePath[index + 1]);
+
               return (
                 <React.Fragment
                   key={id}
                 >
-                  <RawIcon size="extra-small" src={ChevronRightIC} />
+                  { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
                   <Button
                     className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
                     onClick={() => selectSpace(id)}
                   >
-                    <Text variant="b2">{ mx.getRoom(id).name }</Text>
+                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
+                    { noti !== null && (
+                      <NotificationBadge
+                        alert={noti.highlight !== 0}
+                        content={noti.total > 0 ? abbreviateNumber(noti.total) : null}
+                      />
+                    )}
                   </Button>
                 </React.Fragment>
               );