feat: enhance journal viewer with delete and summarize entry functionality, improve error handling, and update styles

kentcdodds · kentcdodds · commit ac058ada7e65 · 2025-08-22T16:35:51.000-06:00
diff --git a/exercises/99.final/99.solution/app/routes/ui/journal-viewer.tsx b/exercises/99.final/99.solution/app/routes/ui/journal-viewer.tsx
@@ -1,10 +1,19 @@
+import { invariant } from '@epic-web/invariant'
 import { useTransition } from 'react'
 import {
 	ErrorBoundary,
 	useErrorBoundary,
 	type FallbackProps,
 } from 'react-error-boundary'
-import { useMcpUiInit, navigateToLink } from '#app/utils/mcp.ts'
+import { useRevalidator } from 'react-router'
+import { z } from 'zod'
+import {
+	useMcpUiInit,
+	navigateToLink,
+	callTool,
+	sendPrompt,
+} from '#app/utils/mcp.ts'
+import { useDoubleCheck } from '#app/utils/misc.ts'
 import { type Route } from './+types/journal-viewer.tsx'
 
 export async function loader({ context }: Route.LoaderArgs) {
@@ -18,7 +27,7 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 	useMcpUiInit()
 
 	return (
-		<div className="bg-background min-h-screen p-4">
+		<div className="bg-background max-h-[800px] overflow-y-auto p-4">
 			<div className="mx-auto max-w-4xl">
 				<div className="bg-card mb-6 rounded-xl p-6 shadow-lg">
 					<h1 className="text-foreground mb-2 text-3xl font-bold">
@@ -68,10 +77,12 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 											</span>
 										</div>
 
-										<div className="mt-4">
+										<div className="mt-4 flex gap-2">
 											<button className="text-primary text-sm font-medium hover:underline">
 												View Details
 											</button>
+											<SummarizeEntryButton entry={entry} />
+											<DeleteEntryButton entry={entry} />
 										</div>
 									</div>
 								</div>
@@ -96,10 +107,10 @@ function XPostLinkError({ error, resetErrorBoundary }: FallbackProps) {
 	return (
 		<div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border p-3">
 			<p className="text-sm font-medium">Failed to post on X</p>
-			<p className="text-xs text-destructive/80">{error.message}</p>
+			<p className="text-destructive/80 text-xs">{error.message}</p>
 			<button
 				onClick={resetErrorBoundary}
-				className="mt-2 text-xs text-destructive hover:underline cursor-pointer"
+				className="text-destructive mt-2 cursor-pointer text-xs hover:underline"
 			>
 				Try again
 			</button>
@@ -128,12 +139,161 @@ function XPostLinkImpl({ entryCount }: { entryCount: number }) {
 		<button
 			onClick={handlePostOnX}
 			disabled={isPending}
-			className="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors flex items-center gap-2 cursor-pointer"
+			className="flex cursor-pointer items-center gap-2 rounded-lg bg-black px-4 py-2 text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:bg-gray-400"
 		>
-			<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+			<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 				<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
 			</svg>
 			{isPending ? 'Posting...' : 'Post'}
 		</button>
 	)
 }
+
+function DeleteEntryButton({
+	entry,
+}: {
+	entry: { id: number; title: string }
+}) {
+	return (
+		<ErrorBoundary FallbackComponent={DeleteEntryError}>
+			<DeleteEntryButtonImpl entry={entry} />
+		</ErrorBoundary>
+	)
+}
+
+function DeleteEntryError({ error, resetErrorBoundary }: FallbackProps) {
+	return (
+		<div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border p-3">
+			<p className="text-sm font-medium">Failed to delete entry</p>
+			<p className="text-destructive/80 text-xs">{error.message}</p>
+			<button
+				onClick={resetErrorBoundary}
+				className="text-destructive mt-2 cursor-pointer text-xs hover:underline"
+			>
+				Try again
+			</button>
+		</div>
+	)
+}
+
+function DeleteEntryButtonImpl({
+	entry,
+}: {
+	entry: { id: number; title: string }
+}) {
+	const [isPending, startTransition] = useTransition()
+	const { doubleCheck, getButtonProps } = useDoubleCheck()
+	const { showBoundary } = useErrorBoundary()
+	const revalidator = useRevalidator()
+
+	const handleDelete = () => {
+		startTransition(async () => {
+			try {
+				await callTool('delete_entry', { id: entry.id })
+				await revalidator.revalidate()
+			} catch (err) {
+				showBoundary(err)
+			}
+		})
+	}
+
+	return (
+		<button
+			{...getButtonProps({
+				onClick: doubleCheck ? handleDelete : undefined,
+				disabled: isPending,
+				className: `text-sm font-medium px-3 py-1.5 rounded-md border transition-colors ${
+					doubleCheck
+						? 'bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90'
+						: 'text-destructive border-destructive/20 hover:bg-destructive/10 hover:border-destructive/40'
+				} ${isPending ? 'opacity-50 cursor-not-allowed' : ''}`,
+			})}
+		>
+			{isPending ? 'Deleting...' : doubleCheck ? `Confirm?` : 'Delete'}
+		</button>
+	)
+}
+
+function SummarizeEntryButton({
+	entry,
+}: {
+	entry: { id: number; title: string }
+}) {
+	return (
+		<ErrorBoundary FallbackComponent={SummarizeEntryError}>
+			<SummarizeEntryButtonImpl entry={entry} />
+		</ErrorBoundary>
+	)
+}
+
+function SummarizeEntryError({ error, resetErrorBoundary }: FallbackProps) {
+	return (
+		<div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border p-3">
+			<p className="text-sm font-medium">Failed to summarize entry</p>
+			<p className="text-destructive/80 text-xs">{error.message}</p>
+			<button
+				onClick={resetErrorBoundary}
+				className="text-destructive mt-2 cursor-pointer text-xs hover:underline"
+			>
+				Try again
+			</button>
+		</div>
+	)
+}
+
+function SummarizeEntryButtonImpl({
+	entry,
+}: {
+	entry: { id: number; title: string }
+}) {
+	const [isPending, startTransition] = useTransition()
+	const { showBoundary } = useErrorBoundary()
+
+	const handleSummarize = () => {
+		startTransition(async () => {
+			try {
+				// Get the full entry content first
+				const fullEntry = await callTool('get_entry', { id: entry.id })
+				console.log({ fullEntry })
+				invariant(fullEntry, 'Failed to retrieve entry content')
+				const entrySchema = z.object({
+					title: z.string(),
+					content: z.string(),
+					mood: z.string().optional(),
+					location: z.string().optional(),
+					weather: z.string().optional(),
+					tags: z
+						.array(z.object({ id: z.number(), name: z.string() }))
+						.optional(),
+				})
+				const parsedEntry = entrySchema.parse(fullEntry)
+
+				// Create a prompt requesting a summary
+				const prompt = `Please provide a concise summary of this journal entry:
+
+Title: ${parsedEntry.title}
+Content: ${parsedEntry.content}
+Mood: ${parsedEntry.mood || 'Not specified'}
+Location: ${parsedEntry.location || 'Not specified'}
+Weather: ${parsedEntry.weather || 'Not specified'}
+Tags: ${parsedEntry.tags?.map((t: { name: string }) => t.name).join(', ') || 'None'}
+
+Please provide a brief, insightful summary of this entry.`
+
+				await sendPrompt(prompt)
+			} catch (err) {
+				showBoundary(err)
+			}
+		})
+	}
+
+	return (
+		<button
+			onClick={handleSummarize}
+			disabled={isPending}
+			className="text-primary text-sm font-medium hover:underline disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{isPending ? 'Summarizing...' : 'Summarize'}
+		</button>
+	)
+}
diff --git a/exercises/99.final/99.solution/app/utils/mcp.ts b/exercises/99.final/99.solution/app/utils/mcp.ts
@@ -62,7 +62,7 @@ export function useFormSubmissionCapability() {
 	return canUseOnSubmit
 }
 
-function createMcpMessageHandler<T>(
+function createMcpMessageHandler<T extends unknown>(
 	type: string,
 	payload: Record<string, unknown>,
 	signal?: AbortSignal,
@@ -99,24 +99,24 @@ function createMcpMessageHandler<T>(
 	})
 }
 
-export function callTool(
+export function callTool<ReturnType extends unknown>(
 	toolName: string,
 	params: any,
 	signal?: AbortSignal,
-): Promise<any> {
+): Promise<ReturnType> {
 	return createMcpMessageHandler('tool', { toolName, params }, signal)
 }
 
-export function sendPrompt(
+export function sendPrompt<ReturnType extends unknown>(
 	prompt: string,
 	signal?: AbortSignal,
-): Promise<void> {
+): Promise<ReturnType> {
 	return createMcpMessageHandler('prompt', { prompt }, signal)
 }
 
-export function navigateToLink(
+export function navigateToLink<ReturnType extends unknown>(
 	url: string,
 	signal?: AbortSignal,
-): Promise<void> {
+): Promise<ReturnType> {
 	return createMcpMessageHandler('link', { url }, signal)
 }
diff --git a/exercises/99.final/99.solution/app/utils/misc.ts b/exercises/99.final/99.solution/app/utils/misc.ts
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 export function getErrorMessage(error: unknown) {
 	if (typeof error === 'string') return error
 	if (
@@ -11,3 +13,51 @@ export function getErrorMessage(error: unknown) {
 	console.error('Unable to get error message for error', error)
 	return 'Unknown Error'
 }
+
+function callAll<Args extends Array<unknown>>(
+	...fns: Array<((...args: Args) => unknown) | undefined>
+) {
+	return (...args: Args) => fns.forEach((fn) => fn?.(...args))
+}
+
+/**
+ * Use this hook with a button and it will make it so the first click sets a
+ * `doubleCheck` state to true, and the second click will actually trigger the
+ * `onClick` handler. This allows you to have a button that can be like a
+ * "are you sure?" experience for the user before doing destructive operations.
+ */
+export function useDoubleCheck() {
+	const [doubleCheck, setDoubleCheck] = useState(false)
+
+	function getButtonProps(
+		props?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+	) {
+		const onBlur: React.ButtonHTMLAttributes<HTMLButtonElement>['onBlur'] =
+			() => setDoubleCheck(false)
+
+		const onClick: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick'] =
+			doubleCheck
+				? undefined
+				: (e) => {
+						e.preventDefault()
+						setDoubleCheck(true)
+					}
+
+		const onKeyUp: React.ButtonHTMLAttributes<HTMLButtonElement>['onKeyUp'] = (
+			e,
+		) => {
+			if (e.key === 'Escape') {
+				setDoubleCheck(false)
+			}
+		}
+
+		return {
+			...props,
+			onBlur: callAll(onBlur, props?.onBlur),
+			onClick: callAll(onClick, props?.onClick),
+			onKeyUp: callAll(onKeyUp, props?.onKeyUp),
+		}
+	}
+
+	return { doubleCheck, getButtonProps }
+}
diff --git a/exercises/99.final/99.solution/worker/mcp/tools.ts b/exercises/99.final/99.solution/worker/mcp/tools.ts
@@ -77,7 +77,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 						uri: `ui://view-journal/${Date.now()}`,
 						content: {
 							type: 'externalUrl',
-							iframeUrl: `${agent.props.baseUrl}/journal`,
+							iframeUrl: `${agent.props.baseUrl}/ui/journal-viewer`,
 						},
 						encoding: 'text',
 					}),
diff --git a/exercises/99.final/99.solution/worker/mcp/ui.ts b/exercises/99.final/99.solution/worker/mcp/ui.ts
@@ -11,10 +11,10 @@ export async function getTagViewUI(db: DBClient, tagId: number) {
 			<title>Epic Me</title>
 			<style>
 				* { margin: 0; padding: 0; box-sizing: border-box; }
-				body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; background-color: #f8fafc; }
+				body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: oklch(25% 0.05 60); background-color: oklch(98% 0.02 60); }
 				.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
-				.title { font-size: 2rem; font-weight: 700; color: #1e293b; margin-bottom: 2rem; text-align: center; }
-				.description { text-align: center; color: #64748b; }
+				.title { font-size: 2rem; font-weight: 700; color: oklch(25% 0.05 60); margin-bottom: 2rem; text-align: center; }
+				.description { text-align: center; color: oklch(45% 0.06 60); }
 			</style>
 		</head>
 		<body>
@@ -35,13 +35,13 @@ export async function getTagViewUI(db: DBClient, tagId: number) {
 		<title>Epic Me</title>
 		<style>
 			* { margin: 0; padding: 0; box-sizing: border-box; }
-			body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; background-color: #f8fafc; }
+			body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: oklch(25% 0.05 60); background-color: oklch(98% 0.02 60); }
 			.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
-			.title { font-size: 2rem; font-weight: 700; color: #1e293b; margin-bottom: 2rem; text-align: center; }
-			.description { text-align: center; color: #64748b; }
+			.title { font-size: 2rem; font-weight: 700; color: oklch(25% 0.05 60); margin-bottom: 2rem; text-align: center; }
+			.description { text-align: center; color: oklch(45% 0.06 60); }
 			.error-state { text-align: center; padding: 4rem 2rem; }
-			.error-state h1 { margin: 1rem 0 2rem; color: #1e293b; }
-			.error-icon { color: #ef4444; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; }
+			.error-state h1 { margin: 1rem 0 2rem; color: oklch(25% 0.05 60); }
+			.error-icon { color: oklch(60% 0.22 25); width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; }
 			.error-icon svg { width: 100%; height: 100%; }
 		</style>
 	</head>
