Simplified package structure and added edit icon

eirikhanasand · Feb 18, 2025 · 184dcdd · 184dcdd
1 parent c871a4a
commit 184dcdd
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 24 deletions.
diff --git a/ui/src/components/addPage.css b/ui/src/components/addPage.css
@@ -0,0 +1,8 @@
+.pencil-icon {
+    fill: var(--color-shallow);
+    transition: fill 0.2s ease-in-out;
+}
+
+.pencil-icon:hover {
+    fill: var(--color-bright);
+}
diff --git a/ui/src/components/addPage.tsx b/ui/src/components/addPage.tsx
@@ -1,8 +1,18 @@
 "use client"
 import addPackage from "@/utils/filtering/addPackage"
 import removePackage from "@/utils/filtering/removePackage"
-import { useState } from "react"
+import { SetStateAction, useState } from "react"
 import Trash from "./svg/trash"
+import Pencil from "./svg/pencil"
+import editPackage from "@/utils/filtering/editPackage"
+import "./addPage.css"
+
+type PackageProps = {
+    pkg: APIPackage
+    list: 'whitelist' | 'blacklist'
+    setPackages: (value: SetStateAction<APIPackage[]>) => void
+    packages: APIPackage[]
+}
 
 export default function AddPage({list, packages: serverPackages}: ClientPageProps) {
     const [packages, setPackages] = useState<APIPackage[]>([...serverPackages])
@@ -85,24 +95,51 @@ export default function AddPage({list, packages: serverPackages}: ClientPageProp
                 {packages.length === 0 ? (
                     <p className="text-foreground text-center">No {list === 'whitelist' ? "whitelisted" : "blacklisted"} packages yet.</p>
                 ) : (
-                    packages.map((pkg: APIPackage) => (
-                        <li key={pkg.name} className="flex flex-col bg-background p-4 my-2 rounded-md shadow-sm border border-blue-500">
-                            <div className="text-lg text-foreground flex justify-between">
-                                <h1 className="text-sm text-foreground font-semibold">{pkg.name} ({pkg.versions})</h1>
-                                <h1 className="text-sm text-foreground">{Array.isArray(pkg.repositories) && pkg.repositories.length ? pkg.repositories : "Global"}</h1>
-                            </div>
-                            <h1 className="text-sm text-foreground">{pkg.ecosystems}</h1>
-                            <h1 className="text-sm text-shallow italic mt-1">{Array.isArray(pkg.repositories) && pkg.repositories.length ? `"${pkg.comments}"` : ""}</h1>
-                            <button
-                                onClick={() => removePackage({name: pkg.name, setPackages, packages, list})}
-                                className="h-[20px] w-[20px] self-end"
-                            >
-                                <Trash fill="fill-shallow hover:fill-red-500" className="w-full h-full" />
-                            </button>
-                        </li>
-                    ))
+                    packages.map((pkg: APIPackage) => <Package 
+                        key={pkg.name}
+                        pkg={pkg}
+                        list={list}
+                        setPackages={setPackages}
+                        packages={packages}
+                    />)
                 )}
             </ul>
         </main>
     )
 }
+
+function Package({pkg, setPackages, packages, list}: PackageProps) {
+    return (
+        <li className="flex flex-col bg-background p-4 my-2 rounded-md shadow-sm border border-blue-500">
+            <div className="text-lg text-foreground flex justify-between">
+                <h1 className="text-sm text-foreground font-semibold">
+                    {pkg.name} ({pkg.versions})
+                </h1>
+                <h1 className="text-sm text-foreground">
+                    {Array.isArray(pkg.repositories) && pkg.repositories.length ? pkg.repositories : "Global"}
+                </h1>
+            </div>
+            <h1 className="text-sm text-foreground">{pkg.ecosystems}</h1>
+            <h1 className="text-sm text-shallow italic mt-1">
+                {Array.isArray(pkg.repositories) && pkg.repositories.length ? `"${pkg.comments}"` : ""}
+            </h1>
+            <div className="self-end">
+                <button
+                    onClick={() => editPackage({pkg, setPackages, packages, list})}
+                    className="h-[20px] w-[20px] self-end"
+                >
+                    <Pencil 
+                        fill="pencil-icon cursor-pointer" 
+                        className="pencil-icon max-w-[16px] max-h-[16px] mb-[1.7px]"
+                    />
+                </button>
+                <button
+                    onClick={() => removePackage({name: pkg.name, setPackages, packages, list})}
+                    className="h-[20px] w-[20px] self-end"
+                >
+                    <Trash fill="fill-shallow hover:fill-red-500 cursor-pointer" className="w-full h-full" />
+                </button>
+            </div>
+        </li>
+    )
+}
diff --git a/ui/src/components/svg/pencil.tsx b/ui/src/components/svg/pencil.tsx
@@ -0,0 +1,20 @@
+export default function Pencil({className, fill}: {className?: string, fill: string}) {
+    return (
+        <div className={className}>
+            <svg 
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512" 
+                className={fill}
+            >
+            <g>
+                <g>
+                    <path d="M403.914,0L54.044,349.871L0,512l162.128-54.044L512,108.086L403.914,0z M295.829,151.319l21.617,21.617L110.638,379.745
+                        l-21.617-21.617L295.829,151.319z M71.532,455.932l-15.463-15.463l18.015-54.043l51.491,51.491L71.532,455.932z M153.871,422.979
+                        l-21.617-21.617l206.809-206.809l21.617,21.617L153.871,422.979z M382.297,194.555l-64.852-64.852l21.617-21.617l64.852,64.852
+                        L382.297,194.555z M360.679,86.468l43.234-43.235l64.853,64.853l-43.235,43.234L360.679,86.468z"/>
+                </g>
+            </g>
+            </svg>
+        </div>
+    )
+}
diff --git a/ui/src/utils/filtering/editPackage.ts b/ui/src/utils/filtering/editPackage.ts
@@ -0,0 +1,20 @@
+import { SetStateAction } from "react"
+import putPackage from "./putPackage"
+
+type RemovePackageProps = {
+    pkg: APIPackage
+    setPackages: (value: SetStateAction<APIPackage[]>) => void
+    packages: APIPackage[]
+    list: 'whitelist' | 'blacklist'
+}
+
+export default async function editPackage({pkg, setPackages, packages, list}: RemovePackageProps) {
+    const response = await putPackage({list, pkg})
+
+    if (response === 500) {
+        alert("Failed to edit package. API error.")
+        return
+    }
+
+    setPackages(packages.filter((p) => p.name !== pkg.name))
+}
diff --git a/ui/src/utils/filtering/putPackage.ts b/ui/src/utils/filtering/putPackage.ts
@@ -2,20 +2,17 @@ import { API } from "@constants"
 
 type PutListProps = {
     list: 'whitelist' | 'blacklist'
-    name: string
-    oldVersion: string
-    newVersion: string
-    ecosystem: string
+    pkg: APIPackage
 }
 
-export default async function putPackage({list, name, oldVersion, newVersion, ecosystem}: PutListProps) {
+export default async function putPackage({list, pkg}: PutListProps) {
     try {
         const response = await fetch(`${API}/${list}`, {
             method: 'PUT',
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify({ecosystem, oldVersion, newVersion, name})
+            body: JSON.stringify({...pkg})
         })
 
         if (!response.ok) {

diff --git a/ui/src/utils/filtering/removePackage.ts b/ui/src/utils/filtering/removePackage.ts
@@ -12,7 +12,7 @@ export default async function removePackage({name, setPackages, packages, list}:
     const response = await deletePackage({list, name})
 
     if (response === 500) {
-        alert("Failed to add package. API error.")
+        alert("Failed to delete package. API error.")
         return
     }