fix position reorder · atpota.to/cred.blue@9620ae9

+21 -51

src/components/Admin/AdminPanel.js

··· 304 304 }; 305 305 306 306 // Reorder resources (move up or down in list) 307 - const handleReorderResource = async (resourceId, direction) => { 308 - const resourceIndex = resources.findIndex(r => r.id === resourceId); 309 - if (resourceIndex === -1) return; 310 - 311 - let filteredResources = [...resources]; // Create a copy to work with 312 - 313 - // Filter resources based on reorder mode 314 - if (reorderMode === 'featured') { 315 - filteredResources = filteredResources.filter(r => r.featured); 316 - } else if (reorderMode === 'category' && selectedCategoryForReorder) { 317 - filteredResources = filteredResources.filter(r => 318 - r.categoryIds && r.categoryIds.includes(selectedCategoryForReorder) 319 - ); 320 - } 321 - 322 - // Sort by position to ensure correct order 323 - filteredResources.sort((a, b) => a.position - b.position); 324 - 325 - const resourceToMoveIndex = filteredResources.findIndex(r => r.id === resourceId); 326 - if (resourceToMoveIndex === -1) return; 307 + const handleReorderResource = async (resourceId, direction) => { 308 + if (updatingPositions) return; 327 309 328 - const adjacentIndex = direction === 'up' 329 - ? Math.max(0, resourceToMoveIndex - 1) 330 - : Math.min(filteredResources.length - 1, resourceToMoveIndex + 1); 331 - 332 - if (adjacentIndex === resourceToMoveIndex) return; 310 + // Find the resource to update 311 + const resource = resources.find(r => r.id === resourceId); 312 + if (!resource) return; 333 313 334 - const resourceToMove = filteredResources[resourceToMoveIndex]; 335 - const adjacentResource = filteredResources[adjacentIndex]; 314 + // Calculate new position - decrement for up, increment for down 315 + const newPosition = direction === 'up' 316 + ? resource.position - 1 317 + : resource.position + 1; 336 318 337 - if (updatingPositions) return; 338 319 setUpdatingPositions(true); 339 320 340 321 try { 341 - // Swap positions in database 322 + // Update position in database 342 323 await supabase 343 324 .from('resources') 344 - .update({ position: adjacentResource.position }) 345 - .eq('id', resourceToMove.id); 346 - 347 - await supabase 348 - .from('resources') 349 - .update({ position: resourceToMove.position }) 350 - .eq('id', adjacentResource.id); 325 + .update({ position: newPosition }) 326 + .eq('id', resourceId); 351 327 352 - // Update local state without fetching all data again 328 + // Update local state 353 329 setResources(prevResources => { 354 - const updatedResources = [...prevResources]; 355 - 356 - // Find the actual resources in the full list 357 - const resourceToMoveFullIndex = updatedResources.findIndex(r => r.id === resourceToMove.id); 358 - const adjacentResourceFullIndex = updatedResources.findIndex(r => r.id === adjacentResource.id); 359 - 360 - // Swap their positions 361 - const tempPosition = updatedResources[resourceToMoveFullIndex].position; 362 - updatedResources[resourceToMoveFullIndex].position = updatedResources[adjacentResourceFullIndex].position; 363 - updatedResources[adjacentResourceFullIndex].position = tempPosition; 364 - 365 - return updatedResources; 330 + return prevResources.map(r => { 331 + if (r.id === resourceId) { 332 + return { ...r, position: newPosition }; 333 + } 334 + return r; 335 + }); 366 336 }); 367 337 368 - showAlert(`Resources reordered successfully!`); 338 + showAlert(`Resource moved ${direction}!`); 369 339 } catch (error) { 370 - console.error('Error reordering resources:', error); 340 + console.error(`Error moving resource ${direction}:`, error); 371 341 showAlert(`Error: ${error.message}`, 'error'); 372 342 } finally { 373 343 setUpdatingPositions(false);

-3

src/components/Resources/Resources.css

··· 168 168 .random-resources-section { 169 169 background-color: rgba(var(--button-bg-rgb), 0.05); 170 170 border-radius: 10px; 171 - padding: 20px; 172 171 margin-top: 20px; 173 172 margin-bottom: 30px; 174 173 border: 2px solid rgba(var(--button-bg-rgb), 0.1); ··· 602 601 /* Improved search input */ 603 602 .search-container { 604 603 position: relative; 605 - flex-grow: 1; 606 - max-width: 500px; 607 604 height: 100%; /* Make it fill the container height */ 608 605 } 609 606

+4 -3

src/components/Resources/Resources.js

··· 210 210 // Filter out any resources that might not have essential data 211 211 const validResources = resources.filter(r => r.name && r.description); 212 212 213 - if (validResources.length <= 4) { 213 + if (validResources.length <= 6) { 214 214 setRandomResources(validResources); 215 215 return; 216 216 } ··· 225 225 } 226 226 227 227 // Take the first 4 items 228 - setRandomResources(shuffled.slice(0, 4)); 228 + setRandomResources(shuffled.slice(0, 6)); 229 229 setShowRandomResources(true); 230 230 231 231 // Auto-scroll to the random resources section ··· 506 506 {/* Random Resources Section */} 507 507 {showRandomResources && randomResources.length > 0 && ( 508 508 <div id="random-resources-section" className="random-resources-section"> 509 - <h2>Check out these {randomResources.length} resources</h2> 509 + <h2>Feeling Lucky Results</h2> 510 + <p className="featured-description">Here are {randomResources.length} resources picked just for you!</p> 510 511 <div className="resources-grid"> 511 512 {randomResources.map((resource, index) => ( 512 513 <ResourceCard

Configure Feed

Configure Feed