ImportTab.tsx raw

   1  import { useRef, useState } from 'react'
   2  import relayAdmin from '@/services/relay-admin.service'
   3  import { Button } from '@/components/ui/button'
   4  import { toast } from 'sonner'
   5  
   6  export default function ImportTab() {
   7    const [selectedFile, setSelectedFile] = useState<File | null>(null)
   8    const [isImporting, setIsImporting] = useState(false)
   9    const fileRef = useRef<HTMLInputElement>(null)
  10  
  11    const handleImport = async () => {
  12      if (!selectedFile) return
  13      setIsImporting(true)
  14      try {
  15        const result = await relayAdmin.importEvents(selectedFile)
  16        toast.success(`Import complete: ${JSON.stringify(result)}`)
  17        setSelectedFile(null)
  18        if (fileRef.current) fileRef.current.value = ''
  19      } catch (e) {
  20        toast.error(`Import failed: ${e instanceof Error ? e.message : String(e)}`)
  21      } finally {
  22        setIsImporting(false)
  23      }
  24    }
  25  
  26    return (
  27      <div className="p-4 max-w-lg space-y-3">
  28        <div className="rounded-lg bg-card p-4 space-y-4">
  29          <h3 className="text-lg font-semibold">Import Events</h3>
  30          <p className="text-sm text-muted-foreground">
  31            Upload a JSONL file to import events into the database.
  32          </p>
  33          <input
  34            ref={fileRef}
  35            type="file"
  36            accept=".jsonl,.txt"
  37            onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
  38            className="block w-full text-sm file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-primary-foreground hover:file:bg-primary/80"
  39          />
  40          <Button onClick={handleImport} disabled={!selectedFile || isImporting}>
  41            {isImporting ? 'Importing...' : 'Import Events'}
  42          </Button>
  43        </div>
  44      </div>
  45    )
  46  }
  47