notifications: notification settings page

src/components/input/InputRow/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './styles.module.scss';
+
+interface InputRowProps {
+  className?: string;
+  input?: ReactNode;
+}
+
+const InputRow: FC<InputRowProps> = ({ children, input, className }) => (
+  <div className={classNames(styles.row, className)}>
+    <div>{children}</div>
+    {!!input && <div>{input}</div>}
+  </div>
+);
+
+export { InputRow };

src/components/input/InputRow/styles.module.scss

@@ -0,0 +1,8 @@
+@import 'src/styles/variables';
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  row-gap: $gap;
+  align-items: center;
+}

src/components/input/Toggle/styles.module.scss

@@ -38,6 +38,10 @@
     transition: transform 0.25s, color 0.25s, background-color;
   }
 
+  &:disabled {
+    opacity: 0.5;
+  }
+
   &.active {
     &::after {
       transform: translate(24px, 0);

src/components/notifications/NotificationSettingsForm/index.tsx

@@ -0,0 +1,91 @@
+import React, { FC, useCallback } from 'react';
+
+import { Group } from '~/components/containers/Group';
+import { Zone } from '~/components/containers/Zone';
+import { Button } from '~/components/input/Button';
+import { InputRow } from '~/components/input/InputRow';
+import { Toggle } from '~/components/input/Toggle';
+import { useNotificationSettingsForm } from '~/hooks/notifications/useNotificationSettingsForm';
+import { NotificationSettings } from '~/types/notifications';
+
+import styles from './styles.module.scss';
+
+interface NotificationSettingsFormProps {
+  value: NotificationSettings;
+  onSubmit: (val: Partial<NotificationSettings>) => Promise<unknown>;
+  telegramConnected: boolean;
+  onConnectTelegram: () => void;
+}
+
+const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
+  value,
+  onSubmit,
+  telegramConnected,
+  onConnectTelegram,
+}) => {
+  const { setFieldValue, values } = useNotificationSettingsForm(
+    value,
+    onSubmit,
+  );
+
+  const toggle = useCallback(
+    (key: keyof NotificationSettings, disabled?: boolean) => (
+      <Toggle
+        handler={(val) => setFieldValue(key, val)}
+        value={values[key]}
+        disabled={disabled}
+      />
+    ),
+    [setFieldValue, values],
+  );
+
+  const telegramInput = telegramConnected ? (
+    toggle('sendTelegram', !values.enabled)
+  ) : (
+    <Button size="micro" onClick={onConnectTelegram}>
+      Подключить
+    </Button>
+  );
+
+  return (
+    <Group>
+      <Zone title="Уведомления">
+        <Group>
+          <InputRow className={styles.row} input={toggle('enabled')}>
+            Включены
+          </InputRow>
+          <InputRow
+            className={styles.row}
+            input={toggle('flow', !values.enabled)}
+          >
+            Новые посты
+          </InputRow>
+
+          <InputRow
+            className={styles.row}
+            input={toggle('comments', !values.enabled)}
+          >
+            Комментарии
+          </InputRow>
+        </Group>
+      </Zone>
+
+      <Zone title="Уведомления">
+        <Group>
+          <InputRow
+            className={styles.row}
+            input={toggle('showIndicator', !values.enabled)}
+          >
+            На иконке профиля
+          </InputRow>
+
+          <InputRow className={styles.row} input={telegramInput}>
+            Телеграм
+          </InputRow>
+        </Group>
+      </Zone>
+    </Group>
+  );
+};
+
+export { NotificationSettingsForm };

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

@@ -0,0 +1,11 @@
+@import 'src/styles/variables';
+
+.grid {
+  display: grid;
+  grid-auto-flow: row;
+  row-gap: $gap;
+}
+
+.row {
+  font: $font_14_regular;
+}

src/components/profile/ProfileSidebarNotifications/index.tsx

@@ -1,9 +1,9 @@
 import { VFC } from 'react';
 
+import { Padder } from '~/components/containers/Padder';
 import { useStackContext } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
-
-import { NotificationList } from '../../../containers/notifications/NotificationList/index';
+import { NotificationSettings } from '~/containers/notifications/NotificationSettings';
 
 interface ProfileSidebarNotificationsProps {}
 
@@ -19,7 +19,7 @@ const ProfileSidebarNotifications: VFC<
       title="Уведомления"
       onBackPress={closeAllTabs}
     >
-      <NotificationList />
+      <NotificationSettings />
     </SidebarStackCard>
   );
 };