Update page.tsx

frontend/src/app/category-view/page.tsx

@@ -3,68 +3,28 @@
 import React, { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Category, Script } from "@/lib/types";
+import { Category } from "@/lib/types";
 
 const CategoryView = () => {
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
 
   useEffect(() => {
-    const fetchCategoriesAndScripts = async () => {
+    const fetchCategories = async () => {
       try {
-        const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : ""; // Dynamischer Basis-Pfad
+        const response = await fetch("/api/categories");
-
+        if (!response.ok) {
-        // Kategorien laden
-        const categoriesResponse = await fetch(`${basePath}/json/metadata.json`);
-        if (!categoriesResponse.ok) {
           throw new Error("Failed to fetch categories");
         }
-        const metadata = await categoriesResponse.json();
+        const data = await response.json();
-        console.log("Raw metadata:", metadata); // Debugging
+        console.log("Fetched categories:", data); // Debugging
-
+        setCategories(data);
-        if (!metadata.categories) {
-          throw new Error("Invalid metadata structure: categories missing");
-        }
-
-        const categories = metadata.categories.map((category: Category) => ({
-          ...category,
-          scripts: [],
-        }));
-
-        // Skripte laden
-        const scriptsResponse = await fetch(`${basePath}/json`);
-        if (!scriptsResponse.ok) {
-          throw new Error("Failed to fetch scripts");
-        }
-
-        const scriptsList = await scriptsResponse.json();
-        const scripts: Script[] = await Promise.all(
-          scriptsList
-            .filter((file: string) => file.endsWith(".json") && file !== "metadata.json")
-            .map(async (file: string) => {
-              const scriptResponse = await fetch(`${basePath}/json/${file}`);
-              if (scriptResponse.ok) {
-                return await scriptResponse.json();
-              }
-              return null;
-            })
-        ).then((results) => results.filter((script) => script !== null));
-
-        // Kategorien und Skripte verknüpfen
-        categories.forEach((category: Category) => {
-          category.scripts = scripts.filter((script: Script) =>
-            script.categories.includes(category.id)
-          );
-        });
-
-        console.log("Parsed categories with scripts:", categories); // Debugging
-        setCategories(categories);
       } catch (error) {
-        console.error("Error fetching categories and scripts:", error);
+        console.error("Error fetching categories:", error);
       }
     };
 
-    fetchCategoriesAndScripts();
+    fetchCategories();
   }, []);
 
   const handleCategoryClick = (category: Category) => {
@@ -78,7 +38,7 @@ const CategoryView = () => {
   return (
     <div className="p-4">
       {categories.length === 0 && (
-        <p className="text-center text-gray-500">No categories available. Please check the JSON file.</p>
+        <p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p>
       )}
       {selectedCategory ? (
         <div>
@@ -89,7 +49,7 @@ const CategoryView = () => {
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
             {selectedCategory.scripts
               .sort((a, b) => a.name.localeCompare(b.name))
-              .map((script: Script) => (
+              .map((script) => (
                 <Card key={script.name}>
                   <CardContent>
                     <h3 className="text-lg font-medium">{script.name}</h3>