79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
// SecretRow.tsx
|
|
// Displays a single secret with discovered checkbox and text.
|
|
import type { Secret, Session } from "@/lib/types";
|
|
import { pb } from "@/lib/pocketbase";
|
|
import { useState } from "react";
|
|
|
|
/**
|
|
* Renders a secret row with a discovered checkbox and secret text.
|
|
* Handles updating the discovered state and discoveredIn relationship.
|
|
*/
|
|
export const SecretRow = ({
|
|
secret,
|
|
session,
|
|
}: {
|
|
secret: Secret;
|
|
session?: Session;
|
|
}) => {
|
|
const [checked, setChecked] = useState(
|
|
!!(secret.data as any)?.secret?.discovered,
|
|
);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const newChecked = e.target.checked;
|
|
setLoading(true);
|
|
setChecked(newChecked);
|
|
try {
|
|
await pb.collection("documents").update(secret.id, {
|
|
data: {
|
|
...secret.data,
|
|
secret: {
|
|
...(secret.data as any).secret,
|
|
discovered: newChecked,
|
|
},
|
|
},
|
|
});
|
|
if (session || !newChecked) {
|
|
// If the session exists or the element is being unchecked, remove any
|
|
// existing discoveredIn relationship
|
|
const rels = await pb.collection("relationships").getList(1, 1, {
|
|
filter: `primary = "${secret.id}" && type = "discoveredIn"`,
|
|
});
|
|
if (rels.items.length > 0) {
|
|
await pb.collection("relationships").delete(rels.items[0].id);
|
|
}
|
|
}
|
|
if (session) {
|
|
if (newChecked) {
|
|
await pb.collection("relationships").create({
|
|
primary: secret.id,
|
|
secondary: [session.id],
|
|
type: "discoveredIn",
|
|
});
|
|
}
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={handleChange}
|
|
className="accent-emerald-500 w-5 h-5"
|
|
aria-label="Discovered"
|
|
disabled={loading}
|
|
/>
|
|
<span>
|
|
{(secret.data as any)?.secret?.text || (
|
|
<span className="italic text-slate-400">(No secret text)</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|