132 lines
No EOL
3.8 KiB
TypeScript
132 lines
No EOL
3.8 KiB
TypeScript
import { useState, useRef } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { importChecklistFromJSON } from '../hooks/useLocalStorage'
|
|
import { Card, Heading, Text, TextField, Button, Flex, Box, Separator } from '@radix-ui/themes'
|
|
import { UploadIcon } from '@radix-ui/react-icons'
|
|
|
|
interface CreateChecklistProps {
|
|
className?: string
|
|
}
|
|
|
|
export default function CreateChecklist({ className = '' }: CreateChecklistProps) {
|
|
const [checklistName, setChecklistName] = useState('')
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [isImporting, setIsImporting] = useState(false)
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
const navigate = useNavigate()
|
|
|
|
const createChecklist = async () => {
|
|
if (!checklistName.trim()) return
|
|
|
|
setIsCreating(true)
|
|
try {
|
|
const response = await fetch('/api/checklists', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ name: checklistName.trim() }),
|
|
})
|
|
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
|
|
// Navigate to the new checklist
|
|
navigate(`/${data.uuid}`)
|
|
} else {
|
|
alert('Failed to create checklist')
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating checklist:', error)
|
|
alert('Failed to create checklist')
|
|
} finally {
|
|
setIsCreating(false)
|
|
setChecklistName('')
|
|
}
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
createChecklist()
|
|
}
|
|
}
|
|
|
|
const handleImportChecklist = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0]
|
|
if (!file) return
|
|
|
|
setIsImporting(true)
|
|
try {
|
|
const newUuid = await importChecklistFromJSON(file)
|
|
navigate(`/${newUuid}`)
|
|
} catch (error) {
|
|
console.error('Error importing checklist:', error)
|
|
alert('Failed to import checklist. Please check the file format.')
|
|
} finally {
|
|
setIsImporting(false)
|
|
// Reset the file input
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
const triggerFileInput = () => {
|
|
fileInputRef.current?.click()
|
|
}
|
|
|
|
return (
|
|
<Card size="3" className={className}>
|
|
<Heading size="5" mb="5">Create New Checklist</Heading>
|
|
|
|
<Flex direction={{ initial: 'column', sm: 'row' }} gap="3" mb="5">
|
|
<Box style={{ flex: 1 }}>
|
|
<TextField.Root
|
|
size="3"
|
|
placeholder="Enter checklist name..."
|
|
value={checklistName}
|
|
onChange={(e) => setChecklistName(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
disabled={isCreating || isImporting}
|
|
/>
|
|
</Box>
|
|
<Button
|
|
onClick={createChecklist}
|
|
disabled={isCreating || isImporting || !checklistName.trim()}
|
|
size="3"
|
|
>
|
|
{isCreating ? 'Creating...' : 'Create'}
|
|
</Button>
|
|
</Flex>
|
|
|
|
<Separator size="4" />
|
|
|
|
<Box pt="5">
|
|
<Heading size="4" mb="3">Import Checklist</Heading>
|
|
<Flex direction={{ initial: 'column', sm: 'row' }} gap="3" align={{ sm: 'end' }}>
|
|
<Box style={{ flex: 1 }}>
|
|
<Text size="2" color="gray">
|
|
Import a previously exported checklist JSON file
|
|
</Text>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".json"
|
|
onChange={handleImportChecklist}
|
|
className="hidden"
|
|
/>
|
|
</Box>
|
|
<Button
|
|
onClick={triggerFileInput}
|
|
disabled={isCreating || isImporting}
|
|
size="3"
|
|
color="green"
|
|
>
|
|
<UploadIcon />
|
|
{isImporting ? 'Importing...' : 'Import JSON'}
|
|
</Button>
|
|
</Flex>
|
|
</Box>
|
|
</Card>
|
|
)
|
|
}
|