From b6f7c321715e4f78e027591ec10964ba11b41c41 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 15 Oct 2023 00:12:45 +0800
Subject: [PATCH] fix: fix a bug beat maybe null will throw error

---
 src/client/components/monitor/MonitorHealthBar.tsx |  4 +++-
 src/client/components/monitor/MonitorList.tsx      | 10 +++++++---
 src/client/pages/Monitor/index.tsx                 |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/client/components/monitor/MonitorHealthBar.tsx b/src/client/components/monitor/MonitorHealthBar.tsx
index 84e18e2..27d7da4 100644
--- a/src/client/components/monitor/MonitorHealthBar.tsx
+++ b/src/client/components/monitor/MonitorHealthBar.tsx
@@ -12,7 +12,9 @@ interface MonitorHealthBarProps {
   count?: number;
   size?: HealthBarProps['size'];
   showCurrentStatus?: boolean;
-  onBeatsItemUpdate?: (items: { value: number; createdAt: string }[]) => void;
+  onBeatsItemUpdate?: (
+    items: ({ value: number; createdAt: string | Date } | null)[]
+  ) => void;
 }
 export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
   (props) => {
diff --git a/src/client/components/monitor/MonitorList.tsx b/src/client/components/monitor/MonitorList.tsx
index 8e110fe..faef7df 100644
--- a/src/client/components/monitor/MonitorList.tsx
+++ b/src/client/components/monitor/MonitorList.tsx
@@ -28,10 +28,10 @@ export const MonitorList: React.FC = React.memo(() => {
     return null;
   }, []);
   const [beats, setBeats] = useState<
-    {
+    ({
       value: number;
-      createdAt: string;
-    }[]
+      createdAt: string | Date;
+    } | null)[]
   >([]);
 
   const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(
@@ -41,6 +41,10 @@ export const MonitorList: React.FC = React.memo(() => {
   const upPercent = useMemo(() => {
     let up = 0;
     beats.forEach((b) => {
+      if (!b) {
+        return;
+      }
+
       if (b.value >= 0) {
         up++;
       }
diff --git a/src/client/pages/Monitor/index.tsx b/src/client/pages/Monitor/index.tsx
index 4c7dadb..18e8562 100644
--- a/src/client/pages/Monitor/index.tsx
+++ b/src/client/pages/Monitor/index.tsx
@@ -12,7 +12,7 @@ export const MonitorPage: React.FC = React.memo(() => {
   return (
     <div className="h-full flex flex-col">
       <div className="flex-1">
-        <div className="p-4">
+        <div className="px-4 pt-4">
           <div
             className="px-3 py-2 rounded-full bg-green-400 hover:bg-green-500 text-white inline-block cursor-pointer"
             onClick={() => navigate('/monitor/add')}