chore: notification settings

apotdevin · Jan 30, 2022 · ee3f772 · ee3f772
1 parent 6cc227c
commit ee3f772
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 6 deletions.
diff --git a/src/client/pages/settings/index.tsx b/src/client/pages/settings/index.tsx
@@ -11,6 +11,7 @@ import { ChatSettings } from '../../src/views/settings/Chat';
 import { PrivacySettings } from '../../src/views/settings/Privacy';
 import { Security } from '../../src/views/settings/Security';
 import { NetworkInfo } from '../../src/views/home/networkInfo/NetworkInfo';
+import { NotificationSettings } from '../../src/views/settings/Notifications';
 
 export const ButtonRow = styled.div`
   width: auto;
@@ -25,6 +26,7 @@ const SettingsView = () => {
   return (
     <>
       <InterfaceSettings />
+      <NotificationSettings />
       <Security />
       <DashboardSettings />
       <PrivacySettings />

diff --git a/src/client/src/hooks/UseListener.tsx b/src/client/src/hooks/UseListener.tsx
@@ -1,5 +1,5 @@
 import { useApolloClient } from '@apollo/client';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { toast } from 'react-toastify';
 import {
   getNodeLink,
@@ -8,14 +8,12 @@ import {
 } from '../components/generic/helpers';
 import { Separation } from '../components/generic/Styled';
 import { formatSats } from '../utils/helpers';
+import { defaultSettings } from '../views/settings/Notifications';
+import { useLocalStorage } from './UseLocalStorage';
 import { useSocket, useSocketEvent } from './UseSocket';
 
 const refetchTimeMs = 1000 * 1;
 
-const options: { autoClose: false } = {
-  autoClose: false,
-};
-
 const renderToast = (
   title: string,
   content: JSX.Element | null | string | number
@@ -30,6 +28,15 @@ const renderToast = (
 };
 
 export const useListener = (disabled?: boolean) => {
+  const [{ allForwards, autoClose }] = useLocalStorage(
+    'notificationSettings',
+    defaultSettings
+  );
+
+  const options: { autoClose: false } | undefined = useMemo(() => {
+    return autoClose ? undefined : { autoClose: false };
+  }, [autoClose]);
+
   const refetchQueryTimeout: { current: ReturnType<typeof setTimeout> | null } =
     useRef(null);
 
@@ -152,7 +159,7 @@ export const useListener = (disabled?: boolean) => {
 
     if (is_send || is_receive) return;
 
-    if (!is_confirmed) {
+    if (!is_confirmed && allForwards) {
       toast.warn(
         renderToast(
           'Forward Attempt',

diff --git a/src/client/src/views/settings/Notifications.tsx b/src/client/src/views/settings/Notifications.tsx
@@ -0,0 +1,75 @@
+import {
+  MultiButton,
+  SingleButton,
+} from '../../components/buttons/multiButton/MultiButton';
+import {
+  Card,
+  CardWithTitle,
+  SingleLine,
+  SubTitle,
+} from '../../components/generic/Styled';
+import { useLocalStorage } from '../../hooks/UseLocalStorage';
+import styled from 'styled-components';
+
+const NoWrapText = styled.div`
+  white-space: nowrap;
+  font-size: 14px;
+`;
+
+const InputTitle = styled(NoWrapText)``;
+
+export const defaultSettings = {
+  allForwards: false,
+  autoClose: false,
+};
+
+export const NotificationSettings = () => {
+  const [settings, setSettings] = useLocalStorage(
+    'notificationSettings',
+    defaultSettings
+  );
+
+  const { allForwards, autoClose } = settings;
+
+  return (
+    <CardWithTitle>
+      <SubTitle>Notifications</SubTitle>
+      <Card>
+        <SingleLine>
+          <InputTitle>All Forwards</InputTitle>
+          <MultiButton>
+            <SingleButton
+              selected={allForwards}
+              onClick={() => setSettings({ ...settings, allForwards: true })}
+            >
+              Yes
+            </SingleButton>
+            <SingleButton
+              selected={!allForwards}
+              onClick={() => setSettings({ ...settings, allForwards: false })}
+            >
+              No
+            </SingleButton>
+          </MultiButton>
+        </SingleLine>
+        <SingleLine>
+          <InputTitle>Auto Close</InputTitle>
+          <MultiButton>
+            <SingleButton
+              selected={autoClose}
+              onClick={() => setSettings({ ...settings, autoClose: true })}
+            >
+              Yes
+            </SingleButton>
+            <SingleButton
+              selected={!autoClose}
+              onClick={() => setSettings({ ...settings, autoClose: false })}
+            >
+              No
+            </SingleButton>
+          </MultiButton>
+        </SingleLine>
+      </Card>
+    </CardWithTitle>
+  );
+};