clean code

src/app/components/sidebar/show-all-users/show-all-users.component.html

@@ -17,7 +17,7 @@
         class="user"
         (click)="checkRoute([user]); closeSecondaryChatAndSidebar()"
       >
-        <div class="positionImgs">
+        <div class="positionImg">
           <img src="{{ user.avatar }}" class="avatarImg" />
           <img
             src="./assets/img/{{

src/app/components/sidebar/show-all-users/show-all-users.component.scss

@@ -18,7 +18,6 @@ section {
   padding: 24px;
   @include displayFlex($g: 20px);
   flex-direction: column;
-
   .positionHeader {
     @include displayFlex($j: space-between);
     font-size: 24px;
@@ -34,28 +33,23 @@ section {
   max-height: 300px;
   overflow: auto;
   width: 100%;
-
   .user {
     @include displayFlex($g: 12px);
     padding: 6px;
     cursor: pointer;
     transition: 0.2s ease-in-out;
-
     &:hover {
       background-color: #edeefe;
       border-radius: 25px;
     }
-
+    .positionImg {
-    .positionImgs {
       @include displayFlex($a: flex-end);
-
       .avatarImg {
         width: 40px;
         height: 40px;
         object-fit: cover;
         border-radius: 50%;
       }
-
       .onlineIcon {
         width: 12px;
         height: 12px;

src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.html

@@ -25,7 +25,7 @@
       <p>{{ "add-new-channel.header2" | translate }}</p>
       &nbsp;
       <span>{{ "add-new-channel.required" | translate }}</span>
-      @if (chechIfChannelExist(channelName)) {
+      @if (checkIfChannelExist(channelName)) {
       <p class="warning">{{ "add-new-channel.warning" | translate }}</p>
       }
       <img class="hashtag" src="./assets/img/hashtag.svg" alt="" />
@@ -118,18 +118,18 @@
       </div>
       <input
         type="text"
-        class="inputfieldStyle"
+        class="inputFieldStyle"
         [(ngModel)]="userName"
         (keyup)="filterUsers(userName)"
       />
       <div
         class="showSearchedUsersWindow"
-        [ngClass]="{ dBlock: showExistenUsers, dNone: !showExistenUsers }"
+        [ngClass]="{ dBlock: showExistedUsers, dNone: !showExistedUsers }"
       >
         <div class="positionOfAllUsersInBox">
           @for(user of getSearchedUser; track user){
           <div class="user" (click)="chooseUser(user)">
-            <div class="positionImgs">
+            <div class="positionImg">
               <img src="{{ user.avatar }}" class="avatarImg" />
               <img
                 src="./assets/img/{{

src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.scss

@@ -199,7 +199,7 @@ textarea {
         }
       }
     }
-    .inputfieldStyle {
+    .inputFieldStyle {
       width: auto;
       flex-grow: 1;
       outline: none;
@@ -277,7 +277,7 @@ textarea {
         background-color: #edeefe;
         border-radius: 25px;
       }
-      .positionImgs {
+      .positionImg {
         @include displayFlex($a: flex-end);
         .avatarImg {
           width: 40px;

src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.ts

@@ -24,7 +24,7 @@ export class AddNewChannelComponent {
   currentDate: string = new Date().toISOString().split('T')[0];
   changeImg: boolean = false;
   userName: string = '';
-  showExistenUsers: boolean = false;
+  showExistedUsers: boolean = false;
   getSearchedUser: User[] = [];
   channelName: string = '';
   channelDescription: string = '';
@@ -90,7 +90,7 @@ export class AddNewChannelComponent {
    * @param userName The name of the user to filter.
    */
   filterUsers(userName: string) {
-    this.showExistenUsers = true;
+    this.showExistedUsers = true;
     this.getSearchedUser = [];
     const searchedUser = userName.toLowerCase().trim();
     const filteredUsers = this.userService.getUsers().filter((user) => {
@@ -120,7 +120,7 @@ export class AddNewChannelComponent {
       console.log('User already selected!');
     }
     this.userName = '';
-    this.showExistenUsers = false;
+    this.showExistedUsers = false;
   }
 
   /**
@@ -129,14 +129,14 @@ export class AddNewChannelComponent {
    */
   spliceCurrentUser(index: number) {
     this.getSelectedUsers.splice(index, 1);
-    this.showExistenUsers = false;
+    this.showExistedUsers = false;
   }
 
   /**
    * Toggles the added user box.
    */
   toggleAddedUserBox() {
-    this.showExistenUsers = false;
+    this.showExistedUsers = false;
   }
 
   /**
@@ -144,8 +144,8 @@ export class AddNewChannelComponent {
    * @param channelName The name of the channel to check.
    */
   checkIfChannelNameIsValid(channelName: string) {
-    const channelNameLenght = channelName.length;
+    const channelNameLength = channelName.length;
-    if (channelNameLenght >= 6 && !this.chechIfChannelExist(channelName)) {
+    if (channelNameLength >= 6 && !this.checkIfChannelExist(channelName)) {
       this.channelService.btnIsValid = true;
     } else {
       this.channelService.btnIsValid = false;
@@ -153,11 +153,11 @@ export class AddNewChannelComponent {
   }
 
   /**
-   * Check if channel is allready existing.
+   * Check if channel is already existing.
    * @param channelName
    * @returns
    */
-  chechIfChannelExist(channelName: string) {
+  checkIfChannelExist(channelName: string) {
     const filterChannel = this.channelService.allChannels.some(
       (channel) => channel.name === channelName
     );

src/app/components/sidebar/sidebar-channels/sidebar-channels.component.html

@@ -26,7 +26,7 @@
     class="boxOfAllChannels"
     [ngClass]="{
       hideAllChannels: !minimizeChannels,
-      showAllChanneld: minimizeChannels
+      showAllChannels: minimizeChannels
     }"
   >
     @for (channel of getChannels(); track channel) {

src/app/components/sidebar/sidebar-channels/sidebar-channels.component.scss

@@ -128,7 +128,7 @@ section {
   }
 }
 
-.showAllChanneld {
+.showAllChannels {
   animation-name: slideIn;
   overflow: auto;
   transition: max-height 0.3s ease-in-out;
@@ -162,7 +162,7 @@ section {
 }
 
 @media screen and (max-width: $RESPONSIVE_THRESHOLD_MOBILE380px) {
-  .showAllChanneld {
+  .showAllChannels {
     max-height: 16vh;
   }
 }

src/app/service/login.service.ts

@@ -255,7 +255,7 @@ export class loginService {
    * Retrieves the completion status of the introduction class.
    * @returns {boolean} True if the introduction is complete, false otherwise.
    */
-  getFinalclass(): boolean {
+  getFinalClass(): boolean {
     return this.introCompleteStatus;
   }
 
@@ -326,7 +326,7 @@ export class loginService {
     this.getUserIdInLocalStorage(this.currentUser);
   }
 
-  // -------------------- UserAddFunktions ------------------------------->
+  // -------------------- UserAddFunctions ------------------------------->
 
   /**
    * Updates the online status of the user in Firestore.

src/app/service/user.service.ts

@@ -74,7 +74,7 @@ export class UserService implements OnDestroy {
    * Get current user's data.
    * @returns Array containing current user's data.
    */
-  getCurentUsers() {
+  getCurrentUsers() {
     const filteredUser = this.getUsers().filter(
       (user) => user.id == this.getCurrentUserId()
     );

src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.html

@@ -1,5 +1,5 @@
 <div class="grayBackground" (click)="closeEditUserWindow()"></div>
-@for(i of userService.getCurentUsers(); track i){
+@for(i of userService.getCurrentUsers(); track i){
 <div class="whiteBox">
   <form
     (ngSubmit)="saveNewUserData(contactForm)"

src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.ts

@@ -28,8 +28,8 @@ import { SmallBtnComponent } from '../../../small-btn/small-btn.component';
   styleUrl: './edit-user-details.component.scss',
 })
 export class EditUserDetailsComponent {
-  @Input() openEditUserValue!: boolean;
+  @Input() openEditUserValue: boolean = false;
-  @Input() showCurrentProfile!: boolean;
+  @Input() showCurrentProfile: boolean = false;
   @Output() closeEditWindow = new EventEmitter<boolean>();
   @Output() saveUserData = new EventEmitter<boolean>();
   @ViewChild('inputName') inputName!: ElementRef;
@@ -98,22 +98,15 @@ export class EditUserDetailsComponent {
 
   /**Separate the first ans lastname. */
   splitNameValue() {
-    const fullname: string[] = this.changedName.split(' ');
+    const fullName: string[] = this.changedName.split(' ');
-    const newFirstName: string = fullname[0];
+    const newFirstName: string = fullName[0];
-    let newLastName: string = fullname[1];
+    let newLastName: string = fullName[1];
-    if (fullname[2]) {
+    if (fullName[2]) {
-      newLastName += ' ' + fullname[2];
+      newLastName += ' ' + fullName[2];
     }
     return [newFirstName, newLastName];
   }
 
-  /** Get the email value. */
-  chechEmailValue() {
-    if (this.changedEmail == '') {
-      this.changedEmail = this.userService.emailValue;
-    }
-  }
-
   /**
    * Checks if the user name is valid.
    * @param nameValue The value of the user's name.
@@ -122,15 +115,15 @@ export class EditUserDetailsComponent {
     if (nameValue.trim() === '') {
       this.nameValueBoolean = false;
     } else {
-      const channelNameLenght = nameValue.length;
+      const channelNameLength = nameValue.length;
-      if (channelNameLenght >= 3) {
+      if (channelNameLength >= 3) {
         this.nameValueBoolean = true;
         this.changedName = nameValue;
       } else {
         this.nameValueBoolean = false;
       }
     }
-    this.chackSaveBtnName();
+    this.checkSaveBtnName();
   }
 
   /**
@@ -155,7 +148,7 @@ export class EditUserDetailsComponent {
   /**
    * Checks if the save button is valid.
    */
-  chackSaveBtnName() {
+  checkSaveBtnName() {
     if (this.nameValueBoolean) {
       this.channelService.saveEditBtnIsValid = true;
     } else {

src/app/shared/components/header/edit-user/edit-user.component.html

@@ -1,5 +1,5 @@
 <div class="grayBackground" (click)="closeCurrentProfile()"></div>
-@for(i of userService.getCurentUsers(); track i){
+@for(i of userService.getCurrentUsers(); track i){
 <div class="whiteBox">
   <div class="boxHeader">
     <p>Profil</p>

src/app/shared/components/header/edit-user/edit-user.component.ts

@@ -18,12 +18,12 @@ import { SmallBtnComponent } from '../../small-btn/small-btn.component';
   styleUrl: './edit-user.component.scss',
 })
 export class EditUserComponent {
-  @Input() showCurrentProfile!: boolean;
+  @Input() showCurrentProfile: boolean = false;
   @Output() testValueChange = new EventEmitter<boolean>();
 
-  isOnline = true;
+  isOnline: boolean = true;
-  openProfil = false;
+  openProfil: boolean = false;
-  openEditUserValue = false;
+  openEditUserValue: boolean = false;
 
   constructor(public userService: UserService) {}
 

src/app/shared/components/header/header.component.html

@@ -18,7 +18,7 @@
   }
   <div>
     <div class="rightSide">
-      @for(i of userService.getCurentUsers(); track i){
+      @for(i of userService.getCurrentUsers(); track i){
       <p>{{ i.firstName }} {{ i.lastName }}</p>
 
       <div class="img" (click)="showSideMenu()">

src/app/shared/components/header/header.component.scss

@@ -35,7 +35,7 @@ header {
 
 .leftSide {
   @include displayFlex($j: start, $g: 20px);
-  width: 20vw;
+  width: 30vw;
   .homeIcon {
     width: 242px;
     height: 70px;
@@ -48,7 +48,7 @@ header {
 }
 
 .rightSide {
-  width: 20vw;
+  width: 30vw;
   @include displayFlex($j: end, $g: 20px);
   p {
     font-size: 28px;

src/app/shared/components/header/search-bar/search-bar.component.html

@@ -66,7 +66,7 @@
       <div class="channelAnswers">
         @for (chat of filteredChats; track chat) {
         <div class="answersBoxChats">
-          <p class="threadNmae">[ {{ getChannel(chat.channelId) }} ]</p>
+          <p class="threadName">[ {{ getChannel(chat.channelId) }} ]</p>
           <div class="threadContentBox">
             <p
               class="threadContent"

src/app/shared/components/header/search-bar/search-bar.component.scss

@@ -57,7 +57,7 @@
     .answersBoxChats {
       width: 100%;
       @include displayFlex($j: space-between, $a: flex-start);
-      .threadNmae {
+      .threadName {
         width: 30%;
       }
       .threadContentBox {
@@ -116,13 +116,13 @@
 }
 
 .showSearchWindow {
-  animation: shwoSW 0.3s ease-in-out;
+  animation: showSW 0.3s ease-in-out;
   width: calc(40vw - 42px);
   max-height: 40vh;
   padding: 20px;
 }
 
-@keyframes shwoSW {
+@keyframes showSW {
   from {
     max-height: 0;
   }

src/app/shared/components/login/start-header/start-header.component.html

@@ -7,15 +7,13 @@
   <div class="header">
     <div
       [class.logo]="animationStart && !this.animationsBlock"
-      [class.logoEndPosition]="animationToEndPosiotion && !this.animationsBlock"
+      [class.logoEndPosition]="animationToEndPosition && !this.animationsBlock"
-      [class.final-div-position]="loginService.getFinalclass()"
+      [class.final-div-position]="loginService.getFinalClass()"
     >
       <img
         class="mobileImg"
-        [class.final-img-position]="loginService.getFinalclass()"
+        [class.final-img-position]="loginService.getFinalClass()"
-        [class.imgEndPosiotion]="
+        [class.imgEndPosition]="animationToEndPosition && !this.animationsBlock"
-          animationToEndPosiotion && !this.animationsBlock
-        "
         src="./assets/img/login/logo-animation.svg"
       />
       <div
@@ -25,7 +23,7 @@
       >
         <span
           [class.logo-text-span]="animationStart && !this.animationsBlock"
-          [class.final-span-position]="loginService.getFinalclass()"
+          [class.final-span-position]="loginService.getFinalClass()"
           >DABubble</span
         >
       </div>

src/app/shared/components/login/start-header/start-header.component.scss

@@ -112,12 +112,12 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  animation: animationToEndPosiotion 0.5s ease-in forwards 1s;
+  animation: animationToEndPosition 0.5s ease-in forwards 1s;
   background-size: contain;
   z-index: 999;
 }
 
-.imgEndPosiotion {
+.imgEndPosition {
   animation: imgSize 0.5s ease-in forwards 1s;
 }
 
@@ -136,7 +136,7 @@
   }
 }
 
-@keyframes animationToEndPosiotion {
+@keyframes animationToEndPosition {
   0% {
     top: 50%;
     left: 50%;
@@ -237,10 +237,10 @@
   }
   .logoEndPosition {
     animation: none;
-    animation: animationToEndPosiotionMobile 0.5s ease-in forwards 1s;
+    animation: animationToEndPositionMobile 0.5s ease-in forwards 1s;
   }
 
-  @keyframes animationToEndPosiotionMobile {
+  @keyframes animationToEndPositionMobile {
     0% {
       top: 50%;
       left: 50%;
@@ -276,7 +276,7 @@
     }
   }
 
-  .imgEndPosiotion {
+  .imgEndPosition {
     animation: none;
     animation: imgSizeMobile 0.5s ease-in forwards 1s;
   }

src/app/shared/components/login/start-header/start-header.component.ts

@@ -23,11 +23,12 @@ import { SharedService } from '../../../../service/shared.service';
 export class StartHeaderComponent {
   @Input() introCompleteStatus: boolean = false;
   @Input() display: string = '';
+
   animationStart: boolean = false;
   animationLogo: boolean = false;
   d_none: boolean = false;
   animationBackground: boolean = false;
-  animationToEndPosiotion: boolean = false;
+  animationToEndPosition: boolean = false;
   animationsBlock: boolean = false;
   viewWidth: number = 0;
 
@@ -60,7 +61,7 @@ export class StartHeaderComponent {
           setTimeout(() => {
             this.animationBackground = true;
           }, 1000);
-          this.animationToEndPosiotion = true;
+          this.animationToEndPosition = true;
           this.loginService.setAnimationState(true);
           setTimeout(() => {
             this.d_none = true;