simplify embedded cluster upgrading component

web/src/components/clusters/EmbeddedClusterUpgrading.tsx

@@ -1,59 +1,21 @@
-import { useEffect, useReducer } from "react";
-import fetch from "../../utilities/fetchWithTimeout";
+import { useEffect } from "react";
 import { Utilities } from "../../utilities/utilities";
 import Loader from "@components/shared/Loader";
 
 interface Props {
   setTerminatedState: (terminated: boolean) => void;
 }
 
-interface State {
-  seconds: number;
-  reconnectAttempts: number;
-}
-
 const EmbeddedClusterUpgrading = (props: Props) => {
-  const [state, setState] = useReducer(
-    (currentState: State, newState: Partial<State>) => ({
-      ...currentState,
-      ...newState,
-    }),
-    {
-      seconds: 1,
-      reconnectAttempts: 1,
-    }
-  );
-
-  let countdown: (seconds: number) => void;
-  let ping: () => Promise<void>;
-
-  countdown = (seconds: number) => {
-    setState({ seconds });
-    if (seconds === 0) {
-      setState({
-        reconnectAttempts: state.reconnectAttempts + 1,
-      });
-      ping();
-    } else {
-      const nextCount = seconds - 1;
-      setTimeout(() => {
-        countdown(nextCount);
-      }, 1000);
-    }
-  };
-
-  ping = async () => {
-    const { reconnectAttempts } = state;
+  const ping = async () => {
     await fetch(
       `${process.env.API_ENDPOINT}/ping`,
       {
         headers: {
           "Content-Type": "application/json",
         },
         credentials: "include",
-      },
-      10000
-    )
+      })
       .then(async (res) => {
         if (res.status === 401) {
           Utilities.logoutUser();
@@ -63,13 +25,14 @@ const EmbeddedClusterUpgrading = (props: Props) => {
       })
       .catch(() => {
         props.setTerminatedState(true);
-        const seconds = reconnectAttempts > 10 ? 10 : reconnectAttempts;
-        countdown(seconds);
       });
   };
 
   useEffect(() => {
-    ping();
+    const interval = setInterval(() => {
+      ping();
+    }, 10000);
+    return () => clearInterval(interval);
   }, []);
 
   return (
@@ -88,4 +51,4 @@ const EmbeddedClusterUpgrading = (props: Props) => {
   );
 };
 
-export default EmbeddedClusterUpgrading;
+export default EmbeddedClusterUpgrading;