From 2662b97401a7bf72bdc1297d578b8a72070caac0 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 28 Nov 2022 11:36:23 +0100
Subject: [PATCH] refactor(ui/player): connect notes

---
 frontend/app/components/Session/WebPlayer.tsx             | 3 ---
 .../app/components/Session_/Player/Controls/Timeline.js   | 4 +++-
 frontend/app/mstore/notesStore.ts                         | 8 ++------
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index d7e8a115b..779fe3a11 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -41,12 +41,9 @@ function WebPlayer(props: any) {
     );
     setContextValue({ player: WebPlayerInst, store: PlayerStore });
 
-    // initPlayer(session, jwt); TODOPlayer
     props.fetchMembers();
 
     notesStore.fetchSessionNotes(session.sessionId).then((r) => {
-      // WebPlayerInst.injectNotes(r);
-      // PlayerStore.update({ notes: r })
       const note = props.query.get('note');
       if (note) {
         WebPlayerInst.pause();
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index 9a4d0595b..307076588 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -10,6 +10,7 @@ import { debounce } from 'App/utils';
 import TooltipContainer from './components/TooltipContainer';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 const BOUNDRY = 0;
 
@@ -26,6 +27,7 @@ let debounceTooltipChange = () => null;
 function Timeline(props) {
   const { player, store } = React.useContext(PlayerContext)
   const [wasPlaying, setWasPlaying] = React.useState(false);
+  const { notesStore } = useStore();
   const {
     playing,
     time,
@@ -36,8 +38,8 @@ function Timeline(props) {
     disabled,
     endTime,
     live,
-    notes = [],
   } = store.get()
+  const notes = notesStore.sessionNotes
 
   const progressRef = React.useRef();
   const timelineRef = React.useRef();
diff --git a/frontend/app/mstore/notesStore.ts b/frontend/app/mstore/notesStore.ts
index 46d7fc652..8e1db4aa7 100644
--- a/frontend/app/mstore/notesStore.ts
+++ b/frontend/app/mstore/notesStore.ts
@@ -2,13 +2,9 @@ import { makeAutoObservable } from "mobx"
 import { notesService } from "App/services"
 import { Note, WriteNote, iTag, NotesFilter } from 'App/services/NotesService'
 
-interface SessionNotes {
-  [sessionId: string]: Note[]
-}
-
 export default class NotesStore {
   notes: Note[] = []
-  sessionNotes: SessionNotes = {}
+  sessionNotes: Note[] = []
   loading: boolean
   page = 1
   pageSize = 10
@@ -48,7 +44,7 @@ export default class NotesStore {
     this.loading = true
     try {
       const notes = await notesService.getNotesBySessionId(sessionId)
-      this.sessionNotes[sessionId] = notes
+      this.sessionNotes = notes
       return notes;
     } catch (e) {
       console.error(e)