Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 | 3x 3x 3x 3x 27x 27x 27x 27x 27x 4x 27x 2x 2x 2x 2x 2x 1x 1x 1x 1x 27x 1x 1x 1x 1x 1x 1x 27x 27x 10x 27x 27x 1x 5x 2x | "use client";
import { useState } from "react";
import { Button, buttonVariants, Card, Input } from "@/components/ui";
import type { SortResultShare } from "@/types";
import Link from "next/link";
interface SharePanelProps {
resultId: string;
initialShares: SortResultShare[];
}
// The API's `error` field is developer-facing (see src/server/api/http-errors.ts);
// what the person reads is these, in their own voice.
const CREATE_FAILED = "That link didn't come together just now. Nothing changed — try again whenever you like.";
const REVOKE_FAILED = "That link is still shared — we couldn't put it away just now. Try again in a moment.";
const UNDO_FAILED = "That link is still stopped — we couldn't bring it back just now. Try again in a moment.";
export function SharePanel({ resultId, initialShares }: SharePanelProps) {
const [shares, setShares] = useState(initialShares);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// The share we just stopped, kept so Undo can restore it. Persistent, never on a
// timer: a countdown would be exactly the pressure TONE forbids.
const [stopped, setStopped] = useState<SortResultShare | null>(null);
const setStatus = (shareId: string, status: SortResultShare["status"]) =>
setShares((prev) => prev.map((s) => (s.id === shareId ? { ...s, status } : s)));
// Revoking is a soft status flip, so the token survives — Undo restores the very link
// the person already sent, not a new one. Hence no "are you sure?": the action is
// reversible, and a modal bracing for a mistake is not this app's voice.
const handleStopSharing = async (shareId: string) => {
setError(null);
setStatus(shareId, "revoked");
try {
const response = await fetch(`/api/sort-results/${resultId}/shares/${shareId}`, {
method: "DELETE",
});
if (!response.ok) {
setStatus(shareId, "active");
setError(REVOKE_FAILED);
return;
}
setStopped(shares.find((s) => s.id === shareId) ?? null);
} catch {
setStatus(shareId, "active");
setError(REVOKE_FAILED);
}
};
const handleUndoStop = async (shareId: string) => {
setError(null);
try {
const response = await fetch(`/api/sort-results/${resultId}/shares/${shareId}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ status: "active" }),
});
Iif (!response.ok) {
setError(UNDO_FAILED);
return;
}
setStatus(shareId, "active");
setStopped(null);
} catch {
setError(UNDO_FAILED);
}
};
const handleCreateShare = async () => {
setLoading(true);
setError(null);
try {
const response = await fetch(`/api/sort-results/${resultId}/shares`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({}),
});
if (!response.ok) {
setError(CREATE_FAILED);
return;
}
const newShare = await response.json();
setShares((prev) => [...prev, newShare]);
} catch {
setError(CREATE_FAILED);
} finally {
setLoading(false);
}
};
const getShareUrl = (token: string) => {
return `${typeof window !== "undefined" ? window.location.origin : ""}/shared-results/${token}`;
};
// The server hands us every share for this result, revoked ones included. A revoked
// link is dead (viewSharedResult rejects a non-active status), so showing it with
// Copy/Preview would offer a link that 404s whoever it was sent to.
const activeShares = shares.filter((s) => s.status === "active");
return (
<div className="space-y-4">
{error && (
<Card padding="md" className="bg-error-soft border border-error-soft">
<p className="text-error-deep text-sm">{error}</p>
</Card>
)}
<Card padding="lg">
<div className="space-y-4">
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<h3 className="text-ink">Show someone what you love</h3>
<p className="text-sm text-ink-soft mt-1">
A link they can open straight away — no account, no signing in.
</p>
</div>
<Button onClick={handleCreateShare} disabled={loading} className="shrink-0 self-start">
{loading ? "Creating..." : "Create link"}
</Button>
</div>
{stopped && (
<div className="flex items-center justify-between gap-3 pt-4 border-t border-hairline">
<p className="text-sm text-ink-soft">That link is no longer shared.</p>
<Button variant="secondary" onClick={() => handleUndoStop(stopped.id)}>
Undo
</Button>
</div>
)}
{activeShares.length > 0 && (
<div className="space-y-3 pt-4 border-t border-hairline">
{activeShares.map((share) => (
<div key={share.id} className="flex flex-col gap-3 p-3 bg-glass border border-rim rounded-lg">
<div className="space-y-2">
<p className="text-xs font-medium text-ink-soft">Share link:</p>
<Input
type="text"
readOnly
value={getShareUrl(share.shareToken)}
className="text-xs"
/>
</div>
<div className="flex flex-wrap gap-2">
<Button
variant="secondary"
onClick={() => {
navigator.clipboard.writeText(getShareUrl(share.shareToken));
}}
>
Copy
</Button>
{/* Styled as a button, but a link is a link: a <button> inside
an <a> is a duplicate tab stop with an ambiguous role. */}
<Link
href={getShareUrl(share.shareToken)}
target="_blank"
rel="noopener noreferrer"
className={buttonVariants({ variant: "secondary" })}
>
Preview
</Link>
<Button
variant="danger"
onClick={() => handleStopSharing(share.id)}
>
Stop sharing
</Button>
</div>
{share.expiresAt && (
<p className="text-xs text-ink-soft">
Expires: {new Date(share.expiresAt).toLocaleDateString()}
</p>
)}
</div>
))}
</div>
)}
{activeShares.length === 0 && !stopped && (
<p className="text-sm text-ink-soft text-left sm:text-center py-4">
Nothing shared yet — whenever you'd like to, make a link.
</p>
)}
</div>
</Card>
</div>
);
}
|