perf: improve application toggle flow (#8302)

* perf: improve application toggle flow

* Reverses logic for enabled apps

---------

Co-authored-by: zomars <[email protected]>

Author: anonrig

packages/features/apps/AdminAppsList.tsx

@@ -104,7 +104,7 @@ const IntegrationContainer = ({
                 } else if (app.keys) {
                   showKeyModal(true);
                 } else {
-                  enableAppMutation.mutate({ slug: app.slug, enabled: app.enabled });
+                  enableAppMutation.mutate({ slug: app.slug, enabled: !app.enabled });
                 }
               }}
             />
@@ -117,7 +117,7 @@ const IntegrationContainer = ({
           title={t("disable_app")}
           variety="danger"
           onConfirm={() => {
-            enableAppMutation.mutate({ slug: app.slug, enabled: app.enabled });
+            enableAppMutation.mutate({ slug: app.slug, enabled: !app.enabled });
           }}>
           {t("disable_app_description")}
         </ConfirmationDialogContent>

packages/trpc/server/routers/viewer/apps.tsx

@@ -99,6 +99,7 @@ export const appsRouter = router({
     )
     .mutation(async ({ ctx, input }) => {
       const { prisma } = ctx;
+      const { enabled } = input;
 
       // Get app name from metadata
       const localApps = getLocalAppMetadata();
@@ -112,7 +113,7 @@ export const appsRouter = router({
           slug: input.slug,
         },
         update: {
-          enabled: !input.enabled,
+          enabled,
           dirName: appMetadata?.dirName || appMetadata?.slug || "",
         },
         create: {
@@ -123,12 +124,14 @@ export const appsRouter = router({
             ([appMetadata?.category] as AppCategories[]) ||
             undefined,
           keys: undefined,
-          enabled: !input.enabled,
+          enabled,
         },
       });
 
       // If disabling an app then we need to alert users based on the app type
-      if (input.enabled) {
+      if (!enabled) {
+        const translations = new Map();
+
         if (app.categories.some((category) => ["calendar", "video"].includes(category))) {
           // Find all users with the app credentials
           const appCredentials = await prisma.credential.findMany({
@@ -145,18 +148,26 @@ export const appsRouter = router({
             },
           });
 
+          // TODO: This should be done async probably using a queue.
           Promise.all(
             appCredentials.map(async (credential) => {
-              const t = await getTranslation(credential.user?.locale || "en", "common");
-
-              if (credential.user?.email) {
-                await sendDisabledAppEmail({
-                  email: credential.user.email,
-                  appName: appMetadata?.name || app.slug,
-                  appType: app.categories,
-                  t,
-                });
+              // No need to continue if credential does not have a user
+              if (!credential.user || !credential.user.email) return;
+
+              const locale = credential.user.locale ?? "en";
+              let t = translations.get(locale);
+
+              if (!t) {
+                t = await getTranslation(locale, "common");
+                translations.set(locale, t);
               }
+
+              await sendDisabledAppEmail({
+                email: credential.user.email,
+                appName: appMetadata?.name || app.slug,
+                appType: app.categories,
+                t,
+              });
             })
           );
         } else {
@@ -180,8 +191,11 @@ export const appsRouter = router({
             },
           });
 
+          // TODO: This should be done async probably using a queue.
           Promise.all(
             eventTypesWithApp.map(async (eventType) => {
+              // TODO: This update query can be removed by merging it with
+              // the previous `findMany` query, if that query returns certain values.
               await prisma.eventType.update({
                 where: {
                   id: eventType.id,
@@ -202,18 +216,26 @@ export const appsRouter = router({
                 },
               });
 
-              eventType.users.map(async (user) => {
-                const t = await getTranslation(user.locale || "en", "common");
-
-                await sendDisabledAppEmail({
-                  email: user.email,
-                  appName: appMetadata?.name || app.slug,
-                  appType: app.categories,
-                  t,
-                  title: eventType.title,
-                  eventTypeId: eventType.id,
-                });
-              });
+              return Promise.all(
+                eventType.users.map(async (user) => {
+                  const locale = user.locale ?? "en";
+                  let t = translations.get(locale);
+
+                  if (!t) {
+                    t = await getTranslation(locale, "common");
+                    translations.set(locale, t);
+                  }
+
+                  await sendDisabledAppEmail({
+                    email: user.email,
+                    appName: appMetadata?.name || app.slug,
+                    appType: app.categories,
+                    t,
+                    title: eventType.title,
+                    eventTypeId: eventType.id,
+                  });
+                })
+              );
             })
           );
         }