Fix use effect on panel

jupyterlab · Mar 3, 2021 · 100c18e · 100c18e
1 parent a5cfa74
commit 100c18e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 deletions.
diff --git a/TODO b/TODO
@@ -3,7 +3,7 @@
 - [x] Fix using ref from commit sha rather than branch to ensure consistency when requesting file content and discussion
 - [x] Use Widget panel and handle life cycle for discussion
 - [x] Fix styling
-- [ ] Fix use effect on panel
+- [x] Fix use effect on panel
 - [ ] Fix notebooks
   - [ ] Hide unchanged cells (and the comments structure)
   - [x] Support added and removed notebooks (currently JSON error as content on one side is "")

diff --git a/src/components/PullRequestPanel.tsx b/src/components/PullRequestPanel.tsx
@@ -1,12 +1,55 @@
+import { ReactWidget } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { CommandRegistry } from '@lumino/commands';
+import { Message } from '@lumino/messaging';
 import React, { useEffect, useState } from 'react';
 import { BeatLoader } from 'react-spinners';
 import { IPullRequest, IPullRequestGroup } from '../tokens';
 import { requestAPI } from '../utils';
 import { PullRequestBrowser } from './browser/PullRequestBrowser';
 import { PullRequestToolbar } from './PullRequestToolbar';
 
+/**
+ * React wrapper to mount and unmount the React child component
+ * when the widget is shown/hidden.
+ *
+ * In this case this is particularly interesting to trigger the
+ * useEffect of the React widget to update the pull requests list
+ * each time the user come back to the panel.
+ */
+export class PullRequestPanelWrapper extends ReactWidget {
+  constructor(commands: CommandRegistry, docRegistry: DocumentRegistry) {
+    super();
+    this._commands = commands;
+    this._docRegistry = docRegistry;
+  }
+
+  onBeforeShow(msg: Message): void {
+    super.onBeforeShow(msg);
+    this.update();
+  }
+
+  onBeforeHide(msg: Message): void {
+    super.onBeforeHide(msg);
+    this.onBeforeDetach(msg);
+  }
+
+  render(): JSX.Element {
+    return (
+      this.isAttached &&
+      this.isVisible && (
+        <PullRequestPanel
+          commands={this._commands}
+          docRegistry={this._docRegistry}
+        />
+      )
+    );
+  }
+
+  private _commands: CommandRegistry;
+  private _docRegistry: DocumentRegistry;
+}
+
 export interface IPullRequestPanelProps {
   /**
    * Jupyter Front End Commands Registry
@@ -53,7 +96,7 @@ async function fetchPullRequests(
   );
 }
 
-export function PullRequestPanel(props: IPullRequestPanelProps): JSX.Element {
+function PullRequestPanel(props: IPullRequestPanelProps): JSX.Element {
   const [pullRequests, setPullRequests] = useState<IPullRequestGroup[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const refreshPullRequests = (): void => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,15 +1,14 @@
-import React from 'react';
 import {
   ILayoutRestorer,
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-import { ReactWidget, MainAreaWidget } from '@jupyterlab/apputils';
+import { MainAreaWidget } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { diffIcon } from '@jupyterlab/git/lib/style/icons';
 import { Widget } from '@lumino/widgets';
-import { PullRequestPanel } from './components/PullRequestPanel';
+import { PullRequestPanelWrapper } from './components/PullRequestPanel';
 import {
   CommandIDs,
   IFile,
@@ -49,8 +48,7 @@ function findWidget(
 function activate(
   app: JupyterFrontEnd,
   restorer: ILayoutRestorer,
-  renderMime: IRenderMimeRegistry,
-  settings: ISettingRegistry | null
+  renderMime: IRenderMimeRegistry
 ): void {
   const { commands, shell } = app;
 
@@ -122,9 +120,7 @@ function activate(
   });
 
   // Create the Pull Request widget sidebar
-  const prPanel = ReactWidget.create(
-    <PullRequestPanel commands={commands} docRegistry={app.docRegistry} />
-  );
+  const prPanel = new PullRequestPanelWrapper(commands, app.docRegistry);
 
   prPanel.id = 'pullRequests';
   prPanel.title.icon = pullRequestsIcon;