135 lines
4.2 KiB
TypeScript
135 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import React, { useState } from "react";
|
|
import { GoogleDrivePicker } from "@/components/google-drive-picker"
|
|
import { useTask } from "@/contexts/task-context"
|
|
|
|
interface GoogleDriveFile {
|
|
id: string;
|
|
name: string;
|
|
mimeType: string;
|
|
webViewLink?: string;
|
|
iconLink?: string;
|
|
}
|
|
|
|
export default function ConnectorsPage() {
|
|
const { addTask } = useTask()
|
|
const [selectedFiles, setSelectedFiles] = useState<GoogleDriveFile[]>([]);
|
|
const [isSyncing, setIsSyncing] = useState<boolean>(false);
|
|
const [syncResult, setSyncResult] = useState<{
|
|
processed?: number;
|
|
total?: number;
|
|
status?: string;
|
|
error?: string;
|
|
added?: number;
|
|
errors?: number;
|
|
} | null>(null);
|
|
|
|
const handleFileSelection = (files: GoogleDriveFile[]) => {
|
|
setSelectedFiles(files);
|
|
};
|
|
|
|
const handleSync = async (connector: { connectionId: string, type: string }) => {
|
|
if (!connector.connectionId || selectedFiles.length === 0) return
|
|
|
|
setIsSyncing(true)
|
|
setSyncResult(null)
|
|
|
|
try {
|
|
const syncBody: {
|
|
connection_id: string;
|
|
max_files?: number;
|
|
selected_files?: string[];
|
|
} = {
|
|
connection_id: connector.connectionId,
|
|
selected_files: selectedFiles.map(file => file.id)
|
|
}
|
|
|
|
const response = await fetch(`/api/connectors/${connector.type}/sync`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(syncBody),
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (response.status === 201) {
|
|
const taskId = result.task_id
|
|
if (taskId) {
|
|
addTask(taskId)
|
|
setSyncResult({
|
|
processed: 0,
|
|
total: selectedFiles.length,
|
|
status: 'started'
|
|
})
|
|
}
|
|
} else if (response.ok) {
|
|
setSyncResult(result)
|
|
} else {
|
|
console.error('Sync failed:', result.error)
|
|
setSyncResult({ error: result.error || 'Sync failed' })
|
|
}
|
|
} catch (error) {
|
|
console.error('Sync error:', error)
|
|
setSyncResult({ error: 'Network error occurred' })
|
|
} finally {
|
|
setIsSyncing(false)
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<h1 className="text-2xl font-bold mb-4">Connectors</h1>
|
|
|
|
<div className="mb-6">
|
|
<p className="text-sm text-gray-600 mb-4">
|
|
This is a demo page for the Google Drive picker component.
|
|
For full connector functionality, visit the Settings page.
|
|
</p>
|
|
|
|
<GoogleDrivePicker
|
|
onFileSelected={handleFileSelection}
|
|
selectedFiles={selectedFiles}
|
|
isAuthenticated={false} // This would come from auth context in real usage
|
|
accessToken={undefined} // This would come from connected account
|
|
/>
|
|
</div>
|
|
|
|
{selectedFiles.length > 0 && (
|
|
<div className="space-y-4">
|
|
<button
|
|
onClick={() => handleSync({ connectionId: "google-drive-connection-id", type: "google-drive" })}
|
|
disabled={isSyncing}
|
|
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isSyncing ? (
|
|
<>Syncing {selectedFiles.length} Selected Items...</>
|
|
) : (
|
|
<>Sync {selectedFiles.length} Selected Items</>
|
|
)}
|
|
</button>
|
|
|
|
{syncResult && (
|
|
<div className="p-3 bg-gray-100 rounded text-sm">
|
|
{syncResult.error ? (
|
|
<div className="text-red-600">Error: {syncResult.error}</div>
|
|
) : syncResult.status === 'started' ? (
|
|
<div className="text-blue-600">
|
|
Sync started for {syncResult.total} files. Check the task notification for progress.
|
|
</div>
|
|
) : (
|
|
<div className="text-green-600">
|
|
<div>Processed: {syncResult.processed || 0}</div>
|
|
<div>Added: {syncResult.added || 0}</div>
|
|
{syncResult.errors && <div>Errors: {syncResult.errors}</div>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|