Refactor relay form

frontend/src/pages/admin/AdminRelayEdit.tsx

@@ -1,19 +1,9 @@
 import { A, useNavigate, useParams } from "@solidjs/router"
 import { Show, createEffect, createResource, createSignal } from "solid-js"
 import { adminGetRelay, adminUpdateRelay } from "../../lib/api"
-
-const PLANS = ["free", "basic", "growth"] as const
-type PlanId = (typeof PLANS)[number]
-
-function slugify(s: string) {
-  return s
-    .toLowerCase()
-    .trim()
-    .normalize("NFD")
-    .replace(/[\u0300-\u036f]/g, "")
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-}
+import RelayForm from "../../components/RelayForm"
+import { RELAY_PLAN_IDS, type RelayPlanId } from "../../lib/relayPlans"
+import { slugify } from "../../lib/slugify"
 
 export default function AdminRelayEdit() {
   const navigate = useNavigate()
@@ -25,7 +15,7 @@ export default function AdminRelayEdit() {
   const [subdomain, setSubdomain] = createSignal("")
   const [icon, setIcon] = createSignal("")
   const [description, setDescription] = createSignal("")
-  const [plan, setPlan] = createSignal<PlanId>("free")
+  const [plan, setPlan] = createSignal<RelayPlanId>("free")
   const [error, setError] = createSignal("")
   const [submitting, setSubmitting] = createSignal(false)
 
@@ -36,7 +26,7 @@ export default function AdminRelayEdit() {
     setSubdomain(data.subdomain)
     setIcon(data.icon)
     setDescription(data.description)
-    setPlan(PLANS.includes(data.plan as PlanId) ? (data.plan as PlanId) : "free")
+    setPlan(RELAY_PLAN_IDS.includes(data.plan as RelayPlanId) ? (data.plan as RelayPlanId) : "free")
   })
 
   async function handleSubmit(e: Event) {
@@ -74,71 +64,24 @@ export default function AdminRelayEdit() {
       </Show>
 
       <Show when={relay() && !relay.loading}>
-        <form onSubmit={handleSubmit} class="space-y-4">
-          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
-            <input
-              value={name()}
-              onInput={e => setName(e.currentTarget.value)}
-              required
-              class="w-full border border-gray-300 rounded-lg px-3 py-2"
-            />
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
-            <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
-              <input
-                value={subdomain()}
-                onInput={e => setSubdomain(e.currentTarget.value)}
-                required
-                class="flex-1 px-3 py-2"
-              />
-              <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-l border-gray-300">.spaces.coracle.social</span>
-            </div>
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
-            <input
-              type="url"
-              value={icon()}
-              onInput={e => setIcon(e.currentTarget.value)}
-              class="w-full border border-gray-300 rounded-lg px-3 py-2"
-            />
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
-            <textarea
-              value={description()}
-              onInput={e => setDescription(e.currentTarget.value)}
-              rows={3}
-              class="w-full border border-gray-300 rounded-lg px-3 py-2"
-            />
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-2">Plan</label>
-            <div class="flex gap-2">
-              {PLANS.map(p => (
-                <button
-                  type="button"
-                  class={`rounded-lg border px-3 py-2 text-sm capitalize ${plan() === p ? "border-blue-600 text-blue-700" : "border-gray-300 text-gray-700"}`}
-                  onClick={() => setPlan(p)}
-                >
-                  {p}
-                </button>
-              ))}
-            </div>
-          </div>
-          <Show when={error()}>
-            <p class="text-sm text-red-600">{error()}</p>
-          </Show>
-          <button
-            type="submit"
-            disabled={submitting()}
-            class="w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50"
-          >
-            {submitting() ? "Saving..." : "Save Changes"}
-          </button>
-        </form>
+        <RelayForm
+          name={name()}
+          setName={setName}
+          subdomain={subdomain()}
+          setSubdomain={setSubdomain}
+          icon={icon()}
+          setIcon={setIcon}
+          description={description()}
+          setDescription={setDescription}
+          plan={plan()}
+          setPlan={setPlan}
+          plans={RELAY_PLAN_IDS}
+          onSubmit={handleSubmit}
+          submitting={submitting()}
+          error={error()}
+          submitLabel="Save Changes"
+          submittingLabel="Saving..."
+        />
       </Show>
     </div>
   )