Wonfidence

src/components/RegistryManager.tsx

@@ -0,0 +1,184 @@
+import { useState, useEffect } from "react";
+import type { RegistryItem } from "../lib/types";
+
+const RegistryManager = () => {
+  const [registryItems, setRegistryItems] = useState<RegistryItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [newItem, setNewItem] = useState({ name: "", link: "" });
+
+  useEffect(() => {
+    fetchRegistryItems();
+  }, []);
+
+  const fetchRegistryItems = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/registry");
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setRegistryItems(data);
+    } catch (e: any) {
+      setError(e.message);
+      console.error("Failed to fetch registry items:", e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddItem = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newItem.name.trim()) return;
+
+    try {
+      const response = await fetch("/api/registry", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(newItem),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to add item: ${response.statusText}`);
+      }
+
+      // Clear form and refresh list
+      setNewItem({ name: "", link: "" });
+      await fetchRegistryItems();
+    } catch (error: any) {
+      setError(error.message);
+      console.error("Error adding item:", error);
+    }
+  };
+
+  const handleDeleteItem = async (itemId: string) => {
+    if (!confirm("Are you sure you want to delete this item?")) return;
+
+    try {
+      const response = await fetch(`/api/registry/${itemId}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to delete item: ${response.statusText}`);
+      }
+
+      // Refresh the list after deletion
+      await fetchRegistryItems();
+    } catch (error: any) {
+      setError(error.message);
+      console.error("Error deleting item:", error);
+    }
+  };
+
+  if (loading) {
+    return <div className="text-center">Loading registry items...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500 text-center">Error: {error}</div>;
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">Registry Manager</h1>
+
+      {/* Add New Item Form */}
+      <form onSubmit={handleAddItem} className="mb-8">
+        <div className="card bg-base-100 shadow-xl">
+          <div className="card-body">
+            <h2 className="card-title">Add New Item</h2>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Item Name</span>
+              </label>
+              <input
+                type="text"
+                placeholder="Enter item name"
+                className="input input-bordered"
+                value={newItem.name}
+                onChange={(e) =>
+                  setNewItem({ ...newItem, name: e.target.value })
+                }
+                required
+              />
+            </div>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Item Link (optional)</span>
+              </label>
+              <input
+                type="url"
+                placeholder="Enter item link"
+                className="input input-bordered"
+                value={newItem.link}
+                onChange={(e) =>
+                  setNewItem({ ...newItem, link: e.target.value })
+                }
+              />
+            </div>
+            <div className="card-actions justify-end">
+              <button type="submit" className="btn btn-primary">
+                Add Item
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      {/* Registry Items List */}
+      <div className="overflow-x-auto">
+        <table className="table w-full">
+          <thead>
+            <tr>
+              <th>Item</th>
+              <th>Link</th>
+              <th>Status</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {registryItems.map((item) => (
+              <tr key={item.id}>
+                <td>{item.name}</td>
+                <td>
+                  {item.link && (
+                    <a
+                      href={item.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="link link-primary"
+                    >
+                      View
+                    </a>
+                  )}
+                </td>
+                <td>
+                  {item.taken ? (
+                    <span className="badge badge-success">Taken</span>
+                  ) : (
+                    <span className="badge badge-info">Available</span>
+                  )}
+                </td>
+                <td>
+                  <button
+                    className="btn btn-error btn-sm"
+                    onClick={() => handleDeleteItem(item.id)}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default RegistryManager;