chore: clean console logs

proxoar · Sep 22, 2023 · 82855cf · 82855cf
1 parent 9a3d842
commit 82855cf
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/src/api/sse/sse.tsx b/src/api/sse/sse.tsx
@@ -43,7 +43,7 @@ export const SSE = () => {
                 console.info("[SSE] connected to server, response: ", response);
             },
             onmessage: (msg) => {
-                console.debug("received an msg from SSE server", msg.event, msg.data.slice(0, 500))
+                // console.debug("received a msg from SSE server", msg.event, msg.data.slice(0, 500))
                 const data = JSON.parse(msg.data)
                 if (msg.event === EventSystemAbility) {
                     const sa = data as ServerAbility
@@ -116,11 +116,11 @@ export const SSE = () => {
                 console.error("[SSE] error:", err)
             },
             onclose: () => {
-                console.debug("[SSE] closed")
+                console.info("[SSE] closed")
             }
         })
         return () => {
-            console.debug("[SSE] trying to abort")
+            console.info("[SSE] trying to abort")
             ctrl.abort()
         }
     }, [passwordHash])

diff --git a/src/home/chat-window/message-list.tsx b/src/home/chat-window/message-list.tsx
@@ -37,6 +37,7 @@ export const MessageList: React.FC<MLProps> = ({chatProxy}) => {
     const [hasUpdate, setHasUpdate] = useState(0)
     const [hasNewAudio, setHasNewAudio] = useState("")
 
+    const [isOverflow, setIsOverflow] = useState(false);
     const [isAtBottom, setIsAtBottom] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -50,14 +51,37 @@ export const MessageList: React.FC<MLProps> = ({chatProxy}) => {
         scrollToBottom()
     }, [id, scrollToBottom]);
 
+    const onScroll = useCallback(() => {
+    }, []);
+
+
+    useEffect(() => {
+        const observer = new MutationObserver(() => {
+            if (containerRef.current) {
+                // console.debug("containerRef.current.scrollHeight > containerRef.current.clientHeight",containerRef.current.scrollHeight > containerRef.current.clientHeight)
+                setIsOverflow(containerRef.current.scrollHeight > containerRef.current.clientHeight);
+            }
+        });
+
+        if (containerRef.current) {
+            observer.observe(containerRef.current, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                attributeOldValue: true,
+                attributeFilter: ['style', 'class'],
+            });
+        }
+        return () => observer.disconnect();
+    }, []);
+
     useEffect(() => {
         const container = containerRef.current;
 
         const handleScroll = () => {
             if (container) {
                 const {scrollTop, scrollHeight, clientHeight} = container;
-                const isBottom = scrollTop + clientHeight + 50 >= scrollHeight;
-                console.debug("isBottom", isBottom)
+                const isBottom = scrollTop + clientHeight >= scrollHeight - 200;
                 setIsAtBottom(isBottom);
             }
         };
@@ -156,7 +180,9 @@ export const MessageList: React.FC<MLProps> = ({chatProxy}) => {
     return (
         <div ref={containerRef}
              className="w-full overflow-y-auto pr-1 scrollbar-hidden hover:scrollbar-visible">
-            <div className="flex w-full select-text flex-col justify-end gap-3 rounded-2xl">
+            <div className="flex w-full select-text flex-col justify-end gap-3 rounded-2xl"
+                 onResize={onScroll}
+            >
                 {/*crucial; don't merge the 2 divs above*/}
                 {messages.map((msg, index) =>
                     msg.status !== 'deleted' &&
@@ -175,7 +201,7 @@ export const MessageList: React.FC<MLProps> = ({chatProxy}) => {
             <div className="sticky bottom-1 flex justify-end pr-3 z-40">
                 <HiOutlineChevronDown
                     className={cx("h-8 w-8 p-1.5 bg-neutral-100 rounded-full",
-                        isAtBottom ? "hidden" : "")}
+                        isOverflow && !isAtBottom ? "" : "hidden")}
                     onClick={() => scrollToBottom("smooth")}
                 />
             </div>

diff --git a/src/state/app-state.ts b/src/state/app-state.ts
@@ -123,7 +123,7 @@ subscribe(appState, () => {
         return
     }
     const as = snapshot(appState)
-    console.debug("saving appState:", as)
+    // console.debug("saving appState:", as)
     appDb.setItem(appStateKey, as).then(() => {
         console.debug("saved")
     })

diff --git a/src/state/control-state.ts b/src/state/control-state.ts
@@ -1,4 +1,4 @@
-import {proxy, ref, subscribe} from "valtio";
+import {proxy, ref} from "valtio";
 import {EnhancedRecorder} from "../util/enhanced-recorder.ts";
 import {popularMimeTypes, RecordingMimeType} from "../config.ts";
 import {chooseAudioMimeType} from "../util/util.tsx";
@@ -58,9 +58,9 @@ export const controlState = proxy<ControlState>({
     audioDurationUpdateSignal: 0
 })
 
-subscribe(controlState.player, () => {
-    console.debug("player status:", controlState.player)
-})
+// subscribe(controlState.player, () => {
+//     console.debug("player status:", controlState.player)
+// })
 
 export const playerState = controlState.player