From 14bf5be65f29c296fcd0a6f75b217dbf32009f5e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 16 Mar 2023 14:22:52 +0600
Subject: [PATCH] notifications: show toggle button on list if notifications
 disabled

---
 .../input/InputRow/styles.module.scss         |  1 +
 .../NotificationSettingsForm/index.tsx        | 23 ++++---------------
 .../styles.module.scss                        |  4 ----
 .../notifications/NotificationList/index.tsx  | 22 ++++++++++++++++--
 .../NotificationList/styles.module.scss       | 15 ++++++++++++
 .../notifications/useNotificationSettings.ts  |  6 +++++
 .../notifications/useNotificationsList.ts     | 11 ++++-----
 src/utils/providers/NotificationProvider.tsx  |  1 +
 8 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/components/input/InputRow/styles.module.scss b/src/components/input/InputRow/styles.module.scss
index 5de8b9d1..8f341d7f 100644
--- a/src/components/input/InputRow/styles.module.scss
+++ b/src/components/input/InputRow/styles.module.scss
@@ -5,4 +5,5 @@
   grid-template-columns: 1fr auto;
   row-gap: $gap;
   align-items: center;
+  font: $font_14_medium;
 }
diff --git a/src/components/notifications/NotificationSettingsForm/index.tsx b/src/components/notifications/NotificationSettingsForm/index.tsx
index 9abebdc5..c9387ad4 100644
--- a/src/components/notifications/NotificationSettingsForm/index.tsx
+++ b/src/components/notifications/NotificationSettingsForm/index.tsx
@@ -51,26 +51,18 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
   return (
     <Group>
       <Card>
-        <InputRow className={styles.row} input={toggle('enabled')}>
-          Получать уведомления
-        </InputRow>
+        <InputRow input={toggle('enabled')}>Получать уведомления</InputRow>
       </Card>
 
       <div />
 
       <Zone title="Типы уведомлений">
         <Group>
-          <InputRow
-            className={styles.row}
-            input={toggle('flow', !values.enabled)}
-          >
+          <InputRow input={toggle('flow', !values.enabled)}>
             Новые посты
           </InputRow>
 
-          <InputRow
-            className={styles.row}
-            input={toggle('comments', !values.enabled)}
-          >
+          <InputRow input={toggle('comments', !values.enabled)}>
             Комментарии
           </InputRow>
         </Group>
@@ -80,16 +72,11 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
 
       <Zone title="Способы доставки">
         <Group>
-          <InputRow
-            className={styles.row}
-            input={toggle('showIndicator', !values.enabled)}
-          >
+          <InputRow input={toggle('showIndicator', !values.enabled)}>
             На иконке профиля
           </InputRow>
 
-          <InputRow className={styles.row} input={telegramInput}>
-            Телеграм
-          </InputRow>
+          <InputRow input={telegramInput}>Телеграм</InputRow>
         </Group>
       </Zone>
     </Group>
diff --git a/src/components/notifications/NotificationSettingsForm/styles.module.scss b/src/components/notifications/NotificationSettingsForm/styles.module.scss
index c62e1dc5..4aa76416 100644
--- a/src/components/notifications/NotificationSettingsForm/styles.module.scss
+++ b/src/components/notifications/NotificationSettingsForm/styles.module.scss
@@ -5,7 +5,3 @@
   grid-auto-flow: row;
   row-gap: $gap;
 }
-
-.row {
-  font: $font_14_regular;
-}
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
index b086f87b..60f1ec4d 100644
--- a/src/containers/notifications/NotificationList/index.tsx
+++ b/src/containers/notifications/NotificationList/index.tsx
@@ -1,5 +1,9 @@
 import { FC, useEffect } from 'react';
 
+import classNames from 'classnames';
+
+import { Button } from '~/components/input/Button';
+import { InputRow } from '~/components/input/InputRow';
 import { LoaderScreen } from '~/components/input/LoaderScreen';
 import { NotificationComment } from '~/components/notifications/NotificationComment';
 import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
@@ -11,6 +15,7 @@ interface NotificationListProps {}
 
 const NotificationList: FC<NotificationListProps> = () => {
   const { isLoading, items } = useNotificationsList();
+  const { enabled, toggleEnabled } = useNotifications();
   const { markAsRead } = useNotifications();
 
   useEffect(() => {
@@ -23,8 +28,21 @@ const NotificationList: FC<NotificationListProps> = () => {
 
   return (
     <div className={styles.grid}>
-      {/* <div className={styles.head}>HEAD</div> */}
-      <div className={styles.list}>
+      {!enabled && (
+        <div className={styles.head}>
+          <InputRow
+            input={
+              <Button size="small" onClick={toggleEnabled}>
+                Включить
+              </Button>
+            }
+          >
+            Уведомления выключены
+          </InputRow>
+        </div>
+      )}
+
+      <div className={classNames(styles.list, { [styles.inactive]: !enabled })}>
         <div className={styles.items}>
           {items?.map((item) => (
             <div className={styles.item} key={item.created_at}>
diff --git a/src/containers/notifications/NotificationList/styles.module.scss b/src/containers/notifications/NotificationList/styles.module.scss
index 594c5406..f2f9fbc1 100644
--- a/src/containers/notifications/NotificationList/styles.module.scss
+++ b/src/containers/notifications/NotificationList/styles.module.scss
@@ -23,6 +23,21 @@
   flex: 1 1;
   overflow: auto;
   width: 100%;
+  position: relative;
+
+  &.inactive {
+    opacity: 0.3;
+    overflow: hidden;
+
+    &::after {
+      content: ' ';
+      inset: 0;
+      position: absolute;
+      background: linear-gradient(transparent, $content_bg_backdrop);
+      pointer-events: none;
+      touch-action: none;
+    }
+  }
 }
 
 .items {
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index aa65118e..356db9f8 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -38,6 +38,11 @@ export const useNotificationSettings = () => {
     update({ lastSeen: lastDate.toISOString() });
   }, [update, lastDate, lastSeen]);
 
+  const toggleEnabled = useCallback(
+    () => update({ enabled: !settings?.enabled }),
+    [update, settings],
+  );
+
   return {
     enabled,
     hasNew,
@@ -48,5 +53,6 @@ export const useNotificationSettings = () => {
     refresh,
     update,
     loading: isLoading,
+    toggleEnabled,
   };
 };
diff --git a/src/hooks/notifications/useNotificationsList.ts b/src/hooks/notifications/useNotificationsList.ts
index 1f3cfd78..c690f0c3 100644
--- a/src/hooks/notifications/useNotificationsList.ts
+++ b/src/hooks/notifications/useNotificationsList.ts
@@ -8,13 +8,10 @@ import { useAuth } from '../auth/useAuth';
 export const useNotificationsList = () => {
   const { isUser } = useAuth();
 
-  const {
-    data,
-    isValidating: isLoading,
-    error,
-  } = useSWR(isUser ? API.NOTIFICATIONS.LIST : null, async () =>
-    apiGetNotifications(),
+  const { data, isValidating, error } = useSWR(
+    isUser ? API.NOTIFICATIONS.LIST : null,
+    async () => apiGetNotifications(),
   );
 
-  return { isLoading, error, ...data };
+  return { isLoading: isValidating && !data, error, ...data };
 };
diff --git a/src/utils/providers/NotificationProvider.tsx b/src/utils/providers/NotificationProvider.tsx
index db4fe8ad..553be56e 100644
--- a/src/utils/providers/NotificationProvider.tsx
+++ b/src/utils/providers/NotificationProvider.tsx
@@ -11,6 +11,7 @@ const defaultValue = {
   enabled: false,
   hasNew: false,
   indicatorEnabled: false,
+  toggleEnabled: () => {},
   markAsRead: () => {},
   refresh: () => Promise.resolve() as Promise<unknown>,
 };