feat: add status page delete action

src/client/components/monitor/MonitorInfo.tsx

@@ -206,7 +206,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
             )}
 
             <Popconfirm
-              title="How you sure delete this monitor?"
+              title="Did you sure delete this monitor?"
               onConfirm={handleDelete}
             >
               <Button danger={true}>Delete</Button>

src/client/pages/Monitor/PageList.tsx

@@ -2,15 +2,26 @@ import React from 'react';
 import { useNavigate } from 'react-router';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { trpc } from '../../api/trpc';
-import { Button, Card } from 'antd';
+import { Button, Card, Popconfirm } from 'antd';
-import { EditOutlined, EyeOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
+import { useEvent } from '../../hooks/useEvent';
 
 export const MonitorPageList: React.FC = React.memo(() => {
-  const workspaceId = useCurrentWorkspaceId()!;
+  const workspaceId = useCurrentWorkspaceId();
-  const { data: pages = [] } = trpc.monitor.getAllPages.useQuery({
+  const navigate = useNavigate();
+  const { data: pages = [], refetch } = trpc.monitor.getAllPages.useQuery({
     workspaceId,
   });
-  const navigate = useNavigate();
+  const deletePageMutation = trpc.monitor.deletePage.useMutation();
+
+  const handleDeletePage = useEvent(async (monitorId: string) => {
+    await deletePageMutation.mutateAsync({
+      workspaceId,
+      id: monitorId,
+    });
+
+    refetch();
+  });
 
   return (
     <div className="px-8 py-4">
@@ -24,14 +35,26 @@ export const MonitorPageList: React.FC = React.memo(() => {
             <div className="flex">
               <div className="flex-1">{p.title}</div>
               <div className="flex gap-2">
-                <Button
+                <Popconfirm
-                  icon={<EyeOutlined />}
+                  title="Did you sure delete this page?"
-                  onClick={() => navigate(`/status/${p.slug}`)}
+                  onConfirm={() => handleDeletePage(p.id)}
-                />
+                  okButtonProps={{
+                    danger: true,
+                    loading: deletePageMutation.isLoading,
+                  }}
+                >
+                  <Button icon={<DeleteOutlined />} />
+                </Popconfirm>
+
                 <Button
                   icon={<EditOutlined />}
                   onClick={() => navigate(`/status/${p.slug}?edit=1`)}
                 />
+
+                <Button
+                  icon={<EyeOutlined />}
+                  onClick={() => navigate(`/status/${p.slug}`)}
+                />
               </div>
             </div>
           </Card>

src/server/trpc/routers/monitor.ts

@@ -651,6 +651,31 @@ export const monitorRouter = router({
         },
       });
     }),
+  deletePage: workspaceOwnerProcedure
+    .meta(
+      buildMonitorOpenapi({
+        method: 'DELETE',
+        path: '/deleteStatusPage',
+      })
+    )
+    .input(
+      MonitorStatusPageModelSchema.pick({
+        id: true,
+      })
+    )
+    .output(MonitorStatusPageModelSchema)
+    .mutation(async ({ input }) => {
+      const { id, workspaceId } = input;
+
+      const res = await prisma.monitorStatusPage.delete({
+        where: {
+          id,
+          workspaceId,
+        },
+      });
+
+      return res;
+    }),
 });
 
 function buildMonitorOpenapi(meta: OpenApiMetaInfo): OpenApiMeta {