feat: sync log (#93)

* 🎨 取消重复的查看日志信息弹框  cc @yoyo837 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new status display for log operations with improved
messaging.
- Enhanced button functionality to reflect log status and loading
states.

- **Bug Fixes**
- Improved error handling for log polling with a defined maximum retry
limit.

- **Refactor**
	- Updated state management for better clarity and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

src/components/Sync.tsx

@@ -1,43 +1,38 @@
 'use client';
 import { REGISTRY, SYNC_REGISTRY } from '@/config';
 import { Button, message, Modal } from 'antd';
-import Link from 'next/link';
 import React from 'react';
 
+const MAX_RETRY = 30;
+
 interface SyncProps {
   pkgName: string;
 }
 
-const LogStatus = {
-  WAIT: 1,
-  ERROR: 2,
-  SUCCESS: 3,
+enum LogStatus {
+  INIT,
+  WAIT,
+  ERROR,
+  SUCCESS,
 }
 
+const LogStatusTextMap= {
+  [LogStatus.INIT]: '进行同步',
+  [LogStatus.WAIT]: '等待调度',
+  [LogStatus.ERROR]: '调度失败',
+  [LogStatus.SUCCESS]: '查看日志',
+};
+
 export default function Sync({ pkgName }: SyncProps) {
   const [logId, setLogId] = React.useState<string>();
-  const [logState, setLogState] = React.useState<number>(LogStatus.WAIT);
+  const [logState, setLogState] = React.useState<LogStatus>(LogStatus.INIT);
   const retryCountRef = React.useRef(0);
   const [modal, contextHolder] = Modal.useModal();
 
   function genLogFileUrl(id: string) {
     return `${REGISTRY}/-/package/${pkgName}/syncs/${id}/log`;
   }
 
-  async function showLog(id: string) {
-    modal.success({
-      title: '等待调度',
-      content: (
-        <>
-          创建同步任务成功，正在等待调度，如遇日志 404 请稍后刷新重试，通常需要几十秒钟的时间
-          <Link target="_blank" href={genLogFileUrl(id)}>
-            查看日志
-          </Link>
-        </>
-      ),
-    });
-  }
-
   async function logPolling(id:string) {
     if (!id) {
       return;
@@ -51,13 +46,17 @@ export default function Sync({ pkgName }: SyncProps) {
       }
       throw new Error('Not ready');
     } catch {
-      if (retryCountRef.current > 30) {
+      if (retryCountRef.current > MAX_RETRY) {
         setLogState(LogStatus.ERROR);
         return;
+      } else {
+        if (LogStatus.WAIT !== logState) {
+          setLogState(LogStatus.WAIT);
+        }
+        setTimeout(() => {
+          logPolling(id);
+        }, 1000);
       }
-      setTimeout(() => {
-        logPolling(id);
-      }, 1000);
     }
   }
 
@@ -69,6 +68,7 @@ export default function Sync({ pkgName }: SyncProps) {
       const res = await response.json();
       if (res.ok) {
         setLogId(res.id);
+        setLogState(LogStatus.WAIT);
         logPolling(res.id);
         return;
       }
@@ -81,29 +81,21 @@ export default function Sync({ pkgName }: SyncProps) {
   return (
     <>
       {contextHolder}
-      <Button size={'small'} type="primary" loading={ !!logId && logState === 1 } onClick={() => {
-        if (!logId) {
-          doSync();
-          return;
-        }
-        if (logState === LogStatus.SUCCESS) {
-          showLog(logId);
-        }
-      }}>
-        {(() => {
-            if (logId) {
-              switch (logState) {
-                case LogStatus.SUCCESS:
-                  return <>查看日志</>;
-                case LogStatus.ERROR:
-                  return <>调度失败</>;
-                default:
-                  return <>等待调度</>;
-              }
-            }
-            return <>进行同步</>;
-        })()}
+      <Button
+        size={'small'}
+        type="primary"
+        loading={logState === LogStatus.WAIT}
+        href={logState === LogStatus.SUCCESS ? genLogFileUrl(logId!) : undefined}
+        target='_blank'
+        onClick={() => {
+          if (!logId) {
+            doSync();
+            return;
+          }
+        }}
+      >
+        {LogStatusTextMap[logState]}
       </Button>
     </>
   );
-}
+}