From bef1098928f7d8eea0e8c43630be05dbdb741e0b Mon Sep 17 00:00:00 2001 From: Shaun Mascarenhas Date: Fri, 31 Oct 2025 00:18:49 +0000 Subject: [PATCH 1/2] tested locally, faced issues as createpost wasnt working locally --- .../src/app/app.routes.ts | 6 +-- .../pages/home/home/PostDetails/details.html | 16 ++++++- .../pages/home/home/PostDetails/details.ts | 46 +++++++++++-------- 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/apps/fakeoverflow-angular/src/app/app.routes.ts b/apps/fakeoverflow-angular/src/app/app.routes.ts index c0bcdbc..55f1c52 100644 --- a/apps/fakeoverflow-angular/src/app/app.routes.ts +++ b/apps/fakeoverflow-angular/src/app/app.routes.ts @@ -1,6 +1,6 @@ import { Routes } from '@angular/router'; import { authGuard } from '@guards/auth-guard'; - +import { DetailsComponent } from './pages/home/home/PostDetails/details'; export const routes: Routes = [ { path: 'auth', @@ -44,6 +44,6 @@ export const routes: Routes = [ { path: 'personalhome', loadComponent: () => import('./pages/home/home/PersonalQuestionsHome/personalHome').then(m => m.PersonalHome) }, { path: '', redirectTo: 'home', pathMatch: 'full' }, - { path: '**', redirectTo: 'home' } - + { path: '**', redirectTo: 'home' }, +{ path: 'post/:id', component: DetailsComponent } ]; diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html b/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html index 425cab8..efd29b2 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html @@ -2,12 +2,24 @@

Post Details

+
+ Loading post details... +
+ + +
+ {{ errorMessage }} +
+ +
+ +

- Global Markets Rebound as Investors Anticipate Fed Rate Cut + {{ post.title }}

@@ -15,7 +27,7 @@

Post Details

Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December - + {{ post.body }}

diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.ts index ceb847c..84b5733 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.ts +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.ts @@ -1,7 +1,9 @@ -import { Component } from '@angular/core'; +import { Component, OnInit , inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, NgForm } from '@angular/forms'; +import { ActivatedRoute } from '@angular/router'; import {Navbar} from '@shared/navbar/navbar'; +import { PostService } from '../../../../../../../../packages/fakeoverflow-angular-services/api/post.service'; @Component({ selector: 'app-post', @@ -10,24 +12,32 @@ import {Navbar} from '@shared/navbar/navbar'; templateUrl: './details.html', styleUrl: './details.scss' }) -export class DetailsComponent { - title = ''; - body = ''; - tags = ''; +export class DetailsComponent implements OnInit { + private readonly postService = inject(PostService); + private readonly route = inject(ActivatedRoute); + post: any = null; loading = false; - submitted = false; + errorMessage = ''; + ngOnInit() { + const id = this.route.snapshot.paramMap.get('id'); + if (!id) { + this.errorMessage = 'No post ID provided.'; + return; + } + this.loading = true; - submit(form: NgForm) { - if (form.invalid) return; - this.loading = true; - const payload = { - title: this.title.trim(), - body: this.body.trim(), - tags: this.tags.split(',').map(t => t.trim()).filter(Boolean) - }; - console.log('Post submit', payload); - this.submitted = true; - this.loading = false; - form.resetForm(); + this.postService.getPostById(id).subscribe({ + next: (response) => { + this.post = response; + this.loading = false; + }, + error: (err) => { + console.error('Error loading post:', err); + this.errorMessage = 'Failed to load post.'; + this.loading = false; + } + }); + } } + From e11068a0fa4180ca73c9d38bbec1bef3e589d5b9 Mon Sep 17 00:00:00 2001 From: Alen Alex Date: Fri, 31 Oct 2025 10:08:26 +0000 Subject: [PATCH 2/2] refactor: redesign Post Details page layout and improve component modularity - Updated `details.ts` to leverage modular components (`PostTitle`, `PostQuestion`, `PostAnswer`). - Replaced inline HTML with reusable components for better maintainability. - Added new routes for post view with improved lazy loading definitions. - Enhanced UI structure with improved responsiveness and better separation of concerns. - Integrated spinner service for loading state management. --- .../src/app/app.routes.ts | 13 ++++-- .../pages/home/home/PostDetails/details.html | 42 ----------------- .../app/pages/home/home/create-post/post.html | 4 +- .../app/pages/home/home/details/details.html | 28 +++++++++++ .../{PostDetails => details}/details.scss | 0 .../home/{PostDetails => details}/details.ts | 17 +++++-- .../home/details/post-answer/post-answer.html | 46 +++++++++++++++++++ .../home/details/post-answer/post-answer.scss | 0 .../home/details/post-answer/post-answer.ts | 18 ++++++++ .../details/post-question/post-question.html | 32 +++++++++++++ .../details/post-question/post-question.scss | 0 .../details/post-question/post-question.ts | 17 +++++++ .../home/details/post-title/post-title.html | 26 +++++++++++ .../home/details/post-title/post-title.scss | 0 .../home/details/post-title/post-title.ts | 18 ++++++++ 15 files changed, 209 insertions(+), 52 deletions(-) delete mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/details.html rename apps/fakeoverflow-angular/src/app/pages/home/home/{PostDetails => details}/details.scss (100%) rename apps/fakeoverflow-angular/src/app/pages/home/home/{PostDetails => details}/details.ts (59%) create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.html create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.scss create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.ts create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.html create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.scss create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.ts create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.html create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.scss create mode 100644 apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.ts diff --git a/apps/fakeoverflow-angular/src/app/app.routes.ts b/apps/fakeoverflow-angular/src/app/app.routes.ts index 55f1c52..bdc6aff 100644 --- a/apps/fakeoverflow-angular/src/app/app.routes.ts +++ b/apps/fakeoverflow-angular/src/app/app.routes.ts @@ -1,6 +1,5 @@ import { Routes } from '@angular/router'; import { authGuard } from '@guards/auth-guard'; -import { DetailsComponent } from './pages/home/home/PostDetails/details'; export const routes: Routes = [ { path: 'auth', @@ -28,7 +27,7 @@ export const routes: Routes = [ ] }, { path: 'home', loadComponent: () => import('./pages/home/home/home').then(m => m.Home), }, - { + { path: 'post', children: [ { @@ -36,14 +35,18 @@ export const routes: Routes = [ loadComponent: () => import('./pages/home/home/create-post/post').then(m => m.PostComponent), canActivate: [authGuard], title: 'Create Post | FakeOverflow' + }, + { + path: ":id", + loadComponent: () => import('./pages/home/home/details/details').then(m => m.DetailsComponent), + title: 'Post | FakeOverflow' } - ] + ] }, { path: 'update', loadComponent: () => import('./pages/home/home/UpdatePost/update').then(m => m.UpdateComponent) }, - { path: 'detail', loadComponent: () => import('./pages/home/home/PostDetails/details').then(m => m.DetailsComponent) }, + { path: 'detail', loadComponent: () => import('@pages/home/home/details/details').then(m => m.DetailsComponent) }, { path: 'personalhome', loadComponent: () => import('./pages/home/home/PersonalQuestionsHome/personalHome').then(m => m.PersonalHome) }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', redirectTo: 'home' }, -{ path: 'post/:id', component: DetailsComponent } ]; diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html b/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html deleted file mode 100644 index efd29b2..0000000 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.html +++ /dev/null @@ -1,42 +0,0 @@ - -
-
-

Post Details

-
- Loading post details... -
- - -
- {{ errorMessage }} -
- - -
- - -
-
- -

- {{ post.title }} -

-
- -
- -

- Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December - {{ post.body }} -

-
- -
- -

- FAKE OR REAL -

-
-
-
-
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/create-post/post.html b/apps/fakeoverflow-angular/src/app/pages/home/home/create-post/post.html index 4ad85be..5529061 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/create-post/post.html +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/create-post/post.html @@ -6,13 +6,13 @@

Ask question

- +
Enter at least 10 characters
- +
Enter at least 20 characters
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/details.html b/apps/fakeoverflow-angular/src/app/pages/home/home/details/details.html new file mode 100644 index 0000000..5f43cf8 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/details.html @@ -0,0 +1,28 @@ + + +
+
+ +
+
+ + + +
+
+ + + +
+
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.scss b/apps/fakeoverflow-angular/src/app/pages/home/home/details/details.scss similarity index 100% rename from apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.scss rename to apps/fakeoverflow-angular/src/app/pages/home/home/details/details.scss diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/details/details.ts similarity index 59% rename from apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.ts rename to apps/fakeoverflow-angular/src/app/pages/home/home/details/details.ts index 84b5733..80fb219 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/PostDetails/details.ts +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/details.ts @@ -4,18 +4,26 @@ import { FormsModule, NgForm } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import {Navbar} from '@shared/navbar/navbar'; import { PostService } from '../../../../../../../../packages/fakeoverflow-angular-services/api/post.service'; +import {PostTitle} from '@pages/home/home/details/post-title/post-title'; +import {PostQuestion} from '@pages/home/home/details/post-question/post-question'; +import {PostAnswer} from '@pages/home/home/details/post-answer/post-answer'; +import {FakeoverFlowBackendHttpApiFeaturesPostsViewPostViewPostResponse} from 'fakeoverflow-angular-services'; +import {HotToastService} from '@ngxpert/hot-toast'; +import {Spinner} from '@services/spinner'; @Component({ selector: 'app-post', standalone: true, - imports: [Navbar, CommonModule, FormsModule], + imports: [Navbar, CommonModule, FormsModule, PostTitle, PostQuestion, PostAnswer], templateUrl: './details.html', styleUrl: './details.scss' }) export class DetailsComponent implements OnInit { private readonly postService = inject(PostService); private readonly route = inject(ActivatedRoute); - post: any = null; + protected readonly spinnerService = inject(Spinner); + + protected post: FakeoverFlowBackendHttpApiFeaturesPostsViewPostViewPostResponse | null = null; loading = false; errorMessage = ''; ngOnInit() { @@ -26,8 +34,10 @@ export class DetailsComponent implements OnInit { } this.loading = true; + const pageSpinner = this.spinnerService.for("Loading post"); this.postService.getPostById(id).subscribe({ next: (response) => { + pageSpinner.release() this.post = response; this.loading = false; }, @@ -35,9 +45,10 @@ export class DetailsComponent implements OnInit { console.error('Error loading post:', err); this.errorMessage = 'Failed to load post.'; this.loading = false; + pageSpinner.release() } }); - + } } diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.html b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.html new file mode 100644 index 0000000..2862a48 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.html @@ -0,0 +1,46 @@ +
+

Answers

+ +
Loading answers...
+
{{ errorMessage }}
+ + +
+
+
+ +
+ + 0 + +
+ + +
+

+ {{ answer.content }} +

+ +
+ Profile + {{ answer.createdOn?.user?.name }} + · {{ answer.createdOn?.activityOn | date: 'medium' }} +
+
+
+
+
+ + +
+ No answers yet. Be the first to respond! +
+
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.scss b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.scss new file mode 100644 index 0000000..e69de29 diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.ts new file mode 100644 index 0000000..61073bd --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-answer/post-answer.ts @@ -0,0 +1,18 @@ +import {Component, input, signal} from '@angular/core'; +import {FakeoverFlowBackendHttpApiFeaturesPostsViewPostViewPostResponse} from 'fakeoverflow-angular-services'; +import {ButtonDirective} from 'primeng/button'; +import {DatePipe} from '@angular/common'; + +@Component({ + selector: 'app-post-answer', + imports: [ + ButtonDirective, + DatePipe + ], + templateUrl: './post-answer.html', + styleUrl: './post-answer.scss' +}) +export class PostAnswer { + public post = input.required(); + protected readonly errorMessage = signal(null); +} diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.html b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.html new file mode 100644 index 0000000..39fffcd --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.html @@ -0,0 +1,32 @@ +
+
+ +
+ + {{ post().votes }} + +
+ + +
+

+ {{ post().content }} +

+ + +
+ + {{ tag }} + +
+ + +
+ Last updated on {{ post().updatedOn?.activityOn | date: 'medium' }} +
+
+
+
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.scss b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.scss new file mode 100644 index 0000000..e69de29 diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.ts new file mode 100644 index 0000000..8e947da --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-question/post-question.ts @@ -0,0 +1,17 @@ +import {Component, input} from '@angular/core'; +import {FakeoverFlowBackendHttpApiFeaturesPostsViewPostViewPostResponse} from 'fakeoverflow-angular-services'; +import {ButtonDirective} from 'primeng/button'; +import {DatePipe} from '@angular/common'; + +@Component({ + selector: 'app-post-question', + imports: [ + ButtonDirective, + DatePipe + ], + templateUrl: './post-question.html', + styleUrl: './post-question.scss' +}) +export class PostQuestion { + public post = input.required(); +} diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.html b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.html new file mode 100644 index 0000000..9a2fe26 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.html @@ -0,0 +1,26 @@ +
+
+
+

+ {{ post().title }} +

+ +
+ Profile + Asked by + {{ post().createdOn?.user?.name }} + · {{ post().createdOn?.activityOn | date: 'medium' }} +
+
+ +
+
{{ post().views }} views
+
{{ post().votes }} votes
+
+
+
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.scss b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.scss new file mode 100644 index 0000000..e69de29 diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.ts new file mode 100644 index 0000000..b597373 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/details/post-title/post-title.ts @@ -0,0 +1,18 @@ +import {Component, input} from '@angular/core'; +import {FakeoverFlowBackendHttpApiFeaturesPostsViewPostViewPostResponse} from 'fakeoverflow-angular-services'; +import {DatePipe} from '@angular/common'; + +@Component({ + selector: 'app-post-title', + imports: [ + DatePipe + ], + templateUrl: './post-title.html', + styleUrl: './post-title.scss' +}) +export class PostTitle { + + public post = input.required(); + + +}