change(ui): add not found modal

frontend/app/components/Session/WebPlayer.js

@@ -110,15 +110,16 @@ function WebPlayer(props) {
             <Modal open={showNoteModal} onClose={onNoteClose}>
                 {showNoteModal ? (
                     <ReadNote
-                        userEmail={props.members.find(m => m.id === noteItem.userId)?.email || noteItem.userId}
+                        userEmail={props.members.find(m => m.id === noteItem?.userId)?.email || ''}
-                        timestamp={noteItem.timestamp}
+                        timestamp={noteItem?.timestamp}
-                        tags={noteItem.tags}
+                        tags={noteItem?.tags}
-                        isPublic={noteItem.isPublic}
+                        isPublic={noteItem?.isPublic}
-                        message={noteItem.message}
+                        message={noteItem?.message}
-                        sessionId={noteItem.sessionId}
+                        sessionId={noteItem?.sessionId}
-                        date={noteItem.createdAt}
+                        date={noteItem?.createdAt}
-                        noteId={noteItem.noteId}
+                        noteId={noteItem?.noteId}
                         onClose={onNoteClose}
+                        notFound={!noteItem}
                     />
                 ) : null}
             </Modal>

frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx

@@ -15,12 +15,38 @@ interface Props {
   date: string;
   noteId: number;
   onClose: () => void;
+  notFound?: boolean;
 }
 
 function ReadNote(props: Props) {
   const { settingsStore } = useStore();
   const { timezone } = settingsStore.sessionSettings;
 
+  if (props.notFound) {
+    return (
+      <div style={{ position: 'absolute', top: '45%', left: 'calc(50% - 200px)' }}>
+        <div
+          className="flex items-start flex-col p-4 border gap-2"
+          style={{ background: '#FFFEF5', width: 400 }}
+        >
+          <div className="flex items-start font-semibold w-full text-xl">
+            <div style={{ flex: 9 }}>You do not have access to this note. <br /> Or it’s deleted.</div>
+            <div style={{ flex: 1 }} className="cursor-pointer ml-auto" onClick={props.onClose}>
+              <Icon name="close" size={18} />
+            </div>
+          </div>
+          <div
+            onClick={props.onClose}
+            className="rounded py-2 px-4 mt-2 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
+          >
+            <Icon size={16} name="play-fill" color="main" />
+            <span>Play Session</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div style={{ position: 'absolute', top: '45%', left: 'calc(50% - 300px)' }}>
       <div
@@ -42,7 +68,7 @@ function ReadNote(props: Props) {
           </div>
         </div>
         <div>{props.message}</div>
-        <div>
+        <div className="w-full">
           <div className="flex items-center gap-2 flex-wrap w-full">
             {props.tags.length ? (
               <div className="flex items-center gap-1">
@@ -61,6 +87,14 @@ function ReadNote(props: Props) {
                 <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> Team
               </>
             )}
+
+            <div
+              onClick={props.onClose}
+              className="ml-auto rounded py-2 px-4 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
+            >
+              <Icon size={16} name="play-fill" color="main" />
+              <span>Play Session</span>
+            </div>
           </div>
         </div>
       </div>