From dd3343f64b5ee10cf6414c14f20cea520bfac535 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 17 Dec 2023 19:08:11 +0800
Subject: [PATCH] refactor: extract StatusPageServices

---
 .../monitor/StatusPage/Services.tsx           | 34 +++++++++++++++++++
 .../components/monitor/StatusPage/index.tsx   | 28 ++++-----------
 2 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 src/client/components/monitor/StatusPage/Services.tsx

diff --git a/src/client/components/monitor/StatusPage/Services.tsx b/src/client/components/monitor/StatusPage/Services.tsx
new file mode 100644
index 0000000..0fb25a4
--- /dev/null
+++ b/src/client/components/monitor/StatusPage/Services.tsx
@@ -0,0 +1,34 @@
+import { Empty } from 'antd';
+import React from 'react';
+import { MonitorHealthBar } from '../MonitorHealthBar';
+
+interface StatusPageServicesProps {
+  workspaceId: string;
+  monitorList: PrismaJson.MonitorStatusPageList;
+}
+export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
+  (props) => {
+    const { workspaceId, monitorList } = props;
+
+    return (
+      <div className="shadow-2xl p-2.5 flex flex-col gap-4">
+        {monitorList.length > 0 ? (
+          monitorList.map((item) => (
+            <div key={item.id} className="hover:bg-black hover:bg-opacity-20">
+              <MonitorHealthBar
+                workspaceId={workspaceId}
+                monitorId={item.id}
+                count={40}
+                size="large"
+                showCurrentStatus={true}
+              />
+            </div>
+          ))
+        ) : (
+          <Empty description="No any monitor has been set" />
+        )}
+      </div>
+    );
+  }
+);
+StatusPageServices.displayName = 'StatusPageServices';
diff --git a/src/client/components/monitor/StatusPage/index.tsx b/src/client/components/monitor/StatusPage/index.tsx
index d84691d..afc375d 100644
--- a/src/client/components/monitor/StatusPage/index.tsx
+++ b/src/client/components/monitor/StatusPage/index.tsx
@@ -1,7 +1,6 @@
-import { Button, Empty } from 'antd';
+import { Button } from 'antd';
 import React, { useState } from 'react';
 import { trpc } from '../../../api/trpc';
-import { MonitorHealthBar } from '../MonitorHealthBar';
 import { useAllowEdit } from './useAllowEdit';
 import {
   MonitorStatusPageEditForm,
@@ -11,6 +10,7 @@ import clsx from 'clsx';
 import { useRequest } from '../../../hooks/useRequest';
 import { useNavigate } from 'react-router';
 import { ColorSchemeSwitcher } from '../../ColorSchemeSwitcher';
+import { StatusPageServices } from './Services';
 
 interface MonitorStatusPageProps {
   slug: string;
@@ -94,26 +94,10 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
           <div className="text-lg mb-2">Services</div>
 
           {info && (
-            <div className="shadow-2xl p-2.5 flex flex-col gap-4">
-              {monitorList.length > 0 ? (
-                monitorList.map((item) => (
-                  <div
-                    key={item.id}
-                    className="hover:bg-black hover:bg-opacity-20"
-                  >
-                    <MonitorHealthBar
-                      workspaceId={info.workspaceId}
-                      monitorId={item.id}
-                      count={40}
-                      size="large"
-                      showCurrentStatus={true}
-                    />
-                  </div>
-                ))
-              ) : (
-                <Empty description="No any monitor has been set" />
-              )}
-            </div>
+            <StatusPageServices
+              workspaceId={info.workspaceId}
+              monitorList={monitorList}
+            />
           )}
         </div>
       </div>