From 4a8ce6fd9ff9ee18dfd7e5e3dcfe4996135e5af1 Mon Sep 17 00:00:00 2001
From: ellawaal <ellawaal@icloud.com>
Date: Wed, 9 Sep 2026 12:54:12 +0200
Subject: [PATCH] Implementert filtreringslogikk for album

---
 src/App.tsx                      | 18 +++++++++++++-----
 src/components/FilterSortBar.tsx | 24 +++++++++++++++---------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 84122e5..b8fba69 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,10 +9,18 @@ import { useState } from "react";
 
 function App() {
   const [currentSongIndex, setCurrentSongIndex] = useState(0)
-  const currentSong = songs[currentSongIndex]
+  const [selectedAlbum, setSelectedAlbum] = useState('all')
+  const filteredSongs = songs.filter(song => selectedAlbum === 'all' || song.album === selectedAlbum)
+  const currentSong = filteredSongs[currentSongIndex]
+
+  const handleAlbumChange = (newAlbum: string) => {
+    setSelectedAlbum(newAlbum)
+    setCurrentSongIndex(0)
+  }
+
   
   const handleSelectSong = (song: (typeof songs)[number]) => {
-    const songIndex = songs.findIndex((item) => item.id === song.id)
+    const songIndex = filteredSongs.findIndex((item) => item.id === song.id)
     if (songIndex !== -1) {
       setCurrentSongIndex(songIndex)
     }
@@ -26,8 +34,8 @@ function App() {
 
       <section className='app-content'>
         <aside className='sidebar'>
-          <FilterSortBar />
-          <SongList songs={songs} onSelectSong={handleSelectSong} />
+          <FilterSortBar selectedAlbum={selectedAlbum} onAlbumChange={handleAlbumChange}/>
+          <SongList songs={filteredSongs} onSelectSong={handleSelectSong} />
         </aside>
 
         <section className='song-section' aria-label='Valgt sang'>
@@ -37,7 +45,7 @@ function App() {
 
           <Navigation 
             isFirst={currentSongIndex == 0} 
-            isLast={currentSongIndex == songs.length - 1}
+            isLast={currentSongIndex == filteredSongs.length - 1}
             onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
             onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
           />
diff --git a/src/components/FilterSortBar.tsx b/src/components/FilterSortBar.tsx
index 6db5a26..1a1b8dd 100644
--- a/src/components/FilterSortBar.tsx
+++ b/src/components/FilterSortBar.tsx
@@ -1,4 +1,10 @@
-export function FilterSortBar() {
+
+type FilterSortBarProps = {
+  selectedAlbum: string
+  onAlbumChange: (newAlbum: string) => void
+}
+
+export function FilterSortBar({selectedAlbum, onAlbumChange}: FilterSortBarProps) {
   return (
     <section aria-labelledby="filter-sort-heading">
       <h2 id="filter-sort-heading">Filtrer og sorter</h2>
@@ -12,21 +18,21 @@ export function FilterSortBar() {
 
       <div>
         <label htmlFor="filter">Filtrer etter album:</label>
-        <select id="filter" name="filter">
+        <select id="filter" name="filter" value={selectedAlbum} onChange={(e) => onAlbumChange(e.target.value)}>
           <option value="all">Alle album</option>
-          <option value="faster-than-the-speed-of-night">
+          <option value="Faster Than the Speed of Night">
             Faster Than the Speed of Night
           </option>
-          <option value="secret-dreams-and-forbidden-fire">
+          <option value="Secret Dreams and Forbidden Fire">
             Secret Dreams and Forbidden Fire
           </option>
-          <option value="natural-force">Natural Force</option>
-          <option value="the-world-starts-tonight">
+          <option value="Natural Force">Natural Force</option>
+          <option value="The World Starts Tonight">
             The World Starts Tonight
           </option>
-          <option value="free-spirit">Free Spirit</option>
-          <option value="all-in-one-voice">All in One Voice</option>
-          <option value="single">Singel</option>
+          <option value="Free Spirit">Free Spirit</option>
+          <option value="All in One Voice">All in One Voice</option>
+          <option value="Singel">Singel</option>
         </select>
       </div>
     </section>