RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

More favorites fixes

Browse Source
This commit is contained in:
Joshua Ryder
2025-12-08 15:16:38 -05:00
parent 2321aa1d10
commit c2b97ea8ff
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/SectionsManager.tsx
View File

@@ -9,10 +9,12 @@ interface SectionsManagerProps {
}
const SectionsManager: React.FC<SectionsManagerProps> = ({
sections,
sections: propSections,
onClose,
onSectionChange
}) => {
// Local state for optimistic updates
const [localSections, setLocalSections] = useState<Section[]>(propSections);
const [editingId, setEditingId] = useState<number | null>(null);
const [editName, setEditName] = useState('');
const [editColor, setEditColor] = useState('');
@@ -22,6 +24,11 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
const [showColorPicker, setShowColorPicker] = useState<number | 'new' | null>(null);
const [error, setError] = useState('');
// Sync local state when props change
React.useEffect(() => {
setLocalSections(propSections);
}, [propSections]);
const createSection = async () => {
if (!newSectionName.trim()) {
setError('Section name is required');
@@ -115,18 +122,21 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
};
const moveSection = async (id: number, direction: 'up' | 'down') => {
const currentIndex = sections.findIndex(s => s.id === id);
const currentIndex = localSections.findIndex(s => s.id === id);
if (
(direction === 'up' && currentIndex === 0) ||
(direction === 'down' && currentIndex === sections.length - 1)
(direction === 'down' && currentIndex === localSections.length - 1)
) {
return;
}
const newSections = [...sections];
const newSections = [...localSections];
const swapIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
[newSections[currentIndex], newSections[swapIndex]] = [newSections[swapIndex], newSections[currentIndex]];
// Optimistic update - immediately show the reorder
setLocalSections(newSections);
const sectionIds = newSections.map(s => s.id);
try {
@@ -139,8 +149,14 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
if (response.ok) {
onSectionChange();
} else {
// Revert on failure
setLocalSections(localSections);
setError('Failed to reorder sections');
}
} catch (err) {
// Revert on failure
setLocalSections(localSections);
setError('Failed to reorder sections');
}
};
@@ -196,13 +212,13 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
{/* Sections list */}
<div className="p-4 overflow-y-auto max-h-[50vh]">
{sections.length === 0 ? (
{localSections.length === 0 ? (
<p className="text-center text-gray-500 dark:text-gray-400 py-4">
No sections yet. Create one to organize your favorites!
</p>
) : (
<div className="space-y-2">
{sections.map((section, index) => (
{localSections.map((section, index) => (
<div
key={section.id}
className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-700 rounded-lg"
@@ -258,7 +274,7 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
<span className="flex-1 text-sm text-gray-900 dark:text-gray-100">
{section.name}
</span>
{section.is_default && (
{!!section.is_default && (
<span className="text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300 px-2 py-0.5 rounded">
default
</span>
@@ -274,7 +290,7 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
</button>
<button
onClick={() => moveSection(section.id, 'down')}
disabled={index === sections.length - 1}
disabled={index === localSections.length - 1}
className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30"
title="Move down"
>