Merge branch 'dev' of github.com:visualDust/neetbox into dev

visualDust · Nov 26, 2023 · 5e18123 · 5e18123
2 parents af01e30 + 1af0108
commit 5e18123
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 30 deletions.
diff --git a/neetbox/frontend/src/components/dashboard/project/logs.tsx b/neetbox/frontend/src/components/dashboard/project/logs.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { styled } from "styled-components";
 import { LogData, useProjectLogs } from "../../../services/projects";
 import "./logs.css";
@@ -7,26 +7,50 @@ interface Props {
   projectName: string;
 }
 
-const LogsContainer = styled.div`
-  height: 40vh;
-  overflow-y: auto;
-`;
-
-export function Logs({ projectName }: Props) {
-  const logs = useProjectLogs(projectName);
+function AutoScrolling({
+  style,
+  children,
+}: React.PropsWithChildren<{ style: React.CSSProperties }>) {
   const containerRef = useRef<HTMLDivElement>(null!);
+  const [following, setFollowing] = useState(true);
+  const [renderingElement, setRenderingElement] = useState(children);
+  useEffect(() => {
+    const dom = containerRef.current;
+    if (dom) {
+      setFollowing(
+        Math.abs(dom.scrollHeight - dom.clientHeight - dom.scrollTop) < 5
+      );
+    }
+    setRenderingElement(children);
+  }, [children]);
   useLayoutEffect(() => {
-    containerRef.current.scroll({ top: containerRef.current.scrollHeight });
-  }, [logs]);
+    const dom = containerRef.current;
+    if (following) {
+      dom.scroll({ top: dom.scrollHeight });
+    }
+  }, [renderingElement, following]);
   return (
-    <LogsContainer ref={containerRef}>
-      {logs.map((x) => (
-        <LogItem key={x._id} data={x} />
-      ))}
-    </LogsContainer>
+    <div style={style} ref={containerRef}>
+      {renderingElement}
+    </div>
   );
 }
 
+export const Logs = React.memo(({ projectName }: Props) => {
+  const logs = useProjectLogs(projectName);
+  return (
+    <AutoScrolling
+      style={{ overflowY: "auto", height: "40vh" }}
+      children={<LogItems logs={logs} />}
+    />
+  );
+});
+
+const LogItems = ({ logs }: { logs: LogData[] }) => {
+  console.info("logitems render logs count", logs.length);
+  return logs.map((x) => <LogItem key={x._id} data={x} />);
+};
+
 const LogItemContainer = styled.div`
   margin-bottom: 5px;
   font-family: "Courier New", Courier, monospace;
@@ -63,7 +87,7 @@ function getColorFromWhom(whom: string) {
   return `hsl(${hue}, 70%, 80%)`;
 }
 
-function LogItem({ data }: { data: LogData }) {
+const LogItem = React.memo(({ data }: { data: LogData }) => {
   let { prefix } = data;
   if (!prefix) prefix = "LOG";
   return (
@@ -81,4 +105,4 @@ function LogItem({ data }: { data: LogData }) {
       {data.msg}
     </LogItemContainer>
   );
-}
+});
diff --git a/neetbox/frontend/src/pages/console/proejctDashboard.tsx b/neetbox/frontend/src/pages/console/proejctDashboard.tsx
@@ -39,7 +39,7 @@ function ProjectDashboard() {
           Project "{projectName}"
         </Typography.Title>
         <Typography.Title heading={3}>Logs</Typography.Title>
-        <Logs projectName={projectName!} />
+        <Logs projectName={projectName} />
         {data.current ? (
           <>
             <Typography.Title heading={3}>Actions</Typography.Title>

diff --git a/neetbox/frontend/src/pages/console/sidebar.tsx b/neetbox/frontend/src/pages/console/sidebar.tsx
@@ -6,7 +6,7 @@ import { Link, useLocation } from "react-router-dom";
 
 export default function ConsoleNavBar() {
   const location = useLocation();
-  const { isLoading, data, error } = useAPI("/list");
+  const { isLoading, data, error } = useAPI("/list", { refreshInterval: 5000 });
   return (
     <Nav
       renderWrapper={(args) => {

diff --git a/neetbox/frontend/src/services/api.ts b/neetbox/frontend/src/services/api.ts
@@ -1,5 +1,4 @@
-import { useEffect } from "react";
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 
 export const API_BASEURL = "/web";
 export const WEBSOCKET_URL = import.meta.env.DEV
@@ -12,13 +11,5 @@ async function fetcher(url: string) {
 }
 
 export function useAPI(url: string, options?: { refreshInterval?: number }) {
-  useEffect(() => {
-    if (options?.refreshInterval) {
-      const timer = setInterval(() => {
-        mutate(url);
-      }, options.refreshInterval);
-      return () => clearInterval(timer);
-    }
-  }, [url, options?.refreshInterval]);
-  return useSWR(url, fetcher);
+  return useSWR(url, fetcher, options);
 }