use jupyter lab notification component to show error

Author: Sorosliu1029

src/components/BrowserCookie.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Notification } from '@jupyterlab/apputils';
 import { getCookie } from '../services/cookie';
 import Bowser from 'bowser';
 
@@ -47,14 +48,14 @@ const BrowserCookie: React.FC<{
   }, [checked, setCookieLoggedIn]);
 
   const checkCookie = () => {
-    // TODO: change alert
     if (!browser) {
-      alert('Please select a browser.');
+      Notification.error('Please select a browser.', { autoClose: 3000 });
       return;
     }
     if (browser === 'safari') {
-      alert(
-        'Safari does not support getting cookies from the browser. Please use another browser.'
+      Notification.error(
+        'Safari does not support getting cookies from the browser. Please use another browser.',
+        { autoClose: 3000 }
       );
       return;
     }
@@ -63,7 +64,7 @@ const BrowserCookie: React.FC<{
       .then(resp => {
         setChecked(resp['checked']);
       })
-      .catch(console.error);
+      .catch(e => Notification.error(e.message, { autoClose: 3000 }));
   };
 
   return (

src/components/LeetCode.tsx

@@ -1,29 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { IDocumentManager } from '@jupyterlab/docmanager';
-import { IDocumentWidget } from '@jupyterlab/docregistry';
-import { JupyterFrontEnd, LabShell } from '@jupyterlab/application';
+import { Notification } from '@jupyterlab/apputils';
+import { JupyterFrontEnd } from '@jupyterlab/application';
 import { getProfile } from '../services/leetcode';
 import { LeetCodeProfile } from '../types/leetcode';
 import Profile from './Profile';
 import Statistics from './Statistics';
 import QuestionList from './QuestionList';
 
-export function getCurrentOpenFilePath(
-  shell: LabShell,
-  docManager: IDocumentManager,
-  widget?: IDocumentWidget
-): string | null {
-  const currentWidget = widget ?? shell.currentWidget;
-  if (!currentWidget || !docManager) {
-    return null;
-  }
-  const context = docManager.contextForWidget(currentWidget);
-  if (!context) {
-    return null;
-  }
-  return context.path;
-}
-
 const LeetCode: React.FC<{
   app: JupyterFrontEnd;
   docManager: IDocumentManager;
@@ -34,12 +18,14 @@ const LeetCode: React.FC<{
     getProfile()
       .then(profile => {
         if (!profile.isSignedIn) {
-          alert('Please sign in to LeetCode.');
+          Notification.error('Please sign in to LeetCode.', {
+            autoClose: 3000
+          });
           return;
         }
         setProfile(profile);
       })
-      .catch(console.error);
+      .catch(e => Notification.error(e.message, { autoClose: 3000 }));
   }, []);
 
   const openNoteBook = (path: string) => {

src/components/LeetCodeMainArea.tsx

@@ -4,6 +4,7 @@ import { JupyterFrontEnd } from '@jupyterlab/application';
 import LandingPage from './LandingPage';
 import LeetCode from './LeetCode';
 import { getCookie } from '../services/cookie';
+import { Notification } from '@jupyterlab/apputils';
 
 const LeetCodeMainArea: React.FC<{
   app: JupyterFrontEnd;
@@ -23,7 +24,7 @@ const LeetCodeMainArea: React.FC<{
             setCookieLoggedIn(leetcode_browser);
           }
         })
-        .catch(console.error);
+        .catch(e => Notification.error(e.message, { autoClose: 3000 }));
     }
   });
 

src/components/LeetCodeNotebookToolbar.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Notification } from '@jupyterlab/apputils';
 import { NotebookPanel, NotebookActions } from '@jupyterlab/notebook';
 import { ToolbarButtonComponent } from '@jupyterlab/ui-components';
 import { ICellModel } from '@jupyterlab/cells';
@@ -48,14 +49,14 @@ const LeetCodeNotebookToolbar: React.FC<{ notebook: NotebookPanel }> = ({
         .then(({ submission_id }) => {
           setSubmissionId(submission_id);
         })
-        .catch(console.error);
+        .catch(e => Notification.error(e.message, { autoClose: 3000 }));
     });
   };
 
   const makeWs = (submissionId: number) => {
     const ws = makeWebSocket(`submit?submission_id=${submissionId}`);
     ws.onmessage = event => {
-      console.log('WebSocket message received:', event.data);
+      console.debug('WebSocket message received:', event.data);
       const data = JSON.parse(event.data) as LeetCodeWebSocketMessage;
       if (data.submissionId !== submissionId) {
         return;
@@ -66,7 +67,7 @@ const LeetCodeNotebookToolbar: React.FC<{ notebook: NotebookPanel }> = ({
           break;
         }
         case 'error': {
-          console.error('Error from WebSocket:', data.error);
+          Notification.error(data.error, { autoClose: 3000 });
           break;
         }
       }

src/components/QuestionItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Notification } from '@jupyterlab/apputils';
 import { LeetCodeQuestion } from '../types/leetcode';
 import { generateNotebook } from '../services/notebook';
 
@@ -20,7 +21,7 @@ const QuestionItem: React.FC<{
             .then(({ filePath }) => {
               onGenerateSuccess(filePath);
             })
-            .catch(console.error);
+            .catch(e => Notification.error(e.message, { autoClose: 3000 }));
         }}
       >
         C

src/components/QuestionList.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Notification } from '@jupyterlab/apputils';
 import { listQuestions } from '../services/leetcode';
 import { LeetCodeQuestion } from '../types/leetcode';
 import QuestionItem from './QuestionItem';
@@ -30,7 +31,7 @@ const QuestionList: React.FC<{ openNotebook: (p: string) => void }> = ({
         setFinishedLength(fetchedFinishedLength);
         setTotalLength(fetchedTotalLength);
       })
-      .catch(console.error);
+      .catch(e => Notification.error(e.message, { autoClose: 3000 }));
   }, [keyword, skip]);
 
   return (

src/components/Statistics.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Notification } from '@jupyterlab/apputils';
 import { getStatistics } from '../services/leetcode';
 import { LeetCodeStatistics } from '../types/leetcode';
 
@@ -10,7 +11,7 @@ const Statistics: React.FC<{ username: string }> = ({ username }) => {
       .then(d => {
         setStatistics(d);
       })
-      .catch(console.error);
+      .catch(e => Notification.error(e.message, { autoClose: 3000 }));
   }, []);
 
   return statistics ? (