Display notification count bubble based on computed notifications

Author: tanx

src/computed/notification.js

@@ -1,5 +1,5 @@
 import { computed, extendObservable } from 'mobx';
-import { toCaps } from '../helper';
+import { toCaps, formatNumber } from '../helper';
 
 const ComputedNotification = store => {
   extendObservable(store, {
@@ -28,6 +28,9 @@ const ComputedNotification = store => {
       });
       return all;
     }),
+    notificationCountLabel: computed(() =>
+      formatNumber(store.computedNotifications.length)
+    ),
   });
 };
 

src/computed/setting.js

@@ -6,9 +6,6 @@ const ComputedSetting = store => {
   extendObservable(store, {
     selectedUnitLabel: computed(() => getUnitLabel(store.settings.unit)),
     selectedFiatLabel: computed(() => FIATS[store.settings.fiat].display),
-    notificationCountLabel: computed(() =>
-      formatNumber(store.notifications.length)
-    ),
     satUnitLabel: computed(() => getUnitLabel('sat')),
     bitUnitLabel: computed(() => getUnitLabel('bit')),
     btcUnitLabel: computed(() => getUnitLabel('btc')),

test/unit/computed/notification.spec.js

@@ -14,6 +14,7 @@ describe('Computed Notification Unit Tests', () => {
       expect(store.lastNotification, 'to equal', null);
       expect(store.displayNotification, 'to equal', false);
       expect(store.computedNotifications, 'to equal', []);
+      expect(store.notificationCountLabel, 'to equal', '0');
     });
 
     it('should set notification attributes', () => {
@@ -54,6 +55,7 @@ describe('Computed Notification Unit Tests', () => {
           dateTimeLabel: new Date(1528703821406).toLocaleString(),
         },
       ]);
+      expect(store.notificationCountLabel, 'to equal', '2');
     });
   });
 });

test/unit/computed/setting.spec.js

@@ -13,7 +13,6 @@ describe('Computed Settings Unit Tests', () => {
       ComputedSetting(store);
       expect(store.selectedUnitLabel, 'to equal', 'Bitcoin');
       expect(store.selectedFiatLabel, 'to equal', 'US Dollar');
-      expect(store.notificationCountLabel, 'to equal', '0');
       expect(store.satUnitLabel, 'to be ok');
       expect(store.bitUnitLabel, 'to be ok');
       expect(store.btcUnitLabel, 'to be ok');
@@ -31,11 +30,5 @@ describe('Computed Settings Unit Tests', () => {
         /Satoshi {3}\(0[,.]00000001 BTC\)/
       );
     });
-
-    it('should display notification count as a string', () => {
-      store.notifications.push({ type: 'error' });
-      ComputedSetting(store);
-      expect(store.notificationCountLabel, 'to equal', '1');
-    });
   });
 });