- Added health check button to landing page

- Changed Backend URL
sympoll · Jul 29, 2024 · 3ed18d5 · 3ed18d5
1 parent 7adc10f
commit 3ed18d5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 33 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-VITE_BACKEND_URL=http://backend.default.svc.cluster.local:8081
+VITE_BACKEND_URL=http://poll-manager:8081
diff --git a/src/cmps/global/HelathCheckButton.tsx b/src/cmps/global/HelathCheckButton.tsx
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+
+
+interface HealthCheckResponse {
+    status: string;
+  }
+
+  function HealthCheckButton() {
+    const [healthStatus, setHealthStatus] = useState<string | null>(null);
+
+    const fetchHealthStatus = async () => {
+      try {
+        const response = await fetch('http://poll-manager:8081/api/poll/health');
+        const data: HealthCheckResponse = await response.json();
+        setHealthStatus(data.status);
+      } catch (error) {
+        console.error('Error fetching health status:', error);
+        setHealthStatus('Error fetching health status');
+      }
+    };
+
+    return (
+      <div>
+        <button onClick={fetchHealthStatus}>Check Health</button>
+        <header>Health Status: {healthStatus || 'Not checked yet'}</header>
+      </div>
+    );
+  }
+export default HealthCheckButton;
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
@@ -3,6 +3,7 @@ import logo from "../assets/imgs/logo-no-bg.png";
 import Button from "../cmps/global/Button";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
+import HealthCheckButton from "../cmps/global/HelathCheckButton";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 console.log("Backend URL:", backendUrl); // Log the backend URL to ensure it's correctly loaded
@@ -13,39 +14,39 @@ export default function LandingPage() {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-  async function fetchHealth(backendUrl: string) {
-    try {
-      const response = await axios
-        .create({
-          baseURL: "http://backend.default.svc.cluster.local:8081/api/poll",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          withCredentials: true,
-        })
-        .get("/health");
-      return response.data;
-    } catch (error) {
-      console.error("Error fetching health: ", error);
-      throw error;
-    }
-  }
+  // async function fetchHealth(backendUrl: string) {
+  //   try {
+  //     const response = await axios
+  //       .create({
+  //         baseURL: "http://backend.default.svc.cluster.local:8081/api/poll",
+  //         headers: {
+  //           "Content-Type": "application/json",
+  //         },
+  //         withCredentials: true,
+  //       })
+  //       .get("/health");
+  //     return response.data;
+  //   } catch (error) {
+  //     console.error("Error fetching health: ", error);
+  //     throw error;
+  //   }
+  // }
 
-  useEffect(() => {
-    fetchHealth(backendUrl)
-      .then((data) => {
-        setHealthData(data);
-        setLoading(false);
-      })
-      .catch((error) => {
-        setError(error.message);
-        setLoading(false);
-      });
-  }, [backendUrl]);
-  // END TEST
+  // useEffect(() => {
+  //   fetchHealth(backendUrl)
+  //     .then((data) => {
+  //       setHealthData(data);
+  //       setLoading(false);
+  //     })
+  //     .catch((error) => {
+  //       setError(error.message);
+  //       setLoading(false);
+  //     });
+  // }, [backendUrl]);
+  // // END TEST
 
   const navigate = useNavigate();
-  const test = fetchHealth(backendUrl);
+  // const test = fetchHealth(backendUrl);
 
   return (
     <section className="landing-page-container">
@@ -60,8 +61,8 @@ export default function LandingPage() {
         </Button>
       </div>
       <h1>
-        THIS IS A TEST:{" "}
-        {loading ? "Loading..." : error ? `Error: ${error}` : healthData}
+        THIS IS A TEST
+        <HealthCheckButton/>
       </h1>
     </section>
   );