FE - Article tags and display articles by tags (#19)

anhptk · web-flow · commit fcc86a436590 · 2024-04-20T20:59:56.000+07:00
* FE - Article tags and display articles by tags

* Add markdown for article content display
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "ngx-markdown": "~17.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { AppComponent } from './app.component';
 import { LayoutModule } from "./layout/layout.module";
 import { PagesModule } from "./pages/pages.module";
 import { provideHttpClient } from "@angular/common/http";
+import { MarkdownModule } from "ngx-markdown";
 
 @NgModule({
   declarations: [
@@ -14,6 +15,7 @@ import { provideHttpClient } from "@angular/common/http";
   imports: [
     BrowserModule,
     AppRoutingModule,
+    MarkdownModule.forRoot(),
 
     LayoutModule,
     PagesModule
diff --git a/frontend/src/app/common/models/api/tag.model.ts b/frontend/src/app/common/models/api/tag.model.ts
@@ -0,0 +1,3 @@
+export interface TagsResponse {
+  tags: string[];
+}
diff --git a/frontend/src/app/common/models/view/feed.view-model.ts b/frontend/src/app/common/models/view/feed.view-model.ts
@@ -7,5 +7,6 @@ export interface FeedMenu {
 export enum FeedMenuEnum {
   MINE = 'mine',
   GLOBAL = 'global',
-  FAVORITES = 'favorites'
+  FAVORITES = 'favorites',
+  TAGS = 'tags'
 }
diff --git a/frontend/src/app/common/services/api/article.service.ts b/frontend/src/app/common/services/api/article.service.ts
@@ -13,6 +13,7 @@ import {
   ArticleCommentsResponse,
   CreateArticleCommentPayload
 } from "../../models/api/comment.model";
+import { TagsResponse } from "../../models/api/tag.model";
 
 @Injectable({
   providedIn: 'root'
@@ -66,4 +67,8 @@ export class ArticleService {
   public deleteArticleComment(articleSlug: string, commentId: number): Observable<void> {
     return this._requestHelper.delete(`/articles/${ articleSlug }/comments/${ commentId }`);
   }
+
+  public queryTags(): Observable<TagsResponse> {
+    return this._requestHelper.get('/tags');
+  }
 }
diff --git a/frontend/src/app/pages/article/article-tags/article-tags.component.html b/frontend/src/app/pages/article/article-tags/article-tags.component.html
@@ -0,0 +1,5 @@
+<p>Popular Tags</p>
+
+<div class="tag-list">
+  <a *ngFor="let tag of tags" (click)="tagSelected.emit(tag)" routerLink="" class="tag-pill tag-default">{{ tag }}</a>
+</div>
diff --git a/frontend/src/app/pages/article/article-tags/article-tags.component.scss b/frontend/src/app/pages/article/article-tags/article-tags.component.scss
diff --git a/frontend/src/app/pages/article/article-tags/article-tags.component.spec.ts b/frontend/src/app/pages/article/article-tags/article-tags.component.spec.ts
@@ -0,0 +1,23 @@
+// import { ComponentFixture, TestBed } from '@angular/core/testing';
+//
+// import { ArticleTagsComponent } from './article-tags.component';
+//
+// describe('ArticleTagsComponent', () => {
+//   let component: ArticleTagsComponent;
+//   let fixture: ComponentFixture<ArticleTagsComponent>;
+//
+//   beforeEach(async () => {
+//     await TestBed.configureTestingModule({
+//       declarations: [ArticleTagsComponent]
+//     })
+//     .compileComponents();
+//
+//     fixture = TestBed.createComponent(ArticleTagsComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
+//
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
+// });
diff --git a/frontend/src/app/pages/article/article-tags/article-tags.component.ts b/frontend/src/app/pages/article/article-tags/article-tags.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { ArticleService } from "../../../common/services/api/article.service";
+
+@Component({
+  selector: 'app-article-tags',
+  templateUrl: './article-tags.component.html',
+  styleUrl: './article-tags.component.scss'
+})
+export class ArticleTagsComponent {
+  @Output() tagSelected: EventEmitter<string> = new EventEmitter();
+
+  public tags: string[] = [];
+
+  constructor(
+    private readonly _articleService: ArticleService
+  ) {
+    this._loadTags();
+  }
+
+  private _loadTags(): void {
+    this._articleService.queryTags().subscribe(response => {
+      this.tags = response.tags;
+    });
+  }
+}
diff --git a/frontend/src/app/pages/article/article.component.html b/frontend/src/app/pages/article/article.component.html
@@ -10,8 +10,7 @@ <h1>{{ article.title }}</h1>
   <div class="container page">
     <div class="row article-content">
       <div class="col-md-12">
-        <!-- TODO: display article content using markdown-->
-        <div>{{article.description}}</div>
+        <markdown [data]="article.body"></markdown>
         <br>
         <ul class="tag-list">
           <li *ngFor="let tag of article.tagList" class="tag-default tag-pill tag-outline">{{ tag }}</li>
diff --git a/frontend/src/app/pages/home/feed/feed.component.ts b/frontend/src/app/pages/home/feed/feed.component.ts
@@ -12,7 +12,7 @@ import { QUERY_PAGE_SIZE } from "../../../common/constants/default.constant";
 })
 export class FeedComponent implements OnChanges {
   @Input() feedMenuId?: FeedMenuEnum;
-  @Input() queryParams?: Partial<QueryArticlesParams> = {};
+  @Input() queryParams?: QueryArticlesParams = {};
 
   public articles: Article[] = [];
   public activePageIndex = 0;
diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html
@@ -17,23 +17,12 @@ <h1 class="logo-font">conduit</h1>
           </ul>
         </div>
 
-        <app-feed [feedMenuId]="activeFeed?.id"></app-feed>
+        <app-feed [feedMenuId]="activeFeed?.id" [queryParams]="feedQueryParams"></app-feed>
       </div>
 
       <div class="col-md-3">
         <div class="sidebar">
-          <p>Popular Tags</p>
-
-          <div class="tag-list">
-            <a href="" class="tag-pill tag-default">programming</a>
-            <a href="" class="tag-pill tag-default">javascript</a>
-            <a href="" class="tag-pill tag-default">emberjs</a>
-            <a href="" class="tag-pill tag-default">angularjs</a>
-            <a href="" class="tag-pill tag-default">react</a>
-            <a href="" class="tag-pill tag-default">mean</a>
-            <a href="" class="tag-pill tag-default">node</a>
-            <a href="" class="tag-pill tag-default">rails</a>
-          </div>
+          <app-article-tags (tagSelected)="setTagsFeed($event)"></app-article-tags>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/pages/home/home.component.ts b/frontend/src/app/pages/home/home.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { AuthenticationService } from "../../common/services/utils/authentication.service";
 import { FeedMenu, FeedMenuEnum } from "../../common/models/view/feed.view-model";
+import { QueryArticlesParams } from "../../common/models/api/article.model";
 
 @Component({
   selector: 'app-home',
@@ -11,6 +12,7 @@ import { FeedMenu, FeedMenuEnum } from "../../common/models/view/feed.view-model
 export class HomeComponent {
   public feedList: FeedMenu[];
   public activeFeed?: FeedMenu;
+  public feedQueryParams?: QueryArticlesParams;
 
   constructor(
     private readonly _authenticationService: AuthenticationService,
@@ -35,9 +37,30 @@ export class HomeComponent {
   public setActiveFeed(activeFeed: FeedMenu): void {
     this.activeFeed = activeFeed;
 
+    if (activeFeed.id === FeedMenuEnum.TAGS) {
+      this.setTagsFeed(activeFeed.name.slice(1));
+      return;
+    }
+
+    this.feedQueryParams = {};
     this.feedList = this.feedList.map(feed => {
       feed.isActive = feed.id === activeFeed.id;
       return feed;
     });
   }
+
+  public setTagsFeed(tag: string): void {
+    const feedList = this._constructFeedList().map(feed => {
+      feed.isActive = false;
+      return feed;
+    });
+
+    const tagFeed: FeedMenu = { id: FeedMenuEnum.TAGS, name: `#${ tag }`, isActive: true };
+    feedList.push(tagFeed);
+
+    this.activeFeed = tagFeed;
+    this.feedQueryParams = { tag };
+
+    this.feedList = feedList;
+  }
 }
diff --git a/frontend/src/app/pages/pages.module.ts b/frontend/src/app/pages/pages.module.ts
@@ -13,6 +13,8 @@ import { ArticleComponent } from './article/article.component';
 import { ArticleMetaComponent } from './article/article-meta/article-meta.component';
 import { ProfileComponent } from './profile/profile.component';
 import { ArticleCommentsComponent } from './article/article-comment/article-comments.component';
+import { ArticleTagsComponent } from './article/article-tags/article-tags.component';
+import { MarkdownModule } from "ngx-markdown";
 
 
 @NgModule({
@@ -26,13 +28,15 @@ import { ArticleCommentsComponent } from './article/article-comment/article-comm
     ArticleComponent,
     ArticleMetaComponent,
     ProfileComponent,
-    ArticleCommentsComponent
+    ArticleCommentsComponent,
+    ArticleTagsComponent
   ],
   imports: [
     CommonModule,
     ReactiveFormsModule,
     RouterModule,
-    SharedModule
+    SharedModule,
+    MarkdownModule.forChild()
   ],
   exports: [
     LoginComponent,
diff --git a/frontend/src/app/pages/profile/profile.component.ts b/frontend/src/app/pages/profile/profile.component.ts
@@ -22,7 +22,7 @@ export class ProfileComponent {
   public profileNotFound = false;
   public isLoading = true;
 
-  public feedQueryParams?: Partial<QueryArticlesParams>;
+  public feedQueryParams?: QueryArticlesParams;
 
   private _feedMenuType?: FeedMenuEnum;
 
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ErrorMessageComponent } from "./error-message/error-message.component";
 
 
-
 @NgModule({
   declarations: [
     ErrorMessageComponent

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export interface TagsResponse {`
	`2`	`+ tags: string[];`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@ export interface FeedMenu {`
`7`	`7`	`export enum FeedMenuEnum {`
`8`	`8`	`MINE = 'mine',`
`9`	`9`	`GLOBAL = 'global',`
`10`		`- FAVORITES = 'favorites'`
	`10`	`+ FAVORITES = 'favorites',`
	`11`	`+ TAGS = 'tags'`
`11`	`12`	`}`