refactor: organized placement of new button + added comments

overseerr-api.yml

@@ -3652,34 +3652,6 @@ paths:
                     type: array
                     items:
                       $ref: '#/components/schemas/MediaRequest'
-
-  /user/{userId}/pushSubscription:
-    get:
-      summary: Get web push notification settings for a user
-      description: |
-        Returns web push notification settings for a user in a JSON object.
-      tags:
-        - users
-      parameters:
-        - in: path
-          name: userId
-          required: true
-          schema:
-            type: number
-      responses:
-        '200':
-          description: User web push notification settings in JSON
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  endpoint:
-                    type: string
-                  p256dh:
-                    type: string
-                  auth:
-                    type: string
   /user/{userId}/quota:
     get:
       summary: Get quotas for a specific user

server/interfaces/api/userInterfaces.ts

@@ -1,7 +1,6 @@
 import type Media from '@server/entity/Media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { User } from '@server/entity/User';
-import type { UserPushSubscription } from '@server/entity/UserPushSubscription';
 import type { PaginatedResponse } from './common';
 
 export interface UserResultsResponse extends PaginatedResponse {
@@ -29,7 +28,3 @@ export interface UserWatchDataResponse {
   recentlyWatched: Media[];
   playCount: number;
 }
-
-export interface UserPushSubscriptionResponse {
-  result: UserPushSubscription;
-}

server/routes/user/index.ts

@@ -180,30 +180,6 @@ router.post<
   }
 });
 
-router.get<{ id: string }>('/:id/pushSubscription', async (req, res, next) => {
-  try {
-    const userPushSubRepository = getRepository(UserPushSubscription);
-
-    const userSubscription = await userPushSubRepository.findOneOrFail({
-      relations: {
-        user: true,
-      },
-      where: {
-        user: {
-          id: Number(req.params.id),
-        },
-      },
-    });
-
-    console.log({ id: Number(req.params.id), userSubscription });
-
-    return res.status(200).json(userSubscription);
-    // console.log('hello is this owrking');
-  } catch (e) {
-    next({ status: 404, message: 'User subscription not found.' });
-  }
-});
-
 router.get<{ id: string }>('/:id', async (req, res, next) => {
   try {
     const userRepository = getRepository(User);

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx

@@ -7,6 +7,10 @@ import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
+import {
+  CloudArrowDownIcon,
+  CloudArrowUpIcon,
+} from '@heroicons/react/24/solid';
 import type { UserSettingsNotificationsResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
@@ -19,6 +23,8 @@ import useSWR, { mutate } from 'swr';
 const messages = defineMessages({
   webpushsettingssaved: 'Web push notification settings saved successfully!',
   webpushsettingsfailed: 'Web push notification settings failed to save.',
+  enablewebpush: 'Enable web push',
+  disablewebpush: 'Disable web push',
 });
 
 const UserWebPushSettings = () => {
@@ -27,6 +33,7 @@ const UserWebPushSettings = () => {
   const router = useRouter();
   const { user } = useUser({ id: Number(router.query.userId) });
   const { currentSettings } = useSettings();
+  const [webPushEnabled, setWebPushEnabled] = useState(false);
   const {
     data,
     error,
@@ -34,8 +41,9 @@ const UserWebPushSettings = () => {
   } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
-  const [webPushEnabled, setWebPushEnabled] = useState(false);
 
+  // Subscribes to the push manager
+  // Will only add to the database if subscribing for the first time
   const enablePushNotifications = () => {
     if ('serviceWorker' in navigator && user?.id) {
       navigator.serviceWorker
@@ -67,6 +75,7 @@ const UserWebPushSettings = () => {
           }
         })
         .catch(function (error) {
+          // eslint-disable-next-line no-console
           console.log(
             '[SW] Failure subscribing to push manager, error:',
             error
@@ -75,6 +84,7 @@ const UserWebPushSettings = () => {
     }
   };
 
+  // Unsubscribes to the push manager
   const disablePushNotifications = () => {
     if ('serviceWorker' in navigator && user?.id) {
       navigator.serviceWorker.getRegistration('/sw.js').then((registration) => {
@@ -85,6 +95,7 @@ const UserWebPushSettings = () => {
               ?.unsubscribe()
               .then(() => setWebPushEnabled(false))
               .catch(function (error) {
+                // eslint-disable-next-line no-console
                 console.log(
                   '[SW] Failure unsubscribing to push manager, error:',
                   error
@@ -95,6 +106,8 @@ const UserWebPushSettings = () => {
     }
   };
 
+  // Checks our current subscription on page load
+  // Will set the web push state to true if subscribed
   useEffect(() => {
     if ('serviceWorker' in navigator && user?.id) {
       navigator.serviceWorker
@@ -105,6 +118,13 @@ const UserWebPushSettings = () => {
               setWebPushEnabled(true);
             }
           });
+        })
+        .catch(function (error) {
+          // eslint-disable-next-line no-console
+          console.log(
+            '[SW] Failure retrieving push manager subscription, error:',
+            error
+          );
         });
     }
   }, [user?.id]);
@@ -158,9 +178,8 @@ const UserWebPushSettings = () => {
         setFieldTouched,
       }) => {
         return (
-          <>
-            {webPushEnabled ? (
           <Form className="section">
+            {webPushEnabled && (
               <NotificationTypeSelector
                 user={user}
                 currentTypes={values.types}
@@ -174,8 +193,31 @@ const UserWebPushSettings = () => {
                     : undefined
                 }
               />
+            )}
             <div className="actions">
               <div className="flex justify-end">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
+                  <Button
+                    buttonType={`${webPushEnabled ? 'danger' : 'warning'}`}
+                    type="button"
+                    onClick={() =>
+                      webPushEnabled
+                        ? disablePushNotifications()
+                        : enablePushNotifications()
+                    }
+                  >
+                    {webPushEnabled ? (
+                      <CloudArrowDownIcon />
+                    ) : (
+                      <CloudArrowUpIcon />
+                    )}
+                    <span>
+                      {webPushEnabled
+                        ? intl.formatMessage(messages.disablewebpush)
+                        : intl.formatMessage(messages.enablewebpush)}
+                    </span>
+                  </Button>
+                </span>
                 <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
@@ -193,29 +235,6 @@ const UserWebPushSettings = () => {
               </div>
             </div>
           </Form>
-            ) : (
-              <div className="actions">
-                <div className="flex justify-end">
-                  <span className="ml-3 inline-flex rounded-md shadow-sm">
-                    <Button
-                      buttonType="primary"
-                      onClick={() => enablePushNotifications()}
-                    >
-                      <ArrowDownOnSquareIcon />
-                      <span>Enable Web Push</span>
-                    </Button>
-                  </span>
-                </div>
-              </div>
-            )}
-            <Button
-              buttonType="primary"
-              onClick={() => disablePushNotifications()}
-            >
-              <ArrowDownOnSquareIcon />
-              <span>Disable Web Push</span>
-            </Button>
-          </>
         );
       }}
     </Formik>

src/i18n/locale/en.json

@@ -1101,6 +1101,7 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings saved successfully!",
   "components.UserProfile.UserSettings.UserGeneralSettings.user": "User",
   "components.UserProfile.UserSettings.UserGeneralSettings.validationDiscordId": "You must provide a valid Discord user ID",
+  "components.UserProfile.UserSettings.UserNotificationSettings.disablewebpush": "Disable web push",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordId": "User ID",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordIdTip": "The <FindDiscordIdLink>multi-digit ID number</FindDiscordIdLink> associated with your user account",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordsettingsfailed": "Discord notification settings failed to save.",
@@ -1108,6 +1109,7 @@
   "components.UserProfile.UserSettings.UserNotificationSettings.email": "Email",
   "components.UserProfile.UserSettings.UserNotificationSettings.emailsettingsfailed": "Email notification settings failed to save.",
   "components.UserProfile.UserSettings.UserNotificationSettings.emailsettingssaved": "Email notification settings saved successfully!",
+  "components.UserProfile.UserSettings.UserNotificationSettings.enablewebpush": "Enable web push",
   "components.UserProfile.UserSettings.UserNotificationSettings.notifications": "Notifications",
   "components.UserProfile.UserSettings.UserNotificationSettings.notificationsettings": "Notification Settings",
   "components.UserProfile.UserSettings.UserNotificationSettings.pgpPublicKey": "PGP Public Key",