Function SelectFilter

app/src/components/Filters/Filter/SelectFilter.tsx:17–75

({
  filterOptions,
  filter,
  urlKey,
}: {
  filterOptions: AtLeastOne<FilterOption>;
  filter: FilterData;
  urlKey?: string;
})

import InputDropdown from "~/components/InputDropdown";

const SelectFilter = ({
  filterOptions,
  filter,
  urlKey,
}: {
  filterOptions: AtLeastOne<FilterOption>;
  filter: FilterData;
  urlKey?: string;
}) => {
  const { updateFilter, removeFilter } = useFilters({ urlKey });

  const filterOption = useMemo(() => {
    return filterOptions.find(
      (option) => option.field === filter.field && option.type === "select",
    ) as SelectFilterOption | undefined;
  }, [filter.field, filterOptions]);

  const selectedSelectFilterOption = useMemo(() => {
    const selectOptions = filterOption?.options || [];
    return selectOptions.find((option) => option.value === filter.value) || selectOptions[0];
  }, [filterOption, filter.value]);

  const onOptionUpdated = useCallback(
    (option: SelectFilterSelectOption) => {
      updateFilter({ ...filter, value: option.value });
    },
    [updateFilter, filter],
  );

  const valueIsEmpty = !filter.value;

  useEffect(() => {
    if (valueIsEmpty && selectedSelectFilterOption) {
      onOptionUpdated(selectedSelectFilterOption);
    }
  }, [valueIsEmpty, onOptionUpdated, selectedSelectFilterOption]);

  if (!filterOption?.options || !selectedSelectFilterOption) {
    return null;
  }

  return (
    <HStack>
      <SelectFieldDropdown filterOptions={filterOptions} filter={filter} urlKey={urlKey} />
      <SelectComparatorDropdown filter={filter} filterType="select" urlKey={urlKey} />
      <InputDropdown
        options={filterOption.options}
        getDisplayLabel={(option) => option.label ?? option.value}
        selectedOption={selectedSelectFilterOption}
        onSelect={onOptionUpdated}
      />
      <IconButton
        aria-label="Remove Filter"
        icon={<BsTrash />}
        onClick={() => removeFilter(filter)}
      />
    </HStack>
  );