Using useMemo instead of useCallback. Using enum instead of string for getRedeploymentTrigger.

Author: tomjose92

app/client/src/ce/selectors/applicationSelectors.tsx

@@ -215,28 +215,32 @@ export const getIsFetchingAppSlugSuggestion = (state: DefaultRootState) =>
 export const getAppSlugSuggestion = (state: DefaultRootState) =>
   state.ui.applications.appSlugSuggestion;
 
-export const getRedeployApplicationTrigger = (
-  state: DefaultRootState,
-): string | null => {
-  const currentApplication = getCurrentApplication(state);
+export enum RedeployTrigger {
+  PendingDeployment = "PENDING_DEPLOYMENT",
+  PendingDeploymentWithPackage = "PENDING_DEPLOYMENT_WITH_PACKAGE",
+}
 
-  if (!currentApplication?.modifiedAt) {
-    return null;
-  }
+export const getRedeployApplicationTrigger = createSelector(
+  getCurrentApplication,
+  (currentApplication): RedeployTrigger | null => {
+    if (!currentApplication?.modifiedAt) {
+      return null;
+    }
 
-  if (!currentApplication?.lastDeployedAt) {
-    return "PENDING_DEPLOYMENT";
-  }
+    if (!currentApplication?.lastDeployedAt) {
+      return RedeployTrigger.PendingDeployment;
+    }
 
-  const lastDeployedAtMs = new Date(
-    currentApplication.lastDeployedAt,
-  ).getTime();
-  const modifiedAtMs = new Date(currentApplication.modifiedAt).getTime();
+    const lastDeployedAtMs = new Date(
+      currentApplication.lastDeployedAt,
+    ).getTime();
+    const modifiedAtMs = new Date(currentApplication.modifiedAt).getTime();
 
-  // If modifiedAt is greater than lastDeployedAt by more than 1 second, deployment is needed
-  if (modifiedAtMs - lastDeployedAtMs > 1000) {
-    return "PENDING_DEPLOYMENT";
-  }
+    // If modifiedAt is greater than lastDeployedAt by more than 1 second, deployment is needed
+    if (modifiedAtMs - lastDeployedAtMs > 1000) {
+      return RedeployTrigger.PendingDeployment;
+    }
 
-  return null;
-};
+    return null;
+  },
+);

app/client/src/pages/AppIDE/layouts/components/Header/DeployButton.tsx

@@ -23,7 +23,7 @@ import {
   useGitConnected,
   useGitModEnabled,
 } from "pages/Editor/gitSync/hooks/modHooks";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
   getCurrentApplicationId,
@@ -50,7 +50,7 @@ function DeployButton() {
   const gitStatusState = useArtifactSelector(selectStatusState);
   const redeployTrigger = useSelector(getRedeployApplicationTrigger);
 
-  const getTooltipText = useCallback(() => {
+  const tooltipText = useMemo(() => {
     if (isPackageUpgrading) {
       return createMessage(PACKAGE_UPGRADING_ACTION_STATUS, "deploy this app");
     }
@@ -100,7 +100,7 @@ function DeployButton() {
     toggleOpsModal,
   ]);
 
-  const getStartIcon = useCallback(() => {
+  const startIcon = useMemo(() => {
     if (isGitConnected && !gitStatusState?.loading) {
       const hasPendingCommits =
         gitStatusState?.value && !gitStatusState.value.isClean;
@@ -118,7 +118,7 @@ function DeployButton() {
   }, [isGitConnected, gitStatusState, redeployTrigger]);
 
   return (
-    <Tooltip content={getTooltipText()} placement="bottomRight">
+    <Tooltip content={tooltipText} placement="bottomRight">
       <StyledTooltipTarget>
         <Button
           className="t--application-publish-btn"
@@ -129,7 +129,7 @@ function DeployButton() {
           kind="tertiary"
           onClick={handleClickDeploy}
           size="md"
-          startIcon={getStartIcon()}
+          startIcon={startIcon}
         >
           {createMessage(DEPLOY_MENU_OPTION)}
         </Button>