notifications: show toggle button on list if notifications disabled

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;
 }

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>

src/components/notifications/NotificationSettingsForm/styles.module.scss

@@ -5,7 +5,3 @@
   grid-auto-flow: row;
   row-gap: $gap;
 }
-
-.row {
-  font: $font_14_regular;
-}

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}>

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 {

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,
   };
 };

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 };
 };

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>,
 };