From 65a506eaff4f236877f5d64b910b7f77f554fc33 Mon Sep 17 00:00:00 2001
From: albdert <albertsen.lindberg@gmail.com>
Date: Fri, 18 Sep 2026 10:08:39 +0200
Subject: [PATCH] ki-erfaringer, fikse api-kall

---
 README.md                  |  2 ++
 src/api/tmdb.ts            |  7 +++++++
 src/components/Sidebar.tsx |  4 ++--
 src/hooks/useMovies.ts     |  9 +++++++++
 src/layout/MainLayout.tsx  | 15 ++++++++-------
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 83962fc..b564621 100644
--- a/README.md
+++ b/README.md
@@ -255,6 +255,8 @@ Dette prosjektet har brukt Claude (Anthropic) som støtte gjennom utviklingspros
 
 **Oppsummert:** KI er brukt til prosjektplanlegging, komponentarkitektur, feilsøking, API-sikkerhet, styling og CI/CD-oppsett. All kode er gjennomgått og forstått før den er tatt i bruk.
 
+**Erfaringer:**
+KI var nyttig gjennom hele prosjektet, spesielt til å effektivisere lesing av dokumentasjon — i stedet for å lese gjennom store mengder API- eller bibliotek-dokumentasjon selv, kunne KI raskt oppsummere det som var relevant. Den var også til hjelp for å finne kilder og eksempler på hvordan ting bør gjøres, både i form av beste praksis og alternative løsninger å vurdere. På den tekniske siden ga KI god generell støtte med TypeScript-syntaks (typing, generics, korrekt bruk av interfaces/types), og fungerte som en rask referanse for kommandoer man ellers måtte slått opp (git, npm/pnpm, deploy-relaterte kommandoer). Ved konkret feilsøking — som import-feil i React-komponenter, PATH-problemer i deploy-scriptet, var KI effektiv til å peke ut sannsynlig årsak og forslag til løsning, noe som sparte tid sammenlignet med å feilsøke fra bunnen selv. Samtidig var det nødvendig å alltid kvalitetssikre og teste forslagene selv, siden KI ikke alltid traff riktig på første forsøk og enkelte ganger krevde oppfølgingsspørsmål eller mer kontekst for å komme til en fungerende løsning.
 
 
 ## Template under i tilfelle andre vil ha samme oppsett for KI-bruk
diff --git a/src/api/tmdb.ts b/src/api/tmdb.ts
index 1ce7cc6..7f17b2b 100644
--- a/src/api/tmdb.ts
+++ b/src/api/tmdb.ts
@@ -40,6 +40,13 @@ export function fetchCurrentMovies(): Promise<TmdbResponse<Movie>> {
   );
 }
 
+export function fetchUpcommingMovies(): Promise<TmdbResponse<Movie>> {
+  return tmdbFetch(
+    '/movie/upcoming?language=en-US&page=1',
+    'Klarte ikke hente kommende filmer...'
+  )
+}
+
 export function fetchPopularPeople(): Promise<TmdbResponse<Person>> {
   return tmdbFetch(
     '/person/popular?language=en-US&page=1',
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 05bbd67..a4c0240 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -13,7 +13,7 @@ type SidebarProps = {
 // Underpunktene som vises under HOME på desktop
 const sections = [
   { id: 'populaere', label: 'Populære filmer' },
-  { id: 'nye-filmer', label: 'Kommende filmer' },
+  { id: 'kommende-filmer', label: 'Kommende filmer' },
 ];
 
 // Bunnlinja på mobil. Kortere etiketter, fordi fire knapper deler skjermbredden -
@@ -21,7 +21,7 @@ const sections = [
 const mobileItems = [
   { id: 'hjem', label: 'Hjem' },
   { id: 'populaere', label: 'Populære' },
-  { id: 'nye-filmer', label: 'Kommende' },
+  { id: 'kommende-filmer', label: 'Kommende' },
   { id: 'favoritter', label: 'Favoritter' },
 ];
 
diff --git a/src/hooks/useMovies.ts b/src/hooks/useMovies.ts
index c5b8bd7..2cf37d0 100644
--- a/src/hooks/useMovies.ts
+++ b/src/hooks/useMovies.ts
@@ -5,6 +5,7 @@ import {
   fetchPopularMovies,
   fetchSearchMovies,
   fetchMovieById,
+  fetchUpcommingMovies,
 } from '../api/tmdb';
 
 export function usePopMovies() {
@@ -23,6 +24,14 @@ export function useCurMovies() {
   });
 }
 
+export function useUpMovies() {
+   return useQuery({
+    queryKey: ['movies', 'upcomming'],
+    queryFn: fetchUpcommingMovies,
+    select: (data) => data.results,
+  });
+}
+
 export function useSearchMovies(query: string) {
   return useQuery({
     queryKey: ['movies', 'search', query],
diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx
index 62464c5..f624a72 100644
--- a/src/layout/MainLayout.tsx
+++ b/src/layout/MainLayout.tsx
@@ -2,7 +2,7 @@ import { MovieList } from '../components/MovieList';
 
 import { Section } from '../components/Section';
 import { TrendingPreview } from '../components/TrendingPreview';
-import { useCurMovies, usePopMovies } from '../hooks/useMovies';
+import { useCurMovies, usePopMovies, useUpMovies } from '../hooks/useMovies';
 
 import type { Movie } from '../types/tmdb';
 import {
@@ -28,6 +28,7 @@ export function MainLayout({
 }: MainLayoutProps) {
   const popular = usePopMovies();
   const current = useCurMovies();
+  const coming  = useUpMovies();
 
   return (
     <>
@@ -61,14 +62,14 @@ export function MainLayout({
         )}
       </Section>
       <Section
-        id="nye-filmer"
-        title="Nye filmer"
-        isLoading={current.isLoading}
-        error={current.error}
+        id="kommende-filmer"
+        title="Kommende filmer"
+        isLoading={coming.isLoading}
+        error={coming.error}
       >
-        {current.data && (
+        {coming.data && (
           <MovieList
-            movies={sortAndFilterMovies(current.data, sortBy, minRating)}
+            movies={sortAndFilterMovies(coming.data, sortBy, minRating)}
             isFavorite={isFavorite}
             onToggleFavorite={toggleFavorite}
             onSelectMovie={onSelectMovie}