notifications: notification settings page

src/hooks/auth/useOAuth.ts

@@ -97,7 +97,19 @@ export const useOAuth = () => {
   const accounts = useMemo(() => data || [], [data]);
   const refresh = useCallback(() => mutate(), []);
 
+  const hasTelegram = useMemo(
+    () => accounts.some((acc) => acc.provider === 'telegram'),
+    [accounts],
+  );
+
+  const showTelegramModal = useCallback(
+    () => showModal(Dialog.TelegramAttach, {}),
+    [],
+  );
+
   return {
+    hasTelegram,
+    showTelegramModal,
     openOauthWindow,
     loginWithSocial,
     createSocialAccount,

src/hooks/notifications/useNotificationSettings.ts

@@ -7,8 +7,7 @@ import { useAuth } from '../auth/useAuth';
 import { useNotificationSettingsRequest } from './useNotificationSettingsRequest';
 
 export const useNotificationSettings = () => {
-  // TODO: remove isTester
-  const { isUser, isTester } = useAuth();
+  const { isUser } = useAuth();
 
   const {
     error: settingsError,
@@ -18,16 +17,15 @@ export const useNotificationSettings = () => {
     isLoading: isLoadingSettings,
     update,
     refresh,
+    settings,
   } = useNotificationSettingsRequest();
 
-  const enabled =
-    !isLoadingSettings && !settingsError && settingsEnabled && isTester;
+  const enabled = !isLoadingSettings && !settingsError && settingsEnabled;
 
   const hasNew =
     enabled && !!lastDate && (!lastSeen || isAfter(lastDate, lastSeen));
 
-  // TODO: store `indicator` as option and include it here
-  const indicatorEnabled = enabled && true;
+  const indicatorEnabled = enabled && !!settings?.showIndicator;
 
   const markAsRead = useCallback(() => {
     if (
@@ -37,7 +35,7 @@ export const useNotificationSettings = () => {
       return;
     }
 
-    update({ last_seen: lastDate.toISOString() });
+    update({ lastSeen: lastDate.toISOString() });
   }, [update, lastDate, lastSeen]);
 
   return {
@@ -45,7 +43,9 @@ export const useNotificationSettings = () => {
     hasNew,
     indicatorEnabled,
     available: isUser,
+    settings,
     markAsRead,
     refresh,
+    update,
   };
 };

src/hooks/notifications/useNotificationSettingsForm.ts

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+
+import { FormikConfig, useFormik } from 'formik';
+import { Asserts, boolean, object } from 'yup';
+
+import { showErrorToast } from '~/utils/errors/showToast';
+
+import { useFormAutoSubmit } from '../useFormAutosubmit';
+
+const validationSchema = object({
+  enabled: boolean().default(false),
+  flow: boolean().default(false),
+  comments: boolean().default(false),
+  sendTelegram: boolean().default(false),
+  showIndicator: boolean().default(false),
+});
+
+type Values = Asserts<typeof validationSchema>;
+
+export const useNotificationSettingsForm = (
+  initialValues: Values,
+  submit: (val: Values) => void,
+) => {
+  const onSubmit = useCallback<FormikConfig<Values>['onSubmit']>(
+    async (values, { setSubmitting }) => {
+      try {
+        await submit(values);
+      } catch (error) {
+        showErrorToast(error);
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [submit],
+  );
+
+  const formik = useFormik<Values>({
+    initialValues,
+    validationSchema,
+    onSubmit,
+  });
+
+  useFormAutoSubmit(formik.values, formik.handleSubmit);
+
+  return formik;
+};

src/hooks/notifications/useNotificationSettingsRequest.ts

@@ -7,8 +7,8 @@ import {
   apiGetNotificationSettings,
   apiUpdateNotificationSettings,
 } from '~/api/notifications/settings';
-import { ApiUpdateNotificationSettingsRequest } from '~/api/notifications/types';
 import { API } from '~/constants/api';
+import { NotificationSettings } from '~/types/notifications';
 import { getErrorMessage } from '~/utils/errors/getErrorMessage';
 import { showErrorToast } from '~/utils/errors/showToast';
 
@@ -28,12 +28,12 @@ export const useNotificationSettingsRequest = () => {
     mutate,
   } = useSWR(
     isUser ? API.NOTIFICATIONS.SETTINGS : null,
-    async () => apiGetNotificationSettings(),
+    apiGetNotificationSettings,
     { refreshInterval },
   );
 
   const update = useCallback(
-    async (settings: ApiUpdateNotificationSettingsRequest) => {
+    async (settings: Partial<NotificationSettings>) => {
       if (!data) {
         return;
       }
@@ -69,14 +69,15 @@ export const useNotificationSettingsRequest = () => {
     isLoading,
     error,
     lastSeen:
-      data?.last_seen && isValid(parseISO(data.last_seen))
-        ? parseISO(data?.last_seen)
+      data?.lastSeen && isValid(parseISO(data.lastSeen))
+        ? parseISO(data?.lastSeen)
         : undefined,
     lastDate:
-      data?.last_date && isValid(parseISO(data.last_date))
-        ? parseISO(data?.last_date)
+      data?.lastDate && isValid(parseISO(data.lastDate))
+        ? parseISO(data?.lastDate)
         : undefined,
     enabled: !!data?.enabled && (data.flow || data.comments),
+    settings: data,
     refresh,
     update,
     updateError,

src/hooks/useFormAutosubmit.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+export const useFormAutoSubmit = <T>(
+  values: T,
+  onSubmit: () => void,
+  delay = 1000,
+) => {
+  const prevValue = useRef<T>();
+
+  useEffect(() => {
+    if (!prevValue.current) {
+      prevValue.current = values;
+      return;
+    }
+
+    const timeout = setTimeout(onSubmit, delay);
+
+    return () => clearTimeout(timeout);
+  }, [values]);
+};