reveal notebook in frontend when create success

Author: Sorosliu1029

jupyterlab_leetcode/handlers/leetcode_handler.py

@@ -351,8 +351,6 @@ async def post(self):
             self.finish({"message": "Question not found"})
             return
 
-        self.log.info(question)
-
         notebook_generator = self.settings.get("notebook_generator")
         if not notebook_generator:
             notebook_generator = NotebookGenerator()

jupyterlab_leetcode/utils/notebook_generator.py

@@ -137,9 +137,9 @@ def __populate_run(self, snippet):
         func_name = func_match[1]
         run_cell["source"] = [f"Solution().{func_name}()"]
 
-    def __dump(self, q, base_dir="."):
+    def __dump(self, q):
         qid = q["questionFrontendId"]
-        directory = os.path.join(base_dir, get_folder_for(int(qid), 50))
+        directory = get_folder_for(int(qid), 50)
         if not os.path.exists(directory):
             os.mkdir(directory)
 

src/components/LeetCode.tsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from 'react';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { getProfile } from '../services/leetcode';
 import { LeetCodeProfile } from '../types/leetcode';
 import Profile from './Profile';
 import Statistics from './Statistics';
 import QuestionList from './QuestionList';
 
-const LeetCode: React.FC = () => {
+const LeetCode: React.FC<{ docManager: IDocumentManager }> = ({
+  docManager
+}) => {
   const [profile, setProfile] = useState<LeetCodeProfile | null>(null);
 
   useEffect(() => {
@@ -18,11 +21,15 @@ const LeetCode: React.FC = () => {
     });
   }, []);
 
+  const openNoteBook = (path: string) => {
+    docManager.openOrReveal(path);
+  };
+
   return profile ? (
     <div>
       <Profile profile={profile} />
       <Statistics username={profile.username} />
-      <QuestionList />
+      <QuestionList openNotebook={openNoteBook} />
     </div>
   ) : null;
 };

src/components/QuestionItem.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { LeetCodeQuestion } from '../types/leetcode';
 import { generateNotebook } from '../services/notebook';
 
-const QuestionItem: React.FC<{ question: LeetCodeQuestion }> = ({
-  question
-}) => {
+const QuestionItem: React.FC<{
+  question: LeetCodeQuestion;
+  onGenerateSuccess: (p: string) => void;
+}> = ({ question, onGenerateSuccess }) => {
   return (
     <div>
       <a
@@ -13,7 +14,19 @@ const QuestionItem: React.FC<{ question: LeetCodeQuestion }> = ({
       >
         {question.title}
       </a>
-      <button onClick={() => generateNotebook(question.titleSlug)}>C</button>
+      <button
+        onClick={() => {
+          generateNotebook(question.titleSlug).then(r => {
+            console.log('generateNotebook', r);
+            if (r) {
+              const { filePath } = r;
+              onGenerateSuccess(filePath);
+            }
+          });
+        }}
+      >
+        C
+      </button>
     </div>
   );
 };

src/components/QuestionList.tsx

@@ -3,7 +3,9 @@ import { listQuestions } from '../services/leetcode';
 import { LeetCodeQuestion } from '../types/leetcode';
 import QuestionItem from './QuestionItem';
 
-const QuestionList: React.FC = () => {
+const QuestionList: React.FC<{ openNotebook: (p: string) => void }> = ({
+  openNotebook
+}) => {
   const [skip, setSkip] = useState(0);
   const limit = 100;
   const [keyword, setKeyword] = useState('');
@@ -44,7 +46,11 @@ const QuestionList: React.FC = () => {
       {questions.length > 0 ? (
         <div>
           {questions.map(q => (
-            <QuestionItem key={q.id} question={q} />
+            <QuestionItem
+              key={q.id}
+              question={q}
+              onGenerateSuccess={(path: string) => openNotebook(path)}
+            />
           ))}
         </div>
       ) : null}

src/index.ts

@@ -4,6 +4,7 @@ import {
   ILayoutRestorer
 } from '@jupyterlab/application';
 import { ICommandPalette, WidgetTracker } from '@jupyterlab/apputils';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 
 import LeetCodeWidget from './widget';
 
@@ -16,11 +17,12 @@ const plugin: JupyterFrontEndPlugin<void> = {
   id: PLUGIN_ID,
   description: 'Integrate LeetCode into beloved Jupyter.',
   autoStart: true,
-  requires: [ICommandPalette],
+  requires: [ICommandPalette, IDocumentManager],
   optional: [ILayoutRestorer],
   activate: (
     app: JupyterFrontEnd,
     palette: ICommandPalette,
+    docManager: IDocumentManager,
     restorer: ILayoutRestorer | null
   ) => {
     let leetcodeWidget: LeetCodeWidget;
@@ -30,7 +32,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
       label: 'Open LeetCode Widget',
       execute: () => {
         if (!leetcodeWidget || leetcodeWidget.isDisposed) {
-          leetcodeWidget = new LeetCodeWidget();
+          leetcodeWidget = new LeetCodeWidget(docManager);
         }
         if (!tracker.has(leetcodeWidget)) {
           tracker.add(leetcodeWidget);

src/services/notebook.ts

@@ -1,8 +1,8 @@
 import { requestAPI } from './handler';
 
 export async function generateNotebook(titleSlug: string) {
-  return requestAPI<{ ok: boolean }>('/notebook/create', {
+  return requestAPI<{ filePath: string }>('/notebook/create', {
     method: 'POST',
     body: JSON.stringify({ titleSlug })
-  }).catch(() => ({ ok: false }));
+  }).catch(() => null);
 }

src/widget.tsx

@@ -1,10 +1,13 @@
 import { ReactWidget } from '@jupyterlab/ui-components';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import React, { StrictMode, useEffect, useState } from 'react';
 import LandingPage from './components/LandingPage';
 import LeetCode from './components/LeetCode';
 import { getCookie } from './services/cookie';
 
-const LeetCodeComponent = (): JSX.Element => {
+const LeetCodeComponent: React.FC<{ docManager: IDocumentManager }> = ({
+  docManager
+}) => {
   const [cookieLoggedIn, setCookieLoggedIn] = useState('');
 
   useEffect(() => {
@@ -22,23 +25,26 @@ const LeetCodeComponent = (): JSX.Element => {
   });
 
   return cookieLoggedIn ? (
-    <LeetCode />
+    <LeetCode docManager={docManager} />
   ) : (
     <LandingPage setCookieLoggedIn={b => setCookieLoggedIn(b)} />
   );
 };
 
 class LeetCodeWidget extends ReactWidget {
-  constructor() {
+  docManager: IDocumentManager;
+
+  constructor(docManager: IDocumentManager) {
     super();
     this.id = 'JupyterlabLeetcodeWidget';
     this.addClass('jupyterlab-leetcode-widget');
+    this.docManager = docManager;
   }
 
-  protected render(): JSX.Element {
+  render(): JSX.Element {
     return (
       <StrictMode>
-        <LeetCodeComponent />
+        <LeetCodeComponent docManager={this.docManager} />
       </StrictMode>
     );
   }