Skip to content

Commit

Permalink
Revert "Optimize website json-editor page and components (#265)"
Browse files Browse the repository at this point in the history 
This reverts commit 10fe784.
  • Loading branch information
@BramSuurdje
BramSuurdje authored Nov 15, 2024
1 parent 10fe784 commit 6848136
Show file tree
Hide file tree
Showing 4 changed files with 242 additions and 271 deletions.
132 changes: 58 additions & 74 deletions frontend/src/app/json-editor/_components/Categories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { Category } from "@/lib/types";
import { cn } from "@/lib/utils";
import { z } from "zod";
import { ScriptSchema } from "../_schemas/schemas";
import { memo } from "react";

type Script = z.infer<typeof ScriptSchema>;

Expand All @@ -22,42 +21,7 @@ type CategoryProps = {
categories: Category[];
};

const CategoryTag = memo(({
category,
onRemove
}: {
category: Category;
onRemove: () => void;
}) => (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
{category.name}
<button
type="button"
className="ml-1 inline-flex text-blue-400 hover:text-blue-600"
onClick={onRemove}
>
<span className="sr-only">Remove</span>
<svg
className="h-3 w-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</span>
));

CategoryTag.displayName = 'CategoryTag';

function Categories({
export default function Categories({
script,
setScript,
categories,
Expand All @@ -76,44 +40,64 @@ function Categories({
});
};

const categoryMap = new Map(categories.map(c => [c.id, c]));

return (
<div>
<Label>
Category <span className="text-red-500">*</span>
</Label>
<Select onValueChange={(value) => addCategory(Number(value))}>
<SelectTrigger>
<SelectValue placeholder="Select a category" />
</SelectTrigger>
<SelectContent>
{categories.map((category) => (
<SelectItem key={category.id} value={category.id.toString()}>
{category.name}
</SelectItem>
))}
</SelectContent>
</Select>
<div
className={cn(
"flex flex-wrap gap-2",
script.categories.length !== 0 && "mt-2",
)}
>
{script.categories.map((categoryId) => {
const category = categoryMap.get(categoryId);
return category ? (
<CategoryTag
key={categoryId}
category={category}
onRemove={() => removeCategory(categoryId)}
/>
) : null;
})}
<>
<div>
<Label>
Category <span className="text-red-500">*</span>
</Label>
<Select onValueChange={(value) => addCategory(Number(value))}>
<SelectTrigger>
<SelectValue placeholder="Select a category" />
</SelectTrigger>
<SelectContent>
{categories.map((category) => (
<SelectItem key={category.id} value={category.id.toString()}>
{category.name}
</SelectItem>
))}
</SelectContent>
</Select>
<div
className={cn(
"flex flex-wrap gap-2",
script.categories.length !== 0 && "mt-2",
)}
>
{script.categories.map((categoryId) => {
const category = categories.find((c) => c.id === categoryId);
return category ? (
<span
key={categoryId}
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
>
{category.name}
<button
type="button"
className="ml-1 inline-flex text-blue-400 hover:text-blue-600"
onClick={() => removeCategory(categoryId)}
>
<span className="sr-only">Remove</span>
<svg
className="h-3 w-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</span>
) : null;
})}
</div>
</div>
</div>
</>
);
}

export default memo(Categories);
74 changes: 25 additions & 49 deletions frontend/src/app/json-editor/_components/InstallMethod.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { PlusCircle, Trash2 } from "lucide-react";
import { Input } from "@/components/ui/input";
import { z } from "zod";
import { InstallMethodSchema, ScriptSchema } from "../_schemas/schemas";
import { memo, useCallback } from "react";

type Script = z.infer<typeof ScriptSchema>;

Expand All @@ -21,13 +20,13 @@ type InstallMethodProps = {
setZodErrors: (zodErrors: z.ZodError | null) => void;
};

function InstallMethod({
export default function InstallMethod({
script,
setScript,
setIsValid,
setZodErrors,
}: InstallMethodProps) {
const addInstallMethod = useCallback(() => {
const addInstallMethod = () => {
setScript((prev) => {
const method = InstallMethodSchema.parse({
type: "default",
Expand All @@ -45,9 +44,9 @@ function InstallMethod({
install_methods: [...prev.install_methods, method],
};
});
}, [setScript]);
};

const updateInstallMethod = useCallback((
const updateInstallMethod = (
index: number,
key: keyof Script["install_methods"][number],
value: Script["install_methods"][number][keyof Script["install_methods"][number]],
Expand Down Expand Up @@ -83,35 +82,14 @@ function InstallMethod({
}
return updated;
});
}, [setScript, setIsValid, setZodErrors]);
};

const removeInstallMethod = useCallback((index: number) => {
const removeInstallMethod = (index: number) => {
setScript((prev) => ({
...prev,
install_methods: prev.install_methods.filter((_, i) => i !== index),
}));
}, [setScript]);

const ResourceInput = memo(({
placeholder,
value,
onChange,
type = "text"
}: {
placeholder: string;
value: string | number | null;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
type?: string;
}) => (
<Input
placeholder={placeholder}
type={type}
value={value || ""}
onChange={onChange}
/>
));

ResourceInput.displayName = 'ResourceInput';
};

return (
<>
Expand All @@ -131,33 +109,33 @@ function InstallMethod({
</SelectContent>
</Select>
<div className="flex gap-2">
<ResourceInput
<Input
placeholder="CPU in Cores"
type="number"
value={method.resources.cpu}
onChange={(e) =>
value={method.resources.cpu || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
updateInstallMethod(index, "resources", {
...method.resources,
cpu: e.target.value ? Number(e.target.value) : null,
})
}
/>
<ResourceInput
<Input
placeholder="RAM in MB"
type="number"
value={method.resources.ram}
onChange={(e) =>
value={method.resources.ram || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
updateInstallMethod(index, "resources", {
...method.resources,
ram: e.target.value ? Number(e.target.value) : null,
})
}
/>
<ResourceInput
placeholder="HDD in GB"
<Input
placeholder="HDD in GB"
type="number"
value={method.resources.hdd}
onChange={(e) =>
value={method.resources.hdd || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
updateInstallMethod(index, "resources", {
...method.resources,
hdd: e.target.value ? Number(e.target.value) : null,
Expand All @@ -166,21 +144,21 @@ function InstallMethod({
/>
</div>
<div className="flex gap-2">
<ResourceInput
<Input
placeholder="OS"
value={method.resources.os}
onChange={(e) =>
value={method.resources.os || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
updateInstallMethod(index, "resources", {
...method.resources,
os: e.target.value || null,
})
}
/>
<ResourceInput
<Input
placeholder="Version"
type="number"
value={method.resources.version}
onChange={(e) =>
value={method.resources.version || ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
updateInstallMethod(index, "resources", {
...method.resources,
version: e.target.value ? Number(e.target.value) : null,
Expand All @@ -190,7 +168,7 @@ function InstallMethod({
</div>
<Button
variant="destructive"
size="sm"
size={"sm"}
type="button"
onClick={() => removeInstallMethod(index)}
>
Expand All @@ -200,7 +178,7 @@ function InstallMethod({
))}
<Button
type="button"
size="sm"
size={"sm"}
disabled={script.install_methods.length >= 2}
onClick={addInstallMethod}
>
Expand All @@ -209,5 +187,3 @@ function InstallMethod({
</>
);
}

export default memo(InstallMethod);
Loading

0 comments on commit 6848136

Please sign in to comment.