dont show preselected song in search results

Asvarox · Jan 3, 2025 · 74681b7 · 74681b7
1 parent 8e6ac39
commit 74681b7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/routes/SingASong/SongSelection/Hooks/useSongListFilter.test.ts b/src/routes/SingASong/SongSelection/Hooks/useSongListFilter.test.ts
@@ -5,9 +5,9 @@ import { useSongListFilter } from 'routes/SingASong/SongSelection/Hooks/useSongL
 import { beforeEach } from 'vitest';
 
 const list: SongPreview[] = [
-  generateSongPreview([], { artist: 'diacritics characters', title: 'konik na biegunach' }),
-  generateSongPreview([], { artist: 'kombi', title: 'pokolenie' }),
-  generateSongPreview([], { artist: 'queen', title: "don't stop me now" }),
+  generateSongPreview([], { artist: 'diacritics characters', title: 'konik na biegunach', language: ['Polish'] }),
+  generateSongPreview([], { artist: 'kombi', title: 'pokolenie', language: ['English'] }),
+  generateSongPreview([], { artist: 'queen', title: "don't stop me now", language: ['Spanish'] }),
 ];
 
 describe('useSongListFilter', () => {
@@ -51,11 +51,23 @@ describe('useSongListFilter', () => {
     const { result } = renderHook(() => useSongListFilter(list, [], false, list[0].id));
 
     act(() => {
-      result.current.setFilters({ search: 'queen dont' });
+      result.current.setFilters({ language: 'Spanish' });
     });
 
     expect(result.current.filteredList).toContainEqual(list[2]);
     expect(result.current.filteredList).not.toContainEqual(list[1]);
     expect(result.current.filteredList).toContainEqual(list[0]);
   });
+
+  it('should not include additional song if the search doesnt cover it', () => {
+    const { result } = renderHook(() => useSongListFilter(list, [], false, list[0].id));
+
+    act(() => {
+      result.current.setFilters({ search: 'queen dont' });
+    });
+
+    expect(result.current.filteredList).toContainEqual(list[2]);
+    expect(result.current.filteredList).not.toContainEqual(list[1]);
+    expect(result.current.filteredList).not.toContainEqual(list[0]);
+  });
 });
diff --git a/src/routes/SingASong/SongSelection/Hooks/useSongListFilter.ts b/src/routes/SingASong/SongSelection/Hooks/useSongListFilter.ts
@@ -148,16 +148,17 @@ export const useSongListFilter = (
   }, [selectedPlaylist]);
 
   const deferredFilters = useDeferredValue(filters);
+  const isSearchApplied = !!deferredFilters.search;
 
   const filteredList = useMemo(
     () =>
       applyFilters(list, {
         ...(playlist?.filters ?? {}),
         ...deferredFilters,
         excludeLanguages: excludedLanguages ?? [],
-        additionalSongs: additionalSong ? [additionalSong] : [],
+        additionalSongs: !isSearchApplied && additionalSong ? [additionalSong] : [],
       }),
-    [list, deferredFilters, excludedLanguages, playlist, additionalSong],
+    [list, deferredFilters, excludedLanguages, playlist, additionalSong, isSearchApplied],
   );
 
   return { filters, filteredList, setFilters, selectedPlaylist, setSelectedPlaylist: setPlaylist, playlists, playlist };

diff --git a/src/routes/SingASong/SongSelection/SongSelection.tsx b/src/routes/SingASong/SongSelection/SongSelection.tsx
@@ -405,7 +405,8 @@ const BaseRow = styled.div`
   display: flex;
   flex-wrap: nowrap;
   gap: var(--song-list-gap);
-  padding: 0 var(--song-list-padding-right) var(--song-list-gap) var(--song-list-padding-left);
+  padding: 0 var(--song-list-padding-right) 0 var(--song-list-padding-left);
+  margin-bottom: var(--song-list-gap);
 `;
 
 const GroupRow = styled(BaseRow)``;
@@ -414,7 +415,9 @@ const ListRow = styled(BaseRow)`
   position: relative; // this way the song preview position is computed properly
 
   &[data-is-new='true'] {
-    background: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.7);
+    background-position-y: var(--song-list-gap);
+    background-repeat: no-repeat;
   }
 `;