From 1b310a28bc9dfc845267c9536732907e77927b09 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 13 Jan 2023 16:10:29 +0100
Subject: [PATCH] fix(ui): bugfix for rage click

---
 frontend/app/components/Session/WebPlayer.tsx | 8 +++++---
 frontend/app/types/session/event.ts           | 9 ++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index f6f3cfb71..40b5674dc 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -13,6 +13,7 @@ import { fetchList as fetchMembers } from 'Duck/member';
 import PlayerContent from './PlayerContent';
 import { IPlayerContext, PlayerContext, defaultContextValue } from './playerContext';
 import { observer } from 'mobx-react-lite';
+import { Note } from "App/services/NotesService";
 
 const TABS = {
   EVENTS: 'User Steps',
@@ -36,7 +37,7 @@ function WebPlayer(props: any) {
   const { notesStore } = useStore();
   const [activeTab, setActiveTab] = useState('');
   const [showNoteModal, setShowNote] = useState(false);
-  const [noteItem, setNoteItem] = useState(null);
+  const [noteItem, setNoteItem] = useState<Note>();
   const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
 
   useEffect(() => {
@@ -54,10 +55,11 @@ function WebPlayer(props: any) {
 
     if (!isClickmap) {
       notesStore.fetchSessionNotes(session.sessionId).then((r) => {
-        const note = props.query.get('note');
+        const noteId = props.query.get('note');
+        const note = notesStore.getNoteById(parseInt(noteId, 10), r)
         if (note) {
           WebPlayerInst.pause();
-          setNoteItem(notesStore.getNoteById(parseInt(note, 10), r));
+          setNoteItem(note);
           setShowNote(true);
         }
       });
diff --git a/frontend/app/types/session/event.ts b/frontend/app/types/session/event.ts
index 575183b93..569a1903e 100644
--- a/frontend/app/types/session/event.ts
+++ b/frontend/app/types/session/event.ts
@@ -87,15 +87,18 @@ class Console extends Event {
 }
 
 class Click extends Event {
-  readonly type = CLICK;
+  readonly type: typeof CLICKRAGE | typeof CLICK = CLICK;
   readonly name = 'Click'
   targetContent = '';
   count: number
 
-  constructor(evt: ClickEvent) {
+  constructor(evt: ClickEvent, isClickRage: boolean) {
     super(evt);
     this.targetContent = evt.targetContent
     this.count = evt.count
+    if (isClickRage) {
+      this.type = CLICKRAGE
+    }
   }
 }
 
@@ -151,7 +154,7 @@ export default function(event: EventData) {
     return new Location(event as LocationEvent)
   }
   if (event.type && event.type === CLICKRAGE) {
-    return new Click(event as ClickEvent)
+    return new Click(event as ClickEvent, true)
   }
   // not used right now?
   // if (event.type === CUSTOM || !event.type) {