133 lines
3.9 KiB
TypeScript
Executable File
133 lines
3.9 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { useState } from "react";
|
|
|
|
type ResourceSection = {
|
|
title: string;
|
|
level: number;
|
|
};
|
|
|
|
type ResourceLink = {
|
|
id: string;
|
|
title: string;
|
|
url: string;
|
|
category: string;
|
|
status: string;
|
|
createdAt: string;
|
|
};
|
|
|
|
interface ResourceLinkCaptureProps {
|
|
date: string;
|
|
}
|
|
|
|
export function ResourceLinkCapture({ date }: ResourceLinkCaptureProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const [title, setTitle] = useState("");
|
|
const [url, setUrl] = useState("");
|
|
const [category, setCategory] = useState("Interesting things to read up:");
|
|
const qc = useQueryClient();
|
|
|
|
const { data } = useQuery({
|
|
queryKey: ["resource-links", "capture"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/resource-links?status=inbox&includeSections=1");
|
|
if (!res.ok) throw new Error("Failed to load resource links");
|
|
return res.json() as Promise<{ links: ResourceLink[]; sections: ResourceSection[] }>;
|
|
},
|
|
enabled: open,
|
|
staleTime: 60_000,
|
|
});
|
|
|
|
const sections = data?.sections?.length
|
|
? data.sections
|
|
: [{ title: "Interesting things to read up:", level: 1 }];
|
|
|
|
const save = useMutation({
|
|
mutationFn: async () => {
|
|
const res = await fetch("/api/resource-links", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ date, title, url, category }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data.error ?? "Failed to save link");
|
|
}
|
|
return res.json();
|
|
},
|
|
onSuccess: () => {
|
|
setTitle("");
|
|
setUrl("");
|
|
qc.invalidateQueries({ queryKey: ["resource-links"] });
|
|
},
|
|
});
|
|
|
|
if (!open) {
|
|
return (
|
|
<button type="button" className="retro-btn text-xs w-full" onClick={() => setOpen(true)}>
|
|
Capture resource link
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="retro-window border border-[var(--warm-grey)]/30">
|
|
<div className="retro-titlebar text-sm">Resource Inbox</div>
|
|
<div className="p-3 space-y-2 text-sm">
|
|
<input
|
|
className="retro-input w-full text-xs"
|
|
placeholder="Title"
|
|
value={title}
|
|
onChange={(event) => setTitle(event.target.value)}
|
|
/>
|
|
<input
|
|
className="retro-input w-full text-xs"
|
|
placeholder="https://..."
|
|
value={url}
|
|
onChange={(event) => setUrl(event.target.value)}
|
|
/>
|
|
<select
|
|
className="retro-window-inset w-full p-1 text-xs"
|
|
value={category}
|
|
onChange={(event) => setCategory(event.target.value)}
|
|
>
|
|
{sections.map((section) => (
|
|
<option key={section.title} value={section.title}>
|
|
{section.title}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{save.error && (
|
|
<p className="text-xs text-[var(--muted-rose)]">{save.error.message}</p>
|
|
)}
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
className="retro-btn retro-btn-primary text-xs flex-1"
|
|
disabled={save.isPending || !title.trim() || !url.trim()}
|
|
onClick={() => save.mutate()}
|
|
>
|
|
{save.isPending ? "Saving..." : "Save link"}
|
|
</button>
|
|
<button type="button" className="retro-btn text-xs" onClick={() => setOpen(false)}>
|
|
Close
|
|
</button>
|
|
</div>
|
|
{data?.links?.length ? (
|
|
<div className="pt-2 border-t border-[var(--warm-grey)]/25">
|
|
<p className="text-xs font-bold text-[var(--warm-grey)] mb-1">Inbox</p>
|
|
<ul className="space-y-1">
|
|
{data.links.slice(0, 4).map((link) => (
|
|
<li key={link.id} className="text-xs truncate">
|
|
{link.title}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|