Segment editing.

src/components/common/FilterEditForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Column, Tabs, TabList, Tab, TabPanel, Row, Button } from '@umami/react-zen';
-import { useMessages } from '@/components/hooks';
+import { useDateRange, useMessages } from '@/components/hooks';
 import { FieldFilters } from '@/components/input/FieldFilters';
 import { SegmentFilters } from '@/components/input/SegmentFilters';
 
@@ -23,6 +23,10 @@ export function FilterEditForm({
   const [currentFilters, setCurrentFilters] = useState(filters);
   const [currentSegment, setCurrentSegment] = useState(segmentId);
 
+  const {
+    dateRange: { startDate, endDate },
+  } = useDateRange(websiteId);
+
   const handleReset = () => {
     setCurrentFilters([]);
     setCurrentSegment(null);
@@ -45,7 +49,13 @@ export function FilterEditForm({
           <Tab id="segments">{formatMessage(labels.segments)}</Tab>
         </TabList>
         <TabPanel id="fields">
-          <FieldFilters websiteId={websiteId} filters={currentFilters} onSave={setCurrentFilters} />
+          <FieldFilters
+            websiteId={websiteId}
+            filters={currentFilters}
+            startDate={startDate}
+            endDate={endDate}
+            onSave={setCurrentFilters}
+          />
         </TabPanel>
         <TabPanel id="segments">
           <SegmentFilters

src/components/hooks/index.ts

@@ -26,7 +26,8 @@ export * from './queries/useTeamMembersQuery';
 export * from './queries/useUserQuery';
 export * from './queries/useUsersQuery';
 export * from './queries/useWebsiteQuery';
-export * from './queries/useWebsiteSegementsQuery';
+export * from './queries/useWebsiteSegmentQuery';
+export * from './queries/useWebsiteSegmentsQuery';
 export * from './queries/useWebsitesQuery';
 export * from './queries/useWebsiteEventsQuery';
 export * from './queries/useWebsiteEventsSeriesQuery';

src/components/hooks/queries/useWebsiteSegmentQuery.ts

@@ -0,0 +1,21 @@
+import { useApi } from '../useApi';
+import { useModified } from '@/components/hooks';
+import { keepPreviousData } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
+
+export function useWebsiteSegmentQuery(
+  websiteId: string,
+  segmentId: string,
+  options?: ReactQueryOptions<any>,
+) {
+  const { get, useQuery } = useApi();
+  const { modified } = useModified(`segments`);
+
+  return useQuery({
+    queryKey: ['website:segments', { websiteId, segmentId, modified }],
+    queryFn: () => get(`/websites/${websiteId}/segments/${segmentId}`),
+    enabled: !!(websiteId && segmentId),
+    placeholderData: keepPreviousData,
+    ...options,
+  });
+}

src/components/hooks/queries/useWebsiteSegmentsQuery.ts

@@ -2,6 +2,7 @@ import { useApi } from '../useApi';
 import { useModified } from '@/components/hooks';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
+import { useFilterParameters } from '@/components/hooks/useFilterParameters';
 
 export function useWebsiteSegmentsQuery(
   websiteId: string,
@@ -9,11 +10,12 @@ export function useWebsiteSegmentsQuery(
   options?: ReactQueryOptions<any>,
 ) {
   const { get, useQuery } = useApi();
-  const { modified } = useModified(`website:${websiteId}`);
+  const { modified } = useModified(`segments`);
+  const filters = useFilterParameters();
 
   return useQuery({
-    queryKey: ['website:segments', { websiteId, modified, ...params }],
-    queryFn: () => get(`/websites/${websiteId}/segments`, { ...params }),
+    queryKey: ['website:segments', { websiteId, modified, ...filters, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/segments`, { ...filters, ...params }),
     enabled: !!websiteId,
     placeholderData: keepPreviousData,
     ...options,

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>
   );
 }