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