From da6d5ae01156c2aadf3ed3b1ddeefecbaffc489d Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 7 Apr 2023 10:20:50 +0200
Subject: [PATCH] fix(ui): fix live assist console logs

---
 .../Player/LivePlayer/LivePlayerInst.tsx        |  2 +-
 .../{BottomBlock.js => BottomBlock.tsx}         | 10 ++++++++--
 .../BottomBlock/{Content.js => Content.tsx}     |  2 +-
 .../BottomBlock/{Header.js => Header.tsx}       |  6 ++++++
 .../DevTools/ConsolePanel/ConsolePanel.tsx      | 17 ++++++++++-------
 .../shared/DevTools/ConsoleRow/ConsoleRow.tsx   |  2 +-
 .../{CloseButton.js => CloseButton.tsx}         |  2 +-
 7 files changed, 28 insertions(+), 13 deletions(-)
 rename frontend/app/components/shared/DevTools/BottomBlock/{BottomBlock.js => BottomBlock.tsx} (69%)
 rename frontend/app/components/shared/DevTools/BottomBlock/{Content.js => Content.tsx} (83%)
 rename frontend/app/components/shared/DevTools/BottomBlock/{Header.js => Header.tsx} (81%)
 rename frontend/app/components/ui/CloseButton/{CloseButton.js => CloseButton.tsx} (72%)

diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
index 148b203c8..389b3a027 100644
--- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
@@ -56,7 +56,7 @@ function Player(props: IProps) {
       </div>
       {bottomBlock === CONSOLE ? (
         <div style={{ maxWidth, width: '100%' }}>
-          <ConsolePanel />
+          <ConsolePanel isLive />
         </div>
       ) : null}
       {!fullView && !isMultiview ? (
diff --git a/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.js b/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.tsx
similarity index 69%
rename from frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.js
rename to frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.tsx
index 8b7826755..4df38eb2e 100644
--- a/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.js
+++ b/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.tsx
@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { CSSProperties, useEffect } from 'react';
 import cn from 'classnames';
 import stl from './bottomBlock.module.css';
 
-let timer = null;
 const BottomBlock = ({
   children = null,
   className = '',
@@ -10,6 +9,13 @@ const BottomBlock = ({
   onMouseEnter = () => {},
   onMouseLeave = () => {},
   ...props
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  additionalHeight?: number;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  style?: Partial<CSSProperties>;
 }) => {
   useEffect(() => {}, []);
 
diff --git a/frontend/app/components/shared/DevTools/BottomBlock/Content.js b/frontend/app/components/shared/DevTools/BottomBlock/Content.tsx
similarity index 83%
rename from frontend/app/components/shared/DevTools/BottomBlock/Content.js
rename to frontend/app/components/shared/DevTools/BottomBlock/Content.tsx
index 3df383911..1f8e57d98 100644
--- a/frontend/app/components/shared/DevTools/BottomBlock/Content.js
+++ b/frontend/app/components/shared/DevTools/BottomBlock/Content.tsx
@@ -6,7 +6,7 @@ const Content = ({
   children,
   className,
   ...props
-}) => (
+}: { children?: React.ReactNode; className?: string }) => (
   <div className={ cn(className, stl.content) } { ...props } >
     { children }
   </div>
diff --git a/frontend/app/components/shared/DevTools/BottomBlock/Header.js b/frontend/app/components/shared/DevTools/BottomBlock/Header.tsx
similarity index 81%
rename from frontend/app/components/shared/DevTools/BottomBlock/Header.js
rename to frontend/app/components/shared/DevTools/BottomBlock/Header.tsx
index f743ab3a5..6f4b14bc7 100644
--- a/frontend/app/components/shared/DevTools/BottomBlock/Header.js
+++ b/frontend/app/components/shared/DevTools/BottomBlock/Header.tsx
@@ -12,6 +12,12 @@ const Header = ({
   onFilterChange,
   showClose = true,
   ...props
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  closeBottomBlock?: () => void;
+  onFilterChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  showClose?: boolean;
 }) => (
   <div className={ cn("relative border-r border-l py-1", stl.header) } >
     <div className={ cn("w-full h-full flex justify-between items-center", className) } >
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 21eb6c021..8f7d6db29 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -29,7 +29,7 @@ const LEVEL_TAB = {
 
 const TABS = [ALL, ERRORS, WARNINGS, INFO].map((tab) => ({ text: tab, key: tab }));
 
-function renderWithNL(s = '') {
+function renderWithNL(s: string | null = '') {
   if (typeof s !== 'string') return '';
   return s.split('\n').map((line, i) => <div key={i + line.slice(0, 6)} className={cn({ 'ml-20': i !== 0 })}>{line}</div>);
 }
@@ -59,7 +59,7 @@ const getIconProps = (level: any) => {
 
 const INDEX_KEY = 'console';
 
-function ConsolePanel() {
+function ConsolePanel({ isLive }: { isLive: boolean }) {
   const {
     sessionStore: { devTools },
   } = useStore()
@@ -75,10 +75,13 @@ function ConsolePanel() {
   const jump = (t: number) => player.jump(t)
 
   const { logList, exceptionsList, logListNow, exceptionsListNow } = store.get()
-  const list = useMemo(() => 
-    logList.concat(exceptionsList).sort((a, b) => a.time - b.time),
+  const list = isLive ?
+    useMemo(() => logListNow.concat(exceptionsListNow).sort((a, b) => a.time - b.time),
+      [logListNow.length, exceptionsListNow.length]
+    ) as ILog[]
+    : useMemo(() => logList.concat(exceptionsList).sort((a, b) => a.time - b.time),
     [ logList.length, exceptionsList.length ],
-  ) as ILog[]
+    ) as ILog[]
   let filteredList = useRegExListFilterMemo(list, l => l.value, filter)  
   filteredList = useTabListFilterMemo(filteredList, l => LEVEL_TAB[l.level], ALL, activeTab)
 
@@ -101,7 +104,7 @@ function ConsolePanel() {
     timeoutStartAutoscroll()
   }
   
-  const _list = useRef(null); // TODO: fix react-virtualized types & incapsulate scrollToRow logic
+  const _list = useRef(null); // TODO: fix react-virtualized types & encapsulate scrollToRow logic
   useEffect(() => {
     if (_list.current) {
       // @ts-ignore
@@ -132,7 +135,7 @@ function ConsolePanel() {
     return (
         // @ts-ignore
         <CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
-          {({ measure }: any) => (
+          {() => (
             <ConsoleRow
               style={style}
               log={item}
diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
index e035e92f6..b7f1af261 100644
--- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
@@ -21,7 +21,7 @@ function ConsoleRow(props: Props) {
 
   const toggleExpand = () => {
     setExpanded(!expanded);
-    setTimeout(() => recalcHeight(), 0);
+    setTimeout(() => recalcHeight?.(), 0);
   };
   return (
     <div
diff --git a/frontend/app/components/ui/CloseButton/CloseButton.js b/frontend/app/components/ui/CloseButton/CloseButton.tsx
similarity index 72%
rename from frontend/app/components/ui/CloseButton/CloseButton.js
rename to frontend/app/components/ui/CloseButton/CloseButton.tsx
index 51e760ecf..33efa7912 100644
--- a/frontend/app/components/ui/CloseButton/CloseButton.js
+++ b/frontend/app/components/ui/CloseButton/CloseButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from 'UI';
 
-export default function CloseButton({ size, onClick, className = '', style }){
+export default function CloseButton({ size, onClick, className = '', style }: { size?: number | string; onClick?: () => void; className?: string; style?: React.CSSProperties }){
 	return (
 	  <button onClick={ onClick } className={ `${ className } cursor-pointer` } style={ style } >
 	    <Icon name="close" size={ size } color="gray-medium"/>