Added a working search bar

src/App.tsx

@@ -1,33 +1,48 @@
-import { usePopMovies, useCurMovies } from './hooks/useMovies';
+import { useState } from 'react';
+import { usePopMovies, useCurMovies, useSearchMovies } from './hooks/useMovies';
 import { usePopularPeople } from './hooks/usePeople';
 import { Sidebar } from './components/sidebar';
 import { Section } from './components/Section';
 import MovieList from './components/MovieList'; 
 import { PersonList } from './components/PersonList';
 import './App.css';
+import { useDebouncedValue } from './hooks/useDebouncedValue';
 
 function App() {
 
+  const [query, setQuery] = useState('');
+
   const popular = usePopMovies()
   const current = useCurMovies()
   const people = usePopularPeople()
+  const debouncedQuery = useDebouncedValue(query, 400);
+  const search = useSearchMovies(debouncedQuery)
+  const isSearching = query.trim().length > 0;
 
   return (
     <div className="page">
-      <Sidebar />
+        <Sidebar onSearch={setQuery} searchValue={query} />
 
       <main>
-        <Section id="populaere" title="Populære filmer" isLoading={popular.isLoading} error={popular.error}>
-          {popular.data && <MovieList movies={popular.data.results} />}
-        </Section>
-
-        <Section id="nye-filmer" title="Nye filmer" isLoading={current.isLoading} error={current.error}>
-          {current.data && <MovieList movies={current.data.results} />}
-        </Section>
-
-        <Section id="skuespillere" title="Skuespillere" isLoading={people.isLoading} error={people.error}>
-          {people.data && <PersonList people={people.data.results} />}
-        </Section>
+        {isSearching ? (
+          <Section id="sok" title={`Søkeresultater for "${query}"`} isLoading={search.isLoading} error={search.error}>
+            {search.data && <MovieList movies={search.data.results} />}
+          </Section>
+        ) : (
+          <>
+            <Section id="populaere" title="Populære filmer" isLoading={popular.isLoading} error={popular.error}>
+              {popular.data && <MovieList movies={popular.data.results} />}
+            </Section>
+
+            <Section id="nye-filmer" title="Nye filmer" isLoading={current.isLoading} error={current.error}>
+              {current.data && <MovieList movies={current.data.results} />}
+            </Section>
+
+            <Section id="skuespillere" title="Skuespillere" isLoading={people.isLoading} error={people.error}>
+              {people.data && <PersonList people={people.data.results} />}
+            </Section>
+          </>
+        )}
       </main>
 
       <div className="page-spacer" aria-hidden="true"></div>

src/api/tmdb.ts

@@ -33,9 +33,13 @@ export function fetchPopularPeople(): Promise<TmdbResponse<Person>> {
   return tmdbFetch('/person/popular?language=en-US&page=1', 'Klarte ikke hente skuespillere...');
 }
 
+export function fetchSearchMovies(query: string): Promise<TmdbResponse<Movie>> {
+  return tmdbFetch(`/search/movie?query=${encodeURIComponent(query)}&language=en-US&page=1`, 'Søket feilet...');
+}
+
 export function fetchMovieCredits(movieId: number): Promise<CreditsResponse> {
   return tmdbFetch<CreditsResponse>(
     `/movie/${movieId}/credits?language=en-US`,
     'Klarte ikke hente skuespillere...',
   );
-}
+}

src/components/sidebar.tsx

@@ -3,6 +3,7 @@ import './sidebar.css';
 
 type SidebarProps = {
     onSearch?: (query: string) => void;
+    searchValue?: string;
 };
 
 //under kommer seksjonene i midtkolonnen som sidebaren skal kunne hoppe mellom
@@ -12,7 +13,7 @@ const sections = [
     { id: "skuespillere", label: "Skuespillere"},
 ];
 
-export function Sidebar({onSearch}: SidebarProps) {
+export function Sidebar({onSearch, searchValue}: SidebarProps) {
     return (
 
         <aside className="sidebar">
@@ -25,16 +26,27 @@ export function Sidebar({onSearch}: SidebarProps) {
                     id="movie-search"
                     type="search"
                     placeholder="Søk..."
+                    value={searchValue ?? ''}
                     onChange={(e) => onSearch?.(e.target.value)}
                     />
             </div>
             <nav aria-label="Innhold på siden">
                 <ul className="sidebar-nav">
                     {sections.map((section) =>(
                         <li key={section.id}>
-
-                    <a href={`#${section.id}`} >{section.label}</a>
-                </li>
+            <a
+                href={`#${section.id}`}
+                onClick={(e) => {
+                    e.preventDefault();
+                    onSearch?.('');
+                    setTimeout(() => {
+                    document.getElementById(section.id)?.scrollIntoView({ behavior: 'smooth' });
+                    }, 0);
+            }}
+        >
+    {section.label}
+  </a>
+</li>
                     ))}
                 </ul>
             </nav>

src/hooks/useDebouncedValue.ts

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+
+export function useDebouncedValue<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(timeoutId);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

src/hooks/useMovies.ts

@@ -1,6 +1,6 @@
 // hooks/useMovies.ts
 import { useQuery } from '@tanstack/react-query'
-import { fetchCurrentMovies, fetchPopularMovies } from '../api/tmdb'
+import { fetchCurrentMovies, fetchPopularMovies, fetchSearchMovies } from '../api/tmdb'
 
 export function usePopMovies() {
   return useQuery({
@@ -15,4 +15,12 @@ export function useCurMovies() {
     queryFn: fetchCurrentMovies,
 
   })
+}
+
+export function useSearchMovies(query: string) {
+  return useQuery({
+    queryKey: ['movies', 'search', query],
+    queryFn: () => fetchSearchMovies(query),
+    enabled: query.trim().length > 0,
+  })
 }