From e68087a365c10ef1a26a899b33ef426e5add98d0 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 11 Sep 2026 14:12:41 +0200 Subject: [PATCH 1/4] Added working search --- src/App.tsx | 41 ++++++++++++++++++++++++++++------------- src/api/tmdb.ts | 4 ++++ src/hooks/useMovies.ts | 10 +++++++++- 3 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 521593b..b77a48e 100644 --- a/src/App.tsx +++ b/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 = debouncedQuery.trim().length > 0; return (
- +
-
- {popular.data && } -
- -
- {current.data && } -
- -
- {people.data && } -
+ {isSearching ? ( +
+ {search.data && } +
+ ) : ( + <> +
+ {popular.data && } +
+ +
+ {current.data && } +
+ +
+ {people.data && } +
+ + )}
diff --git a/src/api/tmdb.ts b/src/api/tmdb.ts index 91d1e69..21f5fc5 100644 --- a/src/api/tmdb.ts +++ b/src/api/tmdb.ts @@ -31,4 +31,8 @@ export function fetchCurrentMovies(): Promise> { export function fetchPopularPeople(): Promise> { return tmdbFetch('/person/popular?language=en-US&page=1', 'Klarte ikke hente skuespillere...'); +} + +export function fetchSearchMovies(query: string): Promise> { + return tmdbFetch(`/search/movie?query=${encodeURIComponent(query)}&language=en-US&page=1`, 'Søket feilet...'); } \ No newline at end of file diff --git a/src/hooks/useMovies.ts b/src/hooks/useMovies.ts index 50912a7..6a59a98 100644 --- a/src/hooks/useMovies.ts +++ b/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, + }) } \ No newline at end of file From 6094a39ffc48484ceecebfa63816784738528619 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 11 Sep 2026 14:14:53 +0200 Subject: [PATCH 2/4] Added debounce effect --- src/hooks/useDebouncedValue.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/hooks/useDebouncedValue.ts diff --git a/src/hooks/useDebouncedValue.ts b/src/hooks/useDebouncedValue.ts new file mode 100644 index 0000000..2b002fa --- /dev/null +++ b/src/hooks/useDebouncedValue.ts @@ -0,0 +1,15 @@ +import { useState, useEffect } from 'react'; + +export function useDebouncedValue(value: T, delay: number): T { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const timeoutId = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => clearTimeout(timeoutId); + }, [value, delay]); + + return debouncedValue; +} \ No newline at end of file From 4393b1e3b42a73055db58eb824c40fa35e143247 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 11 Sep 2026 14:36:08 +0200 Subject: [PATCH 3/4] Working sidebar after searching --- src/components/sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index b9ba39e..f6e027e 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -33,7 +33,7 @@ export function Sidebar({onSearch}: SidebarProps) { {sections.map((section) =>(
  • - {section.label} + onSearch?.('')}>{section.label}
    • ))} From 4e818d08fab81de2df35595a907d2fcd585a0894 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 11 Sep 2026 16:03:23 +0200 Subject: [PATCH 4/4] Made searchbar go to null when clicking a button --- src/App.tsx | 2 +- src/components/sidebar.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f31c594..580fb31 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,7 +21,7 @@ function App() { return (
    - +
    {isSearching ? ( diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index f5bc09d..b9e7248 100644 --- a/src/components/sidebar.tsx +++ b/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 (