From 487943c6aa7b3c42432b9c89cd3be960dd97c38a Mon Sep 17 00:00:00 2001
From: Kristoffer Fredrik Dahle Melen <kristoffer.fredrik@gmail.com>
Date: Sun, 13 Sep 2026 23:09:46 +0200
Subject: [PATCH 1/2] Added Tanstack Query, and made the searchbar actually
 search on submit

---
 package-lock.json                             |  6 ---
 webdev-prosjekt1/package-lock.json            | 27 +++++++++++++
 webdev-prosjekt1/package.json                 |  1 +
 webdev-prosjekt1/src/App.tsx                  | 39 +++++++++++++++++--
 webdev-prosjekt1/src/components/Searchbar.tsx | 23 +++++++++--
 webdev-prosjekt1/src/main.tsx                 |  7 +++-
 6 files changed, 89 insertions(+), 14 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 64b3008..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "T04-Project-1",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}
diff --git a/webdev-prosjekt1/package-lock.json b/webdev-prosjekt1/package-lock.json
index c8fbc13..d64e3da 100644
--- a/webdev-prosjekt1/package-lock.json
+++ b/webdev-prosjekt1/package-lock.json
@@ -8,6 +8,7 @@
       "name": "webdev-prosjekt1",
       "version": "0.0.0",
       "dependencies": {
+        "@tanstack/react-query": "^5.102.8",
         "react": "^19.2.8",
         "react-dom": "^19.2.8"
       },
@@ -817,6 +818,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.102.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.102.8.tgz",
+      "integrity": "sha512-ZNjkJ33CqvPNec/6lZBnHqLc3EVGPZ9ySLhYahU9TcuRFdmwXewuj0c4hwSWcGHqEUwcSrKeZ+oGcvPBqXcQcg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.102.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.102.8.tgz",
+      "integrity": "sha512-TYBea4OuXWD7MhaSHq069TWbFe7rcwWN6kzT7JF0OKi1K6c1gTv2IzD6A6ExJsCMozdkqBWeuIUZmu4KQg0O5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.102.8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
diff --git a/webdev-prosjekt1/package.json b/webdev-prosjekt1/package.json
index 00003ce..76c7624 100644
--- a/webdev-prosjekt1/package.json
+++ b/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"
   },
diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx
index 33ddc37..9b1a634 100644
--- a/webdev-prosjekt1/src/App.tsx
+++ b/webdev-prosjekt1/src/App.tsx
@@ -5,13 +5,33 @@ 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,
+	});
+
 	return (
 		<>
 			<main className='app-shell'>
 				<header className='main-header'>
-
 					<a className='app-title' href='/'>
 						<figure className='app-logo-wrapper'>
 							<img
@@ -28,11 +48,24 @@ function App() {
 				</header>
 
 				<section className='search-section'>
-					<Searchbar />
+					<Searchbar onSearch={handleSearch} />
 					<Button content={<><img src={filterIcon} alt='' /> <span>Filter</span></>} />
 				</section>
 
 				<section className='hero-section'>
+					<div>
+						{isLoading || isFetching ? (
+							<p>Searching...</p>
+						) : isError ? (
+							<p>Search failed: {error instanceof Error ? error.message : 'Unknown error'}</p>
+						) : results?.tracks.length ? (
+							results.tracks.map((track) => (
+								<p key={track.id}>{track.name}</p>
+							))
+						) : query ? (
+							<p>No tracks found.</p>
+						) : null}
+					</div>
 					<figure className='hero-art'>
 						<div className='art-glow' />
 						<img src={musicWizImage} alt='A musical wizard' />
@@ -40,7 +73,7 @@ function App() {
 				</section>
 			</main>
 		</>
-	)
+	);
 }
 
 export default App;
diff --git a/webdev-prosjekt1/src/components/Searchbar.tsx b/webdev-prosjekt1/src/components/Searchbar.tsx
index d07b068..d69561b 100644
--- a/webdev-prosjekt1/src/components/Searchbar.tsx
+++ b/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>
 	)
 }
diff --git a/webdev-prosjekt1/src/main.tsx b/webdev-prosjekt1/src/main.tsx
index 931804e..e534854 100644
--- a/webdev-prosjekt1/src/main.tsx
+++ b/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>,
 )

From 709de3ae2442160dfc3a106b736932e6791917fd Mon Sep 17 00:00:00 2001
From: Kristoffer Fredrik Dahle Melen <kristoffer.fredrik@gmail.com>
Date: Tue, 15 Sep 2026 09:26:24 +0200
Subject: [PATCH 2/2] Removed the current display of tracks.

---
 webdev-prosjekt1/src/App.tsx | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx
index 9b1a634..34efd0d 100644
--- a/webdev-prosjekt1/src/App.tsx
+++ b/webdev-prosjekt1/src/App.tsx
@@ -28,6 +28,8 @@ function App() {
 		enabled: query.trim().length > 0,
 	});
 
+	console.log(results);
+
 	return (
 		<>
 			<main className='app-shell'>
@@ -53,19 +55,6 @@ function App() {
 				</section>
 
 				<section className='hero-section'>
-					<div>
-						{isLoading || isFetching ? (
-							<p>Searching...</p>
-						) : isError ? (
-							<p>Search failed: {error instanceof Error ? error.message : 'Unknown error'}</p>
-						) : results?.tracks.length ? (
-							results.tracks.map((track) => (
-								<p key={track.id}>{track.name}</p>
-							))
-						) : query ? (
-							<p>No tracks found.</p>
-						) : null}
-					</div>
 					<figure className='hero-art'>
 						<div className='art-glow' />
 						<img src={musicWizImage} alt='A musical wizard' />