84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* LikeEmailToggle — settings control for aggregated "someone liked your post"
|
|
* emails. Reads the current preference and lets the user opt out (push +
|
|
* in-app like notifications are unaffected). Matches the other settings rows.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { notifications } from "@/lib/social";
|
|
|
|
export function LikeEmailToggle() {
|
|
const [enabled, setEnabled] = useState<boolean | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
notifications
|
|
.emailPrefs()
|
|
.then((r) => {
|
|
if (!cancelled) setEnabled(r.like_emails);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setEnabled(true); // default-on; toggle still works
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
async function toggle() {
|
|
if (enabled === null) return;
|
|
const next = !enabled;
|
|
setBusy(true);
|
|
try {
|
|
await notifications.setEmailPrefs(next);
|
|
setEnabled(next);
|
|
toast.success(next ? "Like emails turned on" : "Like emails turned off");
|
|
} catch {
|
|
toast.error("Could not update preference");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ul className="divide-y divide-border">
|
|
<li className="flex items-center justify-between gap-4 py-3">
|
|
<div className="min-w-0">
|
|
<span className="text-sm text-foreground">Like emails</span>
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
Get an email when someone likes your post (bundled — one email per
|
|
post). Push and in-app notifications stay on either way.
|
|
</p>
|
|
</div>
|
|
<div className="shrink-0">
|
|
{enabled === null ? (
|
|
<span className="text-xs text-muted-foreground">…</span>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
disabled={busy}
|
|
aria-pressed={enabled}
|
|
className={[
|
|
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:opacity-60",
|
|
enabled ? "bg-primary" : "bg-muted-foreground/30",
|
|
].join(" ")}
|
|
>
|
|
<span
|
|
className={[
|
|
"inline-block size-5 transform rounded-full bg-white shadow transition-transform",
|
|
enabled ? "translate-x-5" : "translate-x-0.5",
|
|
].join(" ")}
|
|
/>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
);
|
|
}
|