refactor: user search-bar replaces ion-input

Author: AndrewJBateman

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

@@ -7,21 +7,14 @@
   </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-searchbar
+    color="primary"
+    type="search"
+    placeholder="search name"
+    [debounce]="1000"
+    (ionInput)="handleInput($event)"
+  >
+  </ion-searchbar>
   <ion-card *ngFor="let repo of repos$ | async; let index = index;">
     <ion-card-header> {{ repo.name }} </ion-card-header>
     <ion-card-content> {{ repo.description }} </ion-card-content>

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

@@ -1,5 +1,5 @@
 import { GithubService } from "./../../services/github.service";
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { Observable } from "rxjs";
 import { Repo } from "./models/repo";
 
@@ -9,17 +9,16 @@ import { Repo } from "./models/repo";
   styleUrls: ["./user-search.page.scss"],
   providers: [GithubService],
 })
-export class UserSearchPage implements OnInit {
+export class UserSearchPage {
   results: Observable<any>;
   public repos$: Observable<Repo[]>;
   public username: string;
 
   constructor(private githubService: GithubService) {}
 
-  ngOnInit() {}
-
-  getRepos(): void {
+  // Input username to search for Github repos
+  handleInput(event: CustomEvent): void {
+    this.username = event.detail.value.toLowerCase();
     this.repos$ = this.githubService.getRepos(this.username);
-    console.log(this.repos$.subscribe((x) => console.log(x)));
   }
 }

src/app/services/github.service.ts

@@ -10,19 +10,7 @@ import { Repo } from "../pages/user-search/models/repo";
 export class GithubService {
   constructor(private http: HttpClient) {}
 
-  /* 	searchData(username: string): Observable<any> {
-		return this.http.get(`https://api.github.com/users/${username}/repos`)
-		.pipe(
-			map(results => {
-				console.log('RAW: ', results);
-				return results['Search'];
-			})
-		);
-	} */
   getRepos(username: string): Observable<any> {
-		const returns = this.http.get(`https://api.github.com/users/${username}/repos`);
-		console.log(returns.subscribe((x) => console.log(x)));
-		console.log('returns type', typeof(returns));
-		return returns;
+    return this.http.get(`https://api.github.com/users/${username}/repos`);
   }
 }