Add key-binding to iterate between files

The keys are j to go down and k to go up, inspired from vim.
pbu88 · Aug 2, 2022 · 1cb6af2 · 1cb6af2
1 parent 763cbb1
commit 1cb6af2
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 2 deletions.
diff --git a/frontend/src/app/diff-detail/diff-detail.component.spec.ts b/frontend/src/app/diff-detail/diff-detail.component.spec.ts
@@ -41,7 +41,34 @@ describe('DiffDetailComponent', () => {
               rawDiff: "--",
               created: DIFF_CREATED_DATE,
               expiresAt: DIFF_EXPIRES_AT,
-              diff: [],
+              diff: [
+                {
+                  blocks: [ /* explicitly excluded until needed */],
+                  deletedLines: 1,
+                  addedLines: 1,
+                  isGitDiff: true,
+                  checksumBefore: '1456e89',
+                  checksumAfter: 'e1da2da',
+                  mode: '100644',
+                  oldName: 'file.json',
+                  language: 'json',
+                  newName: 'file.json',
+                  isCombined: false
+                },
+                {
+                  blocks: [ /* explicitly excluded until needed */],
+                  deletedLines: 1,
+                  addedLines: 1,
+                  isGitDiff: true,
+                  checksumBefore: '1456e8f',
+                  checksumAfter: 'e1da2dc',
+                  mode: '100644',
+                  oldName: 'file1.json',
+                  language: 'json',
+                  newName: 'file1.json',
+                  isCombined: false
+                }
+              ],
             }),
             extendLifetime: () => of({
               id: DIFF_ID,
@@ -88,4 +115,11 @@ describe('DiffDetailComponent', () => {
     component.getMakePermanentDiffFn()("foo@example.com");
     expect(component.sharedDiff.expiresAt).toEqual(new Date("9999-01-01"));
   });
+
+  it('selectNextFile', () => {
+    component.selectNextFile()
+    expect(component.selectedFileId).toEqual("d2h-397377");
+    component.selectNextFile()
+    expect(component.selectedFileId).toEqual("d2h-822182");
+  });
 });
diff --git a/frontend/src/app/diff-detail/diff-detail.component.ts b/frontend/src/app/diff-detail/diff-detail.component.ts
@@ -8,6 +8,7 @@ import { DiffyService } from '../diffy.service';
 import { SharedDiff } from 'diffy-models';
 import { Error } from '../types/Error';
 import { AnalyticsService } from '../analytics.service';
+import { printerUtils } from './printer-utils';
 
 const DIFF_MAX_DATE = new Date('9999-01-01');
 const MAKE_PERMANENT_THRESHOLD = 5 * 24 * 60 * 60 * 1000 - 1;
@@ -26,6 +27,7 @@ export class DiffDetailComponent implements OnInit {
   selectedFileId: string;
   dom: Document;
   currentId: string;
+  fileIds: string[];
 
   constructor(
       private router: Router,
@@ -39,12 +41,24 @@ export class DiffDetailComponent implements OnInit {
   }
 
   ngOnInit() {
+
+    // TODO: Must refactor this into its own KeyBindingService, this way is too hacky
+    window.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === "j") {
+        this.selectNextFile();
+      } else if(event.key === "k") {
+        this.selectPrevFile();
+      }
+    });
+
     const id = this.route.snapshot.paramMap.get('id');
     this.currentId = id;
     this.loading = true;
     this.diffyService.getDiff(id).subscribe(
         sharedDiff => {
           this.sharedDiff = sharedDiff
+          this.fileIds = printerUtils.getListOfFileIds(sharedDiff.diff)
+          this.selectedFileId = this.fileIds[0]
           this.loading = false;
         },
         error => {
@@ -54,7 +68,15 @@ export class DiffDetailComponent implements OnInit {
 
   private getFileName(file) {
     return file.newName == '/dev/null' ? file.oldName : file.newName;
-  };
+  }
+
+  selectNextFile() : void {
+    this.selectedFileId = this.fileIds[(this.fileIds.findIndex((element) => element == this.selectedFileId) + 1) % this.fileIds.length];
+  }
+
+  selectPrevFile() : void {
+    this.selectedFileId = this.fileIds[(this.fileIds.findIndex((element) => element == this.selectedFileId) - 1 + this.fileIds.length) % this.fileIds.length];
+  }
 
   shouldDisplayMakePermanent(): boolean {
     const dateDiff = this.sharedDiff.expiresAt.getTime() - this.sharedDiff.created.getTime();
@@ -145,6 +167,7 @@ export class DiffDetailComponent implements OnInit {
   getCurrentUrl() {
     return window.location.href;
   }
+
   isDiffPermanent() {
     return this.sharedDiff.expiresAt >= DIFF_MAX_DATE;
   }

diff --git a/frontend/src/app/diff-detail/printer-utils.ts b/frontend/src/app/diff-detail/printer-utils.ts
@@ -25,6 +25,17 @@ PrinterUtils.prototype.separatePrefix = function(isCombined, line) {
   return {'prefix': prefix, 'line': lineWithoutPrefix};
 };
 
+/**
+ * diff: DiffFile[]
+ */
+PrinterUtils.prototype.getListOfFileIds = function(diff) {
+  var fileIds = [];
+  for(var i=0; i < diff.length; i++) {
+    fileIds.push(this.getHtmlId(diff[i]));
+  }
+  return fileIds;
+}
+
 PrinterUtils.prototype.getHtmlId = function(file) {
   var hashCode = function(text) {
     var i, chr, len;