reinit

frontend/src/components/CreateChecklist.tsx

@@ -0,0 +1,132 @@
+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>
+  )
+}