refactor: user search results now use ng pipe

Author: AndrewJBateman

src/app/pages/user-search/user-search.page.html

@@ -1,36 +1,29 @@
 <ion-header>
-	<ion-toolbar color="primary">
-		<ion-buttons slot="start">
-			<ion-menu-button></ion-menu-button>
-			<ion-title>
-				Github Search
-			</ion-title>
-		</ion-buttons>
-	</ion-toolbar>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+      <ion-title> Github Search </ion-title>
+    </ion-buttons>
+  </ion-toolbar>
 </ion-header>
-
 <ion-content padding>
-	<ion-list>
-		<ion-item>
-			<ion-input
-				[(ngModel)]="username"
-				type="text"
-				placeholder="github username"
-			>
-			</ion-input>
-			<ion-buttons>
-				<ion-button (click)="getRepos()" color="primary" icon-end>
-					<ion-icon name="search"></ion-icon>
-				</ion-button>
-			</ion-buttons>
-		</ion-item>
-	</ion-list>
-	<ion-card *ngFor="let repo of repoList">
-		<ion-card-header>
-			{{ repo.name }}
-		</ion-card-header>
-		<ion-card-content>
-			{{ repo.description }}
-		</ion-card-content>
-	</ion-card>
+  <ion-list>
+    <ion-item>
+      <ion-input
+        [(ngModel)]="username"
+        type="text"
+        placeholder="github username"
+      >
+      </ion-input>
+      <ion-buttons>
+        <ion-button (click)="getRepos()" color="primary" icon-end>
+          <ion-icon name="search"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>
+  </ion-list>
+  <ion-card *ngFor="let repo of repoList$ | async; let index = index;">
+    <ion-card-header> {{ repo.name }} </ion-card-header>
+    <ion-card-content> {{ repo.description }} </ion-card-content>
+  </ion-card>
 </ion-content>

src/app/pages/user-search/user-search.page.ts

@@ -1,32 +1,24 @@
-import { GithubService } from './../../services/github.service';
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { GithubService } from "./../../services/github.service";
+import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
 
 @Component({
-	selector: 'app-user-search',
-	templateUrl: './user-search.page.html',
-	styleUrls: ['./user-search.page.scss'],
-	providers: [GithubService]
+  selector: "app-user-search",
+  templateUrl: "./user-search.page.html",
+  styleUrls: ["./user-search.page.scss"],
+  providers: [GithubService],
 })
 export class UserSearchPage implements OnInit {
+  results: Observable<any>;
+  public repoList$;
+  public username;
 
-	results: Observable<any>;
-	public repoList;
-	public username;
+  constructor(private githubService: GithubService) {}
 
-	constructor(private githubService: GithubService) { }
-
-	ngOnInit() {
-	}
-
-	getRepos() {
-		this.githubService.getRepos(this.username).subscribe(
-			data => {
-				this.repoList = data;
-			},
-			err => console.log(err),
-			() => console.log('list of repos is returned')
-		);
-	}
+  ngOnInit() {}
 
+  getRepos(): void {
+    this.repoList$ = this.githubService.getRepos(this.username);
+    console.log(this.repoList$.subscribe((x) => console.log(x)));
+  }
 }

src/app/services/github.service.ts

@@ -18,10 +18,7 @@ export class GithubService {
 			})
 		);
 	} */
-  getRepos(username) {
-    const repos = this.http.get(
-      `https://api.github.com/users/${username}/repos`
-    );
-    return repos;
+  getRepos(username: string) {
+    return this.http.get(`https://api.github.com/users/${username}/repos`);
   }
 }