feat: PWA Support (#1488)

2026-01-01 12:18:35 -05:00 · 2021-04-25 20:44:12 +09:00
parent e6e5ad221a
commit 28830d4ef8
88 changed files with 2022 additions and 650 deletions
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -7,6 +7,8 @@ import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import { UserSettingsGeneralResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import { Language } from '../../../../../server/lib/settings';
+import { availableLanguages } from '../../../../context/LanguageContext';
+import useLocale from '../../../../hooks/useLocale';
 import useSettings from '../../../../hooks/useSettings';
 import { Permission, UserType, useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
@@ -39,11 +41,13 @@ const messages = defineMessages({
  movierequestlimit: 'Movie Request Limit',
  seriesrequestlimit: 'Series Request Limit',
  enableOverride: 'Enable Override',
+  applanguage: 'Display Language',
 });

 const UserGeneralSettings: React.FC = () => {
  const intl = useIntl();
  const { addToast } = useToasts();
+  const { locale, setLocale } = useLocale();
  const [movieQuotaEnabled, setMovieQuotaEnabled] = useState(false);
  const [tvQuotaEnabled, setTvQuotaEnabled] = useState(false);
  const router = useRouter();
@@ -115,6 +119,7 @@ const UserGeneralSettings: React.FC = () => {
      </div>
      <Formik
        initialValues={{
+          locale,
          displayName: data?.username,
          region: data?.region,
          originalLanguage: data?.originalLanguage,
@@ -136,8 +141,13 @@ const UserGeneralSettings: React.FC = () => {
              movieQuotaDays: movieQuotaEnabled ? values.movieQuotaDays : null,
              tvQuotaLimit: tvQuotaEnabled ? values.tvQuotaLimit : null,
              tvQuotaDays: tvQuotaEnabled ? values.tvQuotaDays : null,
+              locale: values.locale,
            });

+            if (setLocale) {
+              setLocale(values.locale);
+            }
+
            addToast(intl.formatMessage(messages.toastSettingsSuccess), {
              autoDismiss: true,
              appearance: 'success',
@@ -206,6 +216,24 @@ const UserGeneralSettings: React.FC = () => {
                  )}
                </div>
              </div>
+              <div className="form-row">
+                <label htmlFor="locale" className="text-label">
+                  {intl.formatMessage(messages.applanguage)}
+                </label>
+                <div className="form-input">
+                  <div className="form-input-field">
+                    <Field as="select" id="locale" name="locale">
+                      {(Object.keys(
+                        availableLanguages
+                      ) as (keyof typeof availableLanguages)[]).map((key) => (
+                        <option key={key} value={availableLanguages[key].code}>
+                          {availableLanguages[key].display}
+                        </option>
+                      ))}
+                    </Field>
+                  </div>
+                </div>
+              </div>
              <div className="form-row">
                <label htmlFor="displayName" className="text-label">
                  <span>{intl.formatMessage(messages.region)}</span>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
@@ -1,20 +1,17 @@
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
 import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
-import {
-  hasNotificationAgentEnabled,
-  NotificationAgentType,
-} from '../../../../../server/lib/notifications/agenttypes';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
+import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';

 const messages = defineMessages({
  discordsettingssaved: 'Discord notification settings saved successfully!',
@@ -30,18 +27,11 @@ const UserNotificationsDiscord: React.FC = () => {
  const intl = useIntl();
  const { addToast } = useToasts();
  const router = useRouter();
-  const [notificationAgents, setNotificationAgents] = useState(0);
  const { user } = useUser({ id: Number(router.query.userId) });
  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
  );

-  useEffect(() => {
-    setNotificationAgents(
-      data?.notificationAgents ?? NotificationAgentType.EMAIL
-    );
-  }, [data]);
-
  const UserNotificationsDiscordSchema = Yup.object().shape({
    discordId: Yup.string()
      .when('enableDiscord', {
@@ -61,10 +51,7 @@ const UserNotificationsDiscord: React.FC = () => {
  return (
    <Formik
      initialValues={{
-        enableDiscord: hasNotificationAgentEnabled(
-          NotificationAgentType.DISCORD,
-          data?.notificationAgents ?? NotificationAgentType.EMAIL
-        ),
+        enableDiscord: !!data?.notificationTypes.discord,
        discordId: data?.discordId,
      }}
      validationSchema={UserNotificationsDiscordSchema}
@@ -72,11 +59,13 @@ const UserNotificationsDiscord: React.FC = () => {
      onSubmit={async (values) => {
        try {
          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
-            notificationAgents,
            pgpKey: data?.pgpKey,
            discordId: values.discordId,
            telegramChatId: data?.telegramChatId,
            telegramSendSilently: data?.telegramSendSilently,
+            notificationTypes: {
+              discord: values.enableDiscord ? ALL_NOTIFICATIONS : 0,
+            },
          });
          addToast(intl.formatMessage(messages.discordsettingssaved), {
            appearance: 'success',
@@ -92,7 +81,7 @@ const UserNotificationsDiscord: React.FC = () => {
        }
      }}
    >
-      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+      {({ errors, touched, isSubmitting, isValid }) => {
        return (
          <Form className="section">
            {data?.discordEnabled && (
@@ -105,21 +94,6 @@ const UserNotificationsDiscord: React.FC = () => {
                    type="checkbox"
                    id="enableDiscord"
                    name="enableDiscord"
-                    checked={hasNotificationAgentEnabled(
-                      NotificationAgentType.DISCORD,
-                      notificationAgents
-                    )}
-                    onChange={() => {
-                      setNotificationAgents(
-                        hasNotificationAgentEnabled(
-                          NotificationAgentType.DISCORD,
-                          notificationAgents
-                        )
-                          ? notificationAgents - NotificationAgentType.DISCORD
-                          : notificationAgents + NotificationAgentType.DISCORD
-                      );
-                      setFieldValue('enableDiscord', !values.enableDiscord);
-                    }}
                  />
                </div>
              </div>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
@@ -1,21 +1,18 @@
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
 import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
-import {
-  hasNotificationAgentEnabled,
-  NotificationAgentType,
-} from '../../../../../server/lib/notifications/agenttypes';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Badge from '../../../Common/Badge';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
+import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';
 import { OpenPgpLink } from '../../../Settings/Notifications/NotificationsEmail';

 const messages = defineMessages({
@@ -32,18 +29,11 @@ const UserEmailSettings: React.FC = () => {
  const intl = useIntl();
  const { addToast } = useToasts();
  const router = useRouter();
-  const [notificationAgents, setNotificationAgents] = useState(0);
  const { user } = useUser({ id: Number(router.query.userId) });
  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
  );

-  useEffect(() => {
-    setNotificationAgents(
-      data?.notificationAgents ?? NotificationAgentType.EMAIL
-    );
-  }, [data]);
-
  const UserNotificationsEmailSchema = Yup.object().shape({
    pgpKey: Yup.string()
      .nullable()
@@ -60,10 +50,7 @@ const UserEmailSettings: React.FC = () => {
  return (
    <Formik
      initialValues={{
-        enableEmail: hasNotificationAgentEnabled(
-          NotificationAgentType.EMAIL,
-          data?.notificationAgents ?? NotificationAgentType.EMAIL
-        ),
+        enableEmail: !!(data?.notificationTypes.email ?? true),
        pgpKey: data?.pgpKey,
      }}
      validationSchema={UserNotificationsEmailSchema}
@@ -71,11 +58,13 @@ const UserEmailSettings: React.FC = () => {
      onSubmit={async (values) => {
        try {
          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
-            notificationAgents,
            pgpKey: values.pgpKey,
            discordId: data?.discordId,
            telegramChatId: data?.telegramChatId,
            telegramSendSilently: data?.telegramSendSilently,
+            notificationTypes: {
+              email: values.enableEmail ? ALL_NOTIFICATIONS : 0,
+            },
          });
          addToast(intl.formatMessage(messages.emailsettingssaved), {
            appearance: 'success',
@@ -91,7 +80,7 @@ const UserEmailSettings: React.FC = () => {
        }
      }}
    >
-      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+      {({ errors, touched, isSubmitting, isValid }) => {
        return (
          <Form className="section">
            <div className="form-row">
@@ -99,26 +88,7 @@ const UserEmailSettings: React.FC = () => {
                {intl.formatMessage(messages.enableEmail)}
              </label>
              <div className="form-input">
-                <Field
-                  type="checkbox"
-                  id="enableEmail"
-                  name="enableEmail"
-                  checked={hasNotificationAgentEnabled(
-                    NotificationAgentType.EMAIL,
-                    notificationAgents
-                  )}
-                  onChange={() => {
-                    setNotificationAgents(
-                      hasNotificationAgentEnabled(
-                        NotificationAgentType.EMAIL,
-                        notificationAgents
-                      )
-                        ? notificationAgents - NotificationAgentType.EMAIL
-                        : notificationAgents + NotificationAgentType.EMAIL
-                    );
-                    setFieldValue('enableEmail', !values.enableEmail);
-                  }}
-                />
+                <Field type="checkbox" id="enableEmail" name="enableEmail" />
              </div>
            </div>
            <div className="form-row">
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
@@ -1,20 +1,17 @@
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
 import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
-import {
-  hasNotificationAgentEnabled,
-  NotificationAgentType,
-} from '../../../../../server/lib/notifications/agenttypes';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
+import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';

 const messages = defineMessages({
  telegramsettingssaved: 'Telegram notification settings saved successfully!',
@@ -32,18 +29,11 @@ const UserTelegramSettings: React.FC = () => {
  const intl = useIntl();
  const { addToast } = useToasts();
  const router = useRouter();
-  const [notificationAgents, setNotificationAgents] = useState(0);
  const { user } = useUser({ id: Number(router.query.userId) });
  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
  );

-  useEffect(() => {
-    setNotificationAgents(
-      data?.notificationAgents ?? NotificationAgentType.EMAIL
-    );
-  }, [data]);
-
  const UserNotificationsTelegramSchema = Yup.object().shape({
    telegramChatId: Yup.string()
      .when('enableTelegram', {
@@ -66,10 +56,7 @@ const UserTelegramSettings: React.FC = () => {
  return (
    <Formik
      initialValues={{
-        enableTelegram: hasNotificationAgentEnabled(
-          NotificationAgentType.TELEGRAM,
-          data?.notificationAgents ?? NotificationAgentType.EMAIL
-        ),
+        enableTelegram: !!data?.notificationTypes.telegram,
        telegramChatId: data?.telegramChatId,
        telegramSendSilently: data?.telegramSendSilently,
      }}
@@ -78,11 +65,13 @@ const UserTelegramSettings: React.FC = () => {
      onSubmit={async (values) => {
        try {
          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
-            notificationAgents,
            pgpKey: data?.pgpKey,
            discordId: data?.discordId,
            telegramChatId: values.telegramChatId,
            telegramSendSilently: values.telegramSendSilently,
+            notificationTypes: {
+              telegram: values.enableTelegram ? ALL_NOTIFICATIONS : 0,
+            },
          });
          addToast(intl.formatMessage(messages.telegramsettingssaved), {
            appearance: 'success',
@@ -98,7 +87,7 @@ const UserTelegramSettings: React.FC = () => {
        }
      }}
    >
-      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+      {({ errors, touched, isSubmitting, isValid }) => {
        return (
          <Form className="section">
            <div className="form-row">
@@ -110,21 +99,6 @@ const UserTelegramSettings: React.FC = () => {
                  type="checkbox"
                  id="enableTelegram"
                  name="enableTelegram"
-                  checked={hasNotificationAgentEnabled(
-                    NotificationAgentType.TELEGRAM,
-                    notificationAgents
-                  )}
-                  onChange={() => {
-                    setNotificationAgents(
-                      hasNotificationAgentEnabled(
-                        NotificationAgentType.TELEGRAM,
-                        notificationAgents
-                      )
-                        ? notificationAgents - NotificationAgentType.TELEGRAM
-                        : notificationAgents + NotificationAgentType.TELEGRAM
-                    );
-                    setFieldValue('enableTelegram', !values.enableTelegram);
-                  }}
                />
              </div>
            </div>
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
@@ -0,0 +1,102 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';
+
+const messages = defineMessages({
+  webpushsettingssaved: 'Web push notification settings saved successfully!',
+  webpushsettingsfailed: 'Web push notification settings failed to save.',
+  enableWebPush: 'Enable Notifications',
+});
+
+const UserWebPushSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enableWebPush: !!(data?.notificationTypes.webpush ?? true),
+        pgpKey: data?.pgpKey,
+      }}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            discordId: data?.discordId,
+            telegramChatId: data?.telegramChatId,
+            telegramSendSilently: data?.telegramSendSilently,
+            notificationTypes: {
+              webpush: values.enableWebPush ? ALL_NOTIFICATIONS : 0,
+            },
+          });
+          addToast(intl.formatMessage(messages.webpushsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.webpushsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ isSubmitting, isValid }) => {
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="enableEmail" className="checkbox-label">
+                {intl.formatMessage(messages.enableWebPush)}
+              </label>
+              <div className="form-input">
+                <Field
+                  type="checkbox"
+                  id="enableWebPush"
+                  name="enableWebPush"
+                />
+              </div>
+            </div>
+            <div className="actions">
+              <div className="flex justify-end">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(globalMessages.saving)
+                      : intl.formatMessage(globalMessages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default UserWebPushSettings;
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
@@ -1,4 +1,5 @@
 import { AtSymbolIcon } from '@heroicons/react/outline';
+import { CloudIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -17,6 +18,7 @@ const messages = defineMessages({
  notifications: 'Notifications',
  notificationsettings: 'Notification Settings',
  email: 'Email',
+  webpush: 'Web Push',
  toastSettingsSuccess: 'Notification settings saved successfully!',
  toastSettingsFailure: 'Something went wrong while saving settings.',
 });
@@ -65,6 +67,18 @@ const UserNotificationSettings: React.FC = ({ children }) => {
      regex: /\/settings\/notifications\/telegram/,
      hidden: !data?.telegramEnabled || !data?.telegramBotUsername,
    },
+    {
+      text: intl.formatMessage(messages.webpush),
+      content: (
+        <span className="flex items-center">
+          <CloudIcon className="h-4 mr-2" />
+          {intl.formatMessage(messages.webpush)}
+        </span>
+      ),
+      route: '/settings/notifications/webpush',
+      regex: /\/settings\/notifications\/webpush/,
+      hidden: !data?.webPushEnabled,
+    },
  ];

  settingsRoutes.forEach((settingsRoute) => {