change(ui): add filtering by current userId

frontend/app/components/Assist/RecordingsList/Recordings.tsx

@@ -1,25 +1,44 @@
-import React from 'react'
+import React from 'react';
 import { PageTitle } from 'UI';
+import Select from 'Shared/Select';
 import RecordingsSearch from './RecordingsSearch';
 import RecordingsList from './RecordingsList';
+import { useStore } from 'App/mstore';
+import { connect } from 'react-redux';
 
-function Recordings() {
+function Recordings({ userId }: { userId: string }) {
+  const { recordingsStore } = useStore();
+
+  const recordingsOwner = [
+    { value: '0', label: 'All Recordings' },
+    { value: userId, label: 'My Recordings' },
+  ];
 
   return (
-    <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 border">
-            <div className="flex items-center mb-4 justify-between px-6">
-                <div className="flex items-baseline mr-3">
-                    <PageTitle title="Recordings" />
-                </div>
-                <div className="ml-auto flex items-center">
-                    <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
-                        <RecordingsSearch />
-                    </div>
-                </div>
-            </div>
-            <RecordingsList />
+    <div style={{ maxWidth: '1300px', margin: 'auto' }} className="bg-white rounded py-4 border">
+      <div className="flex items-center mb-4 justify-between px-6">
+        <div className="flex items-baseline mr-3">
+          <PageTitle title="Recordings" />
         </div>
-  )
+        <div className="ml-auto flex items-center">
+          <Select
+            name="recsOwner"
+            plain
+            right
+            options={recordingsOwner}
+            onChange={({ value }) => recordingsStore.setUserId(value.value)}
+            defaultValue={recordingsOwner[0].value}
+          />
+          <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
+            <RecordingsSearch />
+          </div>
+        </div>
+      </div>
+      <RecordingsList />
+    </div>
+  );
 }
 
-export default Recordings
+export default connect((state: any) => ({ userId: state.getIn(['user', 'account', 'id']) }))(
+  Recordings
+);

frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx

@@ -10,20 +10,22 @@ const sortOptionsMap = {
   'createdAt-ASC': 'Oldest',
 };
 const sortOptions = Object.entries(sortOptionsMap).map(([value, label]) => ({ value, label }));
-const notesOwner = [{ value: '0', label: 'All Notes'},{ value: '1', label: 'My Notes'}]
+const notesOwner = [
+  { value: '0', label: 'All Notes' },
+  { value: '1', label: 'My Notes' },
+];
 function NoteTags() {
-  const { notesStore } = useStore()
-
+  const { notesStore } = useStore();
 
   return (
     <div className="flex items-center">
-        <div>
-          <TagItem
-            onClick={() => notesStore.toggleTag()}
-            label="ALL"
-            isActive={notesStore.activeTags.length === 0}
-          />
-        </div>
+      <div>
+        <TagItem
+          onClick={() => notesStore.toggleTag()}
+          label="ALL"
+          isActive={notesStore.activeTags.length === 0}
+        />
+      </div>
       {TAGS.map((tag: iTag) => (
         <div key={tag}>
           <TagItem
@@ -34,9 +36,23 @@ function NoteTags() {
         </div>
       ))}
       <div className="ml-2" />
-      <Select name="notesOwner" plain right options={notesOwner} onChange={({ value }) => notesStore.toggleShared(value.value === '1')} defaultValue={notesOwner[0].value} />
+      <Select
+        name="notesOwner"
+        plain
+        right
+        options={notesOwner}
+        onChange={({ value }) => notesStore.toggleShared(value.value === '1')}
+        defaultValue={notesOwner[0].value}
+      />
       <div className="ml-2" />
-      <Select name="sortNotes" plain right options={sortOptions} onChange={({ value }) => notesStore.toggleSort(value.value)} defaultValue={sortOptions[0].value} />
+      <Select
+        name="sortNotes"
+        plain
+        right
+        options={sortOptions}
+        onChange={({ value }) => notesStore.toggleSort(value.value)}
+        defaultValue={sortOptions[0].value}
+      />
     </div>
   );
 }

frontend/app/mstore/recordingsStore.ts

@@ -11,7 +11,7 @@ export default class RecordingsStore {
   order: 'desc' | 'asc' = 'desc';
   search = '';
   // later we will add search by user id
-  userId: number;
+  userId?: string;
 
   constructor() {
     makeAutoObservable(this);
@@ -21,6 +21,11 @@ export default class RecordingsStore {
     this.recordings = records;
   }
 
+  setUserId(userId: string) {
+    this.userId = userId;
+    this.fetchRecordings();
+  }
+
   updateSearch(val: string) {
     this.search = val;
   }
@@ -34,6 +39,7 @@ export default class RecordingsStore {
       limit: this.pageSize,
       order: this.order,
       search: this.search,
+      userId: this.userId === '0' ? undefined : this.userId,
     };
 
     this.loading = true;

frontend/app/mstore/userStore.ts

@@ -1,12 +1,12 @@
 import { makeAutoObservable, observable, action } from "mobx"
-import User, { IUser } from "./types/user";
+import User from "./types/user";
 import { userService } from "App/services";
 import { toast } from 'react-toastify';
 import copy from 'copy-to-clipboard';
 
 export default class UserStore {
-    list: IUser[] = [];
-    instance: IUser|null = null;
+    list: User[] = [];
+    instance: User|null = null;
     page: number = 1;
     pageSize: number = 10;
     searchQuery: string = "";
@@ -62,7 +62,7 @@ export default class UserStore {
         }
     }
 
-    updateUser(user: IUser) {
+    updateUser(user: User) {
         const index = this.list.findIndex(u => u.userId === user.userId);
         if (index > -1) {
             this.list[index] = user;
@@ -101,7 +101,7 @@ export default class UserStore {
         });
     }
 
-    saveUser(user: IUser): Promise<any> {
+    saveUser(user: User): Promise<any> {
         this.saving = true;
         const wasCreating = !user.userId;
         return new Promise((resolve, reject) => {