Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout (#371)

* Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout * Refactor DefaultPassword component to simplify credential handling and enhance code readability with map function * Refactor DefaultSettings component to improve resource display logic and enhance readability using a new ResourceDisplay subcomponent
2025-01-10 19:05:09 +00:00 · 2024-11-19 22:21:00 +01:00 · 2024-11-19 22:21:00 +01:00 · 6e71047570
commit 6e71047570
parent 9f80cec2d9
3 changed files with 104 additions and 118 deletions
--- a/frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx
@ -5,45 +5,53 @@ import { BookOpenText, Code, Globe } from "lucide-react";
 import Link from "next/link";

 const generateSourceUrl = (slug: string, type: string) => {
-  if (type === "ct") {
-    return `https://raw.githubusercontent.com/community-scripts/${basePath}/main/install/${slug}-install.sh`;
-  } else {
-    return `https://raw.githubusercontent.com/community-scripts/${basePath}/main/${type}/${slug}.sh`;
-  }
+  const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
+  return type === "ct"
+    ? `${baseUrl}/install/${slug}-install.sh`
+    : `${baseUrl}/${type}/${slug}.sh`;
 };

+interface ButtonLinkProps {
+  href: string;
+  icon: React.ReactNode;
+  text: string;
+}
+
+const ButtonLink = ({ href, icon, text }: ButtonLinkProps) => (
+  <Button variant="secondary" asChild>
+    <Link target="_blank" href={href}>
+      <span className="flex items-center gap-2">
+        {icon}
+        {text}
+      </span>
+    </Link>
+  </Button>
+);
+
 export default function Buttons({ item }: { item: Script }) {
+  const buttons = [
+    item.website && {
+      href: item.website,
+      icon: <Globe className="h-4 w-4" />,
+      text: "Website",
+    },
+    item.documentation && {
+      href: item.documentation,
+      icon: <BookOpenText className="h-4 w-4" />,
+      text: "Documentation",
+    },
+    {
+      href: generateSourceUrl(item.slug, item.type),
+      icon: <Code className="h-4 w-4" />,
+      text: "Source Code",
+    },
+  ].filter(Boolean) as ButtonLinkProps[];
+
  return (
    <div className="flex flex-wrap justify-end gap-2">
-      {item.website && (
-        <Button variant="secondary" asChild>
-          <Link target="_blank" href={item.website}>
-            <span className="flex items-center gap-2">
-              <Globe className="h-4 w-4" /> Website
-            </span>
-          </Link>
-        </Button>
-      )}
-      {item.documentation && (
-        <Button variant="secondary" asChild>
-          <Link target="_blank" href={item.documentation}>
-            <span className="flex items-center gap-2">
-              <BookOpenText className="h-4 w-4" />
-              Documentation
-            </span>
-          </Link>
-        </Button>
-      )}
-      {
-        <Button variant="secondary" asChild>
-          <Link target="_blank" href={generateSourceUrl(item.slug, item.type)}>
-            <span className="flex items-center gap-2">
-              <Code className="h-4 w-4" />
-              Source Code
-            </span>
-          </Link>
-        </Button>
-      }
+      {buttons.map((props, index) => (
+        <ButtonLink key={index} {...props} />
+      ))}
    </div>
  );
 }
--- a/frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx
@ -4,55 +4,39 @@ import { Separator } from "@/components/ui/separator";
 import { Script } from "@/lib/types";

 export default function DefaultPassword({ item }: { item: Script }) {
-  const hasDefaultLogin =
-    item.default_credentials.username && item.default_credentials.password;
+  const { username, password } = item.default_credentials;
+  const hasDefaultLogin = username && password;
+
+  if (!hasDefaultLogin) return null;
+
+  const copyCredential = (type: "username" | "password") => {
+    handleCopy(type, item.default_credentials[type] ?? "");
+  };

  return (
-    <div>
-      {hasDefaultLogin && (
-        <div className="mt-4 rounded-lg border bg-accent/50">
-          <div className="flex gap-3 px-4 py-2">
-            <h2 className="text-lg font-semibold">Default Login Credentials</h2>
+    <div className="mt-4 rounded-lg border bg-accent/50">
+      <div className="flex gap-3 px-4 py-2">
+        <h2 className="text-lg font-semibold">Default Login Credentials</h2>
+      </div>
+      <Separator className="w-full" />
+      <div className="flex flex-col gap-2 p-4">
+        <p className="mb-2 text-sm">
+          You can use the following credentials to login to the {item.name}{" "}
+          {item.type}.
+        </p>
+        {["username", "password"].map((type) => (
+          <div key={type} className="text-sm">
+            {type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
+            <Button
+              variant="secondary"
+              size="null"
+              onClick={() => copyCredential(type as "username" | "password")}
+            >
+              {item.default_credentials[type as "username" | "password"]}
+            </Button>
          </div>
-          <Separator className="w-full"></Separator>
-          <div className="flex flex-col gap-2 p-4">
-            <p className="mb-2 text-sm">
-              You can use the following credentials to login to the {""}
-              {item.name} {item.type}.
-            </p>
-            <div className="text-sm">
-              Username:{" "}
-              <Button
-                variant={"secondary"}
-                size={"null"}
-                onClick={() =>
-                  handleCopy(
-                    "username",
-                    item.default_credentials.username ?? "",
-                  )
-                }
-              >
-                {item.default_credentials.username}
-              </Button>
-            </div>
-            <div className="text-sm">
-              Password:{" "}
-              <Button
-                variant={"secondary"}
-                size={"null"}
-                onClick={() =>
-                  handleCopy(
-                    "password",
-                    item.default_credentials.password ?? "",
-                  )
-                }
-              >
-                {item.default_credentials.password}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
+        ))}
+      </div>
    </div>
  );
 }
--- a/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
@ -1,56 +1,50 @@
 import { Script } from "@/lib/types";

 export default function DefaultSettings({ item }: { item: Script }) {
+  const getDisplayValueFromRAM = (ram: number) =>
+    ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
+
+  const ResourceDisplay = ({
+    settings,
+    title,
+  }: {
+    settings: (typeof item.install_methods)[0];
+    title: string;
+  }) => {
+    const { cpu, ram, hdd } = settings.resources;
+    return (
+      <div>
+        <h2 className="text-md font-semibold">{title}</h2>
+        <p className="text-sm text-muted-foreground">CPU: {cpu}vCPU</p>
+        <p className="text-sm text-muted-foreground">
+          RAM: {getDisplayValueFromRAM(ram ?? 0)}
+        </p>
+        <p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
+      </div>
+    );
+  };
+
  const defaultSettings = item.install_methods.find(
    (method) => method.type === "default",
  );
-
-  const defaultSettingsAvailable =
-    defaultSettings?.resources.cpu ||
-    defaultSettings?.resources.ram ||
-    defaultSettings?.resources.hdd;
-
  const defaultAlpineSettings = item.install_methods.find(
    (method) => method.type === "alpine",
  );

-  const getDisplayValueFromRAM = (ram: number) => {
-    if (ram >= 1024) {
-      return (ram / 1024).toFixed(0) + "GB";
-    }
-    return ram + "MB";
-  };
+  const hasDefaultSettings =
+    defaultSettings?.resources &&
+    Object.values(defaultSettings.resources).some(Boolean);

  return (
    <>
-      {defaultSettingsAvailable && (
-        <div>
-          <h2 className="text-md font-semibold">Default settings</h2>
-          <p className="text-sm text-muted-foreground">
-            CPU: {defaultSettings?.resources.cpu}vCPU
-          </p>
-          <p className="text-sm text-muted-foreground">
-            RAM: {getDisplayValueFromRAM(defaultSettings?.resources.ram ?? 0)}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            HDD: {defaultSettings?.resources.hdd}GB
-          </p>
-        </div>
+      {hasDefaultSettings && (
+        <ResourceDisplay settings={defaultSettings} title="Default settings" />
      )}
      {defaultAlpineSettings && (
-        <div>
-          <h2 className="text-md font-semibold">Default Alpine settings</h2>
-          <p className="text-sm text-muted-foreground">
-            CPU: {defaultAlpineSettings?.resources.cpu}vCPU
-          </p>
-          <p className="text-sm text-muted-foreground">
-            RAM:{" "}
-            {getDisplayValueFromRAM(defaultAlpineSettings?.resources.ram ?? 0)}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            HDD: {defaultAlpineSettings?.resources.hdd}GB
-          </p>
-        </div>
+        <ResourceDisplay
+          settings={defaultAlpineSettings}
+          title="Default Alpine settings"
+        />
      )}
    </>
  );