From a3979001fe4c4e9ec439349b8d0da8aa7575a2b6 Mon Sep 17 00:00:00 2001 From: CanbiZ <47820557+MickLesk@users.noreply.github.com> Date: Thu, 23 Jan 2025 11:31:46 +0100 Subject: [PATCH] Update page.tsx --- frontend/src/app/category-view/page.tsx | 47 +++++++++++++------------ 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/frontend/src/app/category-view/page.tsx b/frontend/src/app/category-view/page.tsx index 5d8339a4..efb63296 100644 --- a/frontend/src/app/category-view/page.tsx +++ b/frontend/src/app/category-view/page.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useEffect, useState } from "react"; -import { Card, CardContent, CardHeader } from "@/components/ui/card"; +import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Category } from "@/lib/types"; @@ -12,20 +12,20 @@ const CategoryView = () => { const [selectedCategory, setSelectedCategory] = useState<Category | null>(null); useEffect(() => { - const fetchCategories = async () => { - try { - const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : ""; - const response = await fetch(`${basePath}/json/categories.json`); - if (!response.ok) { - throw new Error("Failed to fetch categories"); - } - const data = await response.json(); - console.log("Fetched categories:", data); // Debugging - setCategories(data); - } catch (error) { - console.error("Error fetching categories:", error); - } - }; + const fetchCategories = async () => { + try { + const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : ""; + const response = await fetch(`${basePath}/api/categories`); // Prüfe den Endpunkt + if (!response.ok) { + throw new Error("Failed to fetch categories"); + } + const data = await response.json(); + console.log("Fetched categories:", data); // Debugging + setCategories(data); + } catch (error) { + console.error("Error fetching categories:", error); + } + }; fetchCategories(); }, []); @@ -40,17 +40,18 @@ const CategoryView = () => { return ( <div className="p-4"> - {categories.length === 0 && ( - <p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p> - )} - {selectedCategory ? ( + {categories.length === 0 ? ( + <p className="text-center text-gray-500"> + No categories available. Please check the API endpoint. + </p> + ) : selectedCategory ? ( <div> <Button variant="default" onClick={handleBackClick} className="mb-4"> Back to Categories </Button> <h2 className="text-xl font-semibold mb-4">{selectedCategory.name}</h2> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> - {selectedCategory.scripts + {(selectedCategory.scripts || []) .sort((a, b) => a.name.localeCompare(b.name)) .map((script) => ( <Card key={script.name}> @@ -76,7 +77,7 @@ const CategoryView = () => { > <CardContent className="flex flex-col items-center"> <div className="flex flex-wrap justify-center gap-1 mb-2"> - {category.scripts && category.scripts.slice(0, 4).map((script, index) => ( + {(category.scripts || []).slice(0, 4).map((script, index) => ( <img key={index} src={script.logo || defaultLogo} @@ -87,7 +88,7 @@ const CategoryView = () => { </div> <h3 className="text-lg font-bold mb-1">{category.name}</h3> <p className="text-sm text-gray-500 text-center"> - {(category as any).description || "No description available."} + {category.description || "No description available."} </p> </CardContent> </Card> @@ -99,4 +100,4 @@ const CategoryView = () => { ); }; -export default CategoryView; \ No newline at end of file +export default CategoryView;