src/components/input/SegmentFilters.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import { IconLabel, List, ListItem } from '@umami/react-zen';
import { Empty } from '@/components/common/Empty';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useWebsiteSegmentsQuery } from '@/components/hooks';
import { ChartPie, UserPlus } from '@/components/icons';

export interface SegmentFiltersProps {
  websiteId: string;
  segmentId: string;
  type?: string;
  onChange?: (id: string, type: string) => void;
}

export function SegmentFilters({
  websiteId,
  segmentId,
  type = 'segment',
  onChange,
}: SegmentFiltersProps) {
  const { data, isLoading, isFetching } = useWebsiteSegmentsQuery(websiteId, { type });

  const handleChange = (id: string) => {
    onChange?.(id, type);
  };

  return (
    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} overflowY="auto">
      {data?.data?.length === 0 && <Empty />}
      <List selectionMode="single" value={[segmentId]} onChange={id => handleChange(id[0])}>
        {data?.data?.map(item => {
          return (
            <ListItem key={item.id} id={item.id}>
              <IconLabel icon={type === 'segment' ? <ChartPie /> : <UserPlus />}>
                {item.name}
              </IconLabel>
            </ListItem>
          );
        })}
      </List>
    </LoadingPanel>
  );
}