Refactor wordpress service into Abstract Base Class

joelj1995 · Oct 6, 2022 · b0f61b4 · b0f61b4
1 parent 6a970b3
commit b0f61b4
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 11 deletions.
diff --git a/blog-app/src/app/app.module.ts b/blog-app/src/app/app.module.ts
@@ -14,6 +14,7 @@ import { PostViewComponent } from './post-view/post-view.component';
 import { PageViewComponent } from './page-view/page-view.component';
 import { CacheService } from './services/cache.service';
 import { SubscribeComponent } from './subscribe/subscribe.component';
+import { IContentService } from './services/abc/content.service';
 
 const routes: Routes = [
   { path: '', component: BlogRollComponent },
@@ -39,7 +40,7 @@ const routes: Routes = [
     NgbModule,
     RouterModule.forRoot(routes)
   ],
-  providers: [WordpressService, CacheService],
+  providers: [{provide: IContentService, useClass: WordpressService}, CacheService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/blog-app/src/app/blog-roll/blog-roll.component.ts b/blog-app/src/app/blog-roll/blog-roll.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BlogError } from '../models/blog-error';
 import { Posts } from '../models/posts';
-import { WordpressService } from '../services/wordpress.service';
+import { IContentService } from '../services/abc/content.service';
 
 @Component({
   selector: 'app-blog-roll',
@@ -12,7 +12,7 @@ import { WordpressService } from '../services/wordpress.service';
 export class BlogRollComponent implements OnInit {
 
   constructor(
-    private wordpressService: WordpressService,
+    private contentService: IContentService,
     private route: ActivatedRoute
   ) { }
 
@@ -33,7 +33,7 @@ export class BlogRollComponent implements OnInit {
       } else {
         this.currentPage = 1;
       }
-      this.wordpressService.getPosts(this.currentPage, this.perPage)
+      this.contentService.getPosts(this.currentPage, this.perPage)
         .subscribe({
           next: data => {
             this.posts = <Posts>data;

diff --git a/blog-app/src/app/models/page.ts b/blog-app/src/app/models/page.ts
diff --git a/blog-app/src/app/models/post.ts b/blog-app/src/app/models/post.ts
diff --git a/blog-app/src/app/page-view/page-view.component.ts b/blog-app/src/app/page-view/page-view.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { WordpressService } from '../services/wordpress.service';
+import { IContentService } from '../services/abc/content.service';
 import { WpPage } from '../wp-model/wp-page';
 
 @Component({
@@ -11,7 +11,7 @@ import { WpPage } from '../wp-model/wp-page';
 export class PageViewComponent implements OnInit {
 
   constructor(
-    private wordpressService: WordpressService,
+    private contentService: IContentService,
     private route: ActivatedRoute
   ) { }
 
@@ -21,7 +21,7 @@ export class PageViewComponent implements OnInit {
   ngOnInit(): void {
     this.route.params.subscribe(params => {
       this.slug = params['slug'];
-      this.wordpressService.getPage(this.slug).subscribe(data => {
+      this.contentService.getPage(this.slug).subscribe(data => {
         if (data.length > 0) {
           this.page = data[0];
         }

diff --git a/blog-app/src/app/post-view/post-view.component.ts b/blog-app/src/app/post-view/post-view.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-import { WordpressService } from '../services/wordpress.service';
+import { IContentService } from '../services/abc/content.service';
 import { WpPost } from '../wp-model/wp-post';
 
 @Component({
@@ -11,7 +11,7 @@ import { WpPost } from '../wp-model/wp-post';
 export class PostViewComponent implements OnInit {
 
   constructor(
-    private wordpressService: WordpressService,
+    private contentService: IContentService,
     private route: ActivatedRoute
   ) { }
 
@@ -25,7 +25,7 @@ export class PostViewComponent implements OnInit {
       this.post = null;
       this.notFound = false;
       this.slug = params['slug'];
-      this.wordpressService.getPost(this.slug).subscribe(data => {
+      this.contentService.getPost(this.slug).subscribe(data => {
         if (data.length > 0) {
           this.post = data[0];
         } else {

diff --git a/blog-app/src/app/services/abc/content.service.ts b/blog-app/src/app/services/abc/content.service.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BlogError } from 'src/app/models/blog-error';
+import { Posts } from 'src/app/models/posts';
+import { WpPage } from 'src/app/wp-model/wp-page';
+import { WpPost } from 'src/app/wp-model/wp-post';
+
+@Injectable()
+export abstract class IContentService {
+  abstract getPage(slug: string): Observable<WpPage[]>;
+  abstract getPosts(page: number, perPage: number): Observable<Posts | BlogError>;
+  abstract getPost(slug: string): Observable<WpPost[]>;
+}
diff --git a/blog-app/src/app/services/wordpress.service.ts b/blog-app/src/app/services/wordpress.service.ts
@@ -6,12 +6,13 @@ import { BlogError } from '../models/blog-error';
 import { Posts } from '../models/posts'
 import { WpPage } from '../wp-model/wp-page'
 import { WpPost } from '../wp-model/wp-post';
+import { IContentService } from './abc/content.service';
 import { CacheService } from './cache.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class WordpressService {
+export class WordpressService implements IContentService {
 
   BASE_URL: string = `${environment.wpBaseUrl}/wordpress/index.php/wp-json/wp/v2`