From 7d81b3ecd41f0a4e535b8201f95b6848efa77e4b Mon Sep 17 00:00:00 2001
From: elrrrrrrr <elrrrrrrr@gmail.com>
Date: Mon, 28 Oct 2024 10:22:35 +0800
Subject: [PATCH] feat: sync log modal (#94)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 新增 logModal, 版本同步时展示对应日志, cc @RaoHai

![image](https://github.com/user-attachments/assets/6523497b-85ac-4666-8d06-8b21985e42bc)


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

- **New Features**
	- Introduced a new dependency for enhanced log rendering.
- Added a modal to the Sync component for displaying sync logs
interactively.
	- Implemented a custom hook for fetching and caching sync log data.

- **Bug Fixes**
- Improved button functionality to open log modal upon successful sync
instead of navigating away.

- **Documentation**
- Updated documentation to reflect the new log fetching mechanism and
modal integration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 package.json            |  4 ++++
 src/components/Sync.tsx | 29 +++++++++++++++++++++++++----
 src/hooks/useSyncLog.ts | 17 +++++++++++++++++
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/useSyncLog.ts

diff --git a/package.json b/package.json
index 2bbbddd..70dc1c0 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "next": "^13.4.7",
     "npm-package-arg": "^11.0.1",
     "react": "^18.2.0",
+    "react-ansi": "^3.0.2",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
@@ -50,6 +51,9 @@
   "overrides": {
     "npm-package-arg": {
       "validate-npm-package-name": "5.0.0"
+    },
+    "react-ansi": {
+      "react": "^18.2.0"
     }
   }
 }
diff --git a/src/components/Sync.tsx b/src/components/Sync.tsx
index 29bfc45..fea9d95 100644
--- a/src/components/Sync.tsx
+++ b/src/components/Sync.tsx
@@ -1,6 +1,8 @@
 'use client';
 import { REGISTRY, SYNC_REGISTRY } from '@/config';
+import useSyncLog from '@/hooks/useSyncLog';
 import { Button, message, Modal } from 'antd';
+import ReactAnsi from 'react-ansi';
 import React from 'react';
 
 const MAX_RETRY = 30;
@@ -27,7 +29,8 @@ export default function Sync({ pkgName }: SyncProps) {
   const [logId, setLogId] = React.useState<string>();
   const [logState, setLogState] = React.useState<LogStatus>(LogStatus.INIT);
   const retryCountRef = React.useRef(0);
-  const [modal, contextHolder] = Modal.useModal();
+  const [showLog, setShowLog] = React.useState(false);
+  const { data: logContent } = useSyncLog(pkgName, logId);
 
   function genLogFileUrl(id: string) {
     return `${REGISTRY}/-/package/${pkgName}/syncs/${id}/log`;
@@ -80,14 +83,15 @@ export default function Sync({ pkgName }: SyncProps) {
 
   return (
     <>
-      {contextHolder}
       <Button
         size={'small'}
         type="primary"
         loading={logState === LogStatus.WAIT}
-        href={logState === LogStatus.SUCCESS ? genLogFileUrl(logId!) : undefined}
-        target='_blank'
         onClick={() => {
+          if (logState === LogStatus.SUCCESS) {
+            setShowLog(true);
+            return;
+          }
           if (!logId) {
             doSync();
             return;
@@ -96,6 +100,23 @@ export default function Sync({ pkgName }: SyncProps) {
       >
         {LogStatusTextMap[logState]}
       </Button>
+
+      <Modal
+        centered
+        open={showLog}
+        width={'70%'}
+        title="同步日志"
+        footer={null}
+        onCancel={() => setShowLog(false)}
+      >
+        <ReactAnsi
+          key={logId}
+          log={logContent || ['loading....']}
+          bodyStyle={{ overflowY: 'auto', background: '#222', height: '600px' }}
+          showHeader={false}
+          autoScroll
+        ></ReactAnsi>
+      </Modal>
     </>
   );
 }
diff --git a/src/hooks/useSyncLog.ts b/src/hooks/useSyncLog.ts
new file mode 100644
index 0000000..18156b9
--- /dev/null
+++ b/src/hooks/useSyncLog.ts
@@ -0,0 +1,17 @@
+import { REGISTRY } from '@/config';
+import useSwr from 'swr';
+
+export default function useSyncLog(pkgName: string, logId?: string) {
+  return useSwr(logId ? `sync_log_${logId}` : null, async () => {
+    try {
+      const res = await fetch(`${REGISTRY}/-/package/${pkgName}/syncs/${logId}/log`).then((res) => res.text());
+      return res.split('\n');
+    } catch (e) {
+      return null;
+    }
+  }, {
+    refreshInterval() {
+      return 1000;
+    },
+  });
+}