Adding curl example snippet (#25)

* Adding curl example

* Adding curl snippet

src/app/_components/code-snippet/code-snippet.component.html

@@ -0,0 +1 @@
+<pre>{{ contents }}</pre>

src/app/_components/code-snippet/code-snippet.component.scss

@@ -0,0 +1,11 @@
+pre {
+  font-family: Consolas, 'Courier New', Courier, monospace;
+  color: silver;
+  background: black;
+  max-width: 800px;
+  padding: 5px;
+  margin: 6px 0px;
+  overflow: scroll;
+  overflow-x: auto;
+  overflow-y: auto;
+}

src/app/_components/code-snippet/code-snippet.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { CodeSnippetComponent } from './code-snippet.component';
+
+describe('CodeSnippetComponent', () => {
+  let component: CodeSnippetComponent;
+  let fixture: ComponentFixture<CodeSnippetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CodeSnippetComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeSnippetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_components/code-snippet/code-snippet.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-code-snippet',
+  templateUrl: './code-snippet.component.html',
+  styleUrls: ['./code-snippet.component.scss'],
+})
+export class CodeSnippetComponent implements OnInit {
+
+  @Input()
+  contents: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/_pipes/curl-cmd.pipe.spec.ts

@@ -0,0 +1,26 @@
+import { CurlCmdPipe } from './curl-cmd.pipe';
+
+describe('CurlCmdPipe', () => {
+
+  const pipe = new CurlCmdPipe();
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should generate curl command', () => {
+    expect(pipe.transform('2 lbs carrots', 'http://dummyurl.com')).toBe(`
+curl \\
+  --get \\
+  --data-urlencode 'q=2 lbs carrots' \\
+  "http://dummyurl.com/v1/parse"`.trim());
+  });
+
+  it('should escape single quotes', () => {
+    expect(pipe.transform('2 cups tomatoes (don\'t chop them up; you won\'t like it)', 'http://dummyurl.com')).toBe(`
+curl \\
+  --get \\
+  --data-urlencode 'q=2 cups tomatoes (don\\\'t chop them up; you won\\\'t like it)' \\
+  "http://dummyurl.com/v1/parse"`.trim());
+  });
+});

src/app/_pipes/curl-cmd.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'curlCmd',
+})
+export class CurlCmdPipe implements PipeTransform {
+
+  transform(ingredientRaw: string, backendUrl: string): any {
+    const ingredientEscaped = ingredientRaw.replace(/'/g, '\\\'');
+    return `
+curl \\
+  --get \\
+  --data-urlencode 'q=${ingredientEscaped}' \\
+  "${backendUrl}/v1/parse"
+`.trim();
+  }
+
+}

src/app/app.component.spec.ts

@@ -4,13 +4,15 @@ import { AppComponent } from './app.component';
 import { HomePageComponent } from './public/home-page/home-page.component';
 import { FormsModule } from '@angular/forms';
 import { ParserService } from './_services/parser.service';
+import { CurlCmdPipe } from './_pipes/curl-cmd.pipe';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
+        CurlCmdPipe,
         HomePageComponent,
       ],
       imports: [
@@ -19,6 +21,7 @@ describe('AppComponent', () => {
       ],
       providers: [
         ParserService,
+        CurlCmdPipe,
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();

src/app/app.module.ts

@@ -18,6 +18,9 @@ import { AppComponent } from './app.component';
 // Modules
 import { AppRoutingModule } from './app-routing.module';
 
+// Pipes
+import { CurlCmdPipe } from './_pipes/curl-cmd.pipe';
+
 // Services
 import { ParserService } from './_services/parser.service';
 
@@ -28,14 +31,17 @@ import { NavComponent } from './_components/nav/nav.component';
 // Public pages
 import { HomePageComponent } from './public/home-page/home-page.component';
 import { SignUpComponent } from './public/sign-up/sign-up.component';
+import { CodeSnippetComponent } from './_components/code-snippet/code-snippet.component';
 
 @NgModule({
   declarations: [
     AppComponent,
+    CurlCmdPipe,
     HomePageComponent,
     MailingListComponent,
     NavComponent,
     SignUpComponent,
+    CodeSnippetComponent,
   ],
   imports: [
     AppRoutingModule,
@@ -51,7 +57,7 @@ import { SignUpComponent } from './public/sign-up/sign-up.component';
     MatProgressSpinnerModule,
     MatToolbarModule,
   ],
-  providers: [ParserService],
+  providers: [CurlCmdPipe, ParserService],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/public/home-page/home-page.component.html

@@ -6,14 +6,14 @@ <h1>Developer Demo</h1>
   <button mat-raised-button color="primary" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult || !ingredientRaw">Parse</button>
   <button mat-raised-button (click)="reset()" [disabled]="!ingredientRaw">Reset</button>
 </form>
-<div *ngIf="isWaitingForParseResult">
+<div *ngIf="isWaitingForParseResult" class="top-level">
   <mat-spinner></mat-spinner>
 </div>
-<div class="error" *ngIf="error">
+<div class="error" *ngIf="error" class="top-level">
   <p>{{ error }}</p>
 </div>
 <div
-  class="result-cards"
+  class="result-cards top-level"
   *ngIf="!isWaitingForParseResult && ingredientParsed">
   <mat-card *ngIf="ingredientParsed.quantity">
     <mat-card-title>{{ ingredientParsed.quantity | number:'1.0-2' }}</mat-card-title>
@@ -32,6 +32,10 @@ <h1>Developer Demo</h1>
     <mat-card-subtitle>preparation instructions</mat-card-subtitle>
   </mat-card>
 </div>
-<div *ngIf="requestsRemaining !== null">
+<div *ngIf="requestsRemaining !== null" class="top-level">
   <span class="fieldName">Requests remaining</span>: {{ requestsRemaining }}
+</div>
+<div *ngIf="curlExample" class="top-level">
+  <div>Or, using <span class="code">curl</span>:</div>
+  <app-code-snippet [contents]="curlExample"></app-code-snippet>
 </div>

src/app/public/home-page/home-page.component.scss

@@ -29,7 +29,11 @@ span.fieldName {
   color: red;
 }
 
-div.error {
+.code {
+  font-family: Consolas, 'Courier New', Courier, monospace;
+}
+
+div.top-level {
   margin-top: 15px;
 }
 

src/app/public/home-page/home-page.component.spec.ts

@@ -8,6 +8,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { HomePageComponent } from './home-page.component';
 import { ParseResult } from '../../_models/parse-result';
 import { ParserService } from '../../_services/parser.service';
+import { CurlCmdPipe } from '../../_pipes/curl-cmd.pipe';
 
 @Injectable()
 export class MockParserService {
@@ -23,12 +24,13 @@ describe('HomePageComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [HomePageComponent],
+      declarations: [HomePageComponent, CurlCmdPipe],
       imports: [
         HttpClientTestingModule,
         FormsModule,
       ],
       providers: [
+        CurlCmdPipe,
         { provide: ParserService, useClass: MockParserService },
       ],
       schemas: [NO_ERRORS_SCHEMA],

src/app/public/home-page/home-page.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { environment } from '../../../environments/environment';
 
 import { IngredientParsed, ParseResult } from '../../_models/parse-result';
 import { ParserService } from '../../_services/parser.service';
+import { CurlCmdPipe } from '../../_pipes/curl-cmd.pipe';
 
 @Component({
   selector: 'app-home-page',
@@ -14,8 +16,9 @@ export class HomePageComponent implements OnInit {
   ingredientParsed: IngredientParsed;
   error: string;
   requestsRemaining: number = null;
+  curlExample: string = null;
 
-  constructor(private parserService: ParserService) { }
+  constructor(private parserService: ParserService, private curlCmdPipe: CurlCmdPipe) { }
 
   ngOnInit() {}
 
@@ -26,6 +29,7 @@ export class HomePageComponent implements OnInit {
     this.parserService.parseIngredient(raw).subscribe(
       (response) => {
         this.isWaitingForParseResult = false;
+        this.curlExample = this.curlCmdPipe.transform(raw, environment.backendBaseUrl);
         const parseResult = response;
         if (parseResult.error) {
           this.error = parseResult.error;
@@ -51,6 +55,7 @@ export class HomePageComponent implements OnInit {
     this.ingredientRaw = '';
     this.ingredientParsed = null;
     this.error = null;
+    this.curlExample = null;
   }
 
   private isString(x) {