Use a ReactContext to share the renderMime instance

Additionally,
* Remove the conditional logic while adding the commands in the File list.

Author: Jaipreet Singh

src/components/FileList.tsx

@@ -111,127 +111,112 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
       disableFiles: false
     };
 
-    /** Add right-click menu options for files in repo
-     *
-     */
-
-    if (!commands.hasCommand(CommandIDs.gitFileOpen)) {
-      commands.addCommand(CommandIDs.gitFileOpen, {
-        label: 'Open',
-        caption: 'Open selected file',
-        execute: () => {
-          try {
-            this.openListedFile(
-              this.state.contextMenuTypeX,
-              this.state.contextMenuTypeY,
-              this.state.contextMenuFile,
-              this.props.app
-            );
-          } catch (err) {}
-        }
-      });
-    }
+    commands.addCommand(CommandIDs.gitFileOpen, {
+      label: 'Open',
+      caption: 'Open selected file',
+      execute: async () => {
+        try {
+          await this.openListedFile(
+            this.state.contextMenuTypeX,
+            this.state.contextMenuTypeY,
+            this.state.contextMenuFile,
+            this.props.app
+          );
+        } catch (err) {}
+      }
+    });
+
+    commands.addCommand(CommandIDs.gitFileDiffWorking, {
+      label: 'Diff',
+      caption: 'Diff selected file',
+      execute: () => {
+        openDiffView(
+          this.state.contextMenuFile,
+          this.props.app,
+          {
+            currentRef: { specialRef: 'WORKING' },
+            previousRef: { gitRef: 'HEAD' }
+          },
+          this.props.renderMime
+        );
+      }
+    });
 
-    if (!commands.hasCommand(CommandIDs.gitFileDiffWorking)) {
-      commands.addCommand(CommandIDs.gitFileDiffWorking, {
-        label: 'Diff',
-        caption: 'Diff selected file',
-        execute: () => {
-          openDiffView(
+    commands.addCommand(CommandIDs.gitFileDiffIndex, {
+      label: 'Diff',
+      caption: 'Diff selected file',
+      execute: () => {
+        openDiffView(
+          this.state.contextMenuFile,
+          this.props.app,
+          {
+            currentRef: { specialRef: 'INDEX' },
+            previousRef: { gitRef: 'HEAD' }
+          },
+          this.props.renderMime
+        );
+      }
+    });
+
+    commands.addCommand(CommandIDs.gitFileStage, {
+      label: 'Stage',
+      caption: 'Stage the changes of selected file',
+      execute: () => {
+        try {
+          this.addUnstagedFile(
             this.state.contextMenuFile,
-            this.props.app,
-            {
-              currentRef: { specialRef: 'WORKING' },
-              previousRef: { gitRef: 'HEAD' }
-            },
-            this.props.renderMime
+            this.props.topRepoPath,
+            this.props.refresh
           );
-        }
-      });
-    }
+        } catch (err) {}
+      }
+    });
 
-    if (!commands.hasCommand(CommandIDs.gitFileDiffIndex)) {
-      commands.addCommand(CommandIDs.gitFileDiffIndex, {
-        label: 'Diff',
-        caption: 'Diff selected file',
-        execute: () => {
-          openDiffView(
+    commands.addCommand(CommandIDs.gitFileTrack, {
+      label: 'Track',
+      caption: 'Start tracking selected file',
+      execute: () => {
+        try {
+          this.addUntrackedFile(
             this.state.contextMenuFile,
-            this.props.app,
-            {
-              currentRef: { specialRef: 'INDEX' },
-              previousRef: { gitRef: 'HEAD' }
-            },
-            this.props.renderMime
+            this.props.topRepoPath,
+            this.props.refresh
           );
-        }
-      });
-    }
+        } catch (err) {}
+      }
+    });
 
-    if (!commands.hasCommand(CommandIDs.gitFileStage)) {
-      commands.addCommand(CommandIDs.gitFileStage, {
-        label: 'Stage',
-        caption: 'Stage the changes of selected file',
-        execute: () => {
-          try {
-            this.addUnstagedFile(
+    commands.addCommand(CommandIDs.gitFileUnstage, {
+      label: 'Unstage',
+      caption: 'Unstage the changes of selected file',
+      execute: () => {
+        try {
+          if (this.state.contextMenuTypeX !== 'D') {
+            this.resetStagedFile(
               this.state.contextMenuFile,
               this.props.topRepoPath,
               this.props.refresh
             );
-          } catch (err) {}
-        }
-      });
-    }
+          }
+        } catch (err) {}
+      }
+    });
+
+    commands.addCommand(CommandIDs.gitFileDiscard, {
+      label: 'Discard',
+      caption: 'Discard recent changes of selected file',
+      execute: () => {
+        try {
+          this.updateSelectedFile(
+            this.state.contextMenuIndex,
+            this.state.contextMenuStage
+          );
+          this.updateSelectedDiscardFile(this.state.contextMenuIndex);
+          this.toggleDisableFiles();
+        } catch (err) {}
+      }
+    });
 
-    if (!commands.hasCommand(CommandIDs.gitFileTrack)) {
-      commands.addCommand(CommandIDs.gitFileTrack, {
-        label: 'Track',
-        caption: 'Start tracking selected file',
-        execute: () => {
-          try {
-            this.addUntrackedFile(
-              this.state.contextMenuFile,
-              this.props.topRepoPath,
-              this.props.refresh
-            );
-          } catch (err) {}
-        }
-      });
-    }
-    if (!commands.hasCommand(CommandIDs.gitFileUnstage)) {
-      commands.addCommand(CommandIDs.gitFileUnstage, {
-        label: 'Unstage',
-        caption: 'Unstage the changes of selected file',
-        execute: () => {
-          try {
-            if (this.state.contextMenuTypeX !== 'D') {
-              this.resetStagedFile(
-                this.state.contextMenuFile,
-                this.props.topRepoPath,
-                this.props.refresh
-              );
-            }
-          } catch (err) {}
-        }
-      });
-    }
-    if (!commands.hasCommand(CommandIDs.gitFileDiscard)) {
-      commands.addCommand(CommandIDs.gitFileDiscard, {
-        label: 'Discard',
-        caption: 'Discard recent changes of selected file',
-        execute: () => {
-          try {
-            this.updateSelectedFile(
-              this.state.contextMenuIndex,
-              this.state.contextMenuStage
-            );
-            this.updateSelectedDiscardFile(this.state.contextMenuIndex);
-            this.toggleDisableFiles();
-          } catch (err) {}
-        }
-      });
-    }
     this.state.contextMenuStaged.addItem({ command: CommandIDs.gitFileOpen });
     this.state.contextMenuStaged.addItem({
       command: CommandIDs.gitFileUnstage

src/components/diff/Diff.tsx

@@ -24,7 +24,6 @@ export function isDiffSupported(path: string): boolean {
 }
 
 export interface IDiffProps {
-  renderMime: IRenderMimeRegistry;
   path: string;
   diffContext: IDiffContext;
 }
@@ -33,22 +32,20 @@ export interface IDiffProps {
  * The parent diff component which maintains a registry of various diff providers.
  * Based on the extension of the file, it delegates to the relevant diff provider.
  */
-export class Diff extends React.Component<IDiffProps, {}> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const fileExtension = PathExt.extname(this.props.path).toLocaleLowerCase();
+export function Diff(props: IDiffProps) {
+  const fileExtension = PathExt.extname(props.path).toLocaleLowerCase();
 
-    if (fileExtension in DIFF_PROVIDER_REGISTRY) {
-      const DiffProvider = DIFF_PROVIDER_REGISTRY[fileExtension];
-      return <DiffProvider {...this.props} />;
-    } else {
-      // This will be removed and delegated to a "Plaintext" diff provider for
-      // cases where the file extension does not have a dedicated diff provider.
-      console.log(`Diff is not supported for ${fileExtension} files`);
-      return null;
-    }
+  if (fileExtension in DIFF_PROVIDER_REGISTRY) {
+    const DiffProvider = DIFF_PROVIDER_REGISTRY[fileExtension];
+    return <DiffProvider {...props} />;
+  } else {
+    // This will be removed and delegated to a "Plaintext" diff provider for
+    // cases where the file extension does not have a dedicated diff provider.
+    console.log(`Diff is not supported for ${fileExtension} files`);
+    return null;
   }
 }
+
+const renderMimeContext = React.createContext<IRenderMimeRegistry | null>(null);
+export const RenderMimeProvider = renderMimeContext.Provider;
+export const RenderMimeConsumer = renderMimeContext.Consumer;

src/components/diff/DiffWidget.tsx

@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { getRefValue, IDiffContext } from './model';
-import { Diff, isDiffSupported } from './Diff';
+import { Diff, isDiffSupported, RenderMimeProvider } from './Diff';
 import { JupyterLab } from '@jupyterlab/application';
 import { showDialog } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
@@ -13,7 +13,7 @@ import { style } from 'typestyle';
 export class DiffWidget extends Widget {
   private readonly _renderMime: IRenderMimeRegistry;
   private readonly _path: string;
-  private readonly _gitContext: IDiffContext;
+  private readonly _diffContext: IDiffContext;
 
   constructor(
     renderMime: IRenderMimeRegistry,
@@ -23,7 +23,7 @@ export class DiffWidget extends Widget {
     super();
     this._renderMime = renderMime;
     this._path = path;
-    this._gitContext = gitContext;
+    this._diffContext = gitContext;
 
     this.title.label = PathExt.basename(path);
     this.title.iconClass = style({
@@ -33,23 +33,19 @@ export class DiffWidget extends Widget {
     this.addClass('jp-git-diff-parent-diff-widget');
 
     ReactDOM.render(
-      <Diff
-        renderMime={this._renderMime}
-        path={this._path}
-        diffContext={this._gitContext}
-      />,
+      <RenderMimeProvider value={this._renderMime}>
+        <Diff path={this._path} diffContext={this._diffContext} />
+      </RenderMimeProvider>,
       this.node
     );
   }
 
   onUpdateRequest(): void {
     ReactDOM.unmountComponentAtNode(this.node);
     ReactDOM.render(
-      <Diff
-        renderMime={this._renderMime}
-        path={this._path}
-        diffContext={this._gitContext}
-      />,
+      <RenderMimeProvider value={this._renderMime}>
+        <Diff path={this._path} diffContext={this._diffContext} />
+      </RenderMimeProvider>,
       this.node
     );
   }

src/components/diff/NBDiffHeader.tsx

@@ -11,46 +11,38 @@ export interface INBDiffHeaderProps {
  * being rendered. Shows the path to the file and the previous and current ref
  * being used for the diff.
  */
-export class NBDiffHeader extends React.Component<INBDiffHeaderProps, {}> {
-  constructor(props: INBDiffHeaderProps) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div>
-        <div className="jp-git-diff-header-path">{this.props.path}</div>
-        <div className="jp-Diff-addremchunk jp-git-diff-header">
-          <div className="jp-Diff-addedchunk">
-            Current:{' '}
-            {this.getRefDisplayValue(this.props.diffContext.currentRef)}
-          </div>
-          <div className="jp-Diff-removedchunk">
-            Previous:{' '}
-            {this.getRefDisplayValue(this.props.diffContext.previousRef)}
-          </div>
+export function NBDiffHeader(props: INBDiffHeaderProps) {
+  return (
+    <div>
+      <div className="jp-git-diff-header-path">{props.path}</div>
+      <div className="jp-Diff-addremchunk jp-git-diff-header">
+        <div className="jp-Diff-addedchunk">
+          Current: {getRefDisplayValue(props.diffContext.currentRef)}
+        </div>
+        <div className="jp-Diff-removedchunk">
+          Previous: {getRefDisplayValue(props.diffContext.previousRef)}
         </div>
       </div>
-    );
-  }
-
-  /**
-   * Utility method to get a user-friendly display text for a given ref.
-   */
-  private getRefDisplayValue = (ref: ISpecialRef | IGitRef): string => {
-    const SPECIAL_REFS = {
-      WORKING: {
-        displayName: 'Changed'
-      },
-      INDEX: {
-        displayName: 'Staged'
-      }
-    };
+    </div>
+  );
+}
 
-    if ('specialRef' in ref) {
-      return SPECIAL_REFS[ref.specialRef].displayName;
-    } else {
-      return ref.gitRef;
+/**
+ * Utility method to get a user-friendly display text for a given ref.
+ */
+function getRefDisplayValue(ref: ISpecialRef | IGitRef): string {
+  const SPECIAL_REFS = {
+    WORKING: {
+      displayName: 'Changed'
+    },
+    INDEX: {
+      displayName: 'Staged'
     }
   };
+
+  if ('specialRef' in ref) {
+    return SPECIAL_REFS[ref.specialRef].displayName;
+  } else {
+    return ref.gitRef;
+  }
 }