add timeline pkg to flutter
This commit is contained in:
176
apps/web/src/components/flutter-view.tsx
Normal file
176
apps/web/src/components/flutter-view.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
__zendegi__?: {
|
||||
getState: () => string;
|
||||
onEvent: (json: string) => void;
|
||||
updateState?: (json: string) => void;
|
||||
};
|
||||
_flutter?: {
|
||||
buildConfig?: unknown;
|
||||
loader: {
|
||||
load: (config?: {
|
||||
config?: {
|
||||
entrypointBaseUrl?: string;
|
||||
assetBase?: string;
|
||||
};
|
||||
onEntrypointLoaded?: (engineInitializer: {
|
||||
initializeEngine: (config: {
|
||||
hostElement: HTMLElement;
|
||||
assetBase?: string;
|
||||
}) => Promise<{ runApp: () => void }>;
|
||||
}) => Promise<void>;
|
||||
}) => Promise<void>;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
type FlutterViewProps = {
|
||||
state: Record<string, unknown>;
|
||||
onEvent: (event: { type: string; payload?: Record<string, unknown> }) => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function FlutterView({
|
||||
state,
|
||||
onEvent,
|
||||
className,
|
||||
}: FlutterViewProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [status, setStatus] = useState<"loading" | "ready" | "error">(
|
||||
"loading"
|
||||
);
|
||||
const stateRef = useRef(state);
|
||||
stateRef.current = state;
|
||||
|
||||
const onEventRef = useRef(onEvent);
|
||||
onEventRef.current = onEvent;
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
let pollingInterval: ReturnType<typeof setInterval> | undefined;
|
||||
let pollingTimeout: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
window.__zendegi__ = {
|
||||
getState: () => JSON.stringify(stateRef.current),
|
||||
onEvent: (json: string) => {
|
||||
const event = JSON.parse(json) as {
|
||||
type: string;
|
||||
payload?: Record<string, unknown>;
|
||||
};
|
||||
onEventRef.current(event);
|
||||
},
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
// Load flutter.js if not already loaded
|
||||
if (!window._flutter) {
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
if (document.querySelector('script[src="/flutter/flutter.js"]')) {
|
||||
// Script tag exists but hasn't finished — wait for _flutter to appear
|
||||
pollingTimeout = setTimeout(() => {
|
||||
clearInterval(pollingInterval);
|
||||
reject(
|
||||
new Error("Timed out waiting for flutter.js to initialize")
|
||||
);
|
||||
}, 10_000);
|
||||
pollingInterval = setInterval(() => {
|
||||
if (window._flutter) {
|
||||
clearInterval(pollingInterval);
|
||||
clearTimeout(pollingTimeout);
|
||||
resolve();
|
||||
}
|
||||
}, 50);
|
||||
return;
|
||||
}
|
||||
const script = document.createElement("script");
|
||||
script.src = "/flutter/flutter.js";
|
||||
script.defer = true;
|
||||
script.onload = () => resolve();
|
||||
script.onerror = () => reject(new Error("Failed to load flutter.js"));
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch and set buildConfig so load() works (supports wasm)
|
||||
if (!window._flutter!.buildConfig) {
|
||||
const res = await fetch("/flutter/build_config.json");
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to fetch build config: ${res.status}`);
|
||||
}
|
||||
window._flutter!.buildConfig = await res.json();
|
||||
}
|
||||
|
||||
try {
|
||||
await window._flutter!.loader.load({
|
||||
config: {
|
||||
entrypointBaseUrl: "/flutter/",
|
||||
assetBase: "/flutter/",
|
||||
},
|
||||
onEntrypointLoaded: async (engineInitializer) => {
|
||||
const appRunner = await engineInitializer.initializeEngine({
|
||||
hostElement: container,
|
||||
assetBase: "/flutter/",
|
||||
});
|
||||
appRunner.runApp();
|
||||
setStatus("ready");
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error(
|
||||
`Flutter engine initialization failed: ${error instanceof Error ? error.message : error}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
init().catch(() => setStatus("error"));
|
||||
|
||||
return () => {
|
||||
clearInterval(pollingInterval);
|
||||
clearTimeout(pollingTimeout);
|
||||
container.replaceChildren();
|
||||
delete (window as Partial<Window>).__zendegi__;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
window.__zendegi__?.updateState?.(JSON.stringify(state));
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<div className={className} style={{ height: "100%", position: "relative" }}>
|
||||
{status === "loading" && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
Loading Flutter...
|
||||
</div>
|
||||
)}
|
||||
{status === "error" && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "red",
|
||||
}}
|
||||
>
|
||||
Failed to load Flutter view
|
||||
</div>
|
||||
)}
|
||||
<div ref={containerRef} style={{ width: "100%", height: "100%" }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { timelineQueryOptions } from "@/functions/get-timeline";
|
||||
import GroupFormDrawer from "@/components/group-form-drawer";
|
||||
import ItemFormDrawer from "@/components/item-form-drawer";
|
||||
import { FlutterView } from "@/components/flutter-view";
|
||||
|
||||
export const Route = createFileRoute("/timeline/$timelineId")({
|
||||
loader: async ({ context, params }) => {
|
||||
@@ -17,48 +19,54 @@ function RouteComponent() {
|
||||
const { timelineId } = Route.useParams();
|
||||
const timelineQuery = useSuspenseQuery(timelineQueryOptions(timelineId));
|
||||
const timeline = timelineQuery.data;
|
||||
const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
|
||||
|
||||
const flutterState = useMemo(
|
||||
() => ({
|
||||
timeline: {
|
||||
id: timeline.id,
|
||||
title: timeline.title,
|
||||
groups: timeline.groups.map((group) => ({
|
||||
id: group.id,
|
||||
title: group.title,
|
||||
sortOrder: group.sortOrder,
|
||||
items: group.items.map((item) => ({
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
start: item.start,
|
||||
end: item.end,
|
||||
})),
|
||||
})),
|
||||
},
|
||||
selectedItemId,
|
||||
}),
|
||||
[timeline, selectedItemId]
|
||||
);
|
||||
|
||||
const handleEvent = useCallback(
|
||||
(event: { type: string; payload?: Record<string, unknown> }) => {
|
||||
switch (event.type) {
|
||||
case "item_selected":
|
||||
setSelectedItemId((event.payload?.itemId as string) ?? null);
|
||||
break;
|
||||
case "item_deselected":
|
||||
setSelectedItemId(null);
|
||||
break;
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-4 py-6 space-y-6">
|
||||
<h1 className="text-3xl font-serif font-bold">{timeline.title}</h1>
|
||||
<div className="flex h-screen flex-col px-4 py-6">
|
||||
<h1 className="text-3xl font-serif font-bold mb-6">{timeline.title}</h1>
|
||||
|
||||
{timeline.groups.length === 0 && (
|
||||
<p className="text-muted-foreground">
|
||||
No groups yet. Add a group to start building your timeline.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
{timeline.groups.map((group) => (
|
||||
<div key={group.id} className="border border-border rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">{group.title}</h2>
|
||||
<ItemFormDrawer timelineGroupId={group.id} timelineId={timelineId} />
|
||||
</div>
|
||||
|
||||
{group.items.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">No items in this group yet.</p>
|
||||
)}
|
||||
|
||||
<ul className="space-y-2">
|
||||
{group.items.map((item) => (
|
||||
<li key={item.id} className="border border-border rounded p-3">
|
||||
<div className="font-medium">{item.title}</div>
|
||||
{item.description && (
|
||||
<p className="text-sm text-muted-foreground">{item.description}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{new Date(item.start).toLocaleDateString()}
|
||||
{item.end && ` — ${new Date(item.end).toLocaleDateString()}`}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<GroupFormDrawer timelineId={timelineId} />
|
||||
<FlutterView
|
||||
state={flutterState}
|
||||
onEvent={handleEvent}
|
||||
className="min-h-0 flex-1 rounded-lg overflow-hidden"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user