add layout restorer to keep widget open after refresh

Author: Sorosliu1029

src/components/BrowserCookie.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BrowserCookie = () => {
+  const loadCookies = () => {
+    console.log('Loading cookies from leetcode.com');
+  };
+
+  return (
+    <div>
+      <button onClick={loadCookies}>Load</button>
+    </div>
+  );
+};
+
+export default BrowserCookie;

src/index.ts

@@ -1,7 +1,9 @@
 import {
   JupyterFrontEnd,
-  JupyterFrontEndPlugin
+  JupyterFrontEndPlugin,
+  ILayoutRestorer
 } from '@jupyterlab/application';
+import { ICommandPalette, WidgetTracker } from '@jupyterlab/apputils';
 
 import LeetCodeWidget from './widget';
 
@@ -12,13 +14,42 @@ const plugin: JupyterFrontEndPlugin<void> = {
   id: 'jupyterlab-leetcode:plugin',
   description: 'Integrate LeetCode into beloved Jupyter.',
   autoStart: true,
-  requires: [],
-  optional: [],
-  activate: (app: JupyterFrontEnd) => {
+  requires: [ICommandPalette],
+  optional: [ILayoutRestorer],
+  activate: (
+    app: JupyterFrontEnd,
+    palette: ICommandPalette,
+    restorer: ILayoutRestorer | null
+  ) => {
     console.log('JupyterLab extension jupyterlab-leetcode is activated!');
 
-    const leetcodeWidget: LeetCodeWidget = new LeetCodeWidget();
-    app.shell.add(leetcodeWidget, 'right', { rank: 599 });
+    let leetcodeWidget: LeetCodeWidget;
+
+    const command = 'leetcode-widget:open';
+    app.commands.addCommand(command, {
+      label: 'Open LeetCode Widget',
+      execute: () => {
+        if (!leetcodeWidget || leetcodeWidget.isDisposed) {
+          leetcodeWidget = new LeetCodeWidget();
+        }
+        if (!tracker.has(leetcodeWidget)) {
+          tracker.add(leetcodeWidget);
+        }
+        if (!leetcodeWidget.isAttached) {
+          app.shell.add(leetcodeWidget, 'right', { rank: 599 });
+        }
+        app.shell.activateById(leetcodeWidget.id);
+      }
+    });
+
+    palette.addItem({ command, category: 'LeetCode' });
+    const tracker = new WidgetTracker<LeetCodeWidget>({
+      namespace: 'leetcode-widget'
+    });
+    if (restorer) {
+      console.log('Restoring layout for jupyterlab-leetcode plugin');
+      restorer.restore(tracker, { command, name: () => 'leetcode' });
+    }
   }
 };
 

src/widget.tsx

@@ -1,10 +1,12 @@
 import { ReactWidget } from '@jupyterlab/ui-components';
 import React from 'react';
+import BrowserCookie from './components/BrowserCookie';
 
 const LeetCodeComponent = (): JSX.Element => {
   return (
     <div>
       <p>Welcome to JupyterLab LeetCode Widget.</p>
+      <BrowserCookie />
     </div>
   );
 };

tsconfig.json

@@ -21,5 +21,5 @@
     "target": "ES2018",
     "types": ["jest"]
   },
-  "include": ["src/*"]
+  "include": ["src/**/*"]
 }