diff --git a/src/components/ItemsList.tsx b/src/components/ItemsList.tsx index 550d320..a1a3566 100644 --- a/src/components/ItemsList.tsx +++ b/src/components/ItemsList.tsx @@ -210,6 +210,13 @@ async function fetchWikidataSuggestions(query: string): Promise prop.trim() !== ''); +} + export function ItemsList({ url }: ItemsListProps) { const queryClient = useQueryClient(); @@ -249,7 +256,22 @@ export function ItemsList({ url }: ItemsListProps) { }; setItems([emptyItem]); } else { - setItems(loadedItems); + // Check if we need to add an empty row at the end + const lastItem = loadedItems[loadedItems.length - 1]; + const needsEmptyRow = itemHasContent(lastItem); + + if (needsEmptyRow) { + const emptyItem: Item = { + id: uuidv4(), + name: '', + description: '', + wikidataId: undefined, + customProperties: {} + }; + setItems([...loadedItems, emptyItem]); + } else { + setItems(loadedItems); + } } // Set selected properties @@ -283,8 +305,10 @@ export function ItemsList({ url }: ItemsListProps) { // Mutations const saveItemMutation = useMutation({ mutationFn: (item: Item) => saveItemToDb(url, item), - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['items', url] }); + // REMOVED: onSuccess invalidation that was causing the issue + onError: (error) => { + console.error('Failed to save item:', error); + // You could add a toast notification here } }); @@ -312,6 +336,9 @@ export function ItemsList({ url }: ItemsListProps) { const newItems = [...prevItems]; const item = { ...newItems[index] }; + // Store the previous state of the item to check if it was empty before + const wasEmpty = !itemHasContent(item); + if (field === 'name') { item.name = value; // Fetch Wikidata suggestions only if value is not empty @@ -344,53 +371,36 @@ export function ItemsList({ url }: ItemsListProps) { newItems[index] = item; - // Only save if the item has some content - const hasContent = item.name.trim() || - item.description.trim() || - Object.values(item.customProperties).some(prop => prop.trim()); + // Check if the item now has content after the update + const nowHasContent = itemHasContent(item); - if (hasContent) { + // Only save if the item has some content + if (nowHasContent) { // Auto-save with error handling - saveItemMutation.mutate(item, { - onError: (error) => { - console.error('Failed to save item:', error); - // You could add a toast notification here - }, - onSuccess: () => { - // After successful save, reload items to get any synchronized properties - // This ensures that if another item with the same name exists, - // its properties are updated in the UI - queryClient.invalidateQueries({ queryKey: ['items', url] }); - } - }); + saveItemMutation.mutate(item); } - // Add new row if editing last row and value is not empty - // Only add if the last item doesn't already have content and we're not already at the end - if (index === newItems.length - 1 && value.trim()) { - const lastItem = newItems[newItems.length - 1]; - const lastItemHasContent = lastItem.name.trim() || - lastItem.description.trim() || - Object.values(lastItem.customProperties).some(prop => prop.trim()); - - if (lastItemHasContent) { - const newItem: Item = { - id: uuidv4(), - name: '', - description: '', - wikidataId: undefined, - customProperties: {} - }; - newItems.push(newItem); - - // Don't auto-save empty items immediately - // They will be saved when user starts typing - } + // Add new row logic: only add if we're editing the last item AND + // the item transitioned from empty to having content + const isLastItem = index === newItems.length - 1; + const transitionedToContent = wasEmpty && nowHasContent; + + if (isLastItem && transitionedToContent) { + // Add a new empty row + const newItem: Item = { + id: uuidv4(), + name: '', + description: '', + wikidataId: undefined, + customProperties: {} + }; + newItems.push(newItem); + console.log('Added new empty row after item got content'); } return newItems; }); - }, [saveItemMutation, queryClient, url]); + }, [saveItemMutation]); const removeItem = useCallback((index: number) => { const itemId = items[index].id; @@ -414,7 +424,7 @@ export function ItemsList({ url }: ItemsListProps) { }))); }, [deletePropertyMutation]); - const fetchPropertyLabelsHelper = useCallback(async (propertyIds: string[]): Promise> => { + const fetchPropertyLabelsHelper = useCallback(async (propertyIds: string[]): Promise> => { const labels = await fetchPropertyLabels(propertyIds); setPropertyLabels(prev => ({ ...prev, ...labels })); return labels; @@ -527,7 +537,7 @@ export function ItemsList({ url }: ItemsListProps) { } console.log('Property addition completed:', normalizedProperty); - }, [selectedProperties, propertyLabels, items, propertyCache, url]); + }, [customProperties, propertyLabels, items, propertyCache, url]); const handleWikidataSelect = useCallback(async (suggestion: WikidataSuggestion, itemId: string) => { console.log('Wikidata selection for item:', itemId, suggestion);