refactor: Improve EventGrid component by adding visibility toggle and…

… logging

.env

@@ -1,10 +1,10 @@
-# SD_BACKEND_URL="http://localhost:9000"
-# SD_BACKEND_API="/api/v1"
-# SD_BACKEND_V2=false
+SD_BACKEND_URL="http://localhost:9000"
+SD_BACKEND_API="/api/v1"
+SD_BACKEND_V2=false
 
-SD_BACKEND_URL="http://80.158.108.251:8000"
-SD_BACKEND_API="/v2"
-SD_BACKEND_V2=true
+# SD_BACKEND_URL="http://80.158.108.251:8000"
+# SD_BACKEND_API="/v2"
+# SD_BACKEND_V2=true
 
 # only for development
 SD_BACKEND_FILE=false

src/Components/Home/EventGrid.tsx

@@ -1,11 +1,14 @@
 import { ScaleDataGrid } from "@telekom/scale-components-react";
-import { useCreation } from "ahooks";
+import { useBoolean, useCreation } from "ahooks";
 import dayjs from "dayjs";
 import { chain } from "lodash";
 import { useEffect, useRef } from "react";
+import { Logger } from "~/Helpers/Logger";
 import { useStatus } from "~/Services/Status";
 import { EventStatus, EventType } from "../Event/Enums";
 
+const log = new Logger("Home", "EventGrid");
+
 /**
  * @author Aloento
  * @since 1.0.0
@@ -14,6 +17,7 @@ import { EventStatus, EventType } from "../Event/Enums";
 export function EventGrid() {
   const { DB } = useStatus();
   const ref = useRef<HTMLScaleDataGridElement>(null);
+  const [hidden, { set }] = useBoolean();
 
   const observer = useCreation(() => {
     return new MutationObserver((mutationsList) => {
@@ -133,13 +137,14 @@ export function EventGrid() {
       })
       .value();
 
+    set(!events.length);
     grid.rows = events;
-
-    if (!events.length) {
-      grid.style.display = "none";
-    }
   }, [ref.current, DB]);
 
+  if (hidden) {
+    return null;
+  }
+
   return (
     <ScaleDataGrid
       className="rounded-lg bg-white shadow-md"

src/Pages/Home.tsx

@@ -56,7 +56,7 @@ export function Home() {
       .uniqBy(s => s.Id)
       .value();
 
-    log.debug(service);
+    log.debug("Abnormal Services", service);
     return service.length;
   }, [DB]);