import React, { useEffect, useState, useCallback } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { mdiMagnify, mdiMapMarker, mdiFilterVariant, mdiStar, mdiShieldCheck, mdiChevronRight, mdiSortVariant } from '@mdi/js'; import BaseIcon from '../components/BaseIcon'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; import { fetch as fetchBusinesses } from '../stores/businesses/businessesSlice'; import { fetch as fetchCategories } from '../stores/categories/categoriesSlice'; import LayoutGuest from '../layouts/Guest'; import SectionMain from '../components/SectionMain'; import Link from 'next/link'; import type { ReactElement } from 'react'; const SearchPage = () => { const router = useRouter(); const dispatch = useAppDispatch(); const { businesses, loading } = useAppSelector((state) => state.businesses); const { categories } = useAppSelector((state) => state.categories); const [searchQuery, setSearchQuery] = useState(''); const [locationQuery, setLocationQuery] = useState(''); const executeSearch = useCallback((q: string, l: string, category?: string) => { let queryStr = '?'; if (q) queryStr += `name=${encodeURIComponent(q)}&`; if (l) queryStr += `city=${encodeURIComponent(l)}&`; if (category) queryStr += `category=${encodeURIComponent(category)}&`; dispatch(fetchBusinesses({ query: queryStr })); }, [dispatch]); useEffect(() => { if (router.isReady) { const q = router.query.q as string || ''; const l = router.query.l as string || ''; const category = router.query.category as string || ''; setSearchQuery(q); setLocationQuery(l); executeSearch(q, l, category); dispatch(fetchCategories({ query: '' })); } }, [dispatch, router.isReady, router.query, executeSearch]); const handleSearchClick = () => { router.push({ pathname: '/search', query: { q: searchQuery, l: locationQuery }, }); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleSearchClick(); } }; return (
Find Services | Crafted Network™ {/* Hero Search Area */}

What service are you looking for today?

setSearchQuery(e.target.value)} onKeyDown={handleKeyDown} placeholder="Service, professional or business name" className="w-full bg-transparent border-none focus:ring-0 py-3 pl-12 pr-4 text-white placeholder-slate-500" />
setLocationQuery(e.target.value)} onKeyDown={handleKeyDown} placeholder="City or Zip code" className="w-full bg-transparent border-none focus:ring-0 py-3 pl-12 pr-4 text-white placeholder-slate-500" />
{/* Main Content */}
{/* Filters Sidebar */} {/* Results Area */}
{loading ? ( Searching professionals... ) : ( <>Found {businesses ? businesses.length : 0} verified professionals )}
Sort by: Reliability Score
{loading ? (
{[1, 2, 3, 4].map((i) => (
))}
) : (
{businesses && businesses.length > 0 ? ( businesses.map((biz: any) => (
{biz.business_photos?.[0]?.photo_url ? ( {biz.name} ) : (
)}
{biz.rating || '4.9'}

{biz.name}

{biz.is_active && ( )}
{biz.city || biz.locations?.[0]?.city || 'Verified Professional'}
Top Professional
)) ) : (

No results found

Try adjusting your filters or searching for something else.

)}
)}
); }; SearchPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default SearchPage;