Add fetch resources

Author: irustm

package-lock.json

@@ -25,6 +25,7 @@
     "@angular/router": "~8.2.11",
     "@nodegui/nodegui": "^0.2.1",
     "core-js": "^3.3.2",
+    "node-fetch": "^2.6.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "^0.9.1"

package.json

@@ -25,5 +25,6 @@
       [value]="20"
     >
     </spinbox>
+    <app-hello [name]="'irustm'"></app-hello>
   </view>
 </window>

src/app/app.component.html

@@ -0,0 +1,7 @@
+#app {
+        background-color: gray;
+}
+
+#app-hello {
+  background-color: green;
+}

src/app/app.component.scss

@@ -4,15 +4,7 @@ import { AspectRatioMode } from '@nodegui/nodegui';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styles: [
-    `
-      #app {
-        background-color: gray;
-      }
-      #button {
-      }
-    `
-  ],
+  styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

src/app/app.component.ts

@@ -1,12 +1,22 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { NodeguiLibModule } from '../lib/nodegui-lib.module';
+import { HelloComponent } from './hello/hello.component';
+import { GithubService } from './github.service';
+import { HttpFetchBackend } from '../lib/http-fetch-backend';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [NodeguiLibModule],
-  providers: [],
+  declarations: [AppComponent, HelloComponent],
+  imports: [NodeguiLibModule, HttpClientModule],
+  providers: [
+    GithubService,
+    {
+      provide: HttpClient,
+      useFactory: () => new HttpClient(new HttpFetchBackend())
+    }
+  ],
   bootstrap: [AppComponent],
   schemas: [NO_ERRORS_SCHEMA]
 })

src/app/app.module.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+const API_URL = 'https://api.github.com';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GithubService {
+  constructor(private http: HttpClient) {}
+
+  getUser(username: string) {
+    return this.http.get(`${API_URL}/users/${username}`);
+  }
+}

src/app/github.service.ts

@@ -0,0 +1,3 @@
+<view>
+  <text>{{ avatarUrl }}</text>
+</view>

src/app/hello/hello.component.html

@@ -0,0 +1,38 @@
+import {
+  Component,
+  OnInit,
+  ViewEncapsulation,
+  Input,
+  OnDestroy
+} from '@angular/core';
+import { GithubService } from '../github.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-hello',
+  templateUrl: './hello.component.html',
+  styleUrls: ['./hello.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HelloComponent implements OnInit, OnDestroy {
+  @Input() name;
+
+  public avatarUrl: string;
+
+  private subscribtion: Subscription;
+
+  constructor(private github: GithubService) {}
+
+  ngOnInit(): void {
+    this.subscribtion = this.github
+      .getUser(this.name)
+      .subscribe((data: any) => {
+        console.log(data);
+        this.avatarUrl = data.avatar_url;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.subscribtion.unsubscribe();
+  }
+}