From c057fefd1daf1152752556bb88d71e1c2e392796 Mon Sep 17 00:00:00 2001
From: Maciej Gierada <maciek.gierada@gmail.com>
Date: Fri, 14 Jun 2024 08:35:01 +0200
Subject: [PATCH] fix: bug page not refreshed

---
 ui/src/app/page.js                         | 24 ++++++++++++++++++++--
 ui/src/components/CounterDisplay/index.jsx | 23 +--------------------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/ui/src/app/page.js b/ui/src/app/page.js
index f057107..cd00480 100644
--- a/ui/src/app/page.js
+++ b/ui/src/app/page.js
@@ -1,12 +1,32 @@
+import axios from "axios";
 import CounterDisplay from "@/components/CounterDisplay";
 
-const Home = () => {
+const fetchCounter = async () => {
+  try {
+    const rootUrl = process.env.NEXT_PUBLIC_ROOT_API_URL;
+    const endpoint = `${rootUrl}/counter`;
+
+    const response = await axios.get(endpoint);
+    if (response.data && typeof response.data.CurrentValue === "number") {
+      return { currentValue: response.data.CurrentValue, error: null };
+    } else {
+      throw new Error("Invalid response data");
+    }
+  } catch (error) {
+    console.error("Error fetching the current value:", error.message); // Debug log
+    return { currentValue: null, error: "Failed to fetch current value" };
+  }
+};
+
+const Home = async () => {
+  const { currentValue, error } = await fetchCounter();
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex"></div>
 
       <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <CounterDisplay />
+        <CounterDisplay currentValue={currentValue} error={error} />
       </div>
       <div></div>
     </main>
diff --git a/ui/src/components/CounterDisplay/index.jsx b/ui/src/components/CounterDisplay/index.jsx
index 1ba755f..0cc3897 100644
--- a/ui/src/components/CounterDisplay/index.jsx
+++ b/ui/src/components/CounterDisplay/index.jsx
@@ -1,25 +1,4 @@
-import axios from "axios";
-
-const fetchCurrentValue = async () => {
-  try {
-    const rootUrl = process.env.NEXT_PUBLIC_ROOT_API_URL;
-    const endpoint = `${rootUrl}/counter`;
-
-    const response = await axios.get(endpoint);
-    if (response.data && typeof response.data.CurrentValue === "number") {
-      return { currentValue: response.data.CurrentValue, error: null };
-    } else {
-      throw new Error("Invalid response data");
-    }
-  } catch (error) {
-    console.error("Error fetching the current value:", error.message); // Debug log
-    return { currentValue: null, error: "Failed to fetch current value" };
-  }
-};
-
-const CounterDisplay = async () => {
-  const { currentValue, error } = await fetchCurrentValue();
-
+const CounterDisplay = ({ currentValue, error }) => {
   return (
     <div>
       {error ? (