route not working

gradesa/.env.test

@@ -1,5 +1,5 @@
 DB_HOST=pgtestdb
-DB_PORT=5432
+DB_PORT=7742
 DB_USER=postgres
 DB_PASSWORD=password
 DB_NAME=postgres

gradesa/data/migrations/00028_add_grammar_topics.sql

@@ -1,31 +1,31 @@
 INSERT INTO grammar_topics (id, title)
 VALUES(1, 'Das Adjektiv')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO grammar_topics (id, title)
 VALUES(2, 'Das Adverb')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO grammar_topics (id, title)
 VALUES(3, 'Das Artikelwort')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO grammar_topics (id, title)
 VALUES(4, 'Das Pronomen')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO grammar_topics (id, title)
 VALUES(5, 'Das Substantiv')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO grammar_topics (id, title)
 VALUES(6, 'Das Verb')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO grammar_topics (id, title)
 VALUES(7, 'Die Präposition')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO grammar_topics (id, title)
 VALUES(8, 'Die Syntax')
-ON CONFLICT (id) DO NOTHING
+ON CONFLICT (id) DO NOTHING;

gradesa/data/schema.sql

@@ -339,6 +339,26 @@ CREATE TABLE public.glossary_entries (
 
 CREATE TRIGGER update_glossary_entries_updated_at BEFORE UPDATE ON public.glossary_entries FOR EACH ROW EXECUTE FUNCTION updated_at();
 
+CREATE TABLE public.grammar_pages_html (
+  id bigint PRIMARY KEY NOT NULL GENERATED BY DEFAULT AS IDENTITY,
+  title text NOT NULL,
+  content text NOT NULL,
+  grammar_topic_id integer
+);
+
+CREATE SEQUENCE public.grammar_topics_id_seq;
+
+CREATE TABLE public.grammar_topics (
+  id integer PRIMARY KEY NOT NULL DEFAULT nextval('grammar_topics_id_seq'::regclass),
+  title text NOT NULL
+);
+
+ALTER SEQUENCE public.grammar_topics_id_seq OWNED BY public.grammar_topics.id;
+
+ALTER TABLE public.grammar_pages_html
+ADD CONSTRAINT grammar_pages_html_grammar_topic_id_fkey
+FOREIGN KEY (grammar_topic_id) REFERENCES grammar_topics(id);
+
 CREATE TABLE public.html_pages (
   id bigint PRIMARY KEY NOT NULL GENERATED BY DEFAULT AS IDENTITY,
   title text,

gradesa/src/app/api/grammar_topics/route.js

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import { DB } from "@/backend/db";
+
+export async function GET() {
+  try {
+    const grammarTopics = await getGrammarTopicsJSON();
+    return NextResponse.json(grammarTopics);
+  } catch (error) {
+    console.error("Error fetching grammar topics:", error);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 }
+    );
+  }
+}
+
+async function getGrammarTopicsJSON() {
+  const result = await DB.pool(
+    `
+      SELECT * FROM grammar_topics;
+    `
+  );
+
+  return result.rows[0].grammar_topics;
+}

gradesa/src/app/grammar/themes/page.js

@@ -1,253 +1,26 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { LinkButton } from "@/components/ui/linkbutton";
 import Link from "next/link";
 
-const initialGrammarTopics = [
-  {
-    title: "Das Adjektiv",
-    subtopics: [
-      {
-        name: "prädikative und adverbiale Adjektive",
-        link: "/grammar/themes/pradikative-adverbiale-adjektive",
-      },
-      {
-        name: "attributive Adjektive",
-        link: "/grammar/themes/attributive-adjektive",
-      },
-      {
-        name: "Deklinationsarten",
-        link: "/grammar/themes/adjektivdeklination",
-      },
-      {
-        name: "Vergleiche, Komparation und Graduierung",
-        link: "/grammar/themes/adjektivkomparation",
-      },
-      {
-        name: "die Rektion der Adjektive",
-        link: "/grammar/themes/rektion-der-adjektive",
-      },
-      {
-        name: "die Wortbildung der Adjektive",
-        link: "/grammar/themes/wortbildung-der-adjektive",
-      },
-    ],
-  },
-  {
-    title: "Das Adverb",
-    subtopics: [
-      {
-        name: "hin und her",
-        link: "/grammar/themes/hin-und-her",
-      },
-      {
-        name: "Pronominaladverbien",
-        link: "/grammar/themes/pronominaladverbien",
-      },
-      {
-        name: "Konjunktionaladverbien",
-        link: "/grammar/themes/konjunktionaladverbien",
-      },
-      {
-        name: "die Unterscheidung zu anderen Wortarten (Konjunktion, prädikatives Attribut, Modalwort, Partikel)",
-        link: "/grammar/themes/unterscheidung-zu-anderen-wortarten",
-      },
-    ],
-  },
-  {
-    title: "Das Artikelwort",
-    subtopics: [
-      {
-        name: "Formen von Artikelwörtern",
-        link: "/grammar/themes/artikelwörter",
-      },
-      {
-        name: "der Gebrauch von bestimmtem, unbestimmtem und Nullartikel",
-        link: "/grammar/themes/gebrauch-von-bestimmtem-unbestimmtem-und-nullartikel",
-      },
-      {
-        name: "der Gebrauch anderer Artikelwörter",
-        link: "/grammar/themes/gebrauch-anderer-artikelwörter",
-      },
-    ],
-  },
-  {
-    title: "Das Pronomen",
-    subtopics: [
-      {
-        name: "das Personalpronomen",
-        link: "/grammar/themes/personalpronomen",
-      },
-      {
-        name: "das Demonstrativpronomen",
-        link: "/grammar/themes/demonstrativpronomen",
-      },
-      {
-        name: "das Possessivpronomen",
-        link: "/grammar/themes/possessivpronomen",
-      },
-      {
-        name: "das Relativpronomen",
-        link: "/grammar/themes/relativpronomen",
-      },
-      {
-        name: "das Pronomen es",
-        link: "/grammar/themes/pronomen-es",
-      },
-    ],
-  },
-  {
-    title: "Das Substantiv",
-    subtopics: [
-      {
-        name: "Genuszuordnung",
-        link: "/grammar/themes/genuszuordnung",
-      },
-      {
-        name: "Pluralbildung",
-        link: "/grammar/themes/pluralbildung-der-substantive",
-      },
-      {
-        name: "die Kasusformen und ihre Bildung: Nominativ, Akkusativ, Dativ, Genitiv",
-        link: "/grammar/themes/kasusformen-und-ihre-bildung",
-      },
-      {
-        name: "besondere Namen (geographische, Nationalitäten usw.)",
-        link: "/grammar/themes/besondere-namen",
-      },
-      {
-        name: "Homonyme",
-        link: "/grammar/themes/homonyme",
-      },
-    ],
-  },
-  {
-    title: "Das Verb",
-    subtopics: [
-      { name: "die Tempora", link: "/grammar/themes/tempora" },
-      { name: "das Perfekt", link: "/grammar/themes/perfekt" },
-      { name: "Partizip II", link: "/grammar/themes/partizip_ii" },
-      { name: "das Präsens", link: "/grammar/themes/prasens" },
-      { name: "das Präteritum", link: "/grammar/themes/prateritum" },
-      { name: "das Plusquamperfekt", link: "/grammar/themes/plusquamperfekt" },
-      { name: "das Futur I und II", link: "/grammar/themes/futur" },
-      { name: "der Numerus", link: "/grammar/themes/numerus" },
-      { name: "die Konjugation", link: "/grammar/themes/konjugation" },
-      { name: "schwache Verben", link: "/grammar/themes/schwache-verben" },
-      {
-        name: "starke und unregelmäßige Verben",
-        link: "/grammar/themes/starke-und-unregelmasige-verben",
-      },
-      { name: "Hilfsverben", link: "/grammar/themes/hilfsverben" },
-      {
-        name: "die Kategorien des Verbs",
-        link: "/grammar/themes/kategorien-des-verbs",
-      },
-      { name: "die Formenbildung", link: "/grammar/themes/formenbildung" },
-      {
-        name: "trennbare Verben",
-        link: "/grammar/themes/zusammengesetzte-verben",
-      },
-      {
-        name: "Modalverben und subjektive Modalität",
-        link: "/grammar/themes/modalverben-und-subjektive-modalitat",
-      },
-      {
-        name: "objektive Modalität",
-        link: "/grammar/themes/objektive-modalitat",
-      },
-      { name: "reflexive Verben", link: "/grammar/themes/reflexive-verben" },
-      { name: "der Modus", link: "/grammar/themes/modus" },
-      {
-        name: "der Konjunktiv I (=Konjunktiv Präsens)",
-        link: "/grammar/themes/konjunktiv_i",
-      },
-      {
-        name: "der Konjunktiv II (=Konjunktiv Präteritum)",
-        link: "/grammar/themes/konjunktiv_ii",
-      },
-      { name: "die würde-Form", link: "/grammar/themes/konditionalsatze" },
-      { name: "der Imperativ", link: "/grammar/themes/imperativ" },
-      { name: "das Genus Verbi", link: "/grammar/themes/genus-verbi" },
-      { name: "das Passiv", link: "/grammar/themes/passiv" },
-      {
-        name: "Passiv-Ersatzformen (Paraphrasen)",
-        link: "/grammar/themes/passiv-ersatzformen",
-      },
-      {
-        name: "die Rektion der Verben",
-        link: "/grammar/themes/rektion-der-verben",
-      },
-      {
-        name: "mit reinem Kasus: Verben mit dem Dativ, Verben mit dem Akkusativ, Verben mit dem Genitiv, Verben mit dem Nominativ",
-        link: "/grammar/themes/mit-reinem-kasus",
-      },
-      {
-        name: "mit Präpositionalkasus",
-        link: "/grammar/themes/mit-prapositionalkasus",
-      },
-      { name: "Infinitivformen", link: "/grammar/themes/infinitivformen" },
-      {
-        name: "das Funktionsverbgefüge",
-        link: "/grammar/themes/funktionsverbgefüge",
-      },
-    ],
-  },
-  {
-    title: "Die Präposition",
-    subtopics: [
-      { name: "mit Nominativ", link: "/grammar/themes/nominativ" },
-      { name: "mit Akkusativ", link: "/grammar/themes/akkusativ" },
-      { name: "mit Dativ", link: "/grammar/themes/dativ" },
-      { name: "mit Genitiv", link: "/grammar/themes/genitiv" },
-      { name: "Wechselpräpositionen", link: "/grammar/themes/prapositionen" },
-      {
-        name: "Lokalpräpositionen",
-        link: "/grammar/themes/lokalprapositionen",
-      },
-    ],
-  },
-  {
-    title: "Die Syntax",
-    subtopics: [
-      {
-        name: "Konjunktionalsätze",
-        link: "/grammar/themes/konjunktionalsatze",
-      },
-      {
-        name: "Konditionalsätze (real/irreal mit Konjunktiv II und würde)",
-        link: "/grammar/themes/konditionalsatze",
-      },
-      { name: "Kausalsätze", link: "/grammar/themes/kausalsatze" },
-      { name: "Konsekutivsätze", link: "/grammar/themes/konsekutivsatze" },
-      { name: "Konzessivsätze", link: "/grammar/themes/konzessivsatze" },
-      { name: "Lokalsätze", link: "/grammar/themes/lokalsatze" },
-      {
-        name: "Temporalsätze (mit Chronologie in Prozessbeschreibungen)",
-        link: "/grammar/themes/temporalsatze",
-      },
-      {
-        name: "indirekte Fragesätze",
-        link: "/grammar/themes/indirekte-fragesatze",
-      },
-      { name: "Relativsätze", link: "/grammar/themes/relativsatze" },
-      { name: "die Satzklammer", link: "/grammar/themes/satzklammer" },
-      { name: "uneingeleitete Nebensätze", link: "/grammar/themes/nebensatze" },
-      {
-        name: "Infinitivkonstruktionen",
-        link: "/grammar/themes/infinitivkonstruktionen",
-      },
-      {
-        name: "Konjunktionen und Konjunktionaladverbien",
-        link: "/grammar/themes/konjunktionalsatze",
-      },
-      { name: "die Satzperiode", link: "/grammar/themes/satzperiode" },
-    ],
-  },
-];
-
 export default function ThemesPage() {
-  const [grammar, setGrammar] = useState(initialGrammarTopics.map(() => false));
+  const [grammar, setGrammar] = useState([]);
+  const [topics, setTopics] = useState([]);
+
+  useEffect(() => {
+    const fetchTopics = async () => {
+      try {
+        const response = await fetch("/api/grammar-topics");
+        const data = await response.json();
+        setTopics(data);
+        setGrammar(data.map(() => false));
+      } catch (error) {
+        console.error("Error fetching topics:", error);
+      }
+    };
+
+    fetchTopics();
+  }, []);
 
   const toggleShowMore = (event, index) => {
     setGrammar(grammar.map((show, i) => (i === index ? !show : show)));
@@ -261,7 +34,7 @@ export default function ThemesPage() {
       <h1>Themen der Grammatik</h1>
 
       <div className="lessons-container">
-        {initialGrammarTopics.map((topic, i) => (
+        {topics.map((topic, i) => (
           <div className="flex-parent-element" key={`${topic.title}-${i}`}>
             <div className="flex-child-element">
               <h2>{topic.title}</h2>