From 07c4f619e9b03ef6c5ab1bcd152c4a73374715fa Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Sat, 19 Oct 2024 21:03:10 +0200
Subject: [PATCH] refactor after reviews

---
 .../sidebar-card-item.component.html            |  4 ++--
 .../sidebar-card-item.component.ts              | 16 +++++++++++-----
 .../sidebar/sidebar-card-item.component.spec.ts | 17 +++++++++++------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html
index 2811b7fce058..8e85bc8334ea 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html
+++ b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.html
@@ -52,7 +52,7 @@
                     class="small text-truncate me-2"
                     [title]="sidebarItem.title"
                     [class.muted]="sidebarItem.conversation?.isMuted"
-                    [ngClass]="unreadCount > 0 ? 'fw-bold' : 'fw-semibold'"
+                    [ngClass]="unreadCount() > 0 ? 'fw-bold' : 'fw-semibold'"
                 >
                     @if (sidebarItem.icon) {
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.icon" />
@@ -64,7 +64,7 @@
                         <fa-icon [fixedWidth]="true" [icon]="sidebarItem.rightIcon" />
                     }
                 </span>
-                @if (unreadCount > 0) {
+                @if (unreadCount() > 0) {
                     <span class="unread-count">{{ formattedUnreadCount }}</span>
                 }
             </div>
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts
index abfb91568a72..4c294f485fa7 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts
+++ b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, input } from '@angular/core';
 import { SidebarCardElement, SidebarTypes } from 'app/types/sidebar';
 
 @Component({
@@ -6,11 +6,11 @@ import { SidebarCardElement, SidebarTypes } from 'app/types/sidebar';
     templateUrl: './sidebar-card-item.component.html',
     styleUrls: ['./sidebar-card-item.component.scss', '../sidebar.component.scss'],
 })
-export class SidebarCardItemComponent implements OnInit {
+export class SidebarCardItemComponent implements OnInit, OnChanges {
     @Input() sidebarItem: SidebarCardElement;
     @Input() sidebarType?: SidebarTypes;
     @Input() groupKey?: string;
-    @Input() unreadCount: number = 0;
+    unreadCount = input<number>(0);
 
     formattedUnreadCount: string = '';
 
@@ -18,10 +18,16 @@ export class SidebarCardItemComponent implements OnInit {
         this.formattedUnreadCount = this.getFormattedUnreadCount();
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['unreadCount']) {
+            this.formattedUnreadCount = this.getFormattedUnreadCount();
+        }
+    }
+
     private getFormattedUnreadCount(): string {
-        if (this.unreadCount > 99) {
+        if (this.unreadCount() > 99) {
             return '99+';
         }
-        return this.unreadCount?.toString() || '';
+        return this.unreadCount().toString() || '';
     }
 }
diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts
index 9fbc399abcee..b82e9af01815 100644
--- a/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/sidebar/sidebar-card-item.component.spec.ts
@@ -3,6 +3,7 @@ import { SidebarCardItemComponent } from 'app/shared/sidebar/sidebar-card-item/s
 import { SidebarCardSize } from 'app/types/sidebar';
 import { ArtemisTestModule } from '../../../test.module';
 import { DifficultyLevel } from 'app/entities/exercise.model';
+import { input, runInInjectionContext } from '@angular/core';
 
 describe('SidebarCardItemComponent', () => {
     let component: SidebarCardItemComponent;
@@ -39,14 +40,18 @@ describe('SidebarCardItemComponent', () => {
     });
 
     it('should format unreadCount correctly when count is less than 99', () => {
-        component.unreadCount = 45;
-        component.ngOnInit();
-        expect(component.formattedUnreadCount).toBe('45');
+        runInInjectionContext(fixture.debugElement.injector, () => {
+            component.unreadCount = input<number>(45);
+            component.ngOnInit();
+            expect(component.formattedUnreadCount).toBe('45');
+        });
     });
 
     it('should format unreadCount as "99+" when count exceeds 99', () => {
-        component.unreadCount = 120;
-        component.ngOnInit();
-        expect(component.formattedUnreadCount).toBe('99+');
+        runInInjectionContext(fixture.debugElement.injector, () => {
+            component.unreadCount = input<number>(120);
+            component.ngOnInit();
+            expect(component.formattedUnreadCount).toBe('99+');
+        });
     });
 });