From 125b281275f31585441a6aabab1a6a5fadafb7dd Mon Sep 17 00:00:00 2001 From: vergiLgood1 Date: Mon, 5 May 2025 00:19:30 +0700 Subject: [PATCH] fix: fix suggestion doesnt appear when handleSearchTypeSelect trigger --- .../app/_components/action-search-bar.tsx | 14 ++ .../_components/map/controls/top-controls.tsx | 198 +++++++++--------- 2 files changed, 115 insertions(+), 97 deletions(-) diff --git a/sigap-website/app/_components/action-search-bar.tsx b/sigap-website/app/_components/action-search-bar.tsx index 8494068..18c410c 100644 --- a/sigap-website/app/_components/action-search-bar.tsx +++ b/sigap-website/app/_components/action-search-bar.tsx @@ -169,6 +169,20 @@ const ActionSearchBar = forwardRef( } }, [activeAction, onChange, value]); + useEffect(() => { + if (activeAction?.prefix && onChange) { + if (!value?.startsWith(activeAction.prefix)) { + onChange(activeAction.prefix + (value || "").replace(activeAction.prefix || "", "")); + + // Trigger the onChange handler immediately with the prefix + // This ensures suggestions appear right away + if (value === "") { + onChange(activeAction.prefix); + } + } + } + }, [activeAction, onChange, value]); + const handleInputChange = (e: React.ChangeEvent) => { const newValue = e.target.value; diff --git a/sigap-website/app/_components/map/controls/top-controls.tsx b/sigap-website/app/_components/map/controls/top-controls.tsx index 0ba4ae5..f13bb84 100644 --- a/sigap-website/app/_components/map/controls/top-controls.tsx +++ b/sigap-website/app/_components/map/controls/top-controls.tsx @@ -218,20 +218,23 @@ export default function TopControl({ setSearchValue(prefix); setIsInputValid(true); - const initialSuggestions = EXPANDED_SAMPLE_DATA.filter(item => { - if (actionId === 'crime_id' && item.id.startsWith('CR-')) { - return true; - } else if (actionId === 'incident_id' && item.id.startsWith('CI-')) { - return true; - } else if (actionId === 'description' || actionId === 'address') { - return true; - } else if (actionId === 'coordinates') { - return false; - } - return false; - }); + // Immediately filter and show suggestions based on the selected search type + let initialSuggestions: Array<{ id: string, description: string }> = []; - setSuggestions(initialSuggestions); + if (actionId === 'crime_id') { + initialSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CR-')); + } else if (actionId === 'incident_id') { + initialSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CI-')); + } else if (actionId === 'description' || actionId === 'address') { + initialSuggestions = EXPANDED_SAMPLE_DATA; + } + + console.log("Initial suggestions count:", initialSuggestions.length); + + // Force a re-render by setting suggestions in the next tick + setTimeout(() => { + setSuggestions(initialSuggestions); + }, 0); setTimeout(() => { if (searchInputRef.current) { @@ -241,8 +244,87 @@ export default function TopControl({ } }, 50); } + } + + // Create a helper function for filtering suggestions + const filterSuggestions = (searchType: string, searchText: string): Array<{ id: string, description: string }> => { + let filtered: Array<{ id: string, description: string }> = []; + + if (searchType === 'crime_id') { + if (!searchText || searchText === 'CR-') { + filtered = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CR-')); + } else { + filtered = EXPANDED_SAMPLE_DATA.filter(item => + item.id.startsWith('CR-') && + (item.id.toLowerCase().includes(searchText.toLowerCase()) || + item.description.toLowerCase().includes(searchText.toLowerCase())) + ); + } + } + else if (searchType === 'incident_id') { + if (!searchText || searchText === 'CI-') { + filtered = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CI-')); + } else { + filtered = EXPANDED_SAMPLE_DATA.filter(item => + item.id.startsWith('CI-') && + (item.id.toLowerCase().includes(searchText.toLowerCase()) || + item.description.toLowerCase().includes(searchText.toLowerCase())) + ); + } + } + else if (searchType === 'description') { + if (!searchText) { + filtered = EXPANDED_SAMPLE_DATA; + } else { + filtered = EXPANDED_SAMPLE_DATA.filter(item => + item.description.toLowerCase().includes(searchText.toLowerCase()) + ); + } + } + else if (searchType === 'address') { + if (!searchText) { + filtered = EXPANDED_SAMPLE_DATA; + } else { + filtered = EXPANDED_SAMPLE_DATA.filter(item => + item.description.toLowerCase().includes(searchText.toLowerCase()) + ); + } + } + + return filtered; }; + const handleSearchChange = (value: string) => { + const currentSearchType = selectedSearchType ? + ACTIONS.find(action => action.id === selectedSearchType) : null; + + if (currentSearchType?.prefix && currentSearchType.prefix.length > 0) { + if (!value.startsWith(currentSearchType.prefix)) { + value = currentSearchType.prefix; + } + } + + setSearchValue(value); + + if (currentSearchType?.regex) { + if (!value || value === currentSearchType.prefix) { + setIsInputValid(true); + } else { + setIsInputValid(currentSearchType.regex.test(value)); + } + } else { + setIsInputValid(true); + } + + if (!selectedSearchType) { + setSuggestions([]); + return; + } + + // Use the helper function to filter suggestions + setSuggestions(filterSuggestions(selectedSearchType, value)); + } + const handleClearSearchType = () => { setSelectedSearchType(null); setSearchValue(""); @@ -290,79 +372,6 @@ export default function TopControl({ setSelectedSuggestion(null); }; - const handleSearchChange = (value: string) => { - const currentSearchType = selectedSearchType ? - ACTIONS.find(action => action.id === selectedSearchType) : null; - - if (currentSearchType?.prefix && currentSearchType.prefix.length > 0) { - if (!value.startsWith(currentSearchType.prefix)) { - value = currentSearchType.prefix; - } - } - - setSearchValue(value); - - if (currentSearchType?.regex) { - if (!value || value === currentSearchType.prefix) { - setIsInputValid(true); - } else { - setIsInputValid(currentSearchType.regex.test(value)); - } - } else { - setIsInputValid(true); - } - - if (!selectedSearchType) { - setSuggestions([]); - return; - } - - let filteredSuggestions: Array<{ id: string, description: string }> = []; - const searchText = value.toLowerCase(); - - if (currentSearchType?.id === 'crime_id') { - filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => - item.id.startsWith('CR-') && - (item.id.toLowerCase().includes(searchText) || - item.description.toLowerCase().includes(searchText)) - ); - } - else if (currentSearchType?.id === 'incident_id') { - filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => - item.id.startsWith('CI-') && - (item.id.toLowerCase().includes(searchText) || - item.description.toLowerCase().includes(searchText)) - ); - } - else if (currentSearchType?.id === 'description') { - filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => - item.description.toLowerCase().includes(searchText) - ); - } - else if (currentSearchType?.id === 'address') { - filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => - item.description.toLowerCase().includes(searchText) - ); - } - else if (currentSearchType?.id === 'coordinates') { - filteredSuggestions = []; - } - - if (!value || (currentSearchType?.prefix && value === currentSearchType.prefix)) { - if (currentSearchType?.id === 'crime_id') { - filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CR-')); - } - else if (currentSearchType?.id === 'incident_id') { - filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CI-')); - } - else if (currentSearchType?.id === 'description' || currentSearchType?.id === 'address') { - filteredSuggestions = EXPANDED_SAMPLE_DATA; - } - } - - setSuggestions(filteredSuggestions); - }; - const toggleSelectors = () => { setShowSelectors(!showSelectors) } @@ -371,6 +380,9 @@ export default function TopControl({ setShowSearch(!showSearch) if (!showSearch && onControlChange) { onControlChange("search" as ITopTooltipsMapId) + setSelectedSearchType(null); + setSearchValue(""); + setSuggestions([]); } } @@ -578,7 +590,7 @@ export default function TopControl({ )} - {suggestions.length > 0 && ( + {(suggestions.length > 0 && selectedSearchType) && (

@@ -615,7 +627,7 @@ export default function TopControl({

)} - {searchValue.length > (selectedSearchType && ACTIONS.find(a => a.id === selectedSearchType)?.prefix?.length || 0) && + {selectedSearchType && searchValue.length > (ACTIONS.find(a => a.id === selectedSearchType)?.prefix?.length || 0) && suggestions.length === 0 && (

No matching incidents found

@@ -642,15 +654,7 @@ export default function TopControl({ ) : (
-

{selectedSuggestion?.id}

- {/* */} +

{selectedSuggestion?.id}

{selectedSuggestion && (