82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
// TreasureRow.tsx
|
|
// Displays a single treasure with discovered checkbox and text.
|
|
import { pb } from "@/lib/pocketbase";
|
|
import type { AnyDocument, Treasure } from "@/lib/types";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
|
|
/**
|
|
* Renders a treasure row with a discovered checkbox and treasure text.
|
|
* Handles updating the discovered state and discoveredIn relationship.
|
|
*/
|
|
export const TreasureToggleRow = ({
|
|
treasure,
|
|
root,
|
|
}: {
|
|
treasure: Treasure;
|
|
root?: AnyDocument;
|
|
}) => {
|
|
const [checked, setChecked] = useState(
|
|
!!(treasure.data as any)?.treasure?.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(treasure.id, {
|
|
data: {
|
|
...treasure.data,
|
|
treasure: {
|
|
...(treasure.data as any).treasure,
|
|
discovered: newChecked,
|
|
},
|
|
},
|
|
});
|
|
if (root || !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 = "${treasure.id}" && type = "discoveredIn"`,
|
|
});
|
|
if (rels.items.length > 0) {
|
|
await pb.collection("relationships").delete(rels.items[0].id);
|
|
}
|
|
}
|
|
if (root) {
|
|
if (newChecked) {
|
|
await pb.collection("relationships").create({
|
|
primary: treasure.id,
|
|
secondary: [root.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}
|
|
/>
|
|
<Link
|
|
to="/document/$documentId/$"
|
|
params={{ documentId: treasure.id }}
|
|
className="text-lg !no-underline text-slate-100 hover:underline hover:text-violet-400"
|
|
>
|
|
{treasure.data.text}
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|