SVI/Proxmox
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove ScriptPage component and integrate its functionality into the Script page, updating loading and category fetching logic

Browse Source
This commit is contained in:
Bram Suurd
2024-11-03 21:20:33 +01:00
parent d29a66cee3
commit bab8c8ac6c
2 changed files with 86 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/app/scripts/_components/ScriptPage.tsx
View File

@@ -1,85 +0,0 @@
"use client";
import ScriptBrowser from "@/app/scripts/_components/ScriptBrowser";
import ScriptItem from "@/app/scripts/_components/ScriptItem";
import { Category } from "@/lib/types";
import { Loader2 } from "lucide-react";
import { useEffect, useState } from "react";
const sortCategories = (categories: Category[]): Category[] => {
return categories.sort((a: Category, b: Category) => {
if (
a.catagoryName === "Proxmox VE Tools" &&
b.catagoryName !== "Proxmox VE Tools"
) {
return -1;
} else if (
a.catagoryName !== "Proxmox VE Tools" &&
b.catagoryName === "Proxmox VE Tools"
) {
return 1;
} else {
return a.catagoryName.localeCompare(b.catagoryName);
}
});
};
export default function ScriptPage() {
const [links, setLinks] = useState<Category[]>([]);
const [selectedScript, setSelectedScript] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchCategories = async (): Promise<void> => {
try {
const response = await fetch("api/categories");
if (!response.ok) {
throw new Error("Failed to fetch categories");
}
const categories: Category[] = await response.json();
if (categories.length === 0) {
throw new Error("Empty response");
}
const sortedCategories = sortCategories(categories);
setLinks(sortedCategories);
setLoading(false);
} catch (error) {
console.error(error);
setLoading(false);
}
};
fetchCategories();
}, []);
if (loading) {
return (
<div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
<div className="space-y-2 text-center">
<Loader2 className="h-10 w-10 animate-spin" />
</div>
</div>
);
}
return (
<div className="mb-3">
<div className="mt-20 flex sm:px-4 xl:px-0">
<div className="hidden sm:flex">
<ScriptBrowser
items={links}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
<div className="mx-7 w-full sm:mx-0 sm:ml-7">
<ScriptItem
items={links}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
</div>
</div>
);
}

111
src/app/scripts/page.tsx
View File

@@ -1,37 +1,98 @@
// import { Metadata } from "next";
import ScriptPage from "./_components/ScriptPage";
"use client";
export const dynamic = "force-static";
// type Props = {
// searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
// };
import ScriptItem from "@/app/scripts/_components/ScriptItem";
import { Category } from "@/lib/types";
import { Loader2 } from "lucide-react";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import Sidebar from "./_components/Sidebar";
// export async function generateMetadata(props: Props): Promise<Metadata | null> {
// const searchParams = await props.searchParams;
// const scriptName = searchParams.id;
export default function Page() {
const [links, setLinks] = useState<Category[]>([]);
const [selectedScript, setSelectedScript] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
const searchParams = useSearchParams();
// if (!scriptName || typeof scriptName !== "string") {
// return null;
// }
useEffect(() => {
const fetchCategories = async (): Promise<void> => {
try {
const response = await fetch("api/categories");
if (!response.ok) {
throw new Error("Failed to fetch categories");
}
const categories: Category[] = await response.json();
if (categories.length === 0) {
throw new Error("Empty response");
}
const sortedCategories = sortCategories(categories);
setLinks(sortedCategories);
setLoading(false);
} catch (error) {
console.error(error);
setLoading(false);
}
};
fetchCategories();
}, []);
// return {
// title: scriptName + " | Proxmox VE Helper-Scripts",
// description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
useEffect(() => {
const id = searchParams.get("id");
if (id) {
setSelectedScript(id);
} else {
setSelectedScript(null);
}
}, [searchParams, setSelectedScript]);
// openGraph: {
// title: scriptName + " | Proxmox VE Helper-Scripts",
// description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
// url: `https://proxmoxve-scripts.com/scripts?id=${scriptName}`,
// },
// };
// }
const sortCategories = (categories: Category[]): Category[] => {
return categories.sort((a: Category, b: Category) => {
if (
a.catagoryName === "Proxmox VE Tools" &&
b.catagoryName !== "Proxmox VE Tools"
) {
return -1;
} else if (
a.catagoryName !== "Proxmox VE Tools" &&
b.catagoryName === "Proxmox VE Tools"
) {
return 1;
} else {
return a.catagoryName.localeCompare(b.catagoryName);
}
});
};
if (loading) {
return (
<div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
<div className="space-y-2 text-center">
<Loader2 className="h-10 w-10 animate-spin" />
</div>
</div>
);
}
export default function page() {
return (
<>
<ScriptPage />
</>
<div className="mb-3">
<div className="mt-20 flex sm:px-4 xl:px-0">
<div className="hidden sm:flex">
<Sidebar
items={links}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
<div className="mx-7 w-full sm:mx-0 sm:ml-7">
<ScriptItem
items={links}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
</div>
</div>
);
}