From b6e0446099703bfdeb2de2d25558e105f493cf6b Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 5 Oct 2022 17:30:07 +0200
Subject: [PATCH] fix(player): fix resizer

---
 .../Session_/EventsBlock/EventGroupWrapper.js | 109 ++++++++++--------
 .../Session_/EventsBlock/EventsBlock.js       |   6 +-
 2 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
index 8cc5e81c9..1ec053462 100644
--- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
+++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
@@ -7,32 +7,41 @@ import { TYPES } from 'Types/session/event';
 import Event from './Event'
 import stl from './eventGroupWrapper.module.css';
 import NoteEvent from './NoteEvent';
-import { setEditNoteTooltip } from 'Duck/sessions';
-import { Note } from 'App/services/NotesService';
+import { setEditNoteTooltip } from 'Duck/sessions';;
 
 // TODO: incapsulate toggler in LocationEvent
-@withToggle("showLoadInfo", "toggleLoadInfo")
-@connect(state => ({members: state.getIn(['members', 'list']), currentUserId: state.getIn(['user', 'account', 'id']) }), { setEditNoteTooltip })
+@withToggle('showLoadInfo', 'toggleLoadInfo')
+@connect(
+  (state) => ({
+    members: state.getIn(['members', 'list']),
+    currentUserId: state.getIn(['user', 'account', 'id']),
+  }),
+  { setEditNoteTooltip }
+)
 class EventGroupWrapper extends React.Component {
-
   toggleLoadInfo = (e) => {
     e.stopPropagation();
     this.props.toggleLoadInfo();
-  }
+  };
 
   componentDidUpdate(prevProps) {
-    if (prevProps.showLoadInfo !== this.props.showLoadInfo || prevProps.query !== this.props.query) {
+    if (
+      prevProps.showLoadInfo !== this.props.showLoadInfo ||
+      prevProps.query !== this.props.query ||
+      prevProps.event.timestamp !== this.props.event.timestamp ||
+      prevProps.isNote !== this.props.isNote
+    ) {
       this.props.mesureHeight();
     }
   }
   componentDidMount() {
-    this.props.toggleLoadInfo(this.props.isFirst)
+    this.props.toggleLoadInfo(this.props.isFirst);
     this.props.mesureHeight();
   }
 
   onEventClick = (e) => this.props.onEventClick(e, this.props.event);
 
-  onCheckboxClick = e => this.props.onCheckboxClick(e, this.props.event);
+  onCheckboxClick = (e) => this.props.onCheckboxClick(e, this.props.event);
 
   render() {
     const {
@@ -51,63 +60,71 @@ class EventGroupWrapper extends React.Component {
     } = this.props;
     const isLocation = event.type === TYPES.LOCATION;
 
-    const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION)
+    const whiteBg =
+      (isLastInGroup && event.type !== TYPES.LOCATION) ||
+      (!isLastEvent && event.type !== TYPES.LOCATION);
     const safeRef = String(event.referrer || '');
 
     return (
       <div
-        className={
-          cn(stl.container, "!py-1", {
+        className={cn(
+          stl.container,
+          '!py-1',
+          {
             [stl.last]: isLastInGroup,
             [stl.first]: event.type === TYPES.LOCATION,
             [stl.dashAfter]: isLastInGroup && !isLastEvent,
-          }, isLastInGroup && '!pb-2', event.type === TYPES.LOCATION && "!pt-2 !pb-2")
-        }
+          },
+          isLastInGroup && '!pb-2',
+          event.type === TYPES.LOCATION && '!pt-2 !pb-2'
+        )}
       >
-        { isFirst && isLocation && event.referrer &&
-          <div className={ stl.referrer }>
+        {isFirst && isLocation && event.referrer && (
+          <div className={stl.referrer}>
             <TextEllipsis>
               Referrer: <span className={stl.url}>{safeRef}</span>
             </TextEllipsis>
           </div>
-        }
+        )}
         {isNote ? (
           <NoteEvent
-            userEmail={this.props.members.find(m => m.id === event.userId)?.email || event.userId}
+            userEmail={this.props.members.find((m) => m.id === event.userId)?.email || event.userId}
             note={event}
             filterOutNote={filterOutNote}
             onEdit={this.props.setEditNoteTooltip}
             noEdit={this.props.currentUserId !== event.userId}
           />
-        ) : isLocation
-          ? <Event
-              extended={isFirst}
-              key={ event.key }
-              event={ event }
-              onClick={ this.onEventClick }
-              selected={ isSelected }
-              showLoadInfo={ showLoadInfo }
-              toggleLoadInfo={ this.toggleLoadInfo }
-              isCurrent={ isCurrent }
-              presentInSearch={presentInSearch}
-              isLastInGroup={isLastInGroup}
-              whiteBg={whiteBg}
-            />
-          : <Event
-              key={ event.key }
-              event={ event }
-              onClick={ this.onEventClick }
-              onCheckboxClick={ this.onCheckboxClick }
-              selected={ isSelected }
-              isCurrent={ isCurrent }
-              showSelection={ showSelection }
-              overlayed={ isEditing }
-              presentInSearch={presentInSearch}
-              isLastInGroup={isLastInGroup}
-              whiteBg={whiteBg}
-            />}
+        ) : isLocation ? (
+          <Event
+            extended={isFirst}
+            key={event.key}
+            event={event}
+            onClick={this.onEventClick}
+            selected={isSelected}
+            showLoadInfo={showLoadInfo}
+            toggleLoadInfo={this.toggleLoadInfo}
+            isCurrent={isCurrent}
+            presentInSearch={presentInSearch}
+            isLastInGroup={isLastInGroup}
+            whiteBg={whiteBg}
+          />
+        ) : (
+          <Event
+            key={event.key}
+            event={event}
+            onClick={this.onEventClick}
+            onCheckboxClick={this.onCheckboxClick}
+            selected={isSelected}
+            isCurrent={isCurrent}
+            showSelection={showSelection}
+            overlayed={isEditing}
+            presentInSearch={presentInSearch}
+            isLastInGroup={isLastInGroup}
+            whiteBg={whiteBg}
+          />
+        )}
       </div>
-    )
+    );
   }
 }
 
diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.js b/frontend/app/components/Session_/EventsBlock/EventsBlock.js
index e160e3238..0a7f28f88 100644
--- a/frontend/app/components/Session_/EventsBlock/EventsBlock.js
+++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.js
@@ -24,7 +24,7 @@ import EventSearch from './EventSearch/EventSearch';
   setEventFilter,
   filterOutNote
 })
-export default class EventsBlock extends React.PureComponent {
+export default class EventsBlock extends React.Component {
   state = {
     editingEvent: null,
     mouseOver: false,
@@ -177,8 +177,8 @@ export default class EventsBlock extends React.PureComponent {
               isNote={isNote}
               filterOutNote={filterOutNote}
             />
-          </div>
-        )}
+           </div>
+         )}
       </CellMeasurer>
     );
   }