made sure search is persistent on reload

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)}

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;
 }

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>

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();