feat: add the preview button of notifications in settings

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import useUpdate from 'react-use/lib/useUpdate';
 import styled from 'styled-components';
 import { SettingsKey } from '../../data/settings-key';
+import { Notifications } from '../../util/notifications';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionRadioGroup } from '../basic/SessionRadioGroup';
 import { SpacerLG } from '../basic/Text';
@@ -34,12 +35,6 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
 
   const notificationsAreEnabled = initialItem && initialItem !== NOTIFICATION.OFF;
 
-  const onClickPreview = () => {
-    if (!notificationsAreEnabled) {
-      return;
-    }
-  };
-
   const items = [
     {
       label: window.i18n('nameAndMessage'),
@@ -55,6 +50,23 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
     },
   ];
 
+  const onClickPreview = () => {
+    if (!notificationsAreEnabled) {
+      return;
+    }
+    Notifications.addNotification(
+      {
+        conversationId: `preview-notification-${Date.now()}`,
+        message: items.find(m => m.value === initialItem)?.label || 'Message body',
+        title: window.i18n('notificationPreview'),
+        iconUrl: null,
+        isExpiringMessage: false,
+        messageSentAt: Date.now(),
+      },
+      true
+    );
+  };
+
   return (
     <>
       <SessionToggleWithDescription

ts/util/notifications.ts

@@ -23,7 +23,7 @@ function filter(text?: string) {
 
 export type SessionNotification = {
   conversationId: string;
-  iconUrl: string;
+  iconUrl: string | null;
   isExpiringMessage: boolean;
   message: string;
   messageId?: string;
@@ -70,7 +70,11 @@ function disable() {
   isEnabled = false;
 }
 
-function addNotification(notif: SessionNotification) {
+/**
+ *
+ * @param forceRefresh Should only be set when the user triggers a test notification from the settings
+ */
+function addNotification(notif: SessionNotification, forceRefresh = false) {
   const alreadyThere = currentNotifications.find(
     n => n.conversationId === notif.conversationId && n.messageId === notif.messageId
   );
@@ -79,7 +83,11 @@ function addNotification(notif: SessionNotification) {
     return;
   }
   currentNotifications.push(notif);
-  debouncedUpdate();
+  if (forceRefresh) {
+    update(true);
+  } else {
+    debouncedUpdate();
+  }
 }
 
 function clearByConversationID(convoId: string) {
@@ -101,7 +109,7 @@ function clearByMessageId(messageId: string) {
   }
 }
 
-function update() {
+function update(forceRefresh = false) {
   if (lastNotificationDisplayed) {
     lastNotificationDisplayed.close();
     lastNotificationDisplayed = null;
@@ -115,7 +123,7 @@ function update() {
   const userSetting = getUserSetting();
 
   const status = getStatus({
-    isAppFocused,
+    isAppFocused: forceRefresh ? false : isAppFocused,
     isAudioNotificationEnabled,
     isAudioNotificationSupported: audioNotificationSupported,
     isEnabled,
@@ -209,7 +217,7 @@ function update() {
   window.drawAttention();
   lastNotificationDisplayed = new Notification(title || '', {
     body: window.platform === 'linux' ? filter(message) : message,
-    icon: iconUrl,
+    icon: iconUrl || undefined,
     silent: !status.shouldPlayNotificationSound,
   });
   lastNotificationDisplayed.onclick = () => {