Fix JobFeeds search and filtering logic, reactive prop syncing, and add Reset Filters button

This commit is contained in:
2026-07-23 12:15:25 -04:00
parent a9344cc4db
commit 74d402784e
3 changed files with 32 additions and 28 deletions
+1 -1
View File
@@ -1 +1 @@
268711 269065
-22
View File
File diff suppressed because one or more lines are too long
+31 -5
View File
@@ -32,16 +32,29 @@ export const JobFeeds: React.FC<JobFeedsProps> = ({
const [isFetchingFeeds, setIsFetchingFeeds] = useState(false); const [isFetchingFeeds, setIsFetchingFeeds] = useState(false);
const [localFeeds, setLocalFeeds] = useState<JobFeedItem[]>(jobFeeds); const [localFeeds, setLocalFeeds] = useState<JobFeedItem[]>(jobFeeds);
// Synchronize localFeeds whenever jobFeeds prop updates from parent
React.useEffect(() => {
if (jobFeeds && jobFeeds.length > 0) {
setLocalFeeds(jobFeeds);
}
}, [jobFeeds]);
const displayFeeds = localFeeds.length > 0 ? localFeeds : jobFeeds; const displayFeeds = localFeeds.length > 0 ? localFeeds : jobFeeds;
const filteredFeeds = displayFeeds.filter(feed => { const filteredFeeds = displayFeeds.filter(feed => {
const matchesSearch = const term = searchTerm.toLowerCase().trim();
feed.title.toLowerCase().includes(searchTerm.toLowerCase()) || if (!term && selectedPlatform === 'ALL' && minMatch === 0) return true;
feed.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
feed.location.toLowerCase().includes(searchTerm.toLowerCase());
const titleMatch = (feed.title || '').toLowerCase().includes(term);
const companyMatch = (feed.company || '').toLowerCase().includes(term);
const locationMatch = (feed.location || '').toLowerCase().includes(term);
const platformMatchStr = (feed.platform || '').toLowerCase().includes(term);
const descMatch = (feed.description || '').toLowerCase().includes(term);
const skillsMatch = (feed.requiredSkills || []).some(s => (s || '').toLowerCase().includes(term));
const matchesSearch = !term || titleMatch || companyMatch || locationMatch || platformMatchStr || descMatch || skillsMatch;
const matchesPlatform = selectedPlatform === 'ALL' || feed.platform === selectedPlatform; const matchesPlatform = selectedPlatform === 'ALL' || feed.platform === selectedPlatform;
const matchesMatch = (feed.estimatedMatch || 80) >= minMatch; const matchesMatch = (feed.estimatedMatch ?? 80) >= minMatch;
return matchesSearch && matchesPlatform && matchesMatch; return matchesSearch && matchesPlatform && matchesMatch;
}); });
@@ -140,6 +153,19 @@ export const JobFeeds: React.FC<JobFeedsProps> = ({
className="w-20 accent-indigo-500 cursor-pointer" className="w-20 accent-indigo-500 cursor-pointer"
/> />
</div> </div>
{(searchTerm || selectedPlatform !== 'ALL' || minMatch > 0) && (
<button
onClick={() => {
setSearchTerm('');
setSelectedPlatform('ALL');
setMinMatch(0);
}}
className="px-3 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold transition"
>
Reset Filters
</button>
)}
</div> </div>
</div> </div>