refactor: improve ComboboxSelect component and usage

gokulvij · gokulvij · commit 709c371187ef · 2025-09-16T11:56:45.000+05:30
diff --git a/thingconnect.pulse.client/src/components/common/ComboboxSelect.tsx b/thingconnect.pulse.client/src/components/common/ComboboxSelect.tsx
@@ -1,90 +1,74 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, type ComponentProps } from 'react';
 import { Combobox, HStack, Portal, Span, Spinner, Skeleton } from '@chakra-ui/react';
 import { useFilter, useListCollection } from '@chakra-ui/react';
 
-type EndpointOption = {
+type Option = {
   label: string;
   value: string;
 };
 
-interface ComboboxProps {
-  items: { label: string; value: string }[];
-  selectedValue: string;
+interface ComboboxProps extends Omit<ComponentProps<typeof Combobox.Root>, 'onChange' | 'children' | 'value' | 'collection'
+> {
+  items: Option[];
+  selectedValue?: string;
   onChange: (value: string) => void;
-  isLoading?: boolean;
-  error?: boolean;
   placeholder?: string;
-  optionName?: string;
-  defaultToFirst?: boolean;
+  isLoading?: boolean;
 }
 
 export function ComboboxSelect({
   items,
-  selectedValue,
+  selectedValue = '',
   onChange,
+  placeholder = 'Select an option',
   isLoading = false,
-  error = false,
-  placeholder = 'Select endpoint...',
-  optionName = '',
-  defaultToFirst = false,
+  ...rest
 }: ComboboxProps) {
-  const [cleared, setCleared] = useState(false);
-
-  const itemsWithAll: EndpointOption[] =
-    defaultToFirst && items.length > 0
-      ? items
-      : [{ label: `All ${optionName}`, value: '' }, ...items];
 
-      console.log('Items with All option:', itemsWithAll);
+  const itemsWithAll = useMemo(() => {
+    return items.length > 0 
+      ? [{ label: 'All', value: '' }, ...items] 
+      : items;
+  }, [items]);
 
-  // Filtering
   const { contains } = useFilter({ sensitivity: 'base' });
-  const { collection, set, filter } = useListCollection<EndpointOption>({
+  const { collection, set, filter } = useListCollection<Option>({
     initialItems: [],
     itemToString: item => item.label,
     itemToValue: item => item.value,
     filter: contains,
   });
 
-  // Update collection whenever items change
   useEffect(() => {
     set(itemsWithAll);
-
-    if (defaultToFirst && itemsWithAll.length > 0 && !selectedValue && !cleared) {
-      console.log('Defaulting to first item:', itemsWithAll[0]);
-      onChange(itemsWithAll[0].value);
-
-    } else if (!defaultToFirst && !selectedValue && !cleared) {
-      console.log('Defaulting to "All" option');
-      onChange('');
-    }
-  }, [items, set, selectedValue, cleared, onChange]);
+  }, [itemsWithAll, set]);
 
   return (
     <Skeleton loading={isLoading} w='md'>
       <Combobox.Root
-        size='xs'
+        size='md'
         w='xs'
         collection={collection}
-        // value={selectedValue ? [selectedValue] : []}
         value={[selectedValue]}
         onValueChange={e => {
-          onChange(e.value[0] ?? '');
-          setCleared(false);
+          const newValue = e.value[0] ?? '';
+          onChange(newValue);
         }}
         onInputValueChange={e => filter(e.inputValue)}
         onOpenChange={open => {
           if (open) filter('');
         }}
         openOnClick
+        {...rest}
       >
         <Combobox.Control>
-          <Combobox.Input placeholder={placeholder} />
+          <Combobox.Input 
+            placeholder={placeholder || 'Select an option'} 
+          />
           <Combobox.IndicatorGroup>
             <Combobox.ClearTrigger
               onClick={() => {
                 onChange('');
-                setCleared(true);
               }}
             />
             <Combobox.Trigger />
@@ -96,14 +80,10 @@ export function ComboboxSelect({
               {isLoading ? (
                 <HStack p='2'>
                   <Spinner size='xs' borderWidth='1px' />
-                  <Span>Loading endpoints...</Span>
+                  <Span>Loading...</Span>
                 </HStack>
-              ) : error ? (
-                <Span p='2' color='fg.error'>
-                  Failed to load endpoints
-                </Span>
               ) : collection.items.length === 0 ? (
-                <Combobox.Empty>No endpoints found</Combobox.Empty>
+                <Combobox.Empty>No options found</Combobox.Empty>
               ) : (
                 collection.items.map(item => (
                   <Combobox.Item key={item.value} item={item}>
@@ -120,4 +100,4 @@ export function ComboboxSelect({
       </Combobox.Root>
     </Skeleton>
   );
-}
+}
diff --git a/thingconnect.pulse.client/src/components/status/StatusFilters.tsx b/thingconnect.pulse.client/src/components/status/StatusFilters.tsx
@@ -7,14 +7,11 @@ import {
   Input,
   Text,
   Menu,
-  Combobox,
-  useFilter,
-  useListCollection,
 } from '@chakra-ui/react';
 import { X } from 'lucide-react';
 import type { LiveStatusParams } from '@/api/types';
 import { MdSearch, MdExpandMore } from 'react-icons/md';
-import { useEffect, useState } from 'react';
+import { ComboboxSelect } from '../common/ComboboxSelect';
 // import { EndpointCombobox } from '../common/ComboboxSelect';
 
 interface StatusFiltersProps {
@@ -44,28 +41,6 @@ export function StatusFilters({
   selectedGroup,
   onSelectedGroupChange,
 }: StatusFiltersProps) {
-  // const [cleared, setCleared] = useState(false);
-
-  // const { contains } = useFilter({ sensitivity: 'base' });
-  // const { collection, filter, set } = useListCollection<{
-  //   label: string;
-  //   value: string;
-  // }>({
-  //   initialItems: [], // start empty
-  //   itemToString: item => item.label,
-  //   itemToValue: item => item.value,
-  //   filter: contains,
-  // });
-
-  // useEffect(() => {
-  //   const newItems = groups.map(g => ({
-  //     label: g.name,
-  //     value: g.id,
-  //   }));
-
-  //   set(newItems);
-  // }, [groups, set, cleared]);
-
   const handleGroupChange = (value: string) => {
     const newGroup = value || undefined;
     onSelectedGroupChange?.(newGroup);
@@ -76,10 +51,8 @@ export function StatusFilters({
   };
 
   const handleSearchChange = (value: string) => {
-    // Update search term in parent component
     onSearchChange && onSearchChange(value);
 
-    // Optionally reset page when searching
     onFiltersChange({
       ...filters,
       search: value || undefined,
@@ -88,19 +61,9 @@ export function StatusFilters({
 
   const clearSearch = () => {
     onSearchChange?.('');
-    // Optional: reset local cleared state    
+    
   };
 
-  // const clearFilter = () => {
-  //   onFiltersChange({
-  //     ...filters,
-  //     group: undefined,
-  //     search: undefined,
-  //   });
-  //   onSelectedGroupChange?.(undefined);
-  //   setCleared(true);
-  // };
-
   return (
     <Box
       position={{ base: 'sticky', md: 'static' }}
@@ -124,61 +87,7 @@ export function StatusFilters({
     >
       <HStack gap={{ base: 2, md: 4 }} align='center' flexWrap={{ base: 'wrap', md: 'nowrap' }}>
         {/* Group Filter */}
-        <Box w={'25%'}>
-          {/* <Combobox.Root
-            size='md'
-            collection={collection}
-            value={selectedGroup ? [selectedGroup] : []}
-            onValueChange={e => {
-              handleGroupChange(e.value[0]);
-              setCleared(false);
-            }}
-            onInputValueChange={e => {
-              filter(e.inputValue);
-            }}
-            onOpenChange={open => {
-              if (open) filter('');
-            }}
-            openOnClick
-          >
-            <Combobox.Control>
-              <Combobox.Input placeholder='Select Group...' />
-              <Combobox.IndicatorGroup>
-                <Combobox.ClearTrigger onClick={clearFilter} cursor={'pointer'} />
-                <Combobox.Trigger />
-              </Combobox.IndicatorGroup>
-            </Combobox.Control>
-            <Combobox.Positioner>
-              <Combobox.Content>
-                <Combobox.Empty>No groups found</Combobox.Empty>
-                <Combobox.Item key='allgroups' item={{ label: 'All Groups', value: '' }}>
-                  <HStack justify='space-between' textStyle='sm'>
-                    All Groups
-                  </HStack>
-                </Combobox.Item>
-                {collection.items.map(item => {
-                  return (
-                    <Combobox.Item key={item.value} item={item}>
-                      <HStack justify='space-between' textStyle='sm'>
-                        {item.label}
-                      </HStack>
-                    </Combobox.Item>
-                  );
-                })}
-              </Combobox.Content>
-            </Combobox.Positioner>
-          </Combobox.Root> */}
-          {/* <EndpointCombobox 
-            items={groups.map(g => ({ label: g.name, value: g.id }))}
-            selectedValue={selectedGroup ? selectedGroup : ''}
-            onChange={handleGroupChange}
-            isLoading={false}
-            error={undefined}
-            placeholder='Select Group...'
-            optionName='Groups'
-            defaultToFirst={false}
-          /> */}
-        </Box>
+
         {/* Search Input */}
         <Flex w='80' position='relative' align='center'>
           <Icon
