From a9732281e2f6b83055268b06686219a322fd0023 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A2m=20Davies?= Date: Fri, 1 Sep 2017 17:54:05 +0700 Subject: [PATCH 1/3] add github follower component (assignment 8) --- src/app/app.component.html | 2 +- src/app/app.module.ts | 4 ++- .../github-followers.component.css | 0 .../github-followers.component.html | 3 +++ .../github-followers.component.spec.ts | 25 +++++++++++++++++++ .../github-followers.component.ts | 15 +++++++++++ 6 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 src/app/github-followers/github-followers.component.css create mode 100644 src/app/github-followers/github-followers.component.html create mode 100644 src/app/github-followers/github-followers.component.spec.ts create mode 100644 src/app/github-followers/github-followers.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 16768ec..f6c107e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,6 +4,6 @@

Welcome to {{title}}!

- + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f12a77d..a79c0b4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,7 @@ import { ContactFormComponent } from './contact-form/contact-form.component'; import { SignupFormComponent } from './signup-form/signup-form.component'; import { ChangePasswordFormComponent } from "./assignments/change-password-form/change-password-form.component"; import { PostsComponent } from './posts/posts.component'; +import { GithubFollowersComponent } from './github-followers/github-followers.component'; @NgModule({ @@ -31,7 +32,8 @@ import { PostsComponent } from './posts/posts.component'; ContactFormComponent, SignupFormComponent, ChangePasswordFormComponent, - PostsComponent + PostsComponent, + GithubFollowersComponent ], imports: [ BrowserModule, diff --git a/src/app/github-followers/github-followers.component.css b/src/app/github-followers/github-followers.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/github-followers/github-followers.component.html b/src/app/github-followers/github-followers.component.html new file mode 100644 index 0000000..ea27183 --- /dev/null +++ b/src/app/github-followers/github-followers.component.html @@ -0,0 +1,3 @@ +

+ github-followers works! +

diff --git a/src/app/github-followers/github-followers.component.spec.ts b/src/app/github-followers/github-followers.component.spec.ts new file mode 100644 index 0000000..c65b2fa --- /dev/null +++ b/src/app/github-followers/github-followers.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GithubFollowersComponent } from './github-followers.component'; + +describe('GithubFollowersComponent', () => { + let component: GithubFollowersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GithubFollowersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GithubFollowersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/github-followers/github-followers.component.ts b/src/app/github-followers/github-followers.component.ts new file mode 100644 index 0000000..322c299 --- /dev/null +++ b/src/app/github-followers/github-followers.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'github-followers', + templateUrl: './github-followers.component.html', + styleUrls: ['./github-followers.component.css'] +}) +export class GithubFollowersComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} From 035d4b8362f4968504321a6cdec4c88acc3eb321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A2m=20Davies?= Date: Fri, 1 Sep 2017 19:02:56 +0700 Subject: [PATCH 2/3] complete the github followers assignment. --- src/app/app.module.ts | 4 ++- .../github-followers.component.css | 5 ++++ .../github-followers.component.html | 15 +++++++++++ .../github-followers.component.spec.ts | 0 .../github-followers.component.ts | 25 +++++++++++++++++++ .../github-followers.component.css | 0 .../github-followers.component.html | 3 --- .../github-followers.component.ts | 15 ----------- src/app/services/github.service.ts | 11 ++++++++ 9 files changed, 59 insertions(+), 19 deletions(-) create mode 100644 src/app/assignments/github-followers/github-followers.component.css create mode 100644 src/app/assignments/github-followers/github-followers.component.html rename src/app/{ => assignments}/github-followers/github-followers.component.spec.ts (100%) create mode 100644 src/app/assignments/github-followers/github-followers.component.ts delete mode 100644 src/app/github-followers/github-followers.component.css delete mode 100644 src/app/github-followers/github-followers.component.html delete mode 100644 src/app/github-followers/github-followers.component.ts create mode 100644 src/app/services/github.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a79c0b4..e7e6e2a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,3 +1,4 @@ +import { GitHubService } from './services/github.service'; import { ErrorHandler } from '@angular/core'; import { AppErrorHandler } from './common/app-error-handler'; import { PostService } from './services/post.service'; @@ -17,7 +18,7 @@ import { ContactFormComponent } from './contact-form/contact-form.component'; import { SignupFormComponent } from './signup-form/signup-form.component'; import { ChangePasswordFormComponent } from "./assignments/change-password-form/change-password-form.component"; import { PostsComponent } from './posts/posts.component'; -import { GithubFollowersComponent } from './github-followers/github-followers.component'; +import { GithubFollowersComponent } from './assignments/github-followers/github-followers.component'; @NgModule({ @@ -45,6 +46,7 @@ import { GithubFollowersComponent } from './github-followers/github-followers.co CoursesService, PostService, AppErrorHandler, + GitHubService, { provide: ErrorHandler, useClass: AppErrorHandler} ], bootstrap: [AppComponent] diff --git a/src/app/assignments/github-followers/github-followers.component.css b/src/app/assignments/github-followers/github-followers.component.css new file mode 100644 index 0000000..ee09431 --- /dev/null +++ b/src/app/assignments/github-followers/github-followers.component.css @@ -0,0 +1,5 @@ +.media-object { + width: 80px; + height: 80px; + border-radius: 100%; +} \ No newline at end of file diff --git a/src/app/assignments/github-followers/github-followers.component.html b/src/app/assignments/github-followers/github-followers.component.html new file mode 100644 index 0000000..16504f9 --- /dev/null +++ b/src/app/assignments/github-followers/github-followers.component.html @@ -0,0 +1,15 @@ +

My followers

+
+ Loading... +
+
+
+ + + +
+
+

{{f.login}}

+ {{f.html_url}} +
+
\ No newline at end of file diff --git a/src/app/github-followers/github-followers.component.spec.ts b/src/app/assignments/github-followers/github-followers.component.spec.ts similarity index 100% rename from src/app/github-followers/github-followers.component.spec.ts rename to src/app/assignments/github-followers/github-followers.component.spec.ts diff --git a/src/app/assignments/github-followers/github-followers.component.ts b/src/app/assignments/github-followers/github-followers.component.ts new file mode 100644 index 0000000..094c38b --- /dev/null +++ b/src/app/assignments/github-followers/github-followers.component.ts @@ -0,0 +1,25 @@ +import { GitHubService } from './../../services/github.service'; +import { Component, OnInit, Injectable } from '@angular/core'; + +@Component({ + selector: 'github-followers', + templateUrl: './github-followers.component.html', + styleUrls: ['./github-followers.component.css'] +}) + +export class GithubFollowersComponent implements OnInit { + + followers: any[]; + isLoading = true; + + constructor(private service: GitHubService) { } + + ngOnInit() { + this.service.getAll().subscribe((followers) => { + this.followers = followers; + this.isLoading = false; + }); + + } + +} diff --git a/src/app/github-followers/github-followers.component.css b/src/app/github-followers/github-followers.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/github-followers/github-followers.component.html b/src/app/github-followers/github-followers.component.html deleted file mode 100644 index ea27183..0000000 --- a/src/app/github-followers/github-followers.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

- github-followers works! -

diff --git a/src/app/github-followers/github-followers.component.ts b/src/app/github-followers/github-followers.component.ts deleted file mode 100644 index 322c299..0000000 --- a/src/app/github-followers/github-followers.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'github-followers', - templateUrl: './github-followers.component.html', - styleUrls: ['./github-followers.component.css'] -}) -export class GithubFollowersComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/src/app/services/github.service.ts b/src/app/services/github.service.ts new file mode 100644 index 0000000..e316a93 --- /dev/null +++ b/src/app/services/github.service.ts @@ -0,0 +1,11 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; +import { DataService } from './data.service'; + +@Injectable() +export class GitHubService extends DataService{ + constructor(http: Http){ + super('https://api.github.com/users/dvbtham/followers', http); + + } +} \ No newline at end of file From 2c38e95ad0217137a7d7b9140eee140da262e46f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A2m=20Davies?= Date: Fri, 1 Sep 2017 22:10:26 +0700 Subject: [PATCH 3/3] working with routing and navigation. --- src/app/app.component.html | 11 ++----- src/app/app.module.ts | 20 +++++++++-- .../github-followers.component.html | 4 ++- .../github-followers.component.ts | 33 +++++++++++++++---- .../github-profile.component.css | 0 .../github-profile.component.html | 4 +++ .../github-profile.component.spec.ts | 25 ++++++++++++++ .../github-profile.component.ts | 25 ++++++++++++++ src/app/home/home.component.css | 0 src/app/home/home.component.html | 3 ++ src/app/home/home.component.spec.ts | 25 ++++++++++++++ src/app/home/home.component.ts | 15 +++++++++ src/app/navbar/navbar.component.css | 0 src/app/navbar/navbar.component.html | 13 ++++++++ src/app/navbar/navbar.component.spec.ts | 25 ++++++++++++++ src/app/navbar/navbar.component.ts | 15 +++++++++ src/app/not-found/not-found.component.css | 0 src/app/not-found/not-found.component.html | 3 ++ src/app/not-found/not-found.component.spec.ts | 25 ++++++++++++++ src/app/not-found/not-found.component.ts | 15 +++++++++ 20 files changed, 244 insertions(+), 17 deletions(-) create mode 100644 src/app/github-profile/github-profile.component.css create mode 100644 src/app/github-profile/github-profile.component.html create mode 100644 src/app/github-profile/github-profile.component.spec.ts create mode 100644 src/app/github-profile/github-profile.component.ts create mode 100644 src/app/home/home.component.css create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.spec.ts create mode 100644 src/app/home/home.component.ts create mode 100644 src/app/navbar/navbar.component.css create mode 100644 src/app/navbar/navbar.component.html create mode 100644 src/app/navbar/navbar.component.spec.ts create mode 100644 src/app/navbar/navbar.component.ts create mode 100644 src/app/not-found/not-found.component.css create mode 100644 src/app/not-found/not-found.component.html create mode 100644 src/app/not-found/not-found.component.spec.ts create mode 100644 src/app/not-found/not-found.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index f6c107e..3cb6b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,9 +1,4 @@ - -
-

- Welcome to {{title}}! -

- - - + +
+
\ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e7e6e2a..dbb996a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,7 @@ import { CoursesComponent } from './courses.component'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; +import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { CourseComponent } from './course/course.component'; @@ -19,6 +20,10 @@ import { SignupFormComponent } from './signup-form/signup-form.component'; import { ChangePasswordFormComponent } from "./assignments/change-password-form/change-password-form.component"; import { PostsComponent } from './posts/posts.component'; import { GithubFollowersComponent } from './assignments/github-followers/github-followers.component'; +import { HomeComponent } from './home/home.component'; +import { NotFoundComponent } from './not-found/not-found.component'; +import { GithubProfileComponent } from './github-profile/github-profile.component'; +import { NavbarComponent } from './navbar/navbar.component'; @NgModule({ @@ -34,13 +39,24 @@ import { GithubFollowersComponent } from './assignments/github-followers/github- SignupFormComponent, ChangePasswordFormComponent, PostsComponent, - GithubFollowersComponent + GithubFollowersComponent, + HomeComponent, + NotFoundComponent, + GithubProfileComponent, + NavbarComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, - HttpModule + HttpModule, + RouterModule.forRoot([ + { path: '', component: HomeComponent }, + { path: 'followers', component: GithubFollowersComponent }, + { path: 'followers/:id/:username', component: GithubProfileComponent }, + { path: 'posts', component: PostsComponent }, + { path: '**', component: NotFoundComponent }, + ]) ], providers: [ CoursesService, diff --git a/src/app/assignments/github-followers/github-followers.component.html b/src/app/assignments/github-followers/github-followers.component.html index 16504f9..e05c3c3 100644 --- a/src/app/assignments/github-followers/github-followers.component.html +++ b/src/app/assignments/github-followers/github-followers.component.html @@ -9,7 +9,9 @@

My followers

-

{{f.login}}

+ +

{{f.login}}

+ {{f.html_url}}
\ No newline at end of file diff --git a/src/app/assignments/github-followers/github-followers.component.ts b/src/app/assignments/github-followers/github-followers.component.ts index 094c38b..1eba57a 100644 --- a/src/app/assignments/github-followers/github-followers.component.ts +++ b/src/app/assignments/github-followers/github-followers.component.ts @@ -1,5 +1,10 @@ +import { ActivatedRoute } from '@angular/router'; import { GitHubService } from './../../services/github.service'; import { Component, OnInit, Injectable } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/switchMap'; +import 'rxjs/add/observable/combineLatest'; @Component({ selector: 'github-followers', @@ -12,14 +17,30 @@ export class GithubFollowersComponent implements OnInit { followers: any[]; isLoading = true; - constructor(private service: GitHubService) { } + constructor(private route: ActivatedRoute, private service: GitHubService) { } ngOnInit() { - this.service.getAll().subscribe((followers) => { - this.followers = followers; - this.isLoading = false; - }); - + //Subscribing to Multiple Observables + //switchMap + + let obs = Observable.combineLatest([ + this.route.paramMap, + this.route.queryParamMap + ]) + .switchMap(combined => { + let id = combined[0].get('id'); + let page = combined[1].get('page'); + + return this.service.getAll() + }) + .subscribe(followers => { + this.followers = followers; + this.isLoading = false; + }); + + + + } } diff --git a/src/app/github-profile/github-profile.component.css b/src/app/github-profile/github-profile.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/github-profile/github-profile.component.html b/src/app/github-profile/github-profile.component.html new file mode 100644 index 0000000..2e6151a --- /dev/null +++ b/src/app/github-profile/github-profile.component.html @@ -0,0 +1,4 @@ +

+ github-profile works! +

+ \ No newline at end of file diff --git a/src/app/github-profile/github-profile.component.spec.ts b/src/app/github-profile/github-profile.component.spec.ts new file mode 100644 index 0000000..0e35e39 --- /dev/null +++ b/src/app/github-profile/github-profile.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GithubProfileComponent } from './github-profile.component'; + +describe('GithubProfileComponent', () => { + let component: GithubProfileComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GithubProfileComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GithubProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/github-profile/github-profile.component.ts b/src/app/github-profile/github-profile.component.ts new file mode 100644 index 0000000..005b14f --- /dev/null +++ b/src/app/github-profile/github-profile.component.ts @@ -0,0 +1,25 @@ +import { ActivatedRoute, Router } from '@angular/router'; +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-github-profile', + templateUrl: './github-profile.component.html', + styleUrls: ['./github-profile.component.css'] +}) +export class GithubProfileComponent implements OnInit { + + constructor(private router:Router, private route: ActivatedRoute) { } + onSubmit(){ + this.router.navigate(['/followers'], { + queryParams: {page: 1, order: 'newest'} + }); + } + ngOnInit() { + + this.route.paramMap.subscribe(params => { + let id = +params.get('id'); + console.log(params, id); + }); + } + +} diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..afc16a3 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,3 @@ +

+ home works! +

diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..86774ae --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..33fd770 --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html new file mode 100644 index 0000000..0d7a603 --- /dev/null +++ b/src/app/navbar/navbar.component.html @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts new file mode 100644 index 0000000..4e5f590 --- /dev/null +++ b/src/app/navbar/navbar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavbarComponent } from './navbar.component'; + +describe('NavbarComponent', () => { + let component: NavbarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NavbarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts new file mode 100644 index 0000000..9145594 --- /dev/null +++ b/src/app/navbar/navbar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.css'] +}) +export class NavbarComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/not-found/not-found.component.css b/src/app/not-found/not-found.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/not-found/not-found.component.html b/src/app/not-found/not-found.component.html new file mode 100644 index 0000000..ff60493 --- /dev/null +++ b/src/app/not-found/not-found.component.html @@ -0,0 +1,3 @@ +

+ not-found works! +

diff --git a/src/app/not-found/not-found.component.spec.ts b/src/app/not-found/not-found.component.spec.ts new file mode 100644 index 0000000..ff5d8d9 --- /dev/null +++ b/src/app/not-found/not-found.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotFoundComponent } from './not-found.component'; + +describe('NotFoundComponent', () => { + let component: NotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotFoundComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/not-found/not-found.component.ts b/src/app/not-found/not-found.component.ts new file mode 100644 index 0000000..029bd54 --- /dev/null +++ b/src/app/not-found/not-found.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-not-found', + templateUrl: './not-found.component.html', + styleUrls: ['./not-found.component.css'] +}) +export class NotFoundComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +}