feature(http): helpers (#25)

* http module draft

* http module docs

* ninja add single run flag to npm test

* added general request method to IHttp interface

* fixed index.ts with file renamed (rest.service -> http-rest.service)

* added general request method to http-interceptor

* updated readme

* updated docs with request method

* added typescript readme highlight, rearranged readme and added note for constructor restservice

package.json

@@ -16,7 +16,7 @@
     "postinstall": "npm run typings && webdriver-manager update",
     "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
     "pretest": "rm -rf ./dist && ng build",
-    "test": "karma start ./config/karma.conf.js",
+    "test": "karma start ./config/karma.conf.js --single-run",
     "bump-dev": "gulp bump-version",
     "bump-patch": "gulp bump-version --ver patch",
     "bump-minor": "gulp bump-version --ver minor",

src/app/components/components/components.component.ts

@@ -59,6 +59,11 @@ export class ComponentsComponent {
     icon: 'devices',
     route: 'media',
     title: 'Media Queries',
+  }, {
+    description: 'Http wrappers and helpers',
+    icon: 'http',
+    route: 'http',
+    title: 'Http',
   }, {
     description: 'Custom Angular pipes (filters)',
     icon: 'filter_list',

src/app/components/components/components.routes.ts

@@ -9,6 +9,7 @@ import { FileUploadDemoComponent } from './file-upload';
 import { LoadingDemoComponent } from './loading';
 import { MarkdownDemoComponent } from './markdown';
 import { MediaDemoComponent } from './media';
+import { HttpDemoComponent } from './http';
 import { PipesComponent } from './pipes';
 
 export const componentsRoutes: RouterConfig = [{
@@ -36,6 +37,9 @@ export const componentsRoutes: RouterConfig = [{
     }, {
       component: MediaDemoComponent,
       path: 'media',
+    }, {
+      component: HttpDemoComponent,
+      path: 'http',
     }, {
       component: PipesComponent,
       path: 'pipes',

src/app/components/components/http/http.component.html

@@ -0,0 +1,125 @@
+<md-card>
+  <md-card-title>HttpInterceptorService</md-card-title>
+  <md-card-subtitle>How to use this service</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h2><code>HttpInterceptorService</code></h2>
+    <p>Service provided with methods that wrap the ng2 [Http] service and provide an easier experience for interceptor implementation.</p>
+    <p>To add a desired interceptor, it needs to implement the [IHttpInterceptor] interface.</p>
+    <td-highlight lang="typescript">
+      export interface IHttpInterceptor {
+        onRequest?: (requestOptions: RequestOptionsArgs) => RequestOptionsArgs;
+        onResponse?: (response: Response) => Response;
+        onResponseError?: (error: Response) => Response;
+      }
+    </td-highlight>
+    <h3>Methods:</h3>
+    <p>The [HttpInterceptorService] service has {{interceptorServiceMethods.length}} properties:</p>
+    <md-list>
+      <template let-attr let-last="attr" ngFor [ngForOf]="interceptorServiceMethods">
+        <a md-list-item layout-align="row">
+          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p md-line> {{attr.description}} </p>
+        </a>
+        <md-divider *ngIf="!last"></md-divider>
+      </template>
+    </md-list>
+    <h3>Example:</h3>
+    <p>Typescript:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        import { Injectable } from '@angular/core';
+        import { IHttpInterceptor } from '@covalent/http';
+
+        @Injectable()
+        export class CustomInterceptor implements IHttpInterceptor {
+
+          onRequest(requestOptions: RequestOptionsArgs): RequestOptionsArgs {
+            ... // do something to requestOptions
+            return requestOptions;
+          }
+
+          onResponse(response: Response): Response {
+            ... // check response status and do something
+            return response;
+          }
+
+          onResponseError(error: Response): Response {
+            ... // check error status and do something
+            return error;
+          }
+        }
+      ]]>
+    </td-highlight>
+    <p>Bootstrap interceptor providers:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        import { HTTP_PROVIDERS } from '@angular/http';
+        import { provideInterceptors } from '@covalent/http';
+        import { CustomInterceptor } from 'dir/to/interceptor';
+
+        bootstrap(AppComponent, [
+          HTTP_PROVIDERS,
+          provideInterceptors([CustomInterceptor]),
+        ]);
+      ]]>
+    </td-highlight>
+    <p>After that, just inject [HttpInterceptorService] and use it for your requests.</p>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>RESTService</md-card-title>
+  <md-card-subtitle>How to use this class</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h2><code>RESTService</code></h2>
+    <p>Abstract class provided with methods that wraps http services to facilitate REST API calls.</p>
+    <h3>Methods:</h3>
+    <p>The <code>RESTService</code> class has {{restServiceMethods.length}} methods:</p>
+    <md-list>
+      <template let-attr let-last="attr" ngFor [ngForOf]="restServiceMethods">
+        <a md-list-item layout-align="row">
+          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p md-line> {{attr.description}} </p>
+        </a>
+        <md-divider *ngIf="!last"></md-divider>
+      </template>
+    </md-list>
+    <h3>Example:</h3>
+    <p>Typescript:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        import { Injectable } from '@angular/core';
+        import { Response, Http } from '@angular/http';
+        import { RESTService, HttpInterceptorService } from '@covalent/http';
+
+        @Injectable()
+        export class CustomRESTService extends RESTService<any> {
+
+          constructor(private _http: Http /* or HttpInterceptorService */) {
+            super(_http, {
+              baseUrl: 'www.api.com',
+              path: '/path/to/endpoint',
+              transform: (res: Response): any => res.json(),
+            });
+          }
+        }
+      ]]>
+    </td-highlight>
+    <p>Note: the constructor takes any object that implements the methods in [IHttp] interface.</p>
+    <p>This can be the angular2 [Http] service, the covalent [HttpInterceptorService] or a custom service.</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        export interface IHttp {
+          delete: (url: string, options?: RequestOptionsArgs) => Observable<Response>;
+          get: (url: string, options?: RequestOptionsArgs) => Observable<Response>;
+          head: (url: string, options?: RequestOptionsArgs) => Observable<Response>;
+          patch: (url: string, body: any, options?: RequestOptionsArgs) => Observable<Response>;
+          post: (url: string, body: any, options?: RequestOptionsArgs) => Observable<Response>;
+          put: (url: string, body: any, options?: RequestOptionsArgs) => Observable<Response>;
+          request: (url: string | Request, options: RequestOptionsArgs) => Observable<Response>;
+        }
+      ]]>
+    </td-highlight>
+  </md-card-content>
+ </md-card>

src/app/components/components/http/http.component.spec.ts

@@ -0,0 +1,36 @@
+import {
+  beforeEach,
+  addProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { HttpDemoComponent } from './http.component';
+
+describe('Component: MediaDemo', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEach(() => {
+    addProviders([
+      HttpDemoComponent,
+    ]);
+  });
+
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder): void {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([HttpDemoComponent], (component: HttpDemoComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(HttpDemoComponent)
+      .then((fixture: ComponentFixture<any>) => {
+        let httpDemoComp: HttpDemoComponent = fixture.componentInstance;
+        expect(httpDemoComp).toBeTruthy();
+      });
+  }));
+});

src/app/components/components/http/http.component.ts

@@ -0,0 +1,88 @@
+import { Component } from '@angular/core';
+
+import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
+import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
+import { MdButton } from '@angular2-material/button';
+import { MD_INPUT_DIRECTIVES } from '@angular2-material/input';
+
+import { TdHighlightComponent } from '../../../../platform/highlight';
+
+@Component({
+  directives: [
+    MD_CARD_DIRECTIVES,
+    MD_LIST_DIRECTIVES,
+    MdButton,
+    MD_INPUT_DIRECTIVES,
+    TdHighlightComponent,
+  ],
+  moduleId: module.id,
+  selector: 'http-demo',
+  styleUrls: [ 'http.component.css' ],
+  templateUrl: 'http.component.html',
+})
+export class HttpDemoComponent {
+
+  interceptorServiceMethods: Object[] = [{
+    description: `Uses underlying ng2 [http] to request a DELETE method to a URL, 
+                  executing the interceptors as part of the request pipeline.`,
+    name: 'delete',
+    type: 'function(url: string, options: RequestOptionsArgs)',
+  }, {
+    description: `Uses underlying ng2 [http] to request a GET method to a URL, 
+                  executing the interceptors as part of the request pipeline.`,
+    name: 'get',
+    type: 'function(url: string, options: RequestOptionsArgs)',
+  }, {
+    description: `Uses underlying ng2 [http] to request a HEAD method to a URL, 
+                  executing the interceptors as part of the request pipeline.`,
+    name: 'head',
+    type: 'function(url: string, options: RequestOptionsArgs)',
+  }, {
+    description: `Uses underlying ng2 [http] to request a PATCH method to a URL, 
+                  executing the interceptors as part of the request pipeline.`,
+    name: 'patch',
+    type: 'function(url: string, data: any, options: RequestOptionsArgs)',
+  }, {
+    description: `Uses underlying ng2 [http] to request a POST method to a URL, 
+                  executing the interceptors as part of the request pipeline.`,
+    name: 'post',
+    type: 'function(url: string, data: any, options: RequestOptionsArgs)',
+  }, {
+    description: `Uses underlying ng2 [http] to request a PUT method to a URL, 
+                  executing the interceptors as part of the request pipeline.`,
+    name: 'put',
+    type: 'function(url: string, data: any, options: RequestOptionsArgs)',
+  }, {
+    description: `Uses underlying ng2 [http] to request a generic request to a URL,
+                  executing the interceptors as part of the request pipeline.`,
+    name: 'request',
+    type: 'function(url: string | Request, options: RequestOptionsArgs)',
+  }];
+
+  restServiceMethods: Object[] = [{
+    description: `Creates a GET request to the generated endpoint URL.`,
+    name: 'query',
+    type: 'function(query?: IRestQuery)',
+  }, {
+    description: `Creates a GET request to the generated endpoint URL, adding the ID at the end.`,
+    name: 'get',
+    type: 'function(id: string | number)',
+  }, {
+    description: `Creates a POST request to the generated endpoint URL.`,
+    name: 'create',
+    type: 'function(obj: T)',
+  }, {
+    description: `Creates a PATCH request to the generated endpoint URL, adding the ID at the end.`,
+    name: 'update',
+    type: 'function(id: string | number, obj: T)',
+  }, {
+    description: `Creates a DELETE request to the generated endpoint URL, adding the ID at the end.`,
+    name: 'delete',
+    type: 'function(id: string | number)',
+  }, {
+    description: `Builds the endpoint URL with the configured properties and arguments passed in the method.`,
+    name: 'buildUrl',
+    type: 'function(id?: string | number, query?: IRestQuery)',
+  }];
+
+}

src/app/components/components/http/index.ts

@@ -0,0 +1 @@
+export { HttpDemoComponent } from './http.component';

src/app/components/components/overview/overview.component.ts

@@ -52,6 +52,11 @@ export class OverviewComponent {
       icon: 'devices',
       route: 'media',
       title: 'Media',
+    }, {
+      color: 'indigo-700',
+      icon: 'http',
+      route: 'http',
+      title: 'Http',
     }, {
       color: 'deep-orange-700',
       icon: 'filter_list',

src/platform/core/index.ts

@@ -67,11 +67,6 @@ export { TdBytesPipe } from './pipes/bytes/bytes.pipe';
 export { TdDigitsPipe } from './pipes/digits/digits.pipe';
 export { TdTruncatePipe } from './pipes/truncate/truncate.pipe';
 
-/**
- * SERVICES
- */
-export { RESTService, IRestTransform, IRestConfig, IRestQuery, IHttp } from './services/rest.service';
-
 /**
  * MEDIA
  */