From 906afa5781be4365484070946667be2bfefce83b Mon Sep 17 00:00:00 2001
From: Sunil Yadav <yadavsunilg8898@gmail.com>
Date: Thu, 8 Jan 2026 04:02:36 +0530
Subject: [PATCH] added both functionality soft delete and trending feed

---
 src/app/core/interceptors/api.interceptor.ts  |  2 +-
 .../components/article-comment.component.ts   | 67 +++++++++++++------
 .../features/article/models/comment.model.ts  |  1 +
 .../pages/article/article.component.ts        |  2 +-
 .../article/pages/home/home.component.html    | 13 ++++
 .../article/pages/home/home.component.ts      |  1 +
 .../article/services/articles.service.ts      |  2 +-
 .../article/services/comments.service.ts      |  4 ++
 8 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/src/app/core/interceptors/api.interceptor.ts b/src/app/core/interceptors/api.interceptor.ts
index 32160a1ee..f99ee9756 100644
--- a/src/app/core/interceptors/api.interceptor.ts
+++ b/src/app/core/interceptors/api.interceptor.ts
@@ -1,6 +1,6 @@
 import { HttpInterceptorFn } from '@angular/common/http';
 
 export const apiInterceptor: HttpInterceptorFn = (req, next) => {
-  const apiReq = req.clone({ url: `https://api.realworld.show/api${req.url}` });
+  const apiReq = req.clone({ url: `http://localhost:8080${req.url}` });
   return next(apiReq);
 };
diff --git a/src/app/features/article/components/article-comment.component.ts b/src/app/features/article/components/article-comment.component.ts
index e601cf590..a07a992db 100644
--- a/src/app/features/article/components/article-comment.component.ts
+++ b/src/app/features/article/components/article-comment.component.ts
@@ -10,32 +10,57 @@ import { AsyncPipe, DatePipe } from '@angular/common';
   selector: 'app-article-comment',
   template: `
     @if (comment) {
-      <div class="card">
-        <div class="card-block">
-          <p class="card-text">
-            {{ comment.body }}
-          </p>
+      @if (comment.status === 'REMOVED') {
+        <div class="card">
+          <div class="card-block">
+            <p class="card-text">This comment has been deleted.</p>
+          </div>
         </div>
-        <div class="card-footer">
-          <a class="comment-author" [routerLink]="['/profile', comment.author.username]">
-            <img [src]="comment.author.image" class="comment-author-img" />
-          </a>
-          &nbsp;
-          <a class="comment-author" [routerLink]="['/profile', comment.author.username]">
-            {{ comment.author.username }}
-          </a>
-          <span class="date-posted">
-            {{ comment.createdAt | date: 'longDate' }}
-          </span>
-          @if (canModify$ | async) {
-            <span class="mod-options">
-              <i class="ion-trash-a" (click)="delete.emit(true)"></i>
+      } @else {
+        <div class="card">
+          <div class="card-block">
+            <p class="card-text">
+              {{ comment.body }}
+            </p>
+          </div>
+          <div class="card-footer">
+            <a class="comment-author" [routerLink]="['/profile', comment.author.username]">
+              <img [src]="comment.author.image" class="comment-author-img" />
+            </a>
+            &nbsp;
+            <a class="comment-author" [routerLink]="['/profile', comment.author.username]">
+              {{ comment.author.username }}
+            </a>
+            <span class="date-posted">
+              {{ comment.createdAt | date: 'longDate' }}
             </span>
-          }
+            @if (canModify$ | async) {
+              <span class="mod-options">
+                <i class="ion-trash-a" (click)="delete.emit(true)"></i>
+              </span>
+            }
+          </div>
         </div>
-      </div>
+      }
     }
   `,
+  styles: [
+    `
+      .comment {
+        padding: 12px;
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .deleted {
+        font-style: italic;
+        color: #888;
+      }
+
+      .deleted-text {
+        margin: 0;
+      }
+    `,
+  ],
   imports: [RouterLink, DatePipe, AsyncPipe],
 })
 export class ArticleCommentComponent {
diff --git a/src/app/features/article/models/comment.model.ts b/src/app/features/article/models/comment.model.ts
index 6a6350b5b..bab598ccd 100644
--- a/src/app/features/article/models/comment.model.ts
+++ b/src/app/features/article/models/comment.model.ts
@@ -4,5 +4,6 @@ export interface Comment {
   id: string;
   body: string;
   createdAt: string;
+  status: string;
   author: Profile;
 }
diff --git a/src/app/features/article/pages/article/article.component.ts b/src/app/features/article/pages/article/article.component.ts
index fd3ce2f8c..9a44fb5c7 100644
--- a/src/app/features/article/pages/article/article.component.ts
+++ b/src/app/features/article/pages/article/article.component.ts
@@ -125,7 +125,7 @@ export default class ArticleComponent implements OnInit {
 
   deleteComment(comment: Comment): void {
     this.commentsService
-      .delete(comment.id, this.article.slug)
+      .softDelete(comment.id, this.article.slug)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.comments = this.comments.filter(item => item !== comment);
diff --git a/src/app/features/article/pages/home/home.component.html b/src/app/features/article/pages/home/home.component.html
index 869fb32c8..4149fbd4e 100644
--- a/src/app/features/article/pages/home/home.component.html
+++ b/src/app/features/article/pages/home/home.component.html
@@ -27,6 +27,19 @@ <h1 class="logo-font">conduit</h1>
                 Global Feed
               </a>
             </li>
+
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                [ngClass]="{
+                  active: listConfig.type === 'trending' && !listConfig.filters.tag,
+                }"
+                (click)="setListTo('trending')"
+              >
+                Trending Feed
+              </a>
+            </li>
+
             <li class="nav-item" [hidden]="!listConfig.filters.tag">
               <a class="nav-link active"> <i class="ion-pound"></i> {{ listConfig.filters.tag }} </a>
             </li>
diff --git a/src/app/features/article/pages/home/home.component.ts b/src/app/features/article/pages/home/home.component.ts
index 0f930b2a5..871d88f57 100644
--- a/src/app/features/article/pages/home/home.component.ts
+++ b/src/app/features/article/pages/home/home.component.ts
@@ -42,6 +42,7 @@ export default class HomeComponent implements OnInit {
           } else {
             this.setListTo('all');
           }
+          this.setListTo('trending');
         }),
         takeUntilDestroyed(this.destroyRef),
       )
diff --git a/src/app/features/article/services/articles.service.ts b/src/app/features/article/services/articles.service.ts
index c4b816b98..d65abb1e5 100644
--- a/src/app/features/article/services/articles.service.ts
+++ b/src/app/features/article/services/articles.service.ts
@@ -19,7 +19,7 @@ export class ArticlesService {
     });
 
     return this.http.get<{ articles: Article[]; articlesCount: number }>(
-      '/articles' + (config.type === 'feed' ? '/feed' : ''),
+      '/articles' + (config.type === 'feed' ? '/feed' : config.type == 'trending' ? '/trending' : ''),
       { params },
     );
   }
diff --git a/src/app/features/article/services/comments.service.ts b/src/app/features/article/services/comments.service.ts
index 57ab62a42..574f658b0 100644
--- a/src/app/features/article/services/comments.service.ts
+++ b/src/app/features/article/services/comments.service.ts
@@ -23,4 +23,8 @@ export class CommentsService {
   delete(commentId: string, slug: string): Observable<void> {
     return this.http.delete<void>(`/articles/${slug}/comments/${commentId}`);
   }
+
+  softDelete(commentId: string, slug: string): Observable<void> {
+    return this.http.patch<void>(`/articles/${slug}/comments/${commentId}/remove`, {});
+  }
 }