From 8e1e7ebe1095137a1b45589614938a89d4722e37 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 16 Dec 2023 14:08:20 +0800
Subject: [PATCH] refactor: change status page logic into components

---
 .../components/monitor/StatusPage/index.tsx   | 57 ++++++++++++++++
 .../monitor/StatusPage/useAllowEdit.ts        | 19 ++++++
 src/client/pages/Status.tsx                   | 66 -------------------
 src/client/pages/Status/index.tsx             | 10 +++
 4 files changed, 86 insertions(+), 66 deletions(-)
 create mode 100644 src/client/components/monitor/StatusPage/index.tsx
 create mode 100644 src/client/components/monitor/StatusPage/useAllowEdit.ts
 delete mode 100644 src/client/pages/Status.tsx
 create mode 100644 src/client/pages/Status/index.tsx

diff --git a/src/client/components/monitor/StatusPage/index.tsx b/src/client/components/monitor/StatusPage/index.tsx
new file mode 100644
index 0000000..df05237
--- /dev/null
+++ b/src/client/components/monitor/StatusPage/index.tsx
@@ -0,0 +1,57 @@
+import { Button, Empty } from 'antd';
+import React from 'react';
+import { trpc } from '../../../api/trpc';
+import { MonitorHealthBar } from '../MonitorHealthBar';
+import { useAllowEdit } from './useAllowEdit';
+
+interface MonitorStatusPageProps {
+  slug: string;
+}
+
+export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
+  (props) => {
+    const { slug } = props;
+
+    const { data: info } = trpc.monitor.getPageInfo.useQuery({
+      slug,
+    });
+
+    const allowEdit = useAllowEdit(info?.workspaceId);
+
+    const monitorList = info?.monitorList ?? [];
+
+    return (
+      <div className="w-4/5 mx-auto py-8 ">
+        <div className="text-2xl mb-4">{info?.title}</div>
+
+        <div>{allowEdit && <Button type="primary">Edit</Button>}</div>
+
+        <div className="text-lg mb-2">Services</div>
+
+        {info && (
+          <div className="shadow-2xl p-2.5">
+            {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>
+        )}
+      </div>
+    );
+  }
+);
+MonitorStatusPage.displayName = 'MonitorStatusPage';
diff --git a/src/client/components/monitor/StatusPage/useAllowEdit.ts b/src/client/components/monitor/StatusPage/useAllowEdit.ts
new file mode 100644
index 0000000..9ecc725
--- /dev/null
+++ b/src/client/components/monitor/StatusPage/useAllowEdit.ts
@@ -0,0 +1,19 @@
+import { ROLES } from '../../../../shared';
+import { trpc } from '../../../api/trpc';
+import { useUserInfo } from '../../../store/user';
+
+export function useAllowEdit(workspaceId?: string): boolean {
+  const userInfo = useUserInfo();
+
+  const { data: role } = trpc.workspace.getUserWorkspaceRole.useQuery(
+    {
+      workspaceId: workspaceId!,
+      userId: userInfo?.id!,
+    },
+    {
+      enabled: !!userInfo?.id && !!workspaceId,
+    }
+  );
+
+  return role === ROLES.owner;
+}
diff --git a/src/client/pages/Status.tsx b/src/client/pages/Status.tsx
deleted file mode 100644
index 3034f34..0000000
--- a/src/client/pages/Status.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { useParams } from 'react-router';
-import { trpc } from '../api/trpc';
-import { Button, Empty } from 'antd';
-import { MonitorHealthBar } from '../components/monitor/MonitorHealthBar';
-import { useUserInfo } from '../store/user';
-import { ROLES } from '../../shared';
-
-export const StatusPage: React.FC = React.memo(() => {
-  const { slug } = useParams<{ slug: string }>();
-
-  const { data: info } = trpc.monitor.getPageInfo.useQuery({
-    slug: slug!,
-  });
-
-  const allowEdit = useAllowEdit(info?.workspaceId);
-
-  const monitorList = info?.monitorList ?? [];
-
-  return (
-    <div className="w-4/5 mx-auto py-8 ">
-      <div className="text-2xl mb-4">{info?.title}</div>
-
-      <div>{allowEdit && <Button type="primary">Edit</Button>}</div>
-
-      <div className="text-lg mb-2">Services</div>
-
-      {info && (
-        <div className="shadow-2xl p-2.5">
-          {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>
-      )}
-    </div>
-  );
-});
-StatusPage.displayName = 'StatusPage';
-
-function useAllowEdit(workspaceId?: string): boolean {
-  const userInfo = useUserInfo();
-
-  const { data: role } = trpc.workspace.getUserWorkspaceRole.useQuery(
-    {
-      workspaceId: workspaceId!,
-      userId: userInfo?.id!,
-    },
-    {
-      enabled: !!userInfo?.id && !!workspaceId,
-    }
-  );
-
-  return role === ROLES.owner;
-}
diff --git a/src/client/pages/Status/index.tsx b/src/client/pages/Status/index.tsx
new file mode 100644
index 0000000..a2b5c35
--- /dev/null
+++ b/src/client/pages/Status/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { useParams } from 'react-router';
+import { MonitorStatusPage } from '../../components/monitor/StatusPage';
+
+export const StatusPage: React.FC = React.memo(() => {
+  const { slug } = useParams<{ slug: string }>();
+
+  return <MonitorStatusPage slug={slug!} />;
+});
+StatusPage.displayName = 'StatusPage';