Implementer filtrering og sortering (#29, #30)

src/App.tsx

@@ -9,10 +9,23 @@ import { useState } from "react";
 
 function App() {
   const [currentSongIndex, setCurrentSongIndex] = useState(0)
-  const currentSong = songs[currentSongIndex]
-
+  const [selectedAlbum, setSelectedAlbum] = useState('all')
+  const [sortBy, setSortBy] = useState('alphabetical')
+  const filteredSongs = songs.filter(song => selectedAlbum === 'all' || song.album === selectedAlbum)
+  const sortedSongs = [...filteredSongs].sort((a, b) => a.title.localeCompare(b.title))
+  const currentSong = sortedSongs[currentSongIndex]
+
+  const handleAlbumChange = (newAlbum: string) => {
+    setSelectedAlbum(newAlbum)
+    setCurrentSongIndex(0)
+  }
+
+  const handleSortByChange = (newSort: string) => {
+    setSortBy(newSort)
+  }
+
   const handleSelectSong = (song: (typeof songs)[number]) => {
-    const songIndex = songs.findIndex((item) => item.id === song.id)
+    const songIndex = sortedSongs.findIndex((item) => item.id === song.id)
     if (songIndex !== -1) {
       setCurrentSongIndex(songIndex)
     }
@@ -26,8 +39,8 @@ function App() {
 
       <section className='app-content'>
         <aside className='sidebar'>
-          <FilterSortBar />
-          <SongList songs={songs} onSelectSong={handleSelectSong} />
+          <FilterSortBar selectedAlbum={selectedAlbum} onAlbumChange={handleAlbumChange} sortBy={sortBy} onSortByChange={handleSortByChange}/>
+          <SongList songs={sortedSongs} onSelectSong={handleSelectSong} />
         </aside>
 
         <section className='song-section' aria-label='Valgt sang'>
@@ -37,7 +50,7 @@ function App() {
 
           <Navigation 
             isFirst={currentSongIndex == 0} 
-            isLast={currentSongIndex == songs.length - 1}
+            isLast={currentSongIndex == sortedSongs.length - 1}
             onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
             onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
           />

src/components/FilterSortBar.tsx

@@ -1,32 +1,40 @@
-export function FilterSortBar() {
+
+type FilterSortBarProps = {
+  selectedAlbum: string
+  onAlbumChange: (newAlbum: string) => void
+  sortBy: string
+  onSortByChange: (newSort: string) => void
+}
+
+export function FilterSortBar({selectedAlbum, onAlbumChange, sortBy, onSortByChange}: FilterSortBarProps) {
   return (
     <section aria-labelledby="filter-sort-heading">
       <h2 id="filter-sort-heading">Filtrer og sorter</h2>
 
       <div>
         <label htmlFor="sort">Sorter etter:</label>
-        <select id="sort" name="sort">
+        <select id="sort" name="sort" value={sortBy} onChange={(e) => onSortByChange(e.target.value)}>
           <option value="alphabetical">Alfabetisk</option>
         </select>
       </div>
 
       <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>