- Added debounce time to requests from frontend

- Made editors full height & full width
- Applied ParsingException more consistently

DevDisciples.Json.Tools.App/src/app/defaults.ts

@@ -0,0 +1,26 @@
+export const MonacoJsonConfig = {
+  theme: 'vs-dark',
+  language: 'json',
+  readOnly: false,
+  automaticLayout: true
+};
+
+export const ReadOnlyMonacoJsonConfig = {
+  theme: 'vs-dark',
+  language: 'json',
+  readOnly: true,
+  automaticLayout: true
+};
+
+export const ReadOnlyMonacoCSharpConfig = {
+  theme: 'vs-dark',
+  language: 'csharp',
+  readOnly: false,
+  automaticLayout: true
+};
+
+export const GenerateDefaultJsonObjectString = (space: number = 0): string => {
+  return JSON.stringify({first_name: "John", last_name: "Doe"}, null, space);
+}
+
+export const DebounceTime: number = 750;

DevDisciples.Json.Tools.App/src/app/input-output/input-output.component.scss

@@ -1,12 +1,19 @@
 main {
   display: flex;
   flex-direction: row;
+  height: 100%;
+  width: 100%;
 
   #left {
-    flex: .5;
+    flex: 0.5;
   }
 
   #right {
-    flex: .5;
+    flex: 0.5;
+  }
+
+  ngx-monaco-editor {
+    height: 100%;
+    width: 100%;
   }
 }

DevDisciples.Json.Tools.App/src/app/json2csharp/json2-csharp.component.ts

@@ -1,6 +1,13 @@
-import {AfterViewInit, Component, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {InputOutputComponent} from "../input-output/input-output.component";
 import {JsonTransformService} from "../json-transform.service";
+import {
+  DebounceTime,
+  GenerateDefaultJsonObjectString,
+  MonacoJsonConfig,
+  ReadOnlyMonacoCSharpConfig
+} from "../defaults";
+import {debounceTime, Subject} from "rxjs";
 
 @Component({
   selector: 'app-json2csharp',
@@ -11,47 +18,27 @@ import {JsonTransformService} from "../json-transform.service";
   templateUrl: './json2-csharp.component.html',
   styleUrl: './json2-csharp.component.scss'
 })
-export class Json2CsharpComponent implements AfterViewInit {
+export class Json2CsharpComponent implements OnInit {
-  input: string = JSON.stringify({first_name: "John", last_name: "Doe"}, null, 2);
+  input: string = GenerateDefaultJsonObjectString(2);
-  inputOptions = {theme: 'vs-dark', language: 'json', readOnly: false};
+  $input: Subject<string> = new Subject<string>();
-  output: string = JSON.stringify({first_name: "John", last_name: "Doe"});
+  inputOptions = MonacoJsonConfig;
-  outputOptions = {theme: 'vs-dark', language: 'csharp', readOnly: true};
+  output: string = "";
+  outputOptions = ReadOnlyMonacoCSharpConfig;
 
   constructor(private service: JsonTransformService) {
   }
 
-  ngAfterViewInit(): void {
-    this.service
-      .json2csharp(this.input)
-      .subscribe(response => {
-        console.log(response);
-
-        if (response.status === 200) {
-          this.output = response.body.result;
-        } else if (response.status === 499) {
-          this.output = response.body.detail;
-        }
-      });
-  }
-
   ngOnInit(): void {
-    // this.service
+    this.$input
-    //   .json2csharp(this.input)
+      .pipe(debounceTime(DebounceTime))
-    //   .subscribe(response => {
+      .subscribe(input => this.update(input));
-    //     console.log(response);
+
-    //
+    this.update(this.input);
-    //     if (response.status === 200) {
-    //       this.output = response.body.result;
-    //     } else if (response.status === 499) {
-    //       this.output = response.body.detail;
-    //     }
-    //   });
   }
 
-  handleInputChange($event: any) {
+  update(input: string): void {
-    console.log($event);
     this.service
-      .json2csharp($event)
+      .json2csharp(input)
       .subscribe({
         next: response => {
           console.log(response);
@@ -66,4 +53,9 @@ export class Json2CsharpComponent implements AfterViewInit {
         }
       });
   }
+
+  handleInputChange($event: any): void {
+    console.log($event);
+    this.$input.next($event);
+  }
 }

DevDisciples.Json.Tools.App/src/app/layout/layout.component.html

@@ -17,9 +17,9 @@
       <span>JSON Transform</span>
     </mat-toolbar>
 
-    <div class="content">
+    <main>
       <!-- Add your dashboard content here -->
       <router-outlet></router-outlet>
-    </div>
+    </main>
   </mat-sidenav-content>
 </mat-sidenav-container>

DevDisciples.Json.Tools.App/src/app/layout/layout.component.scss

@@ -1,11 +1,15 @@
-.sidenav-container {
+mat-sidenav-container {
   height: 100%;
 }
 
-.sidenav {
+mat-sidenav-content {
+  overflow: hidden;
+}
+
+mat-sidenav {
   width: 250px;
 }
 
-.content {
+main {
-  padding: 16px;
+  height: 100%;
 }

DevDisciples.Json.Tools.App/src/app/prettify/prettify.component.ts

@@ -1,8 +1,15 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {EditorComponent} from "ngx-monaco-editor-v2";
 import {FormsModule} from "@angular/forms";
 import {InputOutputComponent} from "../input-output/input-output.component";
 import {JsonTransformService} from "../json-transform.service";
+import {
+  DebounceTime,
+  GenerateDefaultJsonObjectString,
+  MonacoJsonConfig,
+  ReadOnlyMonacoJsonConfig
+} from "../defaults";
+import {debounceTime, Subject} from "rxjs";
 
 @Component({
   selector: 'app-prettify',
@@ -15,20 +22,28 @@ import {JsonTransformService} from "../json-transform.service";
   templateUrl: './prettify.component.html',
   styleUrl: './prettify.component.scss'
 })
-export class PrettifyComponent {
+export class PrettifyComponent implements OnInit {
-  input: string = JSON.stringify({first_name: "John", last_name: "Doe"});
+  input: string = GenerateDefaultJsonObjectString();
-  inputOptions = {theme: 'vs-dark', language: 'json', readOnly: false};
+  $input: Subject<string> = new Subject<string>();
-  output: string = JSON.stringify({first_name: "John", last_name: "Doe"}, null, 2);
+  inputOptions = MonacoJsonConfig;
-  outputOptions = {theme: 'vs-dark', language: 'json', readOnly: true};
+  output: string = GenerateDefaultJsonObjectString(2);
+  outputOptions = ReadOnlyMonacoJsonConfig;
   error: string = "";
 
   constructor(private service: JsonTransformService) {
   }
 
-  handleInputChange($event: any) {
+  ngOnInit(): void {
-    console.log($event);
+    this.$input
+      .pipe(debounceTime(DebounceTime))
+      .subscribe(input => {
+        this.update(input)
+      });
+  }
+
+  update(input: string): void {
     this.service
-      .prettify($event)
+      .prettify(input)
       .subscribe({
         next: response => {
           console.log(response);
@@ -43,4 +58,9 @@ export class PrettifyComponent {
         }
       });
   }
+
+  handleInputChange($event: any): void {
+    console.log($event);
+    this.$input.next($event);
+  }
 }

DevDisciples.Json.Tools.App/src/app/uglify/uglify.component.ts

@@ -1,6 +1,13 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {JsonTransformService} from "../json-transform.service";
 import {InputOutputComponent} from "../input-output/input-output.component";
+import {
+  DebounceTime,
+  GenerateDefaultJsonObjectString,
+  MonacoJsonConfig,
+  ReadOnlyMonacoJsonConfig
+} from "../defaults";
+import {debounceTime, Subject} from "rxjs";
 
 @Component({
   selector: 'app-uglify',
@@ -11,19 +18,27 @@ import {InputOutputComponent} from "../input-output/input-output.component";
   templateUrl: './uglify.component.html',
   styleUrl: './uglify.component.scss'
 })
-export class UglifyComponent {
+export class UglifyComponent implements OnInit {
-  input: string = JSON.stringify({first_name: "John", last_name: "Doe"}, null, 2);
+  input: string = GenerateDefaultJsonObjectString(2);
-  inputOptions = {theme: 'vs-dark', language: 'json', readOnly: false};
+  $input: Subject<string> = new Subject<string>();
-  output: string = JSON.stringify({first_name: "John", last_name: "Doe"});
+  inputOptions = MonacoJsonConfig;
-  outputOptions = {theme: 'vs-dark', language: 'json', readOnly: true};
+  output: string = GenerateDefaultJsonObjectString();
+  outputOptions = ReadOnlyMonacoJsonConfig;
 
   constructor(private service: JsonTransformService) {
   }
 
-  handleInputChange($event: any) {
+  ngOnInit(): void {
-    console.log($event);
+    this.$input
+      .pipe(debounceTime(DebounceTime))
+      .subscribe(input => {
+        this.update(input)
+      });
+  }
+
+  update(input: string): void {
     this.service
-      .uglify($event)
+      .uglify(input)
       .subscribe({
         next: response => {
           console.log(response);
@@ -38,4 +53,9 @@ export class UglifyComponent {
         }
       });
   }
+
+  handleInputChange($event: any): void {
+    console.log($event);
+    this.$input.next($event);
+  }
 }

DevDisciples.Json.Tools/Json2CSharpTranslator.cs

@@ -22,7 +22,7 @@ public static partial class Json2CSharpTranslator
     public static string Translate(string source, Context? context = null)
     {
         if (JsonParser.Parse("<source>", source) is not JsonObject root)
-            throw new Exception("Expected a JSON object.");
+            throw new ParsingException("Expected a JSON object.");
 
         context ??= new();
 

DevDisciples.Parsing/Report.cs

@@ -4,16 +4,16 @@ public static class Report
 {
     public static Exception Error(ISourceLocation token, string message)
     {
-        return new(FormatMessage(token, message));
+        return new ParsingException(FormatMessage(token, message));
     }
 
     public static void Halt(ISourceLocation token, string message)
     {
-        throw new(FormatMessage(token, message));
+        throw new ParsingException(FormatMessage(token, message));
     }
-    
+
     public static string FormatMessage(ISourceLocation token, string msg)
     {
         return $"{token.File}\n\t[line: {token.Line}, column: {token.Column}] {msg}";
     }
-}
+}