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