Carlos Florêncio
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useAppStore, useAppStoreApi } from "@/components/state-provider";
|
|
import { getTaskPlan } from "@/lib/api/domains/plan-api";
|
|
|
|
type LazyPlanPreviewProps = {
|
|
taskId: string | null;
|
|
};
|
|
|
|
export function LazyPlanPreview({ taskId }: LazyPlanPreviewProps) {
|
|
const plan = useAppStore((state) => (taskId ? (state.taskPlans.byTaskId[taskId] ?? null) : null));
|
|
const loaded = useAppStore((state) =>
|
|
taskId ? (state.taskPlans.loadedByTaskId[taskId] ?? false) : false,
|
|
);
|
|
const loading = useAppStore((state) =>
|
|
taskId ? (state.taskPlans.loadingByTaskId[taskId] ?? false) : false,
|
|
);
|
|
|
|
const storeApi = useAppStoreApi();
|
|
|
|
useEffect(() => {
|
|
if (!taskId || loaded || loading) return;
|
|
|
|
const { setTaskPlanLoading } = storeApi.getState();
|
|
setTaskPlanLoading(taskId, true);
|
|
|
|
getTaskPlan(taskId)
|
|
.then((result) => {
|
|
storeApi.getState().setTaskPlan(taskId, result);
|
|
})
|
|
.catch(() => {
|
|
storeApi.getState().setTaskPlanLoading(taskId, false);
|
|
});
|
|
}, [taskId, loaded, loading, storeApi]);
|
|
|
|
if (!taskId) {
|
|
return <div className="text-xs text-muted-foreground">No task selected</div>;
|
|
}
|
|
|
|
if (loading || !loaded) {
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<div className="text-muted-foreground text-xs font-medium">Plan</div>
|
|
<div className="h-3 w-3/4 bg-muted animate-pulse rounded" />
|
|
<div className="h-3 w-1/2 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!plan?.content) {
|
|
return <div className="text-xs text-muted-foreground">Plan is empty</div>;
|
|
}
|
|
|
|
const preview = plan.content.length > 2000 ? plan.content.slice(0, 2000) + "..." : plan.content;
|
|
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<div className="text-muted-foreground text-xs font-medium">Plan</div>
|
|
<pre className="text-[10px] leading-tight font-mono whitespace-pre-wrap break-all">
|
|
{preview}
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|