From b48e182cdb3815c936714cf7354a84229c908fde Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Thu, 15 Aug 2024 15:07:18 -0400
Subject: [PATCH] I think I have both sides synchronized well
---
src/main/main.ts | 16 ++++---
src/renderer/components/Connect/LogViewer.tsx | 44 ++++++++++++++-----
2 files changed, 42 insertions(+), 18 deletions(-)
diff --git a/src/main/main.ts b/src/main/main.ts
index 662517f3..af726e4d 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -137,20 +137,23 @@ const startListeningToServerLog = async () => {
const logFile = path.join(server_dir, 'local_server.log');
let tail = new Tail(logFile);
- let currentlyWatching = false;
+ let currentlySubscribed = false;
ipcMain.on('serverLog:startListening', async (event) => {
+ console.log('main.js: start listening');
event.reply('serverLog:update', '**starting to listen to the log**');
console.log('logFile', logFile);
- if (currentlyWatching) {
+ console.log(tail);
+
+ if (currentlySubscribed) {
console.log('already watching');
return;
}
- currentlyWatching = true;
- tail.watch();
+ currentlySubscribed = true;
+ // tail.watch();
tail.on('line', function (data) {
// console.log(data);
@@ -163,9 +166,10 @@ const startListeningToServerLog = async () => {
});
ipcMain.on('serverLog:stopListening', async (event) => {
- console.log('stopping listening');
+ console.log('main.js: stopping listening');
+ event.reply('serverLog:update', '**Stopping listening to the log**');
tail.unwatch();
- currentlyWatching = false;
+ currentlySubscribed = false;
});
};
diff --git a/src/renderer/components/Connect/LogViewer.tsx b/src/renderer/components/Connect/LogViewer.tsx
index 4f056e85..c0885d1b 100644
--- a/src/renderer/components/Connect/LogViewer.tsx
+++ b/src/renderer/components/Connect/LogViewer.tsx
@@ -1,19 +1,40 @@
import { Sheet } from '@mui/joy';
-import React, { useState, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+
+import 'xterm/css/xterm.css';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+
+export default function LogViewer({}) {
+ const terminalRef = useRef(null);
+
+ let term: Terminal | null = null;
-const BlankPage: React.FC = () => {
useEffect(() => {
async function fetchData() {
- await window.electron.ipcRenderer.sendMessage('serverLog:startListening');
+ setTimeout(() => {
+ window.electron.ipcRenderer.sendMessage('serverLog:startListening');
+ }, 1500);
window.electron.ipcRenderer.removeAllListeners('serverLog:onUpdate');
window.electron.ipcRenderer.on('serverLog:update', (data: any) => {
// append data to the log-viewer div
- const logViewer = document.getElementById('log-viewer');
- if (logViewer) {
- logViewer.innerHTML += `${data}\n`;
+ if (term != null) {
+ term.writeln(`${data}`);
}
});
}
+
+ if (term != null) {
+ term.dispose;
+ } else {
+ term = new Terminal();
+ const fitAddon = new FitAddon();
+ term.loadAddon(fitAddon);
+
+ term.open(terminalRef.current);
+ fitAddon.fit();
+ }
+
fetchData();
return () => {
@@ -22,6 +43,7 @@ const BlankPage: React.FC = () => {
window.electron.ipcRenderer.removeAllListeners(
'serverLog:startListening'
);
+ window.electron.ipcRenderer.removeAllListeners('serverLog:onUpdate');
};
}, []);
@@ -30,13 +52,11 @@ const BlankPage: React.FC = () => {
sx={{
height: '100%',
overflow: 'auto',
- backgroundColor: '#222',
- color: 'white',
+ // backgroundColor: '#222',
+ // color: 'white',
}}
- >
- <pre id="log-viewer" style={{ whiteSpace: 'pre-wrap' }}></pre>
- </Sheet>
+ ref={terminalRef}
+ ></Sheet>
);
};
-export default BlankPage;
--
GitLab