clean code practices in every file

.gitignore

@@ -45,6 +45,7 @@ Thumbs.db
 .firebase
 *-debug.log
 .runtimeconfig.json
+/src/app/app.config.ts
 
 
 #firebase functions

src/app/app.component.ts

@@ -1,14 +1,6 @@
 import { Component } from "@angular/core";
-import { MatIconModule } from "@angular/material/icon";
 import { RouterOutlet } from "@angular/router";
-import {
-    trigger,
-    state,
-    style,
-    animate,
-    transition,
-} from "@angular/animations";
-import { FirestoreService } from "./firestore.service";
+import { trigger, style, animate, transition } from "@angular/animations";
 
 @Component({
     selector: "app-root",
@@ -20,11 +12,4 @@ import { FirestoreService } from "./firestore.service";
 })
 export class AppComponent {
     title = "DABubble";
-
-    constructor(private firestore: FirestoreService) {
-        this.firestore.currentUser$.subscribe((uid) => {
-            console.log("Aktuelle Benutzer UID:", uid);
-            // Führen Sie hier Aktionen aus, die vom aktuellen Benutzerstatus abhängen
-        });
-    }
 }

src/app/app.routes.ts

@@ -6,8 +6,6 @@ import { RecoveryComponent } from "./start/recovery/recovery.component";
 import { ResetPasswordComponent } from "./start/reset-password/reset-password.component";
 import { PrivacyPolicyComponent } from "./start/privacy-policy/privacy-policy.component";
 import { LegalNoticeComponent } from "./start/legal-notice/legal-notice.component";
-import { ChatComponent } from "./main/chat/chat.component";
-import { ThreadComponent } from "./main/thread/thread.component";
 
 export const routes: Routes = [
     { path: "", component: MainComponent },

src/app/auth.guard.ts

@@ -1,35 +1,17 @@
 import { Injectable, inject } from "@angular/core";
-import {
-    CanActivateFn,
-    ActivatedRouteSnapshot,
-    RouterStateSnapshot,
-    Router,
-} from "@angular/router";
-import { map, catchError } from "rxjs";
+import { CanActivateFn } from "@angular/router";
 import { CurrentuserService } from "./currentuser.service";
 
 @Injectable({
     providedIn: "root",
 })
 export class AuthGuard {
-    constructor(
-        authService: CurrentuserService,
-        private router: Router,
-    ) {
-        console.log(authService.isLoggedIn);
-    }
 }
 
-export const canActivateGuard: CanActivateFn = (
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot,
-) => {
+export const canActivateGuard: CanActivateFn = () => {
     if (inject(CurrentuserService).isLoggedIn) {
-        // inject(Router).navigate(['']);
-        console.log("user is logged in");
         return true;
     } else {
-        // inject(Router).navigate(['login']);
         return false;
     }
 };

src/app/bottomsheet-add-member-new-channel/bottomsheet-add-member-new-channel.component.ts

@@ -1,9 +1,6 @@
 import { Component, Inject } from "@angular/core";
 import { DialogAddChannelAddMemberComponent } from "../dialog-add-channel-add-member/dialog-add-channel-add-member.component";
-import {
-    MAT_BOTTOM_SHEET_DATA,
-    MatBottomSheetRef,
-} from "@angular/material/bottom-sheet";
+import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from "@angular/material/bottom-sheet";
 
 @Component({
     selector: "app-bottomsheet-add-member-new-channel",
@@ -15,9 +12,10 @@ import {
 export class BottomsheetAddMemberNewChannelComponent {
     constructor(
         @Inject(MAT_BOTTOM_SHEET_DATA)
-        public data: { channelName: string; channelDescription: string },
+        public data: { channelName: string; channelDescription: string; },
         private bottomSheetRef: MatBottomSheetRef<BottomsheetAddMemberNewChannelComponent>,
-    ) {}
+    ) { }
+
 
     closeSheet(): void {
         this.bottomSheetRef.dismiss();

src/app/bottomsheet-profile-menu/bottomsheet-profile-menu.component.ts

@@ -1,12 +1,7 @@
 import { Component } from "@angular/core";
-import {
-    MatBottomSheet,
-    MatBottomSheetModule,
-    MatBottomSheetRef,
-} from "@angular/material/bottom-sheet";
-import { MatDialog, MatDialogRef } from "@angular/material/dialog";
+import { MatBottomSheetModule, MatBottomSheetRef } from "@angular/material/bottom-sheet";
+import { MatDialog } from "@angular/material/dialog";
 import { FirestoreService } from "../firestore.service";
-import { DialogEditProfileComponent } from "../dialog-edit-profile/dialog-edit-profile.component";
 import { DialogEditProfileEditProfileComponent } from "../dialog-edit-profile-edit-profile/dialog-edit-profile-edit-profile.component";
 
 @Component({
@@ -21,13 +16,15 @@ export class BottomsheetProfileMenuComponent {
         private _bottomSheetRef: MatBottomSheetRef<BottomsheetProfileMenuComponent>,
         public dialog: MatDialog,
         public firestore: FirestoreService,
-    ) {}
+    ) { }
+
 
     logout() {
         this._bottomSheetRef.dismiss();
         this.firestore.logout();
     }
 
+
     openProfile(): void {
         this.dialog.open(DialogEditProfileEditProfileComponent, {});
     }

src/app/common-fn.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CommonFnService } from './common-fn.service';
+
+describe('CommonFnService', () => {
+  let service: CommonFnService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CommonFnService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/common-fn.service.ts

@@ -0,0 +1,138 @@
+import { Injectable } from '@angular/core';
+import { EmojiService } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { UsersList } from './interfaces/users-list';
+import { ChatService } from './main/chat/chat.service';
+import { Message } from './interfaces/message';
+import { PofileInfoCardComponent } from './pofile-info-card/pofile-info-card.component';
+import { MatDialog } from '@angular/material/dialog';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommonFnService {
+  recentEmojis: string[] = [];
+
+
+  constructor(
+    private emojiService: EmojiService,
+    private chatService: ChatService,
+    private dialog: MatDialog
+  ) { }
+
+
+  onMessageClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (target.classList.contains("highlight-mention")) {
+      const username = target.getAttribute("data-username");
+      if (username) {
+        this.openProfileCard(username);
+      } else {
+        console.error("Kein Benutzername definiert für dieses Element");
+      }
+    }
+  }
+
+
+  openProfileCard(username: string) {
+    const user = this.chatService.usersList.find(
+      (u) => u.name === username,
+    );
+    if (user) {
+      this.dialog.open(PofileInfoCardComponent, {
+        data: user,
+      });
+    }
+  }
+
+
+  noReactions(message: Message): boolean {
+    return !message.reactions || Object.keys(message.reactions).length === 0;
+  }
+
+
+  padNumber(num: number, size: number) {
+    let s = num + "";
+    while (s.length < size) s = "0" + s;
+    return s;
+  }
+
+
+  dayTime(timestamp: string): string {
+    const date = new Date(timestamp);
+    const options: Intl.DateTimeFormatOptions = {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    };
+    return date.toLocaleTimeString("de-DE", options);
+  }
+
+
+  dayDate(timestamp: string): string {
+    const date = new Date(timestamp);
+    if (this.isToday(date)) return "Heute";
+    if (this.isYesterday(date)) return "Gestern";
+    return this.formatDate(date);
+  }
+
+
+  private isToday(date: Date): boolean {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return date.setHours(0, 0, 0, 0) === today.getTime();
+  }
+
+
+  private isYesterday(date: Date): boolean {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    yesterday.setHours(0, 0, 0, 0);
+    return date.setHours(0, 0, 0, 0) === yesterday.getTime();
+  }
+
+
+  private formatDate(date: Date): string {
+    return date.toLocaleDateString("de-DE", {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+    });
+  }
+
+
+  _filter(value: string): UsersList[] {
+    if (this.mentionUser(value)) {
+      const filterValue = value
+        .slice(value.lastIndexOf("@") + 1)
+        .toLowerCase();
+      return this.chatService.usersList.filter((user) =>
+        user.name.toLowerCase().includes(filterValue),
+      );
+    } else {
+      return [];
+    }
+  }
+
+
+  mentionUser(value: string): boolean {
+    const atIndex = value.lastIndexOf("@");
+    if (atIndex === -1) return false;
+    const charAfterAt = value.charAt(atIndex + 1);
+    return charAfterAt !== " ";
+  }
+
+
+  getEmojiById(emojiId: string) {
+    const emoji = this.emojiService.getData(emojiId); // Get the emoji by ID
+    return emoji ? emoji.native : null;           // Return the native emoji
+  }
+
+
+  loadRecentEmojis() {
+    const recentEmojiData = localStorage.getItem('emoji-mart.frequently');
+    if (recentEmojiData) {
+      const recentEmojiObj = JSON.parse(recentEmojiData);
+      this.recentEmojis = Object.keys(recentEmojiObj).slice(-2).reverse();  // Get the last two emojis and reverse the order
+    }
+  }
+}

src/app/currentuser.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { Firestore, doc, onSnapshot } from "@angular/fire/firestore";
+import { doc, onSnapshot } from "@angular/fire/firestore";
 import { FirestoreService } from "./firestore.service";
 import { UsersList } from "./interfaces/users-list";
 
@@ -17,28 +17,40 @@ export class CurrentuserService {
         online: false,
     };
 
+
     constructor(private firestore: FirestoreService) {
         this.firestore.currentUser$.subscribe((uid) => {
             this.currentUserUid = uid;
             this.subCurrentUser();
         });
     }
 
+
+    setUsersListObj(obj: any, id: string): UsersList {
+        return {
+          id: id || '',
+          name: obj.name || '',
+          avatar: obj.avatar || '',
+          email: obj.email || '',
+          online: obj.online || false, // Standardwert ist false, wird durch Realtime-Daten aktualisiert
+        };
+      }
+
+
     subCurrentUser(): void {
         let firestore = this.firestore.getFirestore();
         if (this.currentUserUid) {
             this.isLoggedIn = true;
             let ref = doc(firestore, "users", this.currentUserUid);
             onSnapshot(ref, (doc) => {
                 this.currentUser = this.setCurrentUserObj(doc.data(), doc.id);
-                console.log(this.currentUser);
             });
         } else {
             this.isLoggedIn = false;
-            console.log("invalid user uid");
         }
     }
 
+
     setCurrentUserObj(obj: any, id: string): UsersList {
         return {
             id: id || "",