Something went wrong. Try again.
A social knowledge tool for research trails, built on ATProto semble.so
research-tool social-network tools-for-thought atproto
Something went wrong. Try again.
3.3 kB · 139 lines
TSX
at development
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140'use client';
import { useEffect, useState } from 'react';import { ApiClient } from '@/api-client/ApiClient';import { Modal, Stack, TextInput, Textarea, Button, Group, Alert,} from '@mantine/core';import { useForm } from '@mantine/form';
interface CreateCollectionModalProps { isOpen: boolean; onClose: () => void; onSuccess?: (collectionId: string, collectionName: string) => void; apiClient: ApiClient; initialName?: string;}
export function CreateCollectionModal({ isOpen, onClose, onSuccess, apiClient, initialName = '',}: CreateCollectionModalProps) { const form = useForm({ initialValues: { name: initialName, description: '', }, });
const [loading, setLoading] = useState(false); const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); e.stopPropagation();
if (!form.getValues().name.trim()) { setError('Collection name is required'); return; }
setLoading(true); setError('');
try { const response = await apiClient.createCollection({ name: form.getValues().name.trim(), description: form.getValues().description.trim() || undefined, });
// Success onSuccess?.(response.collectionId, form.getValues().name.trim()); handleClose(); } catch (error: any) { console.error('Error creating collection:', error); setError( error.message || 'Failed to create collection. Please try again.', ); } finally { setLoading(false); } };
const handleClose = () => { if (!loading) { onClose(); form.reset(); setError(''); } };
// Update form when initialName changes useEffect(() => { if (isOpen && initialName !== form.getValues().name) { form.setFieldValue('name', initialName); } }, [isOpen, initialName, form]);
return ( <Modal opened={isOpen} onClose={handleClose} title="Create Collection" centered > <form onSubmit={handleSubmit}> <Stack> <TextInput label="Name" placeholder="Enter collection name" disabled={loading} required maxLength={100} key={form.key('name')} {...form.getInputProps('name')} />
<Textarea label="Description" placeholder="Describe what this collection is about..." disabled={loading} rows={3} maxLength={500} key={form.key('description')} {...form.getInputProps('description')} />
{error && ( <Alert color="red" title="Error"> {error} </Alert> )}
<Group justify="flex-end"> <Button type="button" variant="outline" onClick={handleClose} disabled={loading} > Cancel </Button> <Button type="submit" loading={loading}> {loading ? 'Creating...' : 'Create Collection'} </Button> </Group> </Stack> </form> </Modal> );}