From 8ed40ffb8f6b9fcacc1fb64fe7926536a4f9c77d Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 6 Sep 2022 17:40:05 +0300
Subject: [PATCH] Create useScrollToBottomButton hook

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/dock/logs/log-list.tsx         | 18 ++++--------------
 .../dock/logs/use-scroll-to-bottom.ts         | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/components/dock/logs/use-scroll-to-bottom.ts

diff --git a/src/renderer/components/dock/logs/log-list.tsx b/src/renderer/components/dock/logs/log-list.tsx
index 4c80ebb9f7..011aa593fa 100644
--- a/src/renderer/components/dock/logs/log-list.tsx
+++ b/src/renderer/components/dock/logs/log-list.tsx
@@ -7,18 +7,19 @@ import type { LogTabViewModel } from './logs-view-model';
 import { LogRow } from "./log-row";
 import { cssNames } from "../../../utils";
 import { v4 as getRandomId } from "uuid";
+import { useScrollToBottomButton } from "./use-scroll-to-bottom";
 
 export interface LogListProps {
   model: LogTabViewModel;
 }
 
 export const LogList = observer(({ model }: LogListProps) => {
-  const [toBottomVisible, setToBottomVisible] = React.useState(false);
   const [lastLineVisible, setLastLineVisible] = React.useState(true);
   const [rowKeySuffix, setRowKeySuffix] = React.useState(getRandomId());
-
+  
   const { visibleLogs } = model;
   const parentRef = useRef<HTMLDivElement>(null)
+  const [toBottomVisible, setButtonVisibility] = useScrollToBottomButton(parentRef.current);
   const rowVirtualizer = useVirtualizer({
     count: visibleLogs.get().length,
     getScrollElement: () => parentRef.current,
@@ -31,22 +32,11 @@ export const LogList = observer(({ model }: LogListProps) => {
   const onScroll = (event: React.UIEvent<HTMLDivElement>) => {
     if (!parentRef.current) return;
 
-    setToBottomVisibility();
+    setButtonVisibility();
     setLastLineVisibility();
     onScrollToTop();
   }
 
-  // TODO: Move to its own hook
-  const setToBottomVisibility = () => {
-    const { scrollTop, scrollHeight } = parentRef.current as HTMLDivElement;
-    // console.log("scrolling", scrollHeight, scrollTop, rowVirtualizer.getTotalSize())
-    if (scrollHeight - scrollTop > 4000) {
-      setToBottomVisible(true);
-    } else {
-      setToBottomVisible(false);
-    }
-  }
-
   const setLastLineVisibility = () => {
     const { scrollTop, scrollHeight } = parentRef.current as HTMLDivElement;
 
diff --git a/src/renderer/components/dock/logs/use-scroll-to-bottom.ts b/src/renderer/components/dock/logs/use-scroll-to-bottom.ts
new file mode 100644
index 0000000000..76a16be000
--- /dev/null
+++ b/src/renderer/components/dock/logs/use-scroll-to-bottom.ts
@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+export function useScrollToBottomButton(scrolledParent: HTMLDivElement | null): [isVisible: boolean, setVisibility: () => void] {
+  const [isVisible, setToBottomVisible] = useState(false);
+
+  const setVisibility = () => {
+    if (!scrolledParent) return;
+
+    const { scrollTop, scrollHeight } = scrolledParent;
+
+    if (scrollHeight - scrollTop > 4000) {
+      setToBottomVisible(true);
+    } else {
+      setToBottomVisible(false);
+    }
+  }
+
+  return [isVisible, setVisibility];
+}
\ No newline at end of file