102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useState } from "react";
|
||
import { Chrome, Loader2 } from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { notify } from "@/lib/notifications/store";
|
||
|
||
interface ChromeSessionSyncProps {
|
||
onSynced?: () => void;
|
||
}
|
||
|
||
export function ChromeSessionSync({ onSynced }: ChromeSessionSyncProps) {
|
||
const [extensionReady, setExtensionReady] = useState(false);
|
||
const [syncing, setSyncing] = useState(false);
|
||
const [activeAccountId, setActiveAccountId] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
fetch("/api/accounts")
|
||
.then((res) => res.json())
|
||
.then((data) => setActiveAccountId(data.activeAccountId ?? null))
|
||
.catch(() => undefined);
|
||
}, []);
|
||
|
||
const handleMessage = useCallback(
|
||
(event: MessageEvent) => {
|
||
if (event.source !== window) return;
|
||
|
||
if (event.data?.type === "HAIXUN_EXTENSION_READY") {
|
||
setExtensionReady(true);
|
||
return;
|
||
}
|
||
|
||
if (event.data?.type !== "HAIXUN_THREADS_SYNC_RESULT") return;
|
||
|
||
setSyncing(false);
|
||
const data = event.data as {
|
||
valid?: boolean;
|
||
message?: string;
|
||
};
|
||
|
||
notify({
|
||
type: data.valid ? "success" : "error",
|
||
title: data.valid ? "已同步到 server" : "同步失敗",
|
||
message: data.message,
|
||
});
|
||
|
||
if (data.valid) {
|
||
window.dispatchEvent(new CustomEvent("haixun:accounts-updated"));
|
||
onSynced?.();
|
||
}
|
||
},
|
||
[onSynced]
|
||
);
|
||
|
||
useEffect(() => {
|
||
window.addEventListener("message", handleMessage);
|
||
window.postMessage({ type: "HAIXUN_PING_EXTENSION" }, "*");
|
||
return () => window.removeEventListener("message", handleMessage);
|
||
}, [handleMessage]);
|
||
|
||
function handleSync() {
|
||
setSyncing(true);
|
||
window.postMessage(
|
||
{
|
||
type: "HAIXUN_REQUEST_THREADS_SYNC",
|
||
serverUrl: window.location.origin,
|
||
accountId: activeAccountId ?? undefined,
|
||
},
|
||
"*"
|
||
);
|
||
|
||
window.setTimeout(() => {
|
||
setSyncing((current) => {
|
||
if (current) {
|
||
notify({
|
||
type: "warning",
|
||
title: "尚未收到擴充功能回應",
|
||
message: "請在 Chrome 安裝並啟用 extension/haixun-threads-sync 擴充功能。",
|
||
});
|
||
}
|
||
return false;
|
||
});
|
||
}, 12000);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<p className="text-xs text-muted-foreground">
|
||
擴充狀態：
|
||
{extensionReady ? (
|
||
<span className="text-success">已連線</span>
|
||
) : (
|
||
<span className="text-warning">未偵測到（請載入 extension/haixun-threads-sync）</span>
|
||
)}
|
||
</p>
|
||
<Button onClick={handleSync} disabled={syncing} className="w-full sm:w-auto">
|
||
{syncing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Chrome className="h-4 w-4" />}
|
||
{syncing ? "同步中…" : "從 Chrome 同步到目前帳號"}
|
||
</Button>
|
||
</div>
|
||
);
|
||
} |