From 2216e75659a2d3b54ba25be71a8be8b0a421e0ca Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 29 Sep 2022 18:04:14 +0200
Subject: [PATCH] feat(ui): tags and some bugfixes

---
 .../Session_/EventsBlock/NoteEvent.tsx        |  4 +--
 .../components/Notes/NoteList.tsx             | 24 ++++++++++++++++--
 .../components/Notes/NoteTags.tsx             | 25 +++++++++++++++++++
 .../SessionHeader/SessionHeader.tsx           | 24 ++++++++++++------
 .../components/SessionTags/SessionTags.tsx    |  2 +-
 .../components/SessionTags/index.ts           |  2 +-
 frontend/app/mstore/notesStore.ts             | 13 ++++++++--
 7 files changed, 78 insertions(+), 16 deletions(-)
 create mode 100644 frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx

diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
index ae7a7245a..ba0003e3f 100644
--- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
+++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
@@ -30,7 +30,7 @@ function NoteEvent(props: Props) {
   const onEdit = () => {};
 
   const onCopy = () => {
-    copy(`${session(props.sessionId)}${props.timestamp > 0 ? '?jumpto=' + props.timestamp : ''}`);
+    copy(`${window.location.origin}${session(props.sessionId)}${props.timestamp > 0 ? '?jumpto=' + props.timestamp : ''}`);
     toast.success('Note URL copied to clipboard');
   };
 
@@ -70,7 +70,7 @@ function NoteEvent(props: Props) {
           </div>
         </div>
         <div className="cursor-pointer ml-auto">
-          <ItemMenu bolt items={menuItems} />
+          <ItemMenu bold items={menuItems} />
         </div>
       </div>
       <div>{props.message}</div>
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
index f958bf917..8ee864dc4 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
@@ -4,17 +4,37 @@ import { sliceListPerPage } from 'App/utils';
 import NoteItem from './NoteItem';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
+import { Note } from 'App/services/NotesService';
 
 function NotesList({ members }: {members: Array<Record<string, any>>}) {
   const { notesStore } = useStore()
+  const [list, setList] = React.useState<Note[]>([])
 
   React.useEffect(() => {
     if (!notesStore.notes.length) {
-      notesStore.fetchNotes()
+      notesStore.fetchNotes().then(notes => setList(notes))
     }
   }, [])
 
-  const list = notesStore.notes
+  React.useEffect(() => {
+    if (notesStore.notes.length) {
+      if (notesStore.activeTags.length) {
+        const tagsLen = notesStore.activeTags.length
+        const filteredList: Note[] = notesStore.notes.filter(note => {
+          for (let i = 0; i < tagsLen; i++) {
+            const tag = notesStore.activeTags[i]
+            if (note.tags.includes(tag)) {
+              return note
+            }
+          }
+        })
+        setList(filteredList)
+      } else {
+        setList(notesStore.notes)
+      }
+    }
+  }, [notesStore.activeTags])
+
   return (
     <NoContent
       show={list.length === 0}
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx
new file mode 100644
index 000000000..197df889d
--- /dev/null
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { TAGS, iTag } from 'App/services/NotesService';
+import { TagItem } from '../SessionTags';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
+function NoteTags() {
+  const { notesStore } = useStore()
+
+  return (
+    <div className="flex items-center">
+      {TAGS.map((tag: iTag) => (
+        <div key={tag}>
+          <TagItem
+            onClick={() => notesStore.toggleTag(tag)}
+            label={tag}
+            isActive={notesStore.activeTags.includes(tag)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default observer(NoteTags);
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
index b22500419..f3dd775d7 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
@@ -4,6 +4,7 @@ import { applyFilter } from 'Duck/search';
 import Period from 'Types/app/period';
 import SelectDateRange from 'Shared/SelectDateRange';
 import SessionTags from '../SessionTags';
+import NoteTags from '../Notes/NoteTags';
 import { connect } from 'react-redux';
 import SessionSort from '../SessionSort';
 import cn from 'classnames';
@@ -69,14 +70,21 @@ function SessionHeader(props: Props) {
                 </div>
             </div>
 
-            {activeTab === 'all' && <div className="flex items-center">
-                <SessionTags />
-                <div className="mx-4" />
-                <SelectDateRange period={period} onChange={onDateChange} right={true} />
-                <div className="mx-2" />
-                <SessionSort />
-                <SessionSettingButton />
-            </div>}
+            {activeTab === 'all' && (
+                <div className="flex items-center">
+                    <SessionTags />
+                    <div className="mx-4" />
+                    <SelectDateRange period={period} onChange={onDateChange} right={true} />
+                    <div className="mx-2" />
+                    <SessionSort />
+                    <SessionSettingButton />
+                </div>
+            )}
+            {activeTab === 'notes' && (
+                <div className="flex items-center">
+                    <NoteTags />
+                </div>
+            )}
         </div>
     );
 }
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx
index 22824e6e5..b8eb23d1e 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx
@@ -47,7 +47,7 @@ export default connect(
     }
 )(SessionTags);
 
-function TagItem({ isActive, onClick, label, icon = '', disabled = false }: any) {
+export function TagItem({ isActive, onClick, label, icon = '', disabled = false }: any) {
     return (
         <div>
             <button
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionTags/index.ts b/frontend/app/components/shared/SessionListContainer/components/SessionTags/index.ts
index 4f5e62f6c..e549909dc 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionTags/index.ts
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionTags/index.ts
@@ -1 +1 @@
-export { default } from './SessionTags';
\ No newline at end of file
+export { default, TagItem } from './SessionTags';
diff --git a/frontend/app/mstore/notesStore.ts b/frontend/app/mstore/notesStore.ts
index 2675fac0f..7791ce49a 100644
--- a/frontend/app/mstore/notesStore.ts
+++ b/frontend/app/mstore/notesStore.ts
@@ -1,6 +1,6 @@
 import { makeAutoObservable } from "mobx"
 import { notesService } from "App/services"
-import { Note, WriteNote } from 'App/services/NotesService'
+import { Note, WriteNote, iTag } from 'App/services/NotesService'
 
 interface SessionNotes {
   [sessionId: string]: Note[]
@@ -12,7 +12,7 @@ export default class NotesStore {
   loading: boolean
   page = 1
   pageSize = 15
-
+  activeTags: iTag[] = []
 
   constructor() {
     makeAutoObservable(this)
@@ -23,6 +23,7 @@ export default class NotesStore {
     try {
       const notes = await notesService.getNotes()
       this.notes = notes;
+      return notes;
     } catch (e) {
       console.error(e)
     } finally {
@@ -70,4 +71,12 @@ export default class NotesStore {
   changePage(page: number) {
     this.page = page
   }
+
+  toggleTag(tag: iTag) {
+    if (this.activeTags.includes(tag)) {
+      this.activeTags = this.activeTags.filter(exTag => tag !== exTag)
+    } else {
+      this.activeTags = [...this.activeTags, tag]
+    }
+  }
 }