feat: add add server guide

src/client/pages/Servers.tsx

@@ -1,5 +1,14 @@
-import React, { useMemo, useState } from 'react';
-import { Badge, Button, Form, Input, Modal, Table } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Badge,
+  Button,
+  Form,
+  Input,
+  Modal,
+  Steps,
+  Table,
+  Typography,
+} from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { PlusOutlined } from '@ant-design/icons';
 import { ServerStatusInfo } from '../../types';
@@ -9,6 +18,10 @@ import prettyMilliseconds from 'pretty-ms';
 import { UpDownCounter } from '../components/UpDownCounter';
 import { max } from 'lodash-es';
 import dayjs from 'dayjs';
+import { useCurrentWorkspaceId } from '../store/user';
+import { useWatch } from '../hooks/useWatch';
+import { Loading } from '../components/Loading';
+import { without } from 'lodash-es';
 
 export const Servers: React.FC = React.memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -38,26 +51,32 @@ export const Servers: React.FC = React.memo(() => {
       <Modal
         title="Add Server"
         open={isModalOpen}
+        destroyOnClose={true}
+        okText="Done"
         onOk={handleOk}
         onCancel={() => setIsModalOpen(false)}
       >
-        <Form layout="vertical">
-          <Form.Item label="Server Name">
-            <Input />
-          </Form.Item>
-        </Form>
+        <div>
+          <AddServerStep />
+        </div>
       </Modal>
     </div>
   );
 });
 Servers.displayName = 'Servers';
 
-export const ServerList: React.FC = React.memo(() => {
+function useServerMap(): Record<string, ServerStatusInfo> {
   const serverMap = useSocketSubscribe<Record<string, ServerStatusInfo>>(
     'onServerStatusUpdate',
     {}
   );
 
+  return serverMap;
+}
+
+export const ServerList: React.FC = React.memo(() => {
+  const serverMap = useServerMap();
+
   const dataSource = Object.values(serverMap);
   const lastUpdatedAt = max(dataSource.map((d) => d.updatedAt));
 
@@ -160,3 +179,98 @@ export const ServerList: React.FC = React.memo(() => {
   );
 });
 ServerList.displayName = 'ServerList';
+
+export const AddServerStep: React.FC = React.memo(() => {
+  const workspaceId = useCurrentWorkspaceId();
+  const [current, setCurrent] = useState(0);
+  const serverMap = useServerMap();
+  const [checking, setChecking] = useState(false);
+  const oldServerMapNames = useRef<string[]>([]);
+  const [diffServerNames, setDiffServerNames] = useState<string[]>([]);
+
+  const allServerNames = useMemo(() => Object.keys(serverMap), [serverMap]);
+
+  useWatch([checking], () => {
+    if (checking === true) {
+      oldServerMapNames.current = [...allServerNames];
+    }
+  });
+
+  useWatch([allServerNames], () => {
+    if (checking === true) {
+      setDiffServerNames(without(allServerNames, ...oldServerMapNames.current));
+    }
+  });
+
+  return (
+    <Steps
+      direction="vertical"
+      current={current}
+      items={[
+        {
+          title: 'Download Client Reportor',
+          description: (
+            <div>
+              Download reporter from{' '}
+              <Typography.Link
+                href="https://github.com/msgbyte/tianji/releases"
+                target="_blank"
+                onClick={() => {
+                  if (current === 0) {
+                    setCurrent(1);
+                    setChecking(true);
+                  }
+                }}
+              >
+                Releases Page
+              </Typography.Link>
+            </div>
+          ),
+        },
+        {
+          title: 'Run',
+          description: (
+            <div>
+              run reporter with{' '}
+              <Typography.Text code={true} copyable={true}>
+                ./reporter --url {window.location.origin} --workspace{' '}
+                {workspaceId}
+              </Typography.Text>
+              <Button
+                type="link"
+                size="small"
+                disabled={current !== 1}
+                onClick={() => {
+                  if (current === 1) {
+                    setCurrent(2);
+                    setChecking(true);
+                  }
+                }}
+              >
+                Next step
+              </Button>
+            </div>
+          ),
+        },
+        {
+          title: 'Waiting for receive UDP pack',
+          description: (
+            <div>
+              {diffServerNames.length === 0 || checking === false ? (
+                <Loading />
+              ) : (
+                <div>
+                  Is this your servers?
+                  {diffServerNames.map((n) => (
+                    <div key={n}>- {n}</div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+});
+AddServerStep.displayName = 'AddServerStep';