fix: add lesson 6

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/api/polls/[id]/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+import { getPollById } from "@/lib/data";
+import type { Poll } from "@/types";
+
+interface RouteParams {
+  params: Promise<{ id: string }>;
+}
+
+// STAP 3: GET /api/polls/[id] — enkele poll ophalen
+// (Dit bestand is COMPLEET van Les 5. Dit is stap 3 van Les 5.)
+
+export async function GET(
+  request: Request,
+  { params }: RouteParams
+): Promise<NextResponse> {
+  const { id } = await params;
+  const poll = getPollById(id);
+
+  if (!poll) {
+    return NextResponse.json(
+      { error: "Poll niet gevonden" },
+      { status: 404 }
+    );
+  }
+
+  return NextResponse.json<Poll>(poll);
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/api/polls/[id]/vote/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+import { votePoll } from "@/lib/data";
+
+interface RouteParams {
+  params: Promise<{ id: string }>;
+}
+
+interface VoteBody {
+  optionIndex: number;
+}
+
+// STAP 4: POST /api/polls/[id]/vote — stem uitbrengen
+//
+// Wat moet je doen?
+// 1. Haal het id op uit params (await!)
+// 2. Lees de request body en cast naar VoteBody
+// 3. Valideer: is optionIndex een number?
+// 4. Roep votePoll(id, body.optionIndex) aan
+// 5. Als het resultaat undefined is: return 404
+// 6. Anders: return de geüpdatete poll als JSON
+
+export async function POST(
+  request: Request,
+  { params }: RouteParams
+): Promise<NextResponse> {
+  // Implementeer je POST handler hier
+  return NextResponse.json({ error: "Nog niet geimplementeerd" }, { status: 501 });
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/api/polls/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import { getPolls, createPoll } from "@/lib/data";
+import type { Poll, CreatePollBody } from "@/types";
+
+// GET /api/polls — alle polls ophalen
+export async function GET(): Promise<NextResponse<Poll[]>> {
+  const polls = getPolls();
+  return NextResponse.json(polls);
+}
+
+// POST /api/polls — nieuwe poll aanmaken
+export async function POST(request: Request): Promise<NextResponse> {
+  const body: CreatePollBody = await request.json();
+
+  if (!body.question || !body.options || body.options.length < 2) {
+    return NextResponse.json(
+      { error: "Vraag en minstens 2 opties zijn verplicht" },
+      { status: 400 }
+    );
+  }
+
+  const newPoll = createPoll(body.question, body.options);
+  return NextResponse.json(newPoll, { status: 201 });
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/create/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+// BONUS: Maak een formulier om een nieuwe poll aan te maken
+//
+// Benodigde state:
+// - question: string
+// - options: string[] (start met ["", ""])
+// - isSubmitting: boolean
+// - error: string | null
+//
+// Wat moet je bouwen?
+// 1. Een input voor de vraag
+// 2. Inputs voor de opties (minimaal 2, maximaal 6)
+// 3. Knoppen om opties toe te voegen/verwijderen
+// 4. Een submit knop die POST naar /api/polls
+// 5. Na success: redirect naar / met router.push("/")
+
+export default function CreatePollPage() {
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">
+        Nieuwe Poll Aanmaken
+      </h1>
+      <p className="text-gray-400 italic">
+        Bonus: bouw hier het create formulier
+      </p>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/error.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+// STAP 7: Error boundary
+//
+// Dit bestand vangt fouten op in de route.
+// MOET een client component zijn ("use client" staat al bovenaan).
+//
+// Props die je krijgt:
+// - error: Error — het error object met .message
+// - reset: () => void — functie om de pagina opnieuw te proberen
+//
+// Bouw een nette error pagina met:
+// - Een titel "Er ging iets mis!"
+// - De error message
+// - Een "Probeer opnieuw" knop die reset() aanroept
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <div className="text-center py-16">
+      <p>Er ging iets mis: {error.message}</p>
+      <button onClick={() => reset()}>Probeer opnieuw</button>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "QuickPoll — Stem op alles",
+  description: "Maak en deel polls met je vrienden",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="nl">
+      <body className="min-h-screen bg-gray-50 text-gray-900">
+        {/*
+          STAP 1: Bouw hier een navigatiebalk met:
+          - Logo/titel "QuickPoll" (links) die linkt naar /
+          - Een link naar / ("Polls")
+          - Een link naar /create ("Nieuwe Poll")
+
+          Tip: gebruik <Link> van "next/link", niet <a>
+          Tip: gebruik Tailwind classes voor styling
+        */}
+
+        <main className="max-w-4xl mx-auto px-4 py-8">{children}</main>
+
+        <footer className="text-center text-gray-400 text-sm py-8">
+          © 2025 QuickPoll — NOVI Hogeschool Les 5
+        </footer>
+      </body>
+    </html>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/loading.tsx

@@ -0,0 +1,17 @@
+// STAP 7: Loading state
+//
+// Dit bestand wordt automatisch getoond terwijl een pagina laadt.
+// Bouw een skeleton loader met Tailwind's animate-pulse class.
+//
+// Voorbeeld:
+//   <div className="animate-pulse">
+//     <div className="h-8 bg-gray-200 rounded w-1/3 mb-4" />
+//   </div>
+
+export default function Loading() {
+  return (
+    <div>
+      <p>Laden...</p>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+// STAP 7: Not found pagina
+//
+// Wordt getoond als een pagina niet bestaat.
+// Bouw een nette 404 pagina met een link terug naar home.
+
+export default function NotFound() {
+  return (
+    <div className="text-center py-16">
+      <h2 className="text-4xl font-bold text-gray-900 mb-4">404</h2>
+      <p className="text-gray-600 mb-6">Deze pagina bestaat niet.</p>
+      <Link href="/" className="text-purple-600 hover:underline">
+        Terug naar home
+      </Link>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/page.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { getPolls } from "@/lib/data";
+import type { Poll } from "@/types";
+
+export const dynamic = "force-dynamic";
+
+export default function HomePage() {
+  // STAP 2: Haal alle polls op met getPolls()
+  // Dit is een Server Component — je kunt gewoon functies aanroepen!
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-gray-900 mb-2">Actieve Polls</h1>
+      <p className="text-gray-500 mb-8">Klik op een poll om te stemmen</p>
+
+      <div className="grid gap-4">
+        {/*
+          STAP 2: Map over de polls en toon voor elke poll:
+          - De vraag (poll.question)
+          - Het aantal opties en stemmen
+          - De opties als tags/badges
+          - Wrap het in een <Link> naar /poll/{poll.id}
+
+          Tip: maak een helper functie voor het totaal aantal stemmen:
+          const totalVotes = (poll: Poll): number =>
+            poll.votes.reduce((sum, v) => sum + v, 0);
+        */}
+      </div>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/poll/[id]/error.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+// STAP 7: Error boundary voor poll detail pagina
+//
+// Dit bestand vangt fouten op in deze route.
+
+export default function ErrorPoll({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="max-w-2xl mx-auto text-center py-12">
+      <h2 className="text-2xl font-bold text-red-600 mb-4">
+        Oeps! Iets ging fout
+      </h2>
+      <p className="text-gray-600 mb-6">{error.message}</p>
+      <button
+        onClick={reset}
+        className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700"
+      >
+        Probeer opnieuw
+      </button>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/poll/[id]/loading.tsx

@@ -0,0 +1,20 @@
+// STAP 7: Loading state voor poll detail pagina
+//
+// Dit bestand wordt automatisch getoond terwijl de poll detail pagina laadt.
+// Bouw een skeleton loader die lijkt op de echte content.
+
+export default function LoadingPoll() {
+  return (
+    <div className="max-w-2xl mx-auto animate-pulse">
+      <div className="h-10 bg-gray-200 rounded w-3/4 mb-8" />
+      <div className="space-y-4">
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="bg-white rounded-lg border p-4 h-16"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/poll/[id]/not-found.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export default function PollNotFound() {
+  return (
+    <div className="text-center py-16">
+      <h2 className="text-2xl font-bold text-gray-900 mb-4">
+        Poll niet gevonden
+      </h2>
+      <p className="text-gray-600 mb-6">
+        Deze poll bestaat niet of is verwijderd.
+      </p>
+      <Link href="/" className="text-purple-600 hover:underline">
+        Bekijk alle polls
+      </Link>
+    </div>
+  );
+}

Les06-NextJS-QuickPoll-Part2/quickpoll-les6-starter/src/app/poll/[id]/page.tsx

@@ -0,0 +1,40 @@
+import { notFound } from "next/navigation";
+import { getPollById } from "@/lib/data";
+import { VoteForm } from "@/components/VoteForm";
+import type { Metadata } from "next";
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+// STAP 5: generateMetadata — dynamische pagina titel
+//
+// Deze functie genereert de <title> tag voor SEO.
+// Haal de poll op en return de vraag als titel.
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = await params;
+  const poll = getPollById(id);
+
+  return {
+    title: poll ? `${poll.question} — QuickPoll` : "Poll niet gevonden",
+  };
+}
+
+// STAP 5: PollPage — de poll detail pagina
+//
+// Wat moet je doen?
+// 1. Haal het id op uit params (await!)
+// 2. Zoek de poll met getPollById(id)
+// 3. Als de poll niet bestaat: roep notFound() aan
+// 4. Render de poll vraag als <h1>
+// 5. Render de <VoteForm poll={poll} /> component
+
+export default async function PollPage({ params }: PageProps) {
+  // Implementeer je pagina hier
+  return (
+    <div className="max-w-2xl mx-auto">
+      <p>Implementeer deze pagina (zie stap 5 in de opdracht)</p>
+    </div>
+  );
+}