From 2ff56221c35714d7680e63a7f9c0a7b5ec57c683 Mon Sep 17 00:00:00 2001 From: Milad Raeisi Date: Wed, 13 Nov 2024 12:04:54 +0400 Subject: [PATCH] Show posts in the Home page --- .../event-list/event-list.component.html | 2 +- src/app/components/home/home.component.html | 627 +++++------------- src/app/components/home/home.component.ts | 166 ++++- .../post-event/post-event.component.html | 8 +- .../post-event/post-event.component.ts | 36 +- .../post-profile/post-profile.component.html | 12 + .../post-profile/post-profile.component.scss | 0 .../post-profile/post-profile.component.ts | 61 ++ .../replay-profile.component.html | 2 +- .../replay-profile.component.ts | 2 +- .../components/profile/profile.component.html | 6 +- .../components/profile/profile.component.ts | 18 +- src/app/services/storage.service.ts | 30 +- 13 files changed, 436 insertions(+), 534 deletions(-) create mode 100644 src/app/components/post-event/post-profile/post-profile.component.html create mode 100644 src/app/components/post-event/post-profile/post-profile.component.scss create mode 100644 src/app/components/post-event/post-profile/post-profile.component.ts diff --git a/src/app/components/event-list/event-list.component.html b/src/app/components/event-list/event-list.component.html index c7d99d00..ac8b0f0d 100644 --- a/src/app/components/event-list/event-list.component.html +++ b/src/app/components/event-list/event-list.component.html @@ -10,7 +10,7 @@
- {{ event.username }} diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 1314c849..213272ff 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -119,488 +119,179 @@

ANGOR HUB

- - -
- Card cover image -
- Milad - 29 minutes ago -
- - - - - - - - - - -
-
- Look at that sky! I so want to be there.. Can we arrange a - trip? Is that a possibility? Please!!! -
-
- Card cover image -
-
- - - - -
-
-
-
- Card cover image - Card cover image - Card cover image - Card cover image -
- You and 24 more liked this -
-
- -
- - -
-
+ @for (item of posts; track $index) { + + +
+ -
-
-
- Card cover image - - - -
-
- + + - - -
+ + + + +
-
-
-
-
- Card cover image -
- - Rutherford Brannan Oh, I’m in.. - Let’s arrange a trip for the next - weekend if you want! - -
- Like - Reply - Hide replies - • - 17 min -
-
-
-
- Card cover image -
- - Milad Yes!! Let's talk - about it on lunch! - -
- Like - Reply - • - 15 min -
-
-
-
- Card cover image -
- - Barbara Cotilla Count me in !!! - -
- Like - Reply - • - 12 min -
-
-
-
- Card cover image -
- - Alan Marti The color of the sky - doesn’t look natural at all, do you - really think this is natural? I’d say - Photoshop! Your trip isn't going to - worth it since you won't be seeing this - exact sky. - -
- Like - Reply - Hide replies - • - 24 min -
-
+ +
+ + + +
+
-
- Card cover image -
- - Milad Hey, Alan! You - must be fun at parties! - -
- Like - Reply - • - 22 min -
-
+ + + + +
+ Embedded Image
-
- Card cover image -
- - Alan Marti Caroline, I'm telling - the truth, and if you cannot stand the - truth, maybe we shouldn't be friends - anymore... - -
- Like - Reply - • - 20 min -
-
+ + + + +
+
-
- Card cover image -
- - Milad Dude! Relax! I'm - just messing with you... - -
- Like - Reply - • - 18 min -
-
+ + + + +
+
-
- Card cover image -
- - Alan Marti Sorry! I had a bad - morning, let's talk about this in couple - hours, I need to relax a bit :( - -
- Like - Reply - • - 16 min -
-
+ + + + +
+ + {{ + token.word + }} +
-
- Card cover image -
- - Marleah Eagleston Count me in, - too! - -
- Like - Reply - • - 34 min -
-
+ + + + + +
+ + {{ token.trim() }} +
+ +
+ + +
+ + + + +
+
+
+ + +
+ +
- - + + } +
+ +
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 0b47be92..5fdfd7b3 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,25 +1,40 @@ -import { AngorCardComponent } from '@angor/components/card'; -import { TextFieldModule } from '@angular/cdk/text-field'; +import { + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + ViewEncapsulation, +} from '@angular/core'; import { CommonModule, NgClass } from '@angular/common'; -import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; -import { MatDivider, MatDividerModule } from '@angular/material/divider'; +import { MatDividerModule } from '@angular/material/divider'; import { MatExpansionModule } from '@angular/material/expansion'; import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatIcon, MatIconModule } from '@angular/material/icon'; +import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; -import { MatMenu, MatMenuModule, MatMenuTrigger } from '@angular/material/menu'; +import { MatMenuModule } from '@angular/material/menu'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatSlideToggle } from '@angular/material/slide-toggle'; -import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip'; -import { RouterLink } from '@angular/router'; -import { PickerComponent } from '@ctrl/ngx-emoji-mart'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { ActivatedRoute, Router } from '@angular/router'; import { QRCodeModule } from 'angularx-qrcode'; -import { SafeUrlPipe } from 'app/shared/pipes/safe-url.pipe'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; - import { Subject, takeUntil } from 'rxjs'; -import { EventListComponent } from '../event-list/event-list.component'; +import { Subscription } from 'rxjs'; +import { NostrEvent } from 'nostr-tools'; +import { AngorCardComponent } from '@angor/components/card'; +import { AngorConfigService } from '@angor/services/config'; +import { AngorConfirmationService } from '@angor/services/confirmation'; +import { MatDialog } from '@angular/material/dialog'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { PaginatedEventService } from 'app/services/event.service'; +import { ParseContentService } from 'app/services/parse-content.service'; +import { SignerService } from 'app/services/signer.service'; +import { SocialService } from 'app/services/social.service'; +import { StorageService } from 'app/services/storage.service'; +import { SubscriptionService } from 'app/services/subscription.service'; +import { AgoPipe } from 'app/shared/pipes/ago.pipe'; +import { PostProfileComponent } from '../post-event/post-profile/post-profile.component'; @Component({ selector: 'help-center', @@ -27,43 +42,126 @@ import { EventListComponent } from '../event-list/event-list.component'; encapsulation: ViewEncapsulation.None, standalone: true, imports: [ + CommonModule, + FormsModule, + MatButtonModule, + MatDividerModule, + MatExpansionModule, MatFormFieldModule, MatInputModule, MatIconModule, - RouterLink, - MatExpansionModule, - MatDivider, - MatMenu, - MatMenuTrigger, - AngorCardComponent, - MatTooltipModule, - MatIcon, - CommonModule, - MatButtonModule, MatMenuModule, - TextFieldModule, - MatDividerModule, - NgClass, - FormsModule, - QRCodeModule, - PickerComponent, - MatSlideToggle, - SafeUrlPipe, MatProgressSpinnerModule, + MatTooltipModule, + QRCodeModule, InfiniteScrollModule, - EventListComponent + NgClass, + AngorCardComponent, + AgoPipe, + PostProfileComponent ], - }) export class LandingHomeComponent implements OnInit, OnDestroy { + posts: NostrEvent[] = []; + likes: any[] = []; + hasMorePosts: boolean = true; + currentPage: number = 1; + loading: boolean = false; + myLikes: NostrEvent[] = []; + private subscriptions: Subscription[] = []; + + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _signerService: SignerService, + private _storageService: StorageService, + private _sanitizer: DomSanitizer, + private _route: ActivatedRoute, + private _router: Router, + private _socialService: SocialService, + private _snackBar: MatSnackBar, + private _dialog: MatDialog, + private _angorConfigService: AngorConfigService, + private _angorConfirmationService: AngorConfirmationService, + private _eventService: PaginatedEventService, + private _subscriptionService: SubscriptionService, + private parseContent: ParseContentService + ) {} ngOnInit(): void { + this.loadInitialPosts(); + this.subscribeToNewPosts(); + } + + private async loadInitialPosts(): Promise { + this.loading = true; + const maxAttempts = 5; + const delay = 3000; + + try { + for (let attemptCount = 0; attemptCount < maxAttempts; attemptCount++) { + const additionalPosts = await this._storageService.getAllPostsWithPagination( + this.currentPage, + 10 + ); + + if (additionalPosts.length > 0) { + this.posts = [...this.posts, ...additionalPosts]; + this.posts.sort((a, b) => b.created_at - a.created_at); + break; + } else { + if (attemptCount < maxAttempts - 1) { + console.warn(`Attempt ${attemptCount + 1} failed, retrying in ${delay / 1000}s.`); + await this.delay(delay); + } + } + } + + this.hasMorePosts = this.posts.length > 0; + if (!this.hasMorePosts) { + console.log('This user has no posts.'); + } + } catch (error) { + console.error('Error loading posts:', error); + } finally { + this.loading = false; + this._changeDetectorRef.detectChanges(); + } + } + private delay(ms: number): Promise { + return new Promise((resolve) => setTimeout(resolve, ms)); } + getSafeUrl(url: string): SafeUrl { + return this._sanitizer.bypassSecurityTrustUrl(url); + } - ngOnDestroy(): void { + isSingleEmojiOrWord(token: string): boolean { + const trimmedToken = token.trim(); + const isSingleWord = /^\w+$/.test(trimmedToken); + const isSingleEmoji = /^[\p{Emoji}]+$/u.test(trimmedToken); + return isSingleWord || isSingleEmoji; + } + private subscribeToNewPosts(): void { + const subscription = this._storageService.posts$.subscribe((newPost) => { + if (newPost) { + this.posts.unshift(newPost); + this.posts.sort((a, b) => b.created_at - a.created_at); + this._changeDetectorRef.detectChanges(); + } + }); + this.subscriptions.push(subscription); + } + + loadNextPage(): void { + if (this.loading) return; + this.currentPage++; + this.loadInitialPosts(); + } + + ngOnDestroy(): void { + this.subscriptions.forEach((sub) => sub.unsubscribe()); } diff --git a/src/app/components/post-event/post-event.component.html b/src/app/components/post-event/post-event.component.html index c6889522..702f2895 100644 --- a/src/app/components/post-event/post-event.component.html +++ b/src/app/components/post-event/post-event.component.html @@ -8,10 +8,12 @@
- Card cover image + {{ + user?.display_name || user?.name || '' + }}
- Milad + {{user?.display_name || user?.name || ''}} {{ post.created_at | ago }}