ryanmwangi/Compareware_next.js
1
0
Fork 0
Code Issues Pull requests Releases Activity

Compare commits

base: ryanmwangi:99a0d221ba8154e9d38cac087461f6e626cd8bb5
Branches Tags
ryanmwangi:main
..
compare: ryanmwangi:f616d73826111117ba457f838c426afe476d563b
Branches Tags
ryanmwangi:main

No commits in common. "99a0d221ba8154e9d38cac087461f6e626cd8bb5" and "f616d73826111117ba457f838c426afe476d563b" have entirely different histories.
99a0d221ba ... f616d73826

2 changed files with 59 additions and 136 deletions
Show stats Expand all files Collapse all files

76
src/components/ItemsList.tsx
View file

@ -210,13 +210,6 @@ async function fetchWikidataSuggestions(query: string): Promise<WikidataSuggesti
}
}
// Helper function to check if an item has content
function itemHasContent(item: Item): boolean {
return item.name.trim() !== '' ||
item.description.trim() !== '' ||
Object.values(item.customProperties).some(prop => prop.trim() !== '');
}
export function ItemsList({ url }: ItemsListProps) {
const queryClient = useQueryClient();
@ -255,24 +248,9 @@ export function ItemsList({ url }: ItemsListProps) {
customProperties: {}
};
setItems([emptyItem]);
} else {
// 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
const selectedPropsMap: Record<string, boolean> = {};
@ -305,10 +283,8 @@ export function ItemsList({ url }: ItemsListProps) {
// Mutations
const saveItemMutation = useMutation({
mutationFn: (item: Item) => saveItemToDb(url, item),
// REMOVED: onSuccess invalidation that was causing the issue
onError: (error) => {
console.error('Failed to save item:', error);
// You could add a toast notification here
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['items', url] });
}
});
@ -336,9 +312,6 @@ 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
@ -371,22 +344,36 @@ export function ItemsList({ url }: ItemsListProps) {
newItems[index] = item;
// Check if the item now has content after the update
const nowHasContent = itemHasContent(item);
// Only save if the item has some content
if (nowHasContent) {
const hasContent = item.name.trim() ||
item.description.trim() ||
Object.values(item.customProperties).some(prop => prop.trim());
if (hasContent) {
// Auto-save with error handling
saveItemMutation.mutate(item);
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] });
}
});
}
// 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;
// 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 (isLastItem && transitionedToContent) {
// Add a new empty row
if (lastItemHasContent) {
const newItem: Item = {
id: uuidv4(),
name: '',
@ -395,12 +382,15 @@ export function ItemsList({ url }: ItemsListProps) {
customProperties: {}
};
newItems.push(newItem);
console.log('Added new empty row after item got content');
// Don't auto-save empty items immediately
// They will be saved when user starts typing
}
}
return newItems;
});
}, [saveItemMutation]);
}, [saveItemMutation, queryClient, url]);
const removeItem = useCallback((index: number) => {
const itemId = items[index].id;
@ -537,7 +527,7 @@ export function ItemsList({ url }: ItemsListProps) {
}
console.log('Property addition completed:', normalizedProperty);
}, [customProperties, propertyLabels, items, propertyCache, url]);
}, [selectedProperties, propertyLabels, items, propertyCache, url]);
const handleWikidataSelect = useCallback(async (suggestion: WikidataSuggestion, itemId: string) => {
console.log('Wikidata selection for item:', itemId, suggestion);

97
src/components/TypeaheadInput.tsx
View file

@ -36,47 +36,11 @@ export function TypeaheadInput({
const [isLoading, setIsLoading] = useState(false);
const [isExternalUpdate, setIsExternalUpdate] = useState(false);
const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({ top: 0, left: 0, width: 0 });
const [isDarkMode, setIsDarkMode] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const suggestionsRef = useRef<HTMLDivElement>(null);
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
// Detect dark mode
useEffect(() => {
const checkDarkMode = () => {
// Check if dark class is on html or body element
const isDark = document.documentElement.classList.contains('dark') ||
document.body.classList.contains('dark') ||
// Fallback: check system preference
window.matchMedia('(prefers-color-scheme: dark)').matches;
setIsDarkMode(isDark);
};
// Initial check
checkDarkMode();
// Watch for changes to the dark class
const observer = new MutationObserver(checkDarkMode);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
observer.observe(document.body, {
attributes: true,
attributeFilter: ['class']
});
// Watch for system theme changes
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', checkDarkMode);
return () => {
observer.disconnect();
mediaQuery.removeEventListener('change', checkDarkMode);
};
}, []);
// Calculate dropdown position relative to viewport
const calculateDropdownPosition = useCallback((): DropdownPosition => {
if (!inputRef.current) {
@ -333,8 +297,7 @@ export function TypeaheadInput({
}, []);
const baseInputClassName = `
w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
w-full px-3 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
transition-all duration-200 ease-in-out
${className}
@ -344,24 +307,17 @@ export function TypeaheadInput({
const DropdownPortal = () => {
if (!showSuggestions || suggestions.length === 0) return null;
// Theme-aware colors
const dropdownBgColor = isDarkMode ? 'rgba(31, 41, 55, 1)' : 'rgba(255, 255, 255, 1)'; // gray-800 : white
const borderColor = isDarkMode ? 'rgba(75, 85, 99, 1)' : 'rgba(209, 213, 219, 1)'; // gray-600 : gray-300
return createPortal(
<div
ref={suggestionsRef}
className="fixed border-2 rounded-xl shadow-2xl max-h-96 overflow-y-auto"
className="fixed bg-white border-2 border-gray-300 rounded-xl shadow-2xl max-h-96 overflow-y-auto"
style={{
top: dropdownPosition.top + 8, // 8px gap below input
left: dropdownPosition.left,
width: dropdownPosition.width,
zIndex: 9999, // Higher than table headers (z-index: 10)
backgroundColor: dropdownBgColor,
borderColor: borderColor,
boxShadow: isDarkMode
? '0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3)'
: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)'
backgroundColor: 'rgba(255, 255, 255, 1)',
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)'
}}
>
<div className="py-2">
@ -370,11 +326,6 @@ export function TypeaheadInput({
const label = suggestion.label || '';
const description = suggestion.description || '';
// Theme-aware item colors
const itemBgColor = isSelected
? (isDarkMode ? 'rgba(30, 58, 138, 0.3)' : 'rgba(239, 246, 255, 1)') // blue-900/30 : blue-50
: dropdownBgColor;
return (
<div
key={suggestion.id}
@ -382,29 +333,21 @@ export function TypeaheadInput({
relative px-4 py-4 cursor-pointer transition-all duration-200 ease-in-out
border-l-4 mx-2 my-1 rounded-lg
${isSelected
? 'border-l-blue-500 shadow-md'
: 'border-l-transparent hover:shadow-sm'
? 'bg-blue-50 border-l-blue-500 shadow-md'
: 'border-l-transparent hover:bg-gray-50 hover:border-l-gray-300 hover:shadow-sm'
}
${isSelected
? ''
: (isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50')
}
${!isSelected && isDarkMode ? 'hover:border-l-gray-500' : ''}
${!isSelected && !isDarkMode ? 'hover:border-l-gray-300' : ''}
`}
onClick={() => handleSuggestionClick(suggestion)}
onMouseEnter={() => setSelectedIndex(index)}
style={{
backgroundColor: itemBgColor
backgroundColor: isSelected ? 'rgba(239, 246, 255, 1)' : 'rgba(255, 255, 255, 1)'
}}
>
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0 space-y-2">
{/* Main label */}
<div className={`font-semibold text-base leading-tight ${
isSelected
? (isDarkMode ? 'text-blue-100' : 'text-blue-900')
: (isDarkMode ? 'text-gray-100' : 'text-gray-900')
isSelected ? 'text-blue-900' : 'text-gray-900'
}`}>
{label}
</div>
@ -412,9 +355,7 @@ export function TypeaheadInput({
{/* Description */}
{description && (
<div className={`text-sm leading-relaxed ${
isSelected
? (isDarkMode ? 'text-blue-200' : 'text-blue-700')
: (isDarkMode ? 'text-gray-300' : 'text-gray-600')
isSelected ? 'text-blue-700' : 'text-gray-600'
}`}>
{description}
</div>
@ -422,16 +363,10 @@ export function TypeaheadInput({
{/* Wikidata ID */}
<div className="flex items-center space-x-2">
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border ${
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
isSelected
? (isDarkMode
? 'bg-blue-800 text-blue-100 border-blue-600'
: 'bg-blue-100 text-blue-800 border-blue-200'
)
: (isDarkMode
? 'bg-gray-700 text-gray-300 border-gray-600'
: 'bg-gray-100 text-gray-700 border-gray-200'
)
? 'bg-blue-100 text-blue-800 border border-blue-200'
: 'bg-gray-100 text-gray-700 border border-gray-200'
}`}>
<svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm2 6a2 2 0 104 0 2 2 0 00-4 0zm8-2a2 2 0 11-4 0 2 2 0 014 0z" clipRule="evenodd" />
@ -445,8 +380,8 @@ export function TypeaheadInput({
<div className="ml-4 flex-shrink-0">
<div className={`w-6 h-6 rounded-full flex items-center justify-center transition-all duration-200 ${
isSelected
? (isDarkMode ? 'bg-blue-600 text-white shadow-lg' : 'bg-blue-500 text-white shadow-lg')
: (isDarkMode ? 'bg-gray-600 text-gray-300' : 'bg-gray-200 text-gray-400')
? 'bg-blue-500 text-white shadow-lg'
: 'bg-gray-200 text-gray-400'
}`}>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
@ -457,9 +392,7 @@ export function TypeaheadInput({
{/* Subtle bottom border for separation */}
{index < suggestions.length - 1 && (
<div className={`absolute bottom-0 left-4 right-4 h-px ${
isDarkMode ? 'bg-gray-600' : 'bg-gray-200'
}`}></div>
<div className="absolute bottom-0 left-4 right-4 h-px bg-gray-200"></div>
)}
</div>
);