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:
parent
f380397f71
commit
cef242e173
1 changed files with 25 additions and 5 deletions
|
@ -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 };
|
||||
|
|
Loading…
Add table
Reference in a new issue