feat: Implement dynamic specialization search in the hero section and parse URL filters on the profiles page.
This commit is contained in:
pradeepkumar
@@ -405,6 +405,7 @@ function ProfilesPageContent() {
|
||||
const typeFromUrl = searchParams.get('type');
|
||||
const nameFromUrl = searchParams.get('name') || '';
|
||||
const locationFromUrl = searchParams.get('location') || '';
|
||||
const filtersFromUrl = searchParams.get('filters') || '';
|
||||
|
||||
// State for API data
|
||||
const [agents, setAgents] = useState<PublicAgentProfile[]>([]);
|
||||
@@ -422,13 +423,29 @@ function ProfilesPageContent() {
|
||||
const [activeTypeId, setActiveTypeId] = useState<string | null>(typeFromUrl);
|
||||
const [listingType, setListingType] = useState<'agents' | 'lenders'>('agents');
|
||||
const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
|
||||
const [filters, setFilters] = useState<FilterState>({});
|
||||
const [filters, setFilters] = useState<FilterState>(() => {
|
||||
if (filtersFromUrl) {
|
||||
try {
|
||||
return JSON.parse(filtersFromUrl) as FilterState;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
// Sync state when URL params change (e.g., browser back/forward, client-side navigation)
|
||||
useEffect(() => {
|
||||
setActiveTypeId(typeFromUrl);
|
||||
setSearchQuery(nameFromUrl);
|
||||
}, [typeFromUrl, nameFromUrl]);
|
||||
if (filtersFromUrl) {
|
||||
try {
|
||||
setFilters(JSON.parse(filtersFromUrl) as FilterState);
|
||||
} catch {
|
||||
// ignore invalid JSON
|
||||
}
|
||||
}
|
||||
}, [typeFromUrl, nameFromUrl, filtersFromUrl]);
|
||||
|
||||
// Fetch agent types and filter fields on mount
|
||||
useEffect(() => {
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import { agentsService, AgentType } from '@/services/agents.service';
|
||||
import { profileSectionsService } from '@/services/profile-sections.service';
|
||||
import type { HeroContent } from '@/types/cms';
|
||||
|
||||
const defaultHeroContent: HeroContent = {
|
||||
@@ -17,25 +18,18 @@ export function HeroSection({ content }: { content?: HeroContent }) {
|
||||
const data = content ?? defaultHeroContent;
|
||||
const router = useRouter();
|
||||
const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
|
||||
const [specializationOptions, setSpecializationOptions] = useState<{ id: string; name: string }[]>([]);
|
||||
const [specializationSlug, setSpecializationSlug] = useState<string>('');
|
||||
const [searchParams, setSearchParams] = useState({
|
||||
category: '',
|
||||
specialization: '',
|
||||
type: '',
|
||||
name: '',
|
||||
location: '',
|
||||
});
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||||
|
||||
// Category options (UI only - no functionality)
|
||||
const categoryOptions = [
|
||||
{ id: 'residential', name: 'Residential' },
|
||||
{ id: 'commercial', name: 'Commercial' },
|
||||
{ id: 'industrial', name: 'Industrial' },
|
||||
{ id: 'land', name: 'Land' },
|
||||
{ id: 'rental', name: 'Rental' },
|
||||
];
|
||||
const [validationError, setValidationError] = useState<string | null>(null);
|
||||
|
||||
// Fetch agent types on mount
|
||||
// Fetch agent types and specialization options on mount
|
||||
useEffect(() => {
|
||||
const fetchAgentTypes = async () => {
|
||||
try {
|
||||
@@ -45,7 +39,20 @@ export function HeroSection({ content }: { content?: HeroContent }) {
|
||||
console.error('Failed to fetch agent types:', error);
|
||||
}
|
||||
};
|
||||
const fetchSpecializations = async () => {
|
||||
try {
|
||||
const fields = await profileSectionsService.getFilterableFields();
|
||||
const specField = fields.find(f => f.slug.includes('specialization'));
|
||||
if (specField) {
|
||||
setSpecializationSlug(specField.slug);
|
||||
setSpecializationOptions(specField.options.map(o => ({ id: o.value, name: o.label })));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch specializations:', error);
|
||||
}
|
||||
};
|
||||
fetchAgentTypes();
|
||||
fetchSpecializations();
|
||||
}, []);
|
||||
|
||||
const handleSearch = () => {
|
||||
@@ -53,9 +60,10 @@ export function HeroSection({ content }: { content?: HeroContent }) {
|
||||
const hasType = searchParams.type.trim() !== '';
|
||||
const hasName = searchParams.name.trim() !== '';
|
||||
const hasLocation = searchParams.location.trim() !== '';
|
||||
const hasSpecialization = searchParams.specialization.trim() !== '';
|
||||
|
||||
if (!hasType && !hasName && !hasLocation) {
|
||||
setValidationError('Please enter at least one search criteria (Type, Name/Keyword, or Location)');
|
||||
if (!hasType && !hasName && !hasLocation && !hasSpecialization) {
|
||||
setValidationError('Please enter at least one search criteria (Type, Name/Keyword, Location, or Specialization)');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -66,6 +74,9 @@ export function HeroSection({ content }: { content?: HeroContent }) {
|
||||
if (searchParams.type) params.set('type', searchParams.type);
|
||||
if (searchParams.name) params.set('name', searchParams.name);
|
||||
if (searchParams.location) params.set('location', searchParams.location);
|
||||
if (searchParams.specialization && specializationSlug) {
|
||||
params.set('filters', JSON.stringify({ [specializationSlug]: [searchParams.specialization] }));
|
||||
}
|
||||
router.push(`/user/profiles?${params.toString()}`);
|
||||
};
|
||||
|
||||
@@ -77,9 +88,10 @@ export function HeroSection({ content }: { content?: HeroContent }) {
|
||||
setOpenDropdown(openDropdown === dropdown ? null : dropdown);
|
||||
};
|
||||
|
||||
const selectCategory = (value: string) => {
|
||||
setSearchParams({ ...searchParams, category: value });
|
||||
const selectSpecialization = (value: string) => {
|
||||
setSearchParams({ ...searchParams, specialization: value });
|
||||
setOpenDropdown(null);
|
||||
setValidationError(null);
|
||||
};
|
||||
|
||||
const selectType = (value: string) => {
|
||||
@@ -179,32 +191,32 @@ export function HeroSection({ content }: { content?: HeroContent }) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category Select (UI only) */}
|
||||
{/* Specialization Select */}
|
||||
<div className="relative flex-shrink-0 md:w-[160px]">
|
||||
<button
|
||||
onClick={() => toggleDropdown('category')}
|
||||
onClick={() => toggleDropdown('specialization')}
|
||||
className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
|
||||
>
|
||||
<span className="font-serif text-sm text-[#00293d]">
|
||||
{searchParams.category ? categoryOptions.find(c => c.id === searchParams.category)?.name : 'Categories'}
|
||||
<span className="font-serif text-sm text-[#00293d] truncate">
|
||||
{searchParams.specialization ? specializationOptions.find(o => o.id === searchParams.specialization)?.name : 'Specialization'}
|
||||
</span>
|
||||
<Image
|
||||
src="/assets/icons/chevron-down-icon.svg"
|
||||
alt=""
|
||||
width={10}
|
||||
height={10}
|
||||
className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`}
|
||||
className={`transition-transform ${openDropdown === 'specialization' ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
{openDropdown === 'category' && (
|
||||
{openDropdown === 'specialization' && (
|
||||
<div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden max-h-[200px] overflow-y-auto">
|
||||
{categoryOptions.map((category, index, arr) => (
|
||||
{specializationOptions.map((option, index, arr) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => selectCategory(category.id)}
|
||||
key={option.id}
|
||||
onClick={() => selectSpecialization(option.id)}
|
||||
className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
|
||||
>
|
||||
{category.name}
|
||||
{option.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user