Better error handling when uploading the diff

On both ends, better promise handling in the backend in case of errors and better feedback on the frontend while waiting for a diff to upload or when getting the errors from the backend
pbu88 · Sep 17, 2021 · 4226fc4 · 4226fc4
1 parent 9702f0a
commit 4226fc4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 24 deletions.
diff --git a/backend/src/App.ts b/backend/src/App.ts
@@ -115,9 +115,14 @@ app.put('/api/diff', function (req: any, res: any) {
   return action.storeSharedDiff(shared_diff).then((obj: SharedDiff) => {
     if (!obj.id) {
       console.warn('new: undefined obj id');
+      return Promise.reject({error: 'new: undefined obj id'});
     }
     res.send(obj);
-  }).catch(err => console.error(err));
+  }).catch(err => {
+    console.error(err)
+    res.status(500)
+    res.send({error: "Oops, something failed, please try again later ..."});
+  });
 });
 
 app.get('/diff_download/:id', function (req: any, res: any) {

diff --git a/frontend/src/app/home-page/home-page.component.css b/frontend/src/app/home-page/home-page.component.css
@@ -5,3 +5,7 @@ span.hljs {
     color: #333;
     background: inherit;
 }
+
+.no-pointer-events {
+    pointer-events: none;
+}
diff --git a/frontend/src/app/home-page/home-page.component.html b/frontend/src/app/home-page/home-page.component.html
@@ -35,8 +35,8 @@ <h4>Windows:</h4>
                         placeholder="Paste here any git diff output or upload a file with the diff contents"></textarea>
                 </div>
                 <div class="form-group">
-                    <a (click)="diffMeClick()" class="btn btn-success btn-lg" style="padding: 15px 60px;font-size:20px;margin:20px 5px;">Diff me</a>
-                    <span class="btn btn-success btn-lg btn-default btn-file" style="padding: 15px 60px;font-size:20px;margin:20px 0;">
+                    <a (click)="diffMeClick()" [ngClass]="{'btn': true, 'btn-success': true, 'btn-lg': true, 'no-pointer-events': isUploading()}" style="padding: 15px 60px;font-size:20px;margin:20px 5px;">Diff me</a>
+                    <span [ngClass]="{'btn': true, 'btn-success': true, 'btn-lg': true, 'btn-default': true, 'btn-file': true, 'no-pointer-events': isUploading()}" style="padding: 15px 60px;font-size:20px;margin:20px 0;">
                         Upload Diff<input (change)="uploadChange($event)" id="submit-file" name="diffFile" type="file">
                     </span>
                 </div>

diff --git a/frontend/src/app/home-page/home-page.component.ts b/frontend/src/app/home-page/home-page.component.ts
@@ -1,12 +1,12 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
-import {of} from 'rxjs';
-import {catchError} from 'rxjs/operators';
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
-import {AlertService} from '../alert.service';
-import {AnalyticsService} from '../analytics.service';
-import {DiffyService} from '../diffy.service';
-import {Error} from '../types/Error';
+import { AlertService } from '../alert.service';
+import { AnalyticsService } from '../analytics.service';
+import { DiffyService } from '../diffy.service';
+import { Error } from '../types/Error';
 
 @Component({
   selector: 'app-home-page',
@@ -15,30 +15,38 @@ import {Error} from '../types/Error';
 })
 export class HomePageComponent implements OnInit {
   @Input() diffText: string;
+  private uploading: boolean;
 
   constructor(
-      private router: Router, private diffyService: DiffyService,
-      private alertService: AlertService, private analyticsService: AnalyticsService) {}
+    private router: Router, private diffyService: DiffyService,
+    private alertService: AlertService, private analyticsService: AnalyticsService) {
 
-  ngOnInit() {}
+    this.uploading = false;
+  }
+
+  ngOnInit() { }
+
+  isUploading(): boolean {
+    return this.uploading;
+  }
 
   diffMeClick() {
     this.analyticsService.clickDiffMeButton();
     this.submitDiff();
   }
 
   submitDiff() {
+    this.uploading = true;
     this.diffyService.storeDiff(this.diffText)
-        .subscribe(
-            sharedDiff => {
-              if (!sharedDiff || !sharedDiff.id) {
-                return;
-              }
-              this.router.navigate([`/diff/${sharedDiff.id}`])
-            },
-            (error: Error) => {
-              this.alertService.error('Error: ' + error.text);
-            });
+      .subscribe(
+        sharedDiff => {
+          this.router.navigate([`/diff/${sharedDiff.id}`])
+          this.uploading = false;
+        },
+        (error: Error) => {
+          this.alertService.error('Error: ' + error.text);
+          this.uploading = false;
+        });
   }
 
   uploadChange(fileInput: Event) {