From b5680ab7f6b9fe3a212748aab8ad4dfed68ec1e2 Mon Sep 17 00:00:00 2001
From: ellawaal <ellawaal@icloud.com>
Date: Thu, 10 Sep 2026 08:34:56 +0200
Subject: [PATCH] Implementert favoritt-funksjonalitet med LocalStorage

---
 src/App.tsx                       | 12 +++++++++++-
 src/components/FavoriteButton.tsx |  4 +++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 107b02e..24f90b8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,11 +6,13 @@ import { FilterSortBar } from './components/FilterSortBar'
 import { songs } from './data/songs'
 import './App.css'
 import { useState } from "react";
+import { useLocalStorage } from './hooks/useLocalStorage'
 
 function App() {
   const [currentSongIndex, setCurrentSongIndex] = useState(0)
   const [selectedAlbum, setSelectedAlbum] = useState('all')
   const [sortBy, setSortBy] = useState('alphabetical')
+  const [favorites, setFavorites] = useLocalStorage<string[]>('favorites', [])
   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]
@@ -31,6 +33,14 @@ function App() {
     }
   }
 
+  const handleToggleFavorites = (songId: string) => {
+    setFavorites(prevFavorites => 
+      prevFavorites.includes(songId)
+      ? prevFavorites.filter(id => id !== songId)
+      : [...prevFavorites, songId]
+    )
+  }
+
   return (
     <main className='app'>
       <header className='app-header'>
@@ -44,7 +54,7 @@ function App() {
         </aside>
 
         <section className='song-section' aria-label='Valgt sang'>
-          <FavoriteButton isFavorite={false} />
+          <FavoriteButton isFavorite={favorites.includes(currentSong.id)} onToggle={() => handleToggleFavorites(currentSong.id)}/>
           
           <SongCard song={currentSong} />
 
diff --git a/src/components/FavoriteButton.tsx b/src/components/FavoriteButton.tsx
index 34d3cb5..8b9c36c 100644
--- a/src/components/FavoriteButton.tsx
+++ b/src/components/FavoriteButton.tsx
@@ -1,12 +1,14 @@
 type FavoriteButtonProps = {
   isFavorite: boolean
+  onToggle: () => void 
 }
 
-export function FavoriteButton({ isFavorite }: FavoriteButtonProps) {
+export function FavoriteButton({ isFavorite, onToggle }: FavoriteButtonProps) {
   return (
     <button
     type="button"
     aria-label={isFavorite ? 'Fjern fra favoritter' : 'Legg til favoritt'}
+    onClick={onToggle}
     >
       {isFavorite ? '♥' : '♡'}
     </button>