From 74a9fff1b2f11fb2983f59802823e8e4e5789874 Mon Sep 17 00:00:00 2001
From: Tobias Hegge <tobiaheg@stud.ntnu.no>
Date: Tue, 15 Sep 2026 12:50:10 +0200
Subject: [PATCH] made sure search is persistent on reload

---
 webdev-prosjekt1/src/App.tsx                  | 22 +++++++++++++++----
 webdev-prosjekt1/src/api/types.ts             |  6 +++++
 webdev-prosjekt1/src/components/Header.tsx    | 13 +++++++++--
 webdev-prosjekt1/src/components/Searchbar.tsx | 11 +++++++---
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx
index 65bbf73..86688f8 100644
--- a/webdev-prosjekt1/src/App.tsx
+++ b/webdev-prosjekt1/src/App.tsx
@@ -12,7 +12,7 @@ import { TrackCard } from './components/TrackCard';
 import { AlbumCard } from './components/AlbumCard';
 import { ArtistCard } from './components/ArtistCard';
 import { FilterPopup, EMPTY_FILTERS } from './components/FilterPopup';
-import type { Album, AlbumTrack, Artist, Track } from './api/types';
+import type { Album, AlbumTrack, Artist, SearchResult, StoredSearch, Track } from './api/types';
 import { fetchTrack, search } from './api/spotify';
 import filterIcon from './assets/filter.png';
 import musicWizImage from './assets/musicwiz.png';
@@ -27,7 +27,8 @@ const readStoredItem = <T,>(key: string): T | null => {
 };
 
 function App() {
-	const [query, setQuery] = useState('');
+	const storedSearch = readStoredItem<StoredSearch>('music-wiz-search');
+	const [query, setQuery] = useState(storedSearch?.query ?? '');
 	const [isFilterOpen, setIsFilterOpen] = useState(false);
 	const [filters, setFilters] = useState(EMPTY_FILTERS);
 	const [currentPath, setCurrentPath] = useState(window.location.pathname);
@@ -97,6 +98,7 @@ function App() {
 		setCurrentPath(path);
 	};
 	const handleSearch = (nextQuery: string) => setQuery(nextQuery);
+	const handleHome = () => setQuery('');
 	// Spotify's artist "genres" field is unreliable (often empty), so ask Spotify
 	// to do the genre filtering itself via the "genre:" search field filter.
 	const genreFilterClause = filters.genres.length === 1 ? ` genre:"${filters.genres[0]}"` : '';
@@ -126,8 +128,20 @@ function App() {
 		queryKey: ['search', effectiveQuery],
 		queryFn: () => search(effectiveQuery),
 		enabled: query.trim().length > 0,
+		initialData: storedSearch?.effectiveQuery === effectiveQuery ? storedSearch.results : undefined,
 	});
 
+	useEffect(() => {
+		if (!results || !query.trim()) return;
+
+		const searchToStore: StoredSearch = {
+			query,
+			effectiveQuery,
+			results: results as SearchResult,
+		};
+		localStorage.setItem('music-wiz-search', JSON.stringify(searchToStore));
+	}, [effectiveQuery, query, results]);
+
 	const artistGenresById = new Map<number, string[]>();
 	results?.artists.forEach((artist) => {
 		if (artist.genres) {
@@ -185,9 +199,9 @@ function App() {
 
 	return (
 		<main className='app-shell'>
-			<Header />
+			<Header onHome={handleHome} />
 			<section className='search-section'>
-				<Searchbar onSearch={handleSearch} />
+				<Searchbar onSearch={handleSearch} initialQuery={query} />
 				<Button
 					content={<><img src={filterIcon} alt='' /> <span>Filter</span></>}
 					onClick={() => setIsFilterOpen(true)}
diff --git a/webdev-prosjekt1/src/api/types.ts b/webdev-prosjekt1/src/api/types.ts
index 5dcdf5b..4e88747 100644
--- a/webdev-prosjekt1/src/api/types.ts
+++ b/webdev-prosjekt1/src/api/types.ts
@@ -75,4 +75,10 @@ export type SearchResult = {
     artists: Artist[],
     tracks: Track[],
     albums: Album[]
+}
+
+export type StoredSearch = {
+    query: string;
+    effectiveQuery: string;
+    results: SearchResult;
 }
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/components/Header.tsx b/webdev-prosjekt1/src/components/Header.tsx
index faa2d1a..94c363d 100644
--- a/webdev-prosjekt1/src/components/Header.tsx
+++ b/webdev-prosjekt1/src/components/Header.tsx
@@ -2,10 +2,19 @@ import './Header.css';
 import '../variables.css';
 import logoImage from '../assets/music-wiz-logo.png';
 
-export const Header = () => {
+type HeaderProps = {
+	onHome?: () => void;
+};
+
+export const Header = ({ onHome }: HeaderProps) => {
+	const handleHomeClick = () => {
+		localStorage.removeItem('music-wiz-search');
+		onHome?.();
+	};
+
 	return (
 		<header className='main-header'>
-			<a className='app-title' href='/'>
+			<a className='app-title' href='/' onClick={handleHomeClick}>
 				<figure className='app-logo-wrapper'>
 					<img className='app-logo' src={logoImage} alt='' />
 				</figure>
diff --git a/webdev-prosjekt1/src/components/Searchbar.tsx b/webdev-prosjekt1/src/components/Searchbar.tsx
index 2c2240a..e9530a2 100644
--- a/webdev-prosjekt1/src/components/Searchbar.tsx
+++ b/webdev-prosjekt1/src/components/Searchbar.tsx
@@ -1,13 +1,18 @@
 import './Searchbar.css';
 import '../variables.css';
-import { useState, type SubmitEvent } from 'react';
+import { useEffect, useState, type SubmitEvent } from 'react';
 
 type SearchbarProps = {
 	onSearch: (query: string) => void;
+	initialQuery?: string;
 };
 
-export const Searchbar = ({ onSearch }: SearchbarProps) => {
-	const [query, setQuery] = useState('');
+export const Searchbar = ({ onSearch, initialQuery = '' }: SearchbarProps) => {
+	const [query, setQuery] = useState(initialQuery);
+
+	useEffect(() => {
+		setQuery(initialQuery);
+	}, [initialQuery]);
 
 	const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
 		event.preventDefault();