From f742bd01d9ad585329cb5037ad5bab5efa3d97f8 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scott@infisical.com>
Date: Thu, 12 Sep 2024 22:47:23 -0700
Subject: [PATCH] refactor to useCallback select instead of queryFn

---
 .../src/hooks/api/secretImports/queries.tsx   | 50 ++++++++++---------
 frontend/src/hooks/api/secrets/queries.tsx    | 41 +++++++--------
 2 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/frontend/src/hooks/api/secretImports/queries.tsx b/frontend/src/hooks/api/secretImports/queries.tsx
index 6e45ea29c..a3136e2a8 100644
--- a/frontend/src/hooks/api/secretImports/queries.tsx
+++ b/frontend/src/hooks/api/secretImports/queries.tsx
@@ -160,30 +160,32 @@ export const useGetImportedSecretsAllEnvs = ({
         projectId,
         path
       }),
-      queryFn: async () => {
-        const data = await fetchImportedSecrets(projectId, env, path).catch(() => []);
-
-        return data.map((el) => ({
-          environment: el.environment,
-          secretPath: el.secretPath,
-          environmentInfo: el.environmentInfo,
-          folderId: el.folderId,
-          secrets: el.secrets.map((encSecret) => {
-            return {
-              id: encSecret.id,
-              env: encSecret.environment,
-              key: encSecret.secretKey,
-              value: encSecret.secretValue,
-              tags: encSecret.tags,
-              comment: encSecret.secretComment,
-              createdAt: encSecret.createdAt,
-              updatedAt: encSecret.updatedAt,
-              version: encSecret.version
-            };
-          })
-        }));
-      },
-      enabled: Boolean(projectId) && Boolean(env)
+      queryFn: () => fetchImportedSecrets(projectId, env, path).catch(() => []),
+      enabled: Boolean(projectId) && Boolean(env),
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      select: useCallback(
+        (data: Awaited<ReturnType<typeof fetchImportedSecrets>>) =>
+          data.map((el) => ({
+            environment: el.environment,
+            secretPath: el.secretPath,
+            environmentInfo: el.environmentInfo,
+            folderId: el.folderId,
+            secrets: el.secrets.map((encSecret) => {
+              return {
+                id: encSecret.id,
+                env: encSecret.environment,
+                key: encSecret.secretKey,
+                value: encSecret.secretValue,
+                tags: encSecret.tags,
+                comment: encSecret.secretComment,
+                createdAt: encSecret.createdAt,
+                updatedAt: encSecret.updatedAt,
+                version: encSecret.version
+              };
+            })
+          })),
+        []
+      )
     }))
   });
 
diff --git a/frontend/src/hooks/api/secrets/queries.tsx b/frontend/src/hooks/api/secrets/queries.tsx
index ebd6f925d..ca26b96ca 100644
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -24,12 +24,6 @@ export const secretKeys = {
   // this is also used in secretSnapshot part
   getProjectSecret: ({ workspaceId, environment, secretPath }: TGetProjectSecretsKey) =>
     [{ workspaceId, environment, secretPath }, "secrets"] as const,
-  getProjectSecretAllEnvironments: ({
-    workspaceId,
-    environment,
-    secretPath
-  }: TGetProjectSecretsKey) =>
-    [...secretKeys.getProjectSecret({ workspaceId, environment, secretPath }), "all"] as const,
   getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"] as const
 };
 
@@ -101,7 +95,7 @@ export const useGetProjectSecrets = ({
 }: TGetProjectSecretsDTO & {
   options?: Omit<
     UseQueryOptions<
-      SecretV3RawSanitized[],
+      SecretV3RawResponse,
       unknown,
       SecretV3RawSanitized[],
       ReturnType<typeof secretKeys.getProjectSecret>
@@ -114,10 +108,7 @@ export const useGetProjectSecrets = ({
     // wait for all values to be available
     enabled: Boolean(workspaceId && environment) && (options?.enabled ?? true),
     queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
-    queryFn: async () => {
-      const resp = await fetchProjectSecrets({ workspaceId, environment, secretPath });
-      return mergePersonalSecrets(resp.secrets);
-    },
+    queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
     onError: (error) => {
       if (axios.isAxiosError(error)) {
         const serverResponse = error.response?.data as { message: string };
@@ -127,7 +118,11 @@ export const useGetProjectSecrets = ({
           text: serverResponse.message
         });
       }
-    }
+    },
+    select: useCallback(
+      (data: Awaited<ReturnType<typeof fetchProjectSecrets>>) => mergePersonalSecrets(data.secrets),
+      []
+    )
   });
 
 export const useGetProjectSecretsAllEnv = ({
@@ -139,7 +134,7 @@ export const useGetProjectSecretsAllEnv = ({
 
   const secrets = useQueries({
     queries: envs.map((environment) => ({
-      queryKey: secretKeys.getProjectSecretAllEnvironments({
+      queryKey: secretKeys.getProjectSecret({
         workspaceId,
         environment,
         secretPath
@@ -159,15 +154,17 @@ export const useGetProjectSecretsAllEnv = ({
           setIsErrorHandled.on();
         }
       },
-      queryFn: async () => {
-        const resp = await fetchProjectSecrets({ workspaceId, environment, secretPath });
-
-        return mergePersonalSecrets(resp.secrets).reduce<Record<string, SecretV3RawSanitized>>(
-          (prev, curr) => ({ ...prev, [curr.key]: curr }),
-          {}
-        );
-      },
-      staleTime: 5 * 60 * 1000
+      queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
+      staleTime: 60 * 1000,
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      select: useCallback(
+        (data: Awaited<ReturnType<typeof fetchProjectSecrets>>) =>
+          mergePersonalSecrets(data.secrets).reduce<Record<string, SecretV3RawSanitized>>(
+            (prev, curr) => ({ ...prev, [curr.key]: curr }),
+            {}
+          ),
+        []
+      )
     }))
   });