Make searchbar actually use the seach function

webdev-prosjekt1/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.102.8",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },

webdev-prosjekt1/src/App.tsx

@@ -5,13 +5,35 @@ import { Searchbar } from './components/Searchbar';
 import filterIcon from './assets/filter.png';
 import musicWizImage from './assets/musicwiz.png';
 import logoImage from './assets/music-wiz-logo.png';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { search } from './api/spotify';
 
 function App() {
+	const [query, setQuery] = useState('');
+
+	const handleSearch = (nextQuery: string) => {
+		setQuery(nextQuery);
+	};
+
+	const {
+		data: results,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['search', query],
+		queryFn: () => search(query),
+		enabled: query.trim().length > 0,
+	});
+
+	console.log(results);
+
 	return (
 		<>
 			<main className='app-shell'>
 				<header className='main-header'>
-
 					<a className='app-title' href='/'>
 						<figure className='app-logo-wrapper'>
 							<img
@@ -28,7 +50,7 @@ function App() {
 				</header>
 
 				<section className='search-section'>
-					<Searchbar />
+					<Searchbar onSearch={handleSearch} />
 					<Button content={<><img src={filterIcon} alt='' /> <span>Filter</span></>} />
 				</section>
 
@@ -40,7 +62,7 @@ function App() {
 				</section>
 			</main>
 		</>
-	)
+	);
 }
 
 export default App;

webdev-prosjekt1/src/components/Searchbar.tsx

@@ -1,11 +1,26 @@
 import './Searchbar.css';
 import '../variables.css';
+import { useState } from 'react';
+
+type SearchbarProps = {
+	onSearch: (query: string) => void;
+};
+
+export const Searchbar = ({ onSearch }: SearchbarProps) => {
+	const [query, setQuery] = useState('');
+
+	const handleSubmit = (event: React.SubmitEvent) => {
+		event.preventDefault();
+
+		if (!query.trim()) return;
+
+		onSearch(query.trim());
+	};
 
-export const Searchbar = () => {
 	return (
-		<label className='searchbar'>
+		<form className='searchbar' onSubmit={handleSubmit}>
 			<span className='search-icon' aria-hidden='true'>⌕</span>
-			<input type='search' placeholder='Search artists, albums or songs' aria-label='Search music' />
-		</label>
+			<input type='search' placeholder='Search artists, albums or songs' aria-label='Search music' value={query} onChange={(event) => setQuery(event.target.value)}/>
+		</form>
 	)
 }

webdev-prosjekt1/src/main.tsx

@@ -1,11 +1,16 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import './index.css'
 import './variables.css'
 import App from './App.tsx'
 
+const queryClient = new QueryClient()
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 )