From f81a77b452583d29b137fda1285ef201d72c5e80 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 7 Jun 2024 22:27:28 +0900
Subject: [PATCH] feat(cli): enhance SearchBox functionality

Added 'onChange' prop to the SearchBox component for active response to selection changes. Also updated the 'components' prop type and handled the related changes in the 'getSuggestion' use case. This includes mapping the components to their keys, updating the display name and handling selected results.
---
 packages/cli/src/components/SearchBox.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/components/SearchBox.tsx b/packages/cli/src/components/SearchBox.tsx
index 4d1e9ff..6913bfb 100644
--- a/packages/cli/src/components/SearchBox.tsx
+++ b/packages/cli/src/components/SearchBox.tsx
@@ -10,11 +10,13 @@ export function SearchBox({
   helper,
   initialQuery,
   onKeyDown,
+  onChange,
 }: {
-  components: string[]
+  components: {key: string; displayName: string}[]
   helper: string
   initialQuery?: string
   onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void
+  onChange?: (key: string) => void
 }) {
   const [query, setQuery] = useState<string>(initialQuery ?? '')
   const [isLoading, setLoading] = useState<boolean>(false)
@@ -23,12 +25,22 @@ export function SearchBox({
 
   useEffect(() => {
     setLoading(true)
-    getSuggestion(components, query).then((result) => {
+    getSuggestion(
+      components.map(({key}) => key),
+      query,
+    ).then((result) => {
       setSuggestions(result)
       setLoading(false)
+      if (result.length >= selected) {
+        setSelected(result.length - 1)
+      }
     })
   }, [query])
 
+  useEffect(() => {
+    onChange?.(suggestions[selected])
+  }, [selected, onChange])
+
   const app = useApp()
 
   useInput((i, k) => {
@@ -58,7 +70,9 @@ export function SearchBox({
           {suggestions.map((name, index) => {
             return (
               <Box borderStyle={'round'} key={name}>
-                <Text backgroundColor={selected === index ? 'white' : undefined}>{name}</Text>
+                <Text backgroundColor={selected === index ? 'white' : undefined}>
+                  {components[components.findIndex(({key}) => key === name)].displayName}
+                </Text>
               </Box>
             )
           })}