From b17befec88ccd9cf5b0e627a92530089946513fe Mon Sep 17 00:00:00 2001 From: CanbiZ <47820557+MickLesk@users.noreply.github.com> Date: Mon, 27 Jan 2025 14:03:35 +0100 Subject: [PATCH] Update page.tsx --- frontend/src/app/category-view/page.tsx | 154 +++++++++++------------- 1 file changed, 67 insertions(+), 87 deletions(-) diff --git a/frontend/src/app/category-view/page.tsx b/frontend/src/app/category-view/page.tsx index 031a8271..37b70319 100644 --- a/frontend/src/app/category-view/page.tsx +++ b/frontend/src/app/category-view/page.tsx @@ -8,14 +8,12 @@ import { ChevronLeft, ChevronRight } from "lucide-react"; import { Category } from "@/lib/types"; const defaultLogo = "/default-logo.png"; // Fallback logo path - const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description const MAX_LOGOS = 5; // Max logos to display at once const CategoryView = () => { const [categories, setCategories] = useState([]); - const [selectedCategory, setSelectedCategory] = useState(null); - const [logoIndexes, setLogoIndexes] = useState>({}); // Track logo index for each category + const [selectedCategoryIndex, setSelectedCategoryIndex] = useState(null); const router = useRouter(); useEffect(() => { @@ -29,13 +27,6 @@ const CategoryView = () => { const data = await response.json(); console.log("Fetched categories:", data); // Debugging setCategories(data); - - // Initialize logo indexes for all categories - const initialIndexes = data.reduce((acc: Record, category: Category) => { - acc[category.name] = 0; - return acc; - }, {}); - setLogoIndexes(initialIndexes); } catch (error) { console.error("Error fetching categories:", error); } @@ -44,43 +35,47 @@ const CategoryView = () => { fetchCategories(); }, []); - const handleCategoryClick = (category: Category) => { - setSelectedCategory(category); + const handleCategoryClick = (index: number) => { + setSelectedCategoryIndex(index); }; const handleBackClick = () => { - setSelectedCategory(null); + setSelectedCategoryIndex(null); }; const handleScriptClick = (scriptSlug: string) => { router.push(`/scripts?id=${scriptSlug}`); }; + const navigateCategory = (direction: "prev" | "next") => { + if (selectedCategoryIndex !== null) { + const newIndex = + direction === "prev" + ? (selectedCategoryIndex - 1 + categories.length) % categories.length + : (selectedCategoryIndex + 1) % categories.length; + setSelectedCategoryIndex(newIndex); + } + }; + const truncateDescription = (text: string) => { return text.length > MAX_DESCRIPTION_LENGTH ? `${text.slice(0, MAX_DESCRIPTION_LENGTH)}...` : text; }; - const getVisibleLogos = (scripts: any[], categoryName: string) => { - const index = logoIndexes[categoryName] || 0; - return scripts.slice(index, index + MAX_LOGOS); - }; + const renderResources = (script: any) => { + const cpu = script.install_methods[0]?.resources.cpu; + const ram = script.install_methods[0]?.resources.ram; + const hdd = script.install_methods[0]?.resources.hdd; - const updateLogoIndex = (categoryName: string, direction: "prev" | "next", totalScripts: number) => { - setLogoIndexes((prev) => { - const currentIndex = prev[categoryName] || 0; - if (direction === "prev") { - return { ...prev, [categoryName]: Math.max(0, currentIndex - MAX_LOGOS) }; - } - if (direction === "next") { - return { - ...prev, - [categoryName]: Math.min(currentIndex + MAX_LOGOS, totalScripts - MAX_LOGOS), - }; - } - return prev; - }); + const resourceParts = []; + if (cpu) resourceParts.push(CPU: {cpu}vCPU); + if (ram) resourceParts.push(RAM: {ram}MB); + if (hdd) resourceParts.push(HDD: {hdd}GB); + + return resourceParts.length > 0 ? ( +
{resourceParts.reduce((prev, curr) => [prev, " | ", curr])}
+ ) : null; }; return ( @@ -88,14 +83,30 @@ const CategoryView = () => { {categories.length === 0 && (

No categories available. Please check the API endpoint.

)} - {selectedCategory ? ( + {selectedCategoryIndex !== null ? (
- -

{selectedCategory.name}

+ {/* Header with Navigation */} +
+ +

{categories[selectedCategoryIndex].name}

+ +
+ + {/* Scripts Grid */}
- {selectedCategory.scripts + {categories[selectedCategoryIndex].scripts .sort((a, b) => a.name.localeCompare(b.name)) .map((script) => ( {

Created at: {script.date_created || "No date available"}

-

+

{truncateDescription(script.description || "No description available.")}

-
- CPU: {script.install_methods[0]?.resources.cpu || "N/A"}vCPU |{" "} - RAM: {script.install_methods[0]?.resources.ram || "N/A"}MB |{" "} - HDD: {script.install_methods[0]?.resources.hdd || "N/A"}GB -
+ {renderResources(script)} ))} + + {/* Back to Categories Button */} +
+ +
) : (
+ {/* Categories Grid */}

Categories

@@ -139,56 +161,14 @@ const CategoryView = () => {

- {categories.map((category) => ( + {categories.map((category, index) => ( handleCategoryClick(category)} + onClick={() => handleCategoryClick(index)} className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6" >

{category.name}

-
- -
- {category.scripts && - getVisibleLogos(category.scripts, category.name).map((script, index) => ( - {script.name { - e.stopPropagation(); // Prevent card click - handleScriptClick(script.slug); - }} - className="h-8 w-8 object-contain cursor-pointer hover:scale-110 transition-transform" - /> - ))} -
- -

{(category as any).description || "No description available."}