From 63e2d5b4ee639adf5fcb8e85cc6a48f2b345fbb6 Mon Sep 17 00:00:00 2001
From: Zackary Santana <64446617+ZackarySantana@users.noreply.github.com>
Date: Mon, 18 Mar 2024 09:56:24 -0400
Subject: [PATCH] feat: extract render logic to prevent hook mismatch

---
 src/pages/task/metadata/Stepback.tsx | 28 ++++++++++++++++------------
 src/pages/task/metadata/index.tsx    |  5 +++--
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/pages/task/metadata/Stepback.tsx b/src/pages/task/metadata/Stepback.tsx
index 86f9fb7d4a..170a11afac 100644
--- a/src/pages/task/metadata/Stepback.tsx
+++ b/src/pages/task/metadata/Stepback.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import styled from "@emotion/styled";
 import Badge from "@leafygreen-ui/badge";
 import Tooltip from "@leafygreen-ui/tooltip";
@@ -12,27 +11,32 @@ import { useLastPassingTask } from "hooks/useLastPassingTask";
 
 type Props = {
   taskId: string;
-  task: TaskQuery["task"];
 };
 
-export const Stepback: React.FC<Props> = ({ task, taskId }) => {
-  const { loading, task: breakingTask } = useBreakingTask(taskId);
-  const { task: lastPassingTask } = useLastPassingTask(taskId);
-
-  // lastFailingStepbackTaskId is set only in the middle of stepback (not the first task).
-  const inStepback =
+/**
+ * Returns whether the task is in stepback.
+ * @param task The task to check if it is in stepback.
+ * @returns Whether the task is in stepback.
+ */
+export function inStepback(task: TaskQuery["task"]) {
+  // lastFailingStepbackTaskId is set only in the middle/last of stepback (not the first task).
+  const stepback =
     task?.stepbackInfo?.lastFailingStepbackTaskId !== undefined &&
     task?.stepbackInfo?.lastFailingStepbackTaskId !== "";
+
   // nextStepbackTaskId is set when the next task in stepback in known, in the beginning
   // of stepback, it is known right away. In the rest of stepback, it is not.
   const beginningStepback =
     task?.stepbackInfo?.nextStepbackTaskId !== undefined &&
     task?.stepbackInfo?.nextStepbackTaskId !== "";
 
-  // If the task is not in stepback or beginning stepback, it should not show the stepback metadata.
-  if (!inStepback && !beginningStepback) {
-    return;
-  }
+  // If the task is in stepback or beginning stepback, it is counted as in stepback.
+  return stepback || beginningStepback;
+}
+
+export const Stepback: React.FC<Props> = ({ taskId }) => {
+  const { loading, task: breakingTask } = useBreakingTask(taskId);
+  const { task: lastPassingTask } = useLastPassingTask(taskId);
 
   // The last stepback task has an undefined last passing task (it is passing itself).
   const isLastStepbackTask = lastPassingTask === undefined;
diff --git a/src/pages/task/metadata/index.tsx b/src/pages/task/metadata/index.tsx
index a6fd7e0d26..e3cef2523a 100644
--- a/src/pages/task/metadata/index.tsx
+++ b/src/pages/task/metadata/index.tsx
@@ -38,7 +38,7 @@ import { AbortMessage } from "./AbortMessage";
 import { DependsOn } from "./DependsOn";
 import ETATimer from "./ETATimer";
 import RuntimeTimer from "./RuntimeTimer";
-import { Stepback } from "./Stepback";
+import { Stepback, inStepback } from "./Stepback";
 
 const { applyStrictRegex, msToDuration, shortenGithash } = string;
 const { red } = palette;
@@ -107,6 +107,7 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
     Cookies.set(SEEN_HONEYCOMB_GUIDE_CUE, "true", { expires: 365 });
     setOpenGuideCue(false);
   };
+  const stepback = inStepback(task);
 
   return (
     <MetadataCard error={error} loading={loading}>
@@ -404,7 +405,7 @@ export const Metadata: React.FC<Props> = ({ error, loading, task, taskId }) => {
           </StyledLink>
         </MetadataItem>
       )}
-      <Stepback task={task} taskId={taskId} />
+      {stepback && <Stepback taskId={taskId} />}
     </MetadataCard>
   );
 };