From 018696fcf1c921e2cc0d5715107d678f1acfe403 Mon Sep 17 00:00:00 2001 From: Clemens Beese Date: Thu, 10 Sep 2026 12:32:28 +0200 Subject: [PATCH 1/3] lagt til basic config for sidebaren --- src/App.css | 7 ++++ src/App.tsx | 70 ++++++++++++++++++++++++++++++++++---- src/api/tmdb.ts | 15 ++++++++ src/components/sidebar.css | 25 ++++++++++++++ src/components/sidebar.tsx | 44 ++++++++++++++++++++++++ src/hooks/useMovies.ts | 7 ++-- src/hooks/usePeople.ts | 9 +++++ src/layouts/MainLayout.tsx | 0 8 files changed, 166 insertions(+), 11 deletions(-) create mode 100644 src/components/sidebar.css create mode 100644 src/hooks/usePeople.ts delete mode 100644 src/layouts/MainLayout.tsx diff --git a/src/App.css b/src/App.css index f90339d..175252d 100644 --- a/src/App.css +++ b/src/App.css @@ -182,3 +182,10 @@ border-right-color: var(--border); } } + + +.page { + display: flex; /* legger barna (aside + main) side om side i stedet for stablet */ + align-items: flex-start; /* gjør at sidebaren ikke strekker seg like høy som main automatisk */ + gap: 24px; /* luft mellom sidebar og hovedinnhold, juster selv */ +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index d1d2c93..a44155f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,19 +1,26 @@ // App.tsx -import { useState } from 'react' -import { useCurMovies, usePopMovies } from './hooks/useMovies' -import { Button } from './components/Button' +import { useState } from 'react'; +import { useCurMovies, usePopMovies } from './hooks/useMovies'; + +import { usePopularPeople } from './hooks/usePeople'; +import { Button } from './components/Button'; +import { Sidebar} from './components/sidebar'; +import './App.css'; function App() { - const [view, setView] = useState<'popular' | 'current'>('popular') - const popular = usePopMovies(view === 'popular') - const current = useCurMovies(view === 'current') + const [searchQuery, setSearchQuery] = useState('') + //const [view, setView] = useState<'popular' | 'current'>('popular') + + const popular = usePopMovies() + const current = useCurMovies() + const people = usePopularPeople() const viewConfig = { popular: { title: 'Populære filmer', query: popular }, current: { title: 'Nye filmer', query: current }, } - +/* const { title, query } = viewConfig[view] const { data, isLoading, error } = query @@ -38,5 +45,54 @@ function App() { ) } +*/ + + return ( +
+ + +
+
+

Populære filmer

+ {popular.isLoading &&

Laster filmer...

} + {popular.error &&

Noe gikk galt: {popular.error.message}

} + {popular.data && ( +
    + {popular.data.results.map((movie: any) => ( +
  • {movie.title}
    • + ))} +
+ )} +
+ +
+

Nye filmer

+ {current.isLoading &&

Laster filmer...

} + {current.error &&

Noe gikk galt: {current.error.message}

} + {current.data && ( +
    + {current.data.results.map((movie: any) => ( +
  • {movie.title}
    • + ))} +
+ )} +
+ +
+

Skuespillere

+ {people.isLoading &&

Laster skuespillere...

} + {people.error &&

Noe gikk galt: {people.error.message}

} + {people.data && ( +
    + {people.data.results.map((person: any) => ( +
  • {person.name}
    • + ))} +
+ )} +
+
+
+ ) +} export default App \ No newline at end of file diff --git a/src/api/tmdb.ts b/src/api/tmdb.ts index 05627dc..c298826 100644 --- a/src/api/tmdb.ts +++ b/src/api/tmdb.ts @@ -32,4 +32,19 @@ export async function fetchCurrentMovies() { ) if (!res.ok) throw new Error('Klarte ikke hente aktuelle filmer...') return res.json() +} +//lagt til popular people + +export async function fetchPopularPeople() { + const res = await fetch( + `${BASE_URL}/person/popular?language=en-US&page=1`, + { + headers: { + accept: 'application/json', + Authorization: `Bearer ${TOKEN}`, + }, + } + ) + if (!res.ok) throw new Error('Klarte ikke hente skuespillere...') + return res.json() } \ No newline at end of file diff --git a/src/components/sidebar.css b/src/components/sidebar.css new file mode 100644 index 0000000..f989c66 --- /dev/null +++ b/src/components/sidebar.css @@ -0,0 +1,25 @@ + + +/* Skjuler elementet visuelt uten å fjerne det fra DOM-en, + slik at skjermlesere fortsatt leser opp teksten (f.eks. labelen over). */ +.visually-hidden { + position: absolute; /* tar det ut av normal layout-flyt */ + width: 1px; + height: 1px; /* krymper det til nesten ingenting */ + padding: 0; + margin: -1px; /* trikser bort avrundingsproblemer i noen nettlesere */ + overflow: hidden; /* skjuler alt innhold som stikker utenfor 1x1px */ + clip: rect(0, 0, 0, 0); /* eldre metode for å "klippe bort" innholdet visuelt */ + white-space: nowrap; /* hindrer teksten fra å brekke og bli synlig */ + border: 0; +} + +/* Gjør at #-lenker (som href="#populaere") scroller mykt i stedet for å hoppe brått. */ +html { + scroll-behavior: smooth; +} + +.sidebar { + text-align: left; + flex: 0 0 220px; /* fast bredde på sidebaren, i stedet for at flex gjetter selv */ +} \ No newline at end of file diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index e69de29..b9ba39e 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -0,0 +1,44 @@ +import './sidebar.css'; + + +type SidebarProps = { + onSearch?: (query: string) => void; +}; + +//under kommer seksjonene i midtkolonnen som sidebaren skal kunne hoppe mellom +const sections = [ + { id: "populaere", label: "Populære"}, + { id: "nye-filmer", label: "Nye Filmer"}, + { id: "skuespillere", label: "Skuespillere"}, +]; + +export function Sidebar({onSearch}: SidebarProps) { + return ( + + + ); +} + diff --git a/src/hooks/useMovies.ts b/src/hooks/useMovies.ts index 3d84e80..50912a7 100644 --- a/src/hooks/useMovies.ts +++ b/src/hooks/useMovies.ts @@ -2,18 +2,17 @@ import { useQuery } from '@tanstack/react-query' import { fetchCurrentMovies, fetchPopularMovies } from '../api/tmdb' -export function usePopMovies(enabled: boolean) { +export function usePopMovies() { return useQuery({ queryKey: ['movies', 'popular'], queryFn: fetchPopularMovies, - enabled, }) } -export function useCurMovies(enabled: boolean) { +export function useCurMovies() { return useQuery({ queryKey: ['movies', 'current'], queryFn: fetchCurrentMovies, - enabled, + }) } \ No newline at end of file diff --git a/src/hooks/usePeople.ts b/src/hooks/usePeople.ts new file mode 100644 index 0000000..6bccd4b --- /dev/null +++ b/src/hooks/usePeople.ts @@ -0,0 +1,9 @@ +import { useQuery } from '@tanstack/react-query' +import { fetchPopularPeople } from '../api/tmdb' + +export function usePopularPeople() { + return useQuery({ + queryKey: ['people', 'popular'], + queryFn: fetchPopularPeople, + }) +} \ No newline at end of file diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx deleted file mode 100644 index e69de29..0000000 From f3d2ffc8c57b0a50b87b267828f3d84192fdd33d Mon Sep 17 00:00:00 2001 From: Clemens Beese Date: Thu, 10 Sep 2026 13:04:06 +0200 Subject: [PATCH 2/3] =?UTF-8?q?Basic=20config=20til=20sidebar=20&=20=C3=B8?= =?UTF-8?q?kt=20siden=20til=20100%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 13 ++++++++++++- src/App.tsx | 2 ++ src/components/sidebar.css | 26 +++++++++++++++++++++++++- src/index.css | 8 +++----- 4 files changed, 42 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 175252d..2da363b 100644 --- a/src/App.css +++ b/src/App.css @@ -188,4 +188,15 @@ display: flex; /* legger barna (aside + main) side om side i stedet for stablet */ align-items: flex-start; /* gjør at sidebaren ikke strekker seg like høy som main automatisk */ gap: 24px; /* luft mellom sidebar og hovedinnhold, juster selv */ -} \ No newline at end of file + padding-top: 32px; + padding-left:24px; +} + +.page > main { + flex: 2 1 0; /* 2 deler av 4 = 2/4 (halvparten) av siden */ + min-width: 0; +} + +.page > .page-spacer { + flex: 1 1 0; /* 1 del av 4 = 1/4 av siden, samme som sidebar */ +} diff --git a/src/App.tsx b/src/App.tsx index a44155f..a7298f2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,6 +52,7 @@ function App() {
+

Populære filmer

{popular.isLoading &&

Laster filmer...

} @@ -91,6 +92,7 @@ function App() { )}
+ ) } diff --git a/src/components/sidebar.css b/src/components/sidebar.css index f989c66..7660d3d 100644 --- a/src/components/sidebar.css +++ b/src/components/sidebar.css @@ -21,5 +21,29 @@ html { .sidebar { text-align: left; - flex: 0 0 220px; /* fast bredde på sidebaren, i stedet for at flex gjetter selv */ + flex: 1 1 0; /* 2 del av 4 = 1/4 av siden */ +} + +.sidebar-search { + margin-bottom: 28px; /* luft mellom søkefelt og lenkene */ +} + +.sidebar-search input { + width: 100%; + font-size: 18px; + padding: 8px 12px; + box-sizing: border-box; +} + +.sidebar-nav { + list-style: none; /* fjerner kulepunktene, som i skissen */ + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 18px; /* avstand mellom lenkene */ +} + +.sidebar-nav a { + font-size: 28px; /* juster tallet til det ser riktig ut */ } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 5fb3313..8cb6ea6 100644 --- a/src/index.css +++ b/src/index.css @@ -51,15 +51,13 @@ } #root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); + width: 100%; + margin: 0; min-height: 100svh; display: flex; flex-direction: column; box-sizing: border-box; + text-align: center; } body { From 87bae35a76522691a37a8e624a0641ecf8df175b Mon Sep 17 00:00:00 2001 From: Clemens Beese Date: Thu, 10 Sep 2026 13:29:11 +0200 Subject: [PATCH 3/3] =?UTF-8?q?Basic=20config=20til=20sidebar=20&=20=C3=B8?= =?UTF-8?q?kt=20siden=20til=20100%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index a7298f2..22660f9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { useCurMovies, usePopMovies } from './hooks/useMovies'; import { usePopularPeople } from './hooks/usePeople'; -import { Button } from './components/Button'; +//import { Button } from './components/Button'; import { Sidebar} from './components/sidebar'; import './App.css';