\n \n\n",[],[236,238],"3728bf5e-ea78-11f0-82ad-42dde27851f2","SearchApp.tsx","e0e6e70a-ea73-11f0-847c-42dde27851f2","137447a7-6847-416a-94f5-72646e8e25d0",["D",1767646249076],9,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport {\n FEATURES,\n NEIGHBORHOODS,\n ParsedSegment,\n PROPERTY_TYPES,\n SearchFilters,\n} from \"../../shared/types.ts\";\nimport { formatPrice, parseSearchQuery } from \"../../shared/parser.ts\";\n\ninterface Property {\n id: number;\n address: string;\n price: number;\n beds: number;\n baths: number;\n sqft: number;\n propertyType: string;\n features: string[];\n neighborhood: string;\n images: string[];\n}\n\nexport function SearchApp() {\n const [query, setQuery] = useState(\"\");\n const [filters, setFilters] = useState({\n neighborhoods: [],\n propertyTypes: [],\n features: [],\n });\n const [segments, setSegments] = useState([]);\n const [manualOverrides, setManualOverrides] = useState<\n Set\n >(new Set());\n const [updatedFilters, setUpdatedFilters] = useState>(new Set());\n const [properties, setProperties] = useState([]);\n const [loading, setLoading] = useState(false);\n const inputRef = useRef(null);\n\n // Fetch properties when filters change\n useEffect(() => {\n const fetchProperties = async () => {\n // Only search if we have some filters set\n const hasFilters = Object.values(filters).some((v) =>\n v !== undefined && (Array.isArray(v) ? v.length > 0 : true)\n );\n\n if (!hasFilters) {\n setProperties([]);\n return;\n }\n\n setLoading(true);\n try {\n const params = new URLSearchParams();\n\n if (filters.beds) params.append(\"beds\", filters.beds.toString());\n if (filters.baths) params.append(\"baths\", filters.baths.toString());\n if (filters.priceMin) {\n params.append(\"priceMin\", filters.priceMin.toString());\n }\n if (filters.priceMax) {\n params.append(\"priceMax\", filters.priceMax.toString());\n }\n if (filters.neighborhoods.length > 0) {\n params.append(\"neighborhoods\", filters.neighborhoods.join(\",\"));\n }\n if (filters.propertyTypes.length > 0) {\n params.append(\"propertyTypes\", filters.propertyTypes.join(\",\"));\n }\n if (filters.features.length > 0) {\n params.append(\"features\", filters.features.join(\",\"));\n }\n\n const response = await fetch(`/api/search?${params}`);\n const data = await response.json();\n setProperties(data.properties || []);\n } catch (error) {\n console.error(\"Error fetching properties:\", error);\n setProperties([]);\n } finally {\n setLoading(false);\n }\n };\n\n // Debounce the search to avoid too many requests\n const timeoutId = setTimeout(fetchProperties, 300);\n return () => clearTimeout(timeoutId);\n }, [filters]);\n\n useEffect(() => {\n const { filters: parsedFilters, segments: parsedSegments } =\n parseSearchQuery(query);\n\n // Only update filters that haven't been manually overridden\n const newFilters = { ...filters };\n const newUpdated = new Set();\n\n if (!manualOverrides.has(\"beds\") && parsedFilters.beds !== filters.beds) {\n newFilters.beds = parsedFilters.beds;\n if (parsedFilters.beds) newUpdated.add(\"beds\");\n }\n\n if (\n !manualOverrides.has(\"baths\") && parsedFilters.baths !== filters.baths\n ) {\n newFilters.baths = parsedFilters.baths;\n if (parsedFilters.baths) newUpdated.add(\"baths\");\n }\n\n if (\n !manualOverrides.has(\"priceMin\") &&\n parsedFilters.priceMin !== filters.priceMin\n ) {\n newFilters.priceMin = parsedFilters.priceMin;\n if (parsedFilters.priceMin) newUpdated.add(\"priceMin\");\n }\n\n if (\n !manualOverrides.has(\"priceMax\") &&\n parsedFilters.priceMax !== filters.priceMax\n ) {\n newFilters.priceMax = parsedFilters.priceMax;\n if (parsedFilters.priceMax) newUpdated.add(\"priceMax\");\n }\n\n if (!manualOverrides.has(\"neighborhoods\")) {\n const neighborhoodsChanged =\n JSON.stringify(parsedFilters.neighborhoods.sort()) !==\n JSON.stringify(filters.neighborhoods.sort());\n if (neighborhoodsChanged) {\n newFilters.neighborhoods = parsedFilters.neighborhoods;\n if (parsedFilters.neighborhoods.length > 0) {\n newUpdated.add(\"neighborhoods\");\n }\n }\n }\n\n if (!manualOverrides.has(\"propertyTypes\")) {\n const typesChanged =\n JSON.stringify(parsedFilters.propertyTypes.sort()) !==\n JSON.stringify(filters.propertyTypes.sort());\n if (typesChanged) {\n newFilters.propertyTypes = parsedFilters.propertyTypes;\n if (parsedFilters.propertyTypes.length > 0) {\n newUpdated.add(\"propertyTypes\");\n }\n }\n }\n\n if (!manualOverrides.has(\"features\")) {\n const featuresChanged = JSON.stringify(parsedFilters.features.sort()) !==\n JSON.stringify(filters.features.sort());\n if (featuresChanged) {\n newFilters.features = parsedFilters.features;\n if (parsedFilters.features.length > 0) newUpdated.add(\"features\");\n }\n }\n\n setFilters(newFilters);\n setSegments(parsedSegments);\n setUpdatedFilters(newUpdated);\n\n // Clear animation classes after animation completes\n if (newUpdated.size > 0) {\n setTimeout(() => setUpdatedFilters(new Set()), 300);\n }\n }, [query, manualOverrides]);\n\n const handleManualFilterChange = (\n filterType: keyof SearchFilters,\n value: any,\n ) => {\n setManualOverrides((prev) => new Set(prev).add(filterType));\n setFilters((prev) => ({ ...prev, [filterType]: value }));\n };\n\n const removeChip = (type: string, value?: any) => {\n if (\n type === \"beds\" || type === \"baths\" || type === \"priceMin\" ||\n type === \"priceMax\"\n ) {\n setFilters((prev) => ({ ...prev, [type]: undefined }));\n setManualOverrides((prev) => {\n const newSet = new Set(prev);\n newSet.delete(type as keyof SearchFilters);\n return newSet;\n });\n } else if (\n type === \"neighborhoods\" || type === \"propertyTypes\" ||\n type === \"features\"\n ) {\n setFilters((prev) => ({\n ...prev,\n [type]: prev[type as keyof SearchFilters].filter((item: string) =>\n item !== value\n ),\n }));\n }\n };\n\n const renderHighlightedText = () => {\n if (segments.length === 0) return query;\n\n let result = [];\n let lastIndex = 0;\n\n segments.forEach((segment, i) => {\n // Add text before this segment\n if (segment.start > lastIndex) {\n result.push(query.slice(lastIndex, segment.start));\n }\n\n // Add highlighted segment\n result.push(\n \n {segment.text}\n ,\n );\n\n lastIndex = segment.end;\n });\n\n // Add remaining text\n if (lastIndex < query.length) {\n result.push(query.slice(lastIndex));\n }\n\n return result;\n };\n\n const getChips = () => {\n const chips = [];\n\n if (filters.beds) {\n chips.push({\n type: \"beds\",\n label: `${filters.beds} bed${filters.beds > 1 ? \"s\" : \"\"}`,\n color: \"bg-blue-100 text-blue-800\",\n });\n }\n\n if (filters.baths) {\n chips.push({\n type: \"baths\",\n label: `${filters.baths} bath${filters.baths > 1 ? \"s\" : \"\"}`,\n color: \"bg-green-100 text-green-800\",\n });\n }\n\n if (filters.priceMin) {\n chips.push({\n type: \"priceMin\",\n label: `Min ${formatPrice(filters.priceMin)}`,\n color: \"bg-yellow-100 text-yellow-800\",\n });\n }\n\n if (filters.priceMax) {\n chips.push({\n type: \"priceMax\",\n label: `Max ${formatPrice(filters.priceMax)}`,\n color: \"bg-red-100 text-red-800\",\n });\n }\n\n filters.neighborhoods.forEach((neighborhood) => {\n chips.push({\n type: \"neighborhoods\",\n label: neighborhood,\n value: neighborhood,\n color: \"bg-purple-100 text-purple-800\",\n });\n });\n\n filters.propertyTypes.forEach((type) => {\n chips.push({\n type: \"propertyTypes\",\n label: type,\n value: type,\n color: \"bg-cyan-100 text-cyan-800\",\n });\n });\n\n filters.features.forEach((feature) => {\n chips.push({\n type: \"features\",\n label: feature,\n value: feature,\n color: \"bg-lime-100 text-lime-800\",\n });\n });\n\n return chips;\n };\n\n const PropertyCard = ({ property }: { property: Property }) => (\n

\n \n \n \n

\n {formatPrice(property.price)}\n

\n\n

\n {property.address}\n

\n\n

\n \n \n \n \n \n {property.beds} bed{property.beds !== 1 ? \"s\" : \"\"}\n \n \n \n \n \n {property.baths} bath{property.baths !== 1 ? \"s\" : \"\"}\n \n \n \n \n \n {property.sqft.toLocaleString()} sqft\n \n

\n\n

\n \n {property.propertyType}\n \n {property.features.slice(0, 2).map((feature) => (\n \n {feature}\n \n ))}\n {property.features.length > 2 && (\n \n +{property.features.length - 2} more\n \n )}\n

\n );\n\n return (\n

\n Find Your Dream Home\n

\n Type naturally - \"2 bed 1 bath under 750k in Williamsburg with\n laundry\"\n

\n\n {/* Main Search Input */}\n

\n setQuery(e.target.value)}\n placeholder=\"2 bed 1 bath under 750k in Williamsburg with laundry\"\n className=\"w-full px-6 py-4 text-lg border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none search-input\"\n style={{\n background: \"transparent\",\n color: \"transparent\",\n caretColor: \"#374151\",\n }}\n />\n \n {renderHighlightedText()}\n

\n\n {/* Filter Dropdowns */}\n

\n {/* Beds */}\n \n handleManualFilterChange(\n \"beds\",\n e.target.value ? parseInt(e.target.value) : undefined,\n )}\n className={`px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 filter-dropdown ${\n updatedFilters.has(\"beds\") ? \"updated\" : \"\"\n }`}\n >\n \n {[1, 2, 3, 4, 5].map((num) => (\n \n ))}\n \n\n {/* Baths */}\n \n handleManualFilterChange(\n \"baths\",\n e.target.value ? parseFloat(e.target.value) : undefined,\n )}\n className={`px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500 filter-dropdown ${\n updatedFilters.has(\"baths\") ? \"updated\" : \"\"\n }`}\n >\n \n {[1, 1.5, 2, 2.5, 3, 3.5, 4].map((num) => (\n \n ))}\n \n\n {/* Price Min */}\n \n handleManualFilterChange(\n \"priceMin\",\n e.target.value ? parseInt(e.target.value) : undefined,\n )}\n className={`px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-500 filter-dropdown ${\n updatedFilters.has(\"priceMin\") ? \"updated\" : \"\"\n }`}\n >\n \n {[200000, 300000, 400000, 500000, 750000, 1000000, 1500000].map(\n (price) => (\n \n ),\n )}\n \n\n {/* Price Max */}\n \n handleManualFilterChange(\n \"priceMax\",\n e.target.value ? parseInt(e.target.value) : undefined,\n )}\n className={`px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-red-500 filter-dropdown ${\n updatedFilters.has(\"priceMax\") ? \"updated\" : \"\"\n }`}\n >\n \n {[500000, 750000, 1000000, 1500000, 2000000, 3000000].map((price) => (\n \n ))}\n \n\n {/* Neighborhoods */}\n {\n if (\n e.target.value && !filters.neighborhoods.includes(e.target.value)\n ) {\n handleManualFilterChange(\"neighborhoods\", [\n ...filters.neighborhoods,\n e.target.value,\n ]);\n }\n }}\n className={`px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 filter-dropdown ${\n updatedFilters.has(\"neighborhoods\") ? \"updated\" : \"\"\n }`}\n >\n \n {NEIGHBORHOODS.filter((n) => !filters.neighborhoods.includes(n)).map(\n (neighborhood) => (\n \n ),\n )}\n \n\n {/* Property Type */}\n {\n if (\n e.target.value && !filters.propertyTypes.includes(e.target.value)\n ) {\n handleManualFilterChange(\"propertyTypes\", [\n ...filters.propertyTypes,\n e.target.value,\n ]);\n }\n }}\n className={`px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-cyan-500 filter-dropdown ${\n updatedFilters.has(\"propertyTypes\") ? \"updated\" : \"\"\n }`}\n >\n \n {PROPERTY_TYPES.filter((t) => !filters.propertyTypes.includes(t)).map(\n (type) => ,\n )}\n \n\n {/* Features */}\n {\n if (e.target.value && !filters.features.includes(e.target.value)) {\n handleManualFilterChange(\"features\", [\n ...filters.features,\n e.target.value,\n ]);\n }\n }}\n className={`px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-lime-500 filter-dropdown ${\n updatedFilters.has(\"features\") ? \"updated\" : \"\"\n }`}\n >\n \n {FEATURES.filter((f) => !filters.features.includes(f)).map(\n (feature) => (\n \n ),\n )}\n \n

\n\n {/* Filter Chips */}\n {getChips().length > 0 && (\n

\n {getChips().map((chip, index) => (\n \n {chip.label}\n removeChip(chip.type, chip.value)}\n className=\"ml-2 hover:bg-black hover:bg-opacity-10 rounded-full p-0.5\"\n >\n \n \n \n \n \n ))}\n

\n )}\n\n {/* Search Results */}\n {loading\n ? (\n

Searching properties...

\n )\n : properties.length > 0\n ? (\n

\n {properties.length} Properties Found\n

\n Showing results for your search criteria\n

\n\n

\n {properties.map((property) => (\n \n ))}\n

\n )\n : (\n

\n \n \n \n

\n {Object.values(filters).some((v) =>\n v !== undefined && (Array.isArray(v) ? v.length > 0 : true)\n )\n ? \"No Properties Found\"\n : \"Search Results\"}\n

\n {Object.values(filters).some((v) =>\n v !== undefined && (Array.isArray(v) ? v.length > 0 : true)\n )\n ? \"Try adjusting your search criteria to find more properties\"\n : \"Start typing to see the magic happen!\"}\n

\n )}\n \n );\n}",[],[236,254,246],"components","e0e74cd6-ea73-11f0-847c-42dde27851f2",7,["D",1767644386375],[178],[236,254],"ea16efec-ea72-11f0-a178-42dde27851f2",["D",1767643972296],[177,179,180],[236],["D",1767645094567],[],[18,65],["D",1767644989162],[175],[18],["D",1767639838785],{"_11":12,"_129":71},{"_11":12,"_125":-5,"_70":71,"_31":69,"_126":127,"_128":30},{"_40":116,"_13":16,"_34":37,"_117":83,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":14,"_124":12},"ctx",{"_53":-5,"_148":307,"_308":309,"_310":311,"_312":30,"_313":30,"_314":30,"_315":24,"_316":-5,"_317":-7,"_318":-7,"_319":26,"_320":30,"_321":30,"_322":-5,"_323":30,"_324":30,"_325":30,"_326":-5},"ENV",{"_278":279,"_280":281,"_282":16,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend