This repository has no description
fix styles
author
damedotblog
date
(Mar 3, 2025, 12:46 PM -0500)
commit
a586e60f
a586e60ff83d27ec8075c495e261472fa4adb21f
parent
9620ae91
9620ae91cdff299cb163eded5aa8114edfad2c9b
+40
-6
+5
src/components/Resources/Resources.css
+5
src/components/Resources/Resources.css
+35
-6
src/components/Resources/Resources.js
+35
-6
src/components/Resources/Resources.js
···
45
45
localStorage.setItem('resourcesPreferences', JSON.stringify(preferences));
46
46
}, [activeCategory, showNewOnly, showScoreImpactOnly]);
47
47
48
+
// Hide random resources when filters are applied
49
+
useEffect(() => {
50
+
// Hide random resources when any filter is active or category is not 'All'
51
+
if (showNewOnly || showScoreImpactOnly || activeCategory !== 'All' || searchQuery.trim() !== '') {
52
+
setShowRandomResources(false);
53
+
}
54
+
}, [showNewOnly, showScoreImpactOnly, activeCategory, searchQuery]);
55
+
48
56
// Fetch resources from Supabase
49
57
useEffect(() => {
50
58
async function fetchResources() {
···
224
232
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
225
233
}
226
234
227
-
// Take the first 4 items
235
+
// Take the first 6 items
228
236
setRandomResources(shuffled.slice(0, 6));
229
237
setShowRandomResources(true);
230
238
239
+
// Reset all filters when showing random resources
240
+
if (activeCategory !== 'All' || showNewOnly || showScoreImpactOnly || searchQuery.trim() !== '') {
241
+
setActiveCategory('All');
242
+
setShowNewOnly(false);
243
+
setShowScoreImpactOnly(false);
244
+
setSearchQuery('');
245
+
}
246
+
231
247
// Auto-scroll to the random resources section
232
248
setTimeout(() => {
233
249
const element = document.getElementById('random-resources-section');
···
385
401
setSearchQuery(e.target.value);
386
402
};
387
403
404
+
// Handlers for filters to hide random resources
405
+
const handleCategoryChange = (e) => {
406
+
setActiveCategory(e.target.value);
407
+
};
408
+
409
+
const handleNewToggle = () => {
410
+
setShowNewOnly(!showNewOnly);
411
+
};
412
+
413
+
const handleScoreToggle = () => {
414
+
setShowScoreImpactOnly(!showScoreImpactOnly);
415
+
};
416
+
388
417
return (
389
418
<main className="resources-page">
390
419
<div className="alt-card">
···
435
464
<select
436
465
id="category-select"
437
466
value={activeCategory}
438
-
onChange={(e) => setActiveCategory(e.target.value)}
467
+
onChange={handleCategoryChange}
439
468
className="filter-select"
440
469
>
441
470
{categories.map(category => (
···
455
484
id="new-toggle"
456
485
type="checkbox"
457
486
checked={showNewOnly}
458
-
onChange={() => setShowNewOnly(!showNewOnly)}
487
+
onChange={handleNewToggle}
459
488
aria-label="Show only recently added resources"
460
489
/>
461
490
<span className="toggle-text">Recently Added</span>
···
469
498
id="score-toggle"
470
499
type="checkbox"
471
500
checked={showScoreImpactOnly}
472
-
onChange={() => setShowScoreImpactOnly(!showScoreImpactOnly)}
501
+
onChange={handleScoreToggle}
473
502
aria-label="Show only resources that impact score"
474
503
/>
475
504
<span className="toggle-text">Impacts Score</span>
···
503
532
<ResourceLoader />
504
533
) : (
505
534
<>
506
-
{/* Random Resources Section */}
507
-
{showRandomResources && randomResources.length > 0 && (
535
+
{/* Random Resources Section - now only shows when no filters are active */}
536
+
{showRandomResources && randomResources.length > 0 && !showNewOnly && !showScoreImpactOnly && activeCategory === 'All' && searchQuery.trim() === '' && (
508
537
<div id="random-resources-section" className="random-resources-section">
509
538
<h2>Feeling Lucky Results</h2>
510
539
<p className="featured-description">Here are {randomResources.length} resources picked just for you!</p>