Add settings page with contacts CRUD

src/__tests__/contacts.test.ts

@@ -0,0 +1,96 @@
+import { describe, test, expect, vi, beforeEach } from "vitest"
+
+// Mock next/cache
+vi.mock("next/cache", () => ({
+  revalidatePath: vi.fn(),
+}))
+
+// Mock next/navigation
+const mockRedirect = vi.fn()
+vi.mock("next/navigation", () => ({
+  redirect: (url: string) => {
+    mockRedirect(url)
+    throw new Error(`NEXT_REDIRECT:${url}`)
+  },
+}))
+
+// Mock Supabase server client
+const mockFrom = vi.fn()
+const mockGetUser = vi.fn()
+
+vi.mock("@/lib/supabase/server", () => ({
+  createClient: () =>
+    Promise.resolve({
+      from: mockFrom,
+      auth: { getUser: mockGetUser },
+    }),
+}))
+
+import { addContact, deleteContact } from "@/app/settings/actions"
+
+describe("addContact action", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test("redirects unauthenticated users to login", async () => {
+    mockGetUser.mockResolvedValue({ data: { user: null } })
+
+    const formData = new FormData()
+    formData.set("email", "test@example.com")
+
+    await expect(addContact(formData)).rejects.toThrow("NEXT_REDIRECT:/login")
+  })
+
+  test("inserts contact for authenticated users", async () => {
+    mockGetUser.mockResolvedValue({
+      data: { user: { id: "user-1" } },
+    })
+
+    const mockInsert = vi.fn().mockReturnValue({ error: null })
+    mockFrom.mockReturnValue({ insert: mockInsert })
+
+    const formData = new FormData()
+    formData.set("email", "test@example.com")
+
+    await addContact(formData)
+    expect(mockFrom).toHaveBeenCalledWith("contacts")
+    expect(mockInsert).toHaveBeenCalledWith({ email: "test@example.com" })
+  })
+
+  test("does nothing if email is empty", async () => {
+    mockGetUser.mockResolvedValue({
+      data: { user: { id: "user-1" } },
+    })
+
+    const formData = new FormData()
+    await addContact(formData)
+    expect(mockFrom).not.toHaveBeenCalled()
+  })
+})
+
+describe("deleteContact action", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test("redirects unauthenticated users to login", async () => {
+    mockGetUser.mockResolvedValue({ data: { user: null } })
+
+    await expect(deleteContact("contact-1")).rejects.toThrow("NEXT_REDIRECT:/login")
+  })
+
+  test("deletes contact for authenticated users", async () => {
+    mockGetUser.mockResolvedValue({
+      data: { user: { id: "user-1" } },
+    })
+
+    const mockEq = vi.fn().mockReturnValue({ error: null })
+    const mockDelete = vi.fn().mockReturnValue({ eq: mockEq })
+    mockFrom.mockReturnValue({ delete: mockDelete })
+
+    await deleteContact("contact-1")
+    expect(mockFrom).toHaveBeenCalledWith("contacts")
+    expect(mockEq).toHaveBeenCalledWith("id", "contact-1")
+  })
+})

src/app/settings/actions.ts

@@ -0,0 +1,32 @@
+"use server"
+
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+import { createClient } from "@/lib/supabase/server"
+
+export async function addContact(formData: FormData) {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) redirect("/login")
+
+  const email = formData.get("email") as string
+  if (!email) return
+
+  await supabase.from("contacts").insert({ email })
+  revalidatePath("/settings")
+}
+
+export async function deleteContact(contactId: string) {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) redirect("/login")
+
+  await supabase.from("contacts").delete().eq("id", contactId)
+  revalidatePath("/settings")
+}

src/app/settings/page.tsx

@@ -0,0 +1,108 @@
+import { redirect } from "next/navigation"
+import { createClient } from "@/lib/supabase/server"
+import type { Contact } from "@/lib/supabase/types"
+import { addContact, deleteContact } from "./actions"
+import Link from "next/link"
+
+export const revalidate = 0
+
+export default async function SettingsPage() {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) redirect("/login")
+
+  const { data: contacts } = await supabase
+    .from("contacts")
+    .select("*")
+    .order("created_at")
+
+  const typedContacts = (contacts ?? []) as Contact[]
+
+  return (
+    <main className="max-w-[720px] mx-auto" style={{ padding: "32px 24px 64px" }}>
+      <div className="mb-7">
+        <Link
+          href="/"
+          className="text-sm no-underline"
+          style={{ color: "#C4453C" }}
+        >
+          &larr; Back
+        </Link>
+      </div>
+
+      <div
+        className="rounded mb-6"
+        style={{
+          backgroundColor: "#FFFFFF",
+          border: "1px solid #E8E4DF",
+          padding: "28px",
+        }}
+      >
+        <h2 className="text-xl font-bold mb-1.5" style={{ color: "#1A1A1A" }}>
+          Contacts
+        </h2>
+        <p className="text-sm mb-5" style={{ color: "#5C5C5C" }}>
+          All contacts are notified by email when an incident is opened.
+        </p>
+
+        <ul className="list-none mb-5">
+          {typedContacts.length === 0 ? (
+            <li className="py-2.5 text-sm" style={{ color: "#5C5C5C" }}>
+              No contacts added yet.
+            </li>
+          ) : (
+            typedContacts.map((contact) => (
+              <li
+                key={contact.id}
+                className="flex items-center justify-between py-2.5"
+                style={{ borderBottom: "1px solid #F0EDEA" }}
+              >
+                <span className="text-[15px]" style={{ color: "#1A1A1A" }}>
+                  {contact.email}
+                </span>
+                <form action={deleteContact.bind(null, contact.id)}>
+                  <button
+                    type="submit"
+                    className="text-[13px] px-3 py-1 rounded cursor-pointer transition-colors"
+                    style={{
+                      backgroundColor: "transparent",
+                      color: "#5C5C5C",
+                      border: "1px solid #E8E4DF",
+                    }}
+                  >
+                    Remove
+                  </button>
+                </form>
+              </li>
+            ))
+          )}
+        </ul>
+
+        <form action={addContact} className="flex gap-2">
+          <input
+            type="email"
+            name="email"
+            placeholder="email@example.com"
+            required
+            className="flex-1 text-sm px-3 py-2 rounded outline-none transition-colors"
+            style={{
+              border: "1px solid #E8E4DF",
+              backgroundColor: "#FFFFFF",
+              color: "#1A1A1A",
+            }}
+          />
+          <button
+            type="submit"
+            className="text-sm font-medium px-4 py-2 rounded cursor-pointer text-white"
+            style={{ backgroundColor: "#2C2C2C" }}
+          >
+            Add
+          </button>
+        </form>
+      </div>
+    </main>
+  )
+}