feat: challange request, accept, decline, page, added (not complete, polling issues, and not stable, and too much code for nothing)

src/app/components/challenge-notification/challenge-notification.component.ts

@@ -6,96 +6,96 @@ import { finalize } from 'rxjs';
 import { getErrorMessage } from '../../core/http/error-message.util';
 
 @Component({
-  selector: 'app-challenge-notification',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './challenge-notification.component.html',
-  styleUrls: ['./challenge-notification.component.css']
+    selector: 'app-challenge-notification',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './challenge-notification.component.html',
+    styleUrls: ['./challenge-notification.component.css']
 })
 export class ChallengeNotificationComponent {
-  @Input() challenge!: Challenge;
-  @Output() accept = new EventEmitter<Challenge>();
-  @Output() decline = new EventEmitter<Challenge>();
-  @Output() close = new EventEmitter<void>();
+    @Input() challenge!: Challenge;
+    @Output() accept = new EventEmitter<Challenge>();
+    @Output() decline = new EventEmitter<Challenge>();
+    @Output() close = new EventEmitter<void>();
 
-  private readonly challengeService = inject(ChallengeService);
+    private readonly challengeService = inject(ChallengeService);
 
-  acceptingChallenge = false;
-  decliningChallenge = false;
-  errorMessage = '';
+    acceptingChallenge = false;
+    decliningChallenge = false;
+    errorMessage = '';
 
-  onAccept(): void {
-    if (this.acceptingChallenge || this.decliningChallenge) {
-      return;
-    }
-
-    this.acceptingChallenge = true;
-    this.errorMessage = '';
-
-    this.challengeService.acceptChallenge(this.challenge.id)
-      .pipe(finalize(() => (this.acceptingChallenge = false)))
-      .subscribe({
-        next: () => {
-          this.accept.emit(this.challenge);
-        },
-        error: (error) => {
-          this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+    onAccept(): void {
+        if (this.acceptingChallenge || this.decliningChallenge) {
+            return;
         }
-      });
-  }
 
-  onDecline(): void {
-    if (this.acceptingChallenge || this.decliningChallenge) {
-      return;
+        this.acceptingChallenge = true;
+        this.errorMessage = '';
+
+        this.challengeService.acceptChallenge(this.challenge.id)
+            .pipe(finalize(() => (this.acceptingChallenge = false)))
+            .subscribe({
+                next: () => {
+                    this.accept.emit(this.challenge);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+                }
+            });
     }
 
-    this.decliningChallenge = true;
-    this.errorMessage = '';
-
-    this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
-      .pipe(finalize(() => (this.decliningChallenge = false)))
-      .subscribe({
-        next: () => {
-          this.decline.emit(this.challenge);
-        },
-        error: (error) => {
-          this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+    onDecline(): void {
+        if (this.acceptingChallenge || this.decliningChallenge) {
+            return;
         }
-      });
-  }
 
-  onClose(): void {
-    this.close.emit();
-  }
+        this.decliningChallenge = true;
+        this.errorMessage = '';
 
-  getTimeControlDisplay(): string {
-    const { limit, increment } = this.challenge.timeControl;
-    if (!limit || !increment) {
-      return 'Unlimited';
-    }
-    const minutes = Math.floor(limit / 60);
-    return `${minutes}+${increment}`;
-  }
-
-  getCreatedByDisplay(): string {
-    return this.challenge.challenger.name;
-  }
-
-  getExpirationInfo(): string {
-    const expiresAt = new Date(this.challenge.expiresAt);
-    const now = new Date();
-    const diffMs = expiresAt.getTime() - now.getTime();
-
-    if (diffMs <= 0) {
-      return 'Expired';
+        this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
+            .pipe(finalize(() => (this.decliningChallenge = false)))
+            .subscribe({
+                next: () => {
+                    this.decline.emit(this.challenge);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+                }
+            });
     }
 
-    const minutes = Math.floor(diffMs / 60000);
-    if (minutes > 60) {
-      const hours = Math.floor(minutes / 60);
-      return `Expires in ${hours}h`;
+    onClose(): void {
+        this.close.emit();
     }
 
-    return `Expires in ${minutes}m`;
-  }
+    getTimeControlDisplay(): string {
+        const { limit, increment } = this.challenge.timeControl;
+        if (!limit || !increment) {
+            return 'Unlimited';
+        }
+        const minutes = Math.floor(limit / 60);
+        return `${minutes}+${increment}`;
+    }
+
+    getCreatedByDisplay(): string {
+        return this.challenge.challenger.name;
+    }
+
+    getExpirationInfo(): string {
+        const expiresAt = new Date(this.challenge.expiresAt);
+        const now = new Date();
+        const diffMs = expiresAt.getTime() - now.getTime();
+
+        if (diffMs <= 0) {
+            return 'Expired';
+        }
+
+        const minutes = Math.floor(diffMs / 60000);
+        if (minutes > 60) {
+            const hours = Math.floor(minutes / 60);
+            return `Expires in ${hours}h`;
+        }
+
+        return `Expires in ${minutes}m`;
+    }
 }