Segment editing.

src/components/input/FieldFilters.tsx

@@ -1,21 +1,26 @@
 import { Key } from 'react';
 import { Grid, Column, List, ListItem } from '@umami/react-zen';
-import { useDateRange, useFields, useMessages } from '@/components/hooks';
+import { useFields, useMessages } from '@/components/hooks';
 import { FilterRecord } from '@/components/common/FilterRecord';
 import { Empty } from '@/components/common/Empty';
 
 export interface FieldFiltersProps {
   websiteId: string;
   filters: { name: string; operator: string; value: string }[];
+  startDate: Date;
+  endDate: Date;
   onSave?: (data: any) => void;
 }
 
-export function FieldFilters({ websiteId, filters, onSave }: FieldFiltersProps) {
+export function FieldFilters({
+  websiteId,
+  filters,
+  startDate,
+  endDate,
+  onSave,
+}: FieldFiltersProps) {
   const { formatMessage, messages } = useMessages();
   const { fields } = useFields();
-  const {
-    dateRange: { startDate, endDate },
-  } = useDateRange(websiteId);
 
   const updateFilter = (name: string, props: Record<string, any>) => {
     onSave(filters.map(filter => (filter.name === name ? { ...filter, ...props } : filter)));

src/components/input/FilterBar.tsx

@@ -1,9 +1,15 @@
 import { Button, Icon, Text, Row, TooltipTrigger, Tooltip } from '@umami/react-zen';
-import { useNavigation, useMessages, useFormat, useFilters } from '@/components/hooks';
+import {
+  useNavigation,
+  useMessages,
+  useFormat,
+  useFilters,
+  useWebsiteSegmentQuery,
+} from '@/components/hooks';
 import { Close } from '@/components/icons';
 import { isSearchOperator } from '@/lib/params';
 
-export function FilterBar() {
+export function FilterBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
   const {
@@ -13,6 +19,7 @@ export function FilterBar() {
     query: { segment },
   } = useNavigation();
   const { filters, operatorLabels } = useFilters();
+  const { data, isLoading } = useWebsiteSegmentQuery(websiteId, segment);
 
   const handleCloseFilter = (param: string) => {
     router.push(updateParams({ [param]: undefined }));
@@ -33,11 +40,11 @@ export function FilterBar() {
   return (
     <Row gap alignItems="center" justifyContent="space-between" padding="2" backgroundColor="3">
       <Row alignItems="center" gap="2" wrap="wrap">
-        {segment && (
+        {segment && !isLoading && (
           <FilterItem
             name="segment"
             label={formatMessage(labels.segment)}
-            value={segment}
+            value={data?.name || segment}
             operator={operatorLabels.eq}
             onRemove={handleSegmentRemove}
           />

src/components/input/SegmentFilters.tsx

@@ -19,7 +19,7 @@ export function SegmentFilters({ websiteId, segmentId, onSave }: SegmentFiltersP
     <Column height="400px" gap>
       <LoadingPanel data={data} isLoading={isLoading} overflowY="auto">
         <List selectionMode="single" value={[segmentId]} onChange={id => handleChange(id[0])}>
-          {data?.map(item => {
+          {data?.data?.map(item => {
             return (
               <ListItem key={item.id} id={item.id}>
                 {item.name}

src/components/input/WebsiteDateFilter.tsx

@@ -12,7 +12,6 @@ import { isAfter } from 'date-fns';
 import { Chevron, Close, Compare } from '@/components/icons';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { DateFilter } from './DateFilter';
-import { ExportButton } from '@/components/input/ExportButton';
 
 export function WebsiteDateFilter({
   websiteId,
@@ -102,7 +101,6 @@ export function WebsiteDateFilter({
           <Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
         </TooltipTrigger>
       )}
-      <ExportButton websiteId={websiteId} />
     </Row>
   );
 }