Merge pull request #23 from hurry-harry/hf-filter-ignore-accents

Change filtering logic for autocomplete

src/app/_shared/services/spotify.service.ts

@@ -30,18 +30,29 @@ export class SpotifyService {
     //#endregion
 
     //#region Helpers
-    artistsToStr(artists: Artist[]): string {
+    artistNamesToString(artists: Artist[]): string {
         let result: string = "";
 
         artists.forEach((artist: Artist) => {
           result = result.concat(artist.name, " ");
         });
 
-        return result.toLowerCase();
+        return result.toLocaleLowerCase();
     }
 
     buildTrackIdentifier(trackName: string, artistsStr: string): string {
-        return trackName.concat(artistsStr).toLowerCase();
+        return trackName.concat(artistsStr).toLocaleLowerCase();
+    }
+
+    isIncludesFilter(filterTerm: string, trackName: string, artistNames: string): boolean {
+        const sanitizedTrackName: string = trackName.toLocaleLowerCase().normalizeString();
+        const sanitizedArtistNames: string = artistNames.toLocaleLowerCase().normalizeString();
+        const sanitizedFilterTerm: string = filterTerm.toLocaleLowerCase().normalizeString();
+
+        if (sanitizedTrackName.includes(sanitizedFilterTerm) || sanitizedArtistNames.includes(sanitizedFilterTerm))
+            return true;
+
+        return false;
     }
     //#endregion
 }

src/app/_shared/shared.module.ts

@@ -1,16 +1,5 @@
 import { NgModule } from "@angular/core";
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import './utils/extensions';
 
-export const thirdPartyModules: any[] = [
-  NgbModal
-]
-
-@NgModule({
-  imports: [
-    ...thirdPartyModules
-  ],
-  exports: [
-    ...thirdPartyModules
-  ]
-})
+@NgModule({ })
 export class SharedModule { }

src/app/_shared/utils/extensions.ts

@@ -0,0 +1,12 @@
+export { }
+
+declare global {
+
+  interface String {
+    normalizeString(): string;
+  }
+}
+
+String.prototype.normalizeString = function(): string {
+  return this.toLocaleLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
+};

src/app/app.component.ts

@@ -1,31 +1,21 @@
-import { Component, effect } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { NavBarComponent } from './components/nav-bar/nav-bar.component';
-import { UserProfileResponse } from './_shared/models/user-profile-response.model';
 import { SpotifyService } from './_shared/services/spotify.service';
 import { UserService } from './_shared/services/user.service';
 import { ToastContainerComponent } from './_shared/components/toast-container/toast-container.component';
+import { SharedModule } from './_shared/shared.module';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, NavBarComponent, ToastContainerComponent],
+  imports: [CommonModule, RouterOutlet, NavBarComponent, ToastContainerComponent, SharedModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
   title: string = "spotify-taeyeon-shenanigans";
 
-  constructor(
-    private spotifyService: SpotifyService,
-    private userService: UserService) {
-    // effect(() => {
-    //   this.userService.spotifyTokenDetailsSignal();
-
-    //   this.spotifyService.getUserProfile(this.userService.spotifyTokenDetailsSignal().access_token).subscribe((response: UserProfileResponse) => {
-    //     this.userService.userSignal.set(response);
-    //   });
-    // }, { allowSignalWrites: false });
-  }
+  constructor() { }
 }

src/app/components/play/play.component.ts

@@ -112,7 +112,7 @@ export class PlayComponent implements OnInit {
   appendTopTracks(topTracks: Track[]): void {
     topTracks.forEach((track: Track) => {
 
-      const trackIdentifier: string = this.spotifyService.buildTrackIdentifier(track.name, this.spotifyService.artistsToStr(track.artists));
+      const trackIdentifier: string = this.spotifyService.buildTrackIdentifier(track.name, this.spotifyService.artistNamesToString(track.artists));
       if (track.preview_url && !this.topTracksMap.has(trackIdentifier)) {
         this.topTracksMap.set(trackIdentifier, track);
       }
@@ -195,8 +195,8 @@ export class PlayComponent implements OnInit {
       modalRef = this.modalService.open(QuizAnswerModal);
       (modalRef.componentInstance.result as QuizResult) = { isCorrect: false, isLastQuestion: (this.quizIndex === 4), score: this.quizScore, track: this.quizSongs[this.quizIndex]!};
     } else {
-      const selectedAnswerStrId: string = this.spotifyService.buildTrackIdentifier(this.selectedAnswer!.name, this.spotifyService.artistsToStr(this.selectedAnswer!.artists));
-      const quizAnswerStrId: string = this.spotifyService.buildTrackIdentifier(this.quizSongs[this.quizIndex]!.name, this.spotifyService.artistsToStr(this.quizSongs[this.quizIndex]!.artists));
+      const selectedAnswerStrId: string = this.spotifyService.buildTrackIdentifier(this.selectedAnswer!.name, this.spotifyService.artistNamesToString(this.selectedAnswer!.artists));
+      const quizAnswerStrId: string = this.spotifyService.buildTrackIdentifier(this.quizSongs[this.quizIndex]!.name, this.spotifyService.artistNamesToString(this.quizSongs[this.quizIndex]!.artists));
 
       if (this.quizIndex === 4) 
         modalRef = this.modalService.open(QuizAnswerModal, { backdrop: 'static', keyboard: false});
@@ -280,7 +280,8 @@ export class PlayComponent implements OnInit {
         const temp: Track[] = [];
 
         for(let j: number = 0; j < this.filteredTracks.length; j++) {
-          if (this.filteredTracks[j].name.toLowerCase().includes(filterTerms[i]) || this.spotifyService.artistsToStr(this.filteredTracks[j].artists).includes(filterTerms[i]))
+          const artistNames: string = this.spotifyService.artistNamesToString(this.filteredTracks[j].artists);
+          if (this.spotifyService.isIncludesFilter(filterTerms[i], this.filteredTracks[j].name, artistNames))
             temp.push(JSON.parse(JSON.stringify(this.filteredTracks[j])));
         }