Component sidebar main fix

src/App.tsx

@@ -1,100 +1,37 @@
-// App.tsx
-import { useState } from 'react';
-import { useCurMovies, usePopMovies } from './hooks/useMovies';
-
+import { usePopMovies, useCurMovies } from './hooks/useMovies';
 import { usePopularPeople } from './hooks/usePeople';
-//import { Button } from './components/Button';
-import { Sidebar} from './components/sidebar';
+import { Sidebar } from './components/sidebar';
+import { Section } from './components/Section';
+import { MovieList } from './components/MovieList';
+import { PersonList } from './components/PersonList';
 import './App.css';
 
 function App() {
-
-  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 
-
-  if (isLoading) {
-    return <p>Laster filmer...</p>
-  } 
-
-  if (error) {
-    return <p>Noe gikk galt: {error.message}</p>
-  }
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <ul>
-        {data.results.map((movie: any) => (
-          <li key={movie.id}>{movie.title}</li>
-        ))}
-      </ul>
-      <Button text="Popular" onClick={() => setView('popular')} />
-      <Button text="Current" onClick={() => setView('current')} />
-    </div>
-  )
-}
-*/
+  const popular = usePopMovies();
+  const current = useCurMovies();
+  const people = usePopularPeople();
 
   return (
     <div className="page">
-      <Sidebar onSearch={setSearchQuery} />
+      <Sidebar />
 
       <main>
+        <Section id="populaere" title="Populære filmer" isLoading={popular.isLoading} error={popular.error}>
+          {popular.data && <MovieList movies={popular.data.results} />}
+        </Section>
 
-        <section id="populaere">
-          <h2>Populære filmer</h2>
-          {popular.isLoading && <p>Laster filmer...</p>}
-          {popular.error && <p>Noe gikk galt: {popular.error.message}</p>}
-          {popular.data && (
-            <ul>
-              {popular.data.results.map((movie: any) => (
-                <li key={movie.id}>{movie.title}</li>
-              ))}
-            </ul>
-          )}
-        </section>
-
-        <section id="nye-filmer">
-          <h2>Nye filmer</h2>
-          {current.isLoading && <p>Laster filmer...</p>}
-          {current.error && <p>Noe gikk galt: {current.error.message}</p>}
-          {current.data && (
-            <ul>
-              {current.data.results.map((movie: any) => (
-                <li key={movie.id}>{movie.title}</li>
-              ))}
-            </ul>
-          )}
-        </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">
-          <h2>Skuespillere</h2>
-          {people.isLoading && <p>Laster skuespillere...</p>}
-          {people.error && <p>Noe gikk galt: {people.error.message}</p>}
-          {people.data && (
-            <ul>
-              {people.data.results.map((person: any) => (
-                <li key={person.id}>{person.name}</li>
-              ))}
-            </ul>
-          )}
-        </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>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/api/tmdb.ts

@@ -3,48 +3,32 @@
 // får satt den opp senere.
 
 // BASE_URL er lenken vi bruker i en API request, her til TMDB
-const TOKEN = import.meta.env.VITE_TMDB_TOKEN // v4 read access token
-const BASE_URL = 'https://api.themoviedb.org/3'
 
-export async function fetchPopularMovies() {
-  const res = await fetch(
-    `${BASE_URL}/movie/popular?language=en-US&page=1`,
-    {
-      headers: {
-        accept: 'application/json',
-        Authorization: `Bearer ${TOKEN}`,
-      },
-    }
-  )
-  if (!res.ok) throw new Error('Klarte ikke hente populære filmer...')
-  return res.json()
+// TOKEN er lagret i .env.local, denne må alle legge til manuelt selv
+import type { Movie, Person, TmdbResponse } from '../types/tmdb';
+
+const TOKEN = import.meta.env.VITE_TMDB_TOKEN; // v4 read access token
+const BASE_URL = 'https://api.themoviedb.org/3';
+
+async function tmdbFetch<T>(path: string, errorMessage: string): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    headers: {
+      accept: 'application/json',
+      Authorization: `Bearer ${TOKEN}`,
+    },
+  });
+  if (!res.ok) throw new Error(errorMessage);
+  return res.json();
+}
+
+export function fetchPopularMovies(): Promise<TmdbResponse<Movie>> {
+  return tmdbFetch('/movie/popular?language=en-US&page=1', 'Klarte ikke hente populære filmer...');
 }
 
-export async function fetchCurrentMovies() {
-  const res = await fetch(
-    `${BASE_URL}/movie/now_playing?language=en-US&page=1`,
-    {
-      headers: {
-        accept: 'application/json',
-        Authorization: `Bearer ${TOKEN}`,
-      },
-    }
-  )
-  if (!res.ok) throw new Error('Klarte ikke hente aktuelle filmer...')
-  return res.json()
+export function fetchCurrentMovies(): Promise<TmdbResponse<Movie>> {
+  return tmdbFetch('/movie/now_playing?language=en-US&page=1', 'Klarte ikke hente aktuelle filmer...');
 }
-//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()
+export function fetchPopularPeople(): Promise<TmdbResponse<Person>> {
+  return tmdbFetch('/person/popular?language=en-US&page=1', 'Klarte ikke hente skuespillere...');
 }

src/components/MovieList.tsx

@@ -0,0 +1,15 @@
+import type { Movie } from '../types/tmdb';
+
+type MovieListProps = {
+  movies: Movie[];
+};
+
+export function MovieList({ movies }: MovieListProps) {
+  return (
+    <ul className="movie-list">
+      {movies.map((movie) => (
+        <li key={movie.id}>{movie.title}</li>
+      ))}
+    </ul>
+  );
+}

src/components/PersonList.tsx

@@ -0,0 +1,15 @@
+import type { Person } from '../types/tmdb';
+
+type PersonListProps = {
+  people: Person[];
+};
+
+export function PersonList({ people }: PersonListProps) {
+  return (
+    <ul className="person-list">
+      {people.map((person) => (
+        <li key={person.id}>{person.name}</li>
+      ))}
+    </ul>
+  );
+}

src/components/Section.tsx

@@ -0,0 +1,22 @@
+// denne filen eier overskrift + laster/feil-håndtering, tar innholdet som 'children':
+
+import type { ReactNode } from 'react';
+
+type SectionProps = {
+  id: string;
+  title: string;
+  isLoading: boolean;
+  error: Error | null;
+  children: ReactNode;
+};
+
+export function Section({ id, title, isLoading, error, children }: SectionProps) {
+  return (
+    <section id={id}>
+      <h2>{title}</h2>
+      {isLoading && <p>Laster...</p>}
+      {error && <p>Noe gikk galt: {error.message}</p>}
+      {!isLoading && !error && children}
+    </section>
+  );
+}

src/hooks/usePopMovies.ts

@@ -1,6 +1,6 @@
 // hooks/useMovies.ts
 import { useQuery } from '@tanstack/react-query'
-import { fetchCurrentMovies, fetchPopularMovies } from '../api/tmdb'
+import { fetchPopularMovies } from '../api/tmdb'
 
 export function useMovies() {
   return useQuery({