fix(property addition): resolve property addition and persistence issues in ItemsList

- Implement immediate saving of auto-populated values from propertyCache when adding properties
- Fix timing issues by ensuring all database operations complete before query invalidation
- Add comprehensive error handling with optimistic update rollback on failures
- Improve property addition sequence: optimistic updates → cache auto-population → database saves → Wikidata fetching → query refresh
- Add extensive debugging logs for property addition workflow
- Eliminate race conditions between state updates and data refresh

Fixes issues where:
- Properties would disappear after selection due to premature query invalidation
- Auto-populated values were lost during data refresh cycles
- Multiple clicks were required for property selection to persist
- UI state became inconsistent with database state during property operations

The property addition process now follows a proper async sequence ensuring data persistence and UI consistency.
This commit is contained in:
ryan 2025-07-16 17:25:02 +03:00
parent f380397f71
commit cef242e173

View file

@ -454,7 +454,7 @@ export function ItemsList({ url }: ItemsListProps) {
// THIRD: Add to all items with auto-population from propertyCache AND save immediately
const itemsToSave: Item[] = [];
setItems(prev => prev.map(item => {
const updatedItems = items.map(item => {
const existingValue = item.customProperties[normalizedProperty] || '';
let autoPopulatedValue = existingValue;
@ -474,26 +474,46 @@ export function ItemsList({ url }: ItemsListProps) {
// If we auto-populated a value, save it immediately
if (autoPopulatedValue && autoPopulatedValue !== existingValue) {
console.log(`Adding item to save queue: ${item.id} with ${normalizedProperty}=${autoPopulatedValue}`);
itemsToSave.push(updatedItem);
}
return updatedItem;
}));
});
// Update state with all items at once
setItems(updatedItems);
// Save all auto-populated items immediately
const cachePopulationPromises = itemsToSave.map(item => saveItemToDb(url, item));
console.log('Items to save from cache population:', itemsToSave.length);
if (itemsToSave.length > 0) {
console.log('Saving auto-populated items:', itemsToSave.map(item => ({ id: item.id, name: item.name })));
}
const cachePopulationPromises = itemsToSave.map(item => {
console.log(`Saving item ${item.id} with auto-populated value`);
return saveItemToDb(url, item);
});
console.log('Items to save from cache population:', itemsToSave.length);
if (itemsToSave.length > 0) {
console.log('Items being saved:', itemsToSave.map(item => ({ id: item.id, name: item.name, properties: item.customProperties })));
}
// FOURTH: Save property to database
try {
if (cachePopulationPromises.length > 0) {
console.log(`Waiting for ${cachePopulationPromises.length} auto-populated items to save...`);
await Promise.all(cachePopulationPromises);
console.log('All cache-populated items saved successfully');
} else {
console.log('No auto-populated items to save');
}
await addPropertyToDb(url, normalizedProperty);
console.log('Property successfully saved to database:', normalizedProperty);
} catch (error) {
console.error('Error saving property to database:', error);
console.error('Error in property addition process:', error);
// Revert optimistic updates on error
setSelectedProperties(prev => {
const newSelected = { ...prev };