Wonfidence

src/components/RSVP.tsx

@@ -63,13 +63,12 @@ const RSVPForm = () => {
         dietaryRestrictions: "",
       });
       setSuccess(true);
-    } catch (err) {
-      if (err.name === 'AbortError') {
+    } catch (err: any) {
+      if (err?.name === 'AbortError') {
         setError('Request timed out. Please try again.');
       } else {
-        setError(
-          err instanceof Error ? err.message : "Failed to submit RSVP. Please try again."
-        );
+        const errorMessage = (err instanceof Error && err.message) ? err.message : "Failed to submit RSVP. Please try again.";
+        setError(errorMessage);
       }
       console.error("Error submitting RSVP:", err);
     } finally {

src/components/RegistryList.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from "react";
+import type { RegistryItem } from "../lib/types";
+
+const RegistryList = () => {
+	const [registryItems, setRegistryItems] = useState<RegistryItem[]>([]);
+	const [claimedItems, setClaimedItems] = useState<Set<string>>(new Set());
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		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);
+			}
+		};
+
+		fetchRegistryItems();
+	}, []);
+
+	const handleCheckboxChange = (itemId: string) => {
+		const newClaimedItems = new Set(claimedItems);
+		if (newClaimedItems.has(itemId)) {
+			newClaimedItems.delete(itemId);
+		} else {
+			newClaimedItems.add(itemId);
+		}
+		setClaimedItems(newClaimedItems);
+	};
+
+	const handleSubmit = async () => {
+		// Prepare updates for claimed items
+		const updates = registryItems.filter((item) =>
+			claimedItems.has(item.id)
+		);
+
+		// Optimistically update the UI
+		const updatedRegistryItems = registryItems.map((item) => {
+			if (claimedItems.has(item.id)) {
+				return { ...item, taken: true };
+			}
+			return item;
+		});
+		setRegistryItems(updatedRegistryItems);
+		setClaimedItems(new Set()); // Clear claimed items after submission
+
+		try {
+			// Send updates to the server
+			for (const item of updates) {
+				const response = await fetch(`/api/registry/${item.id}`, {
+					method: "PUT",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({ taken: true }),
+				});
+
+				if (!response.ok) {
+					throw new Error(
+						`Failed to update item ${item.id}: ${response.statusText}`
+					);
+				}
+			}
+			alert("Thank you for claiming items!");
+		} catch (error: any) {
+			console.error("Error updating items:", error);
+			setError("Failed to update items. Please try again.");
+			setRegistryItems(registryItems);
+		}
+	};
+
+	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">Baby Registry</h1>
+			<div className="overflow-x-auto">
+				<table className="table w-full">
+					<thead>
+						<tr>
+							<th>Item</th>
+							<th>Link</th>
+							<th>Claim</th>
+						</tr>
+					</thead>
+					<tbody>
+						{registryItems.map((item) => (
+							<tr key={item.id} className={item.taken ? "opacity-50" : ""}>
+								<td>
+									{item.name}
+									{item.taken && (
+										<span className="badge badge-success ml-2">Taken</span>
+									)}
+								</td>
+								<td>
+									{item.link && (
+										<a
+											href={item.link}
+											target="_blank"
+											rel="noopener noreferrer"
+											className="link link-primary"
+										>
+											View
+										</a>
+									)}
+								</td>
+								<td>
+									{!item.taken && (
+										<input
+											type="checkbox"
+											className="checkbox"
+											checked={claimedItems.has(item.id)}
+											onChange={() => handleCheckboxChange(item.id)}
+										/>
+									)}
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+			<button
+				className="btn btn-primary mt-4"
+				onClick={handleSubmit}
+				disabled={claimedItems.size === 0}
+			>
+				Submit Claims
+			</button>
+		</div>
+	);
+};
+
+export default RegistryList;

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;

src/components/SignIn.tsx

@@ -2,9 +2,16 @@ import React, { useState } from "react";
 
 interface SignInProps {
   onSuccess?: () => void;
+  requiredRole?: "guest" | "admin";
 }
 
-const SignIn = ({ onSuccess }: SignInProps) => {
+interface ApiResponse {
+  success: boolean;
+  error?: string;
+  role?: string;
+}
+
+const SignIn = ({ onSuccess, requiredRole = "guest" }: SignInProps) => {
   const [code, setCode] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -15,32 +22,37 @@ const SignIn = ({ onSuccess }: SignInProps) => {
     setIsSubmitting(true);
 
     try {
+      // Clear existing authentication before attempting new sign-in
+      sessionStorage.removeItem("isAuthenticated");
+      sessionStorage.removeItem("role");
+
       const response = await fetch("/api/auth", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ code }),
+        body: JSON.stringify({ code, requiredRole }),
       });
 
-      const data = await response.json();
+      const data: ApiResponse = await response.json();
 
       if (!response.ok || !data.success) {
         throw new Error(data.error || "Invalid code");
       }
 
       sessionStorage.setItem("isAuthenticated", "true");
-      
-      // Dispatch custom event instead of calling callback
-      const event = new CustomEvent('auth-success', {
+      sessionStorage.setItem("role", data.role || "guest");
+
+      // Dispatch a custom event with the new role
+      const event = new CustomEvent("auth-success", {
         bubbles: true,
-        composed: true
+        composed: true,
+        detail: { role: data.role }
       });
       document.dispatchEvent(event);
-      
-      // Still call onSuccess if provided (for flexibility)
+
       onSuccess?.();
-    } catch (err) {
+    } catch (err: any) {
       setError(err instanceof Error ? err.message : "Authentication failed");
     } finally {
       setIsSubmitting(false);

src/components/SignOut.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+
+const SignOut = () => {
+	const [isVisible, setIsVisible] = useState(false);
+
+	useEffect(() => {
+		const isAuthenticated = sessionStorage.getItem("isAuthenticated") === "true";
+		setIsVisible(isAuthenticated);
+
+		const handleAuthChange = () => {
+			setIsVisible(sessionStorage.getItem("isAuthenticated") === "true");
+		};
+
+		document.addEventListener("auth-success", handleAuthChange);
+		return () => document.removeEventListener("auth-success", handleAuthChange);
+	}, []);
+
+	const handleSignOut = () => {
+		sessionStorage.removeItem("isAuthenticated");
+		sessionStorage.removeItem("role");
+		window.location.reload();
+	};
+
+	if (!isVisible) return null;
+
+	return (
+		<button onClick={handleSignOut} className="btn btn-secondary">
+			Sign Out
+		</button>
+	);
+};
+
+export default SignOut;