Updated segment handling.

src/components/common/FilterEditForm.tsx

@@ -21,10 +21,11 @@ export function FilterEditForm({
 }: FilterEditFormProps) {
   const { formatMessage, labels } = useMessages();
   const [currentFilters, setCurrentFilters] = useState(filters);
-  const [currentSegment, setCurrentSegment] = useState(null);
+  const [currentSegment, setCurrentSegment] = useState(segmentId);
 
   const handleReset = () => {
     setCurrentFilters([]);
+    setCurrentSegment(null);
   };
 
   const handleSave = () => {
@@ -32,8 +33,8 @@ export function FilterEditForm({
     onClose?.();
   };
 
-  const handleSegmentChange = (segment?: { id: string }) => {
-    setCurrentSegment(segment);
+  const handleSegmentChange = (id: string) => {
+    setCurrentSegment(id);
   };
 
   return (
@@ -49,7 +50,7 @@ export function FilterEditForm({
         <TabPanel id="segments">
           <SegmentFilters
             websiteId={websiteId}
-            segmentId={segmentId}
+            segmentId={currentSegment}
             onSave={handleSegmentChange}
           />
         </TabPanel>

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -2,7 +2,6 @@ import { keepPreviousData } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParameters } from '../useFilterParameters';
 import { useDateParameters } from '../useDateParameters';
-import { useSearchParams } from 'next/navigation';
 import { ReactQueryOptions } from '@/lib/types';
 
 export type WebsiteMetricsData = {
@@ -18,7 +17,6 @@ export function useWebsiteMetricsQuery(
   const { get, useQuery } = useApi();
   const date = useDateParameters(websiteId);
   const filters = useFilterParameters();
-  const searchParams = useSearchParams();
 
   return useQuery<WebsiteMetricsData>({
     queryKey: [
@@ -34,7 +32,6 @@ export function useWebsiteMetricsQuery(
       get(`/websites/${websiteId}/metrics`, {
         ...date,
         ...filters,
-        [searchParams.get('view')]: undefined,
         ...params,
       }),
     enabled: !!websiteId,

src/components/hooks/useFilterParameters.ts

@@ -21,6 +21,8 @@ export function useFilterParameters() {
       page,
       pageSize,
       search,
+      segment,
+      cohort,
     },
   } = useNavigation();
 
@@ -41,6 +43,8 @@ export function useFilterParameters() {
       tag,
       hostname,
       search,
+      segment,
+      cohort,
     };
   }, [
     path,
@@ -60,5 +64,7 @@ export function useFilterParameters() {
     page,
     pageSize,
     search,
+    segment,
+    cohort,
   ]);
 }

src/components/input/SegmentFilters.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { List, Column, ListItem } from '@umami/react-zen';
 import { useWebsiteSegmentsQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
@@ -11,17 +10,15 @@ export interface SegmentFiltersProps {
 
 export function SegmentFilters({ websiteId, segmentId, onSave }: SegmentFiltersProps) {
   const { data, isLoading } = useWebsiteSegmentsQuery(websiteId, { type: 'segment' });
-  const [currentSegment, setCurrentSegment] = useState(segmentId);
 
-  const handleSave = (id: string) => {
-    setCurrentSegment(id);
-    onSave?.(data.find(item => item.id === id));
+  const handleChange = (id: string) => {
+    onSave?.(id);
   };
 
   return (
     <Column height="400px" gap>
       <LoadingPanel data={data} isLoading={isLoading} overflowY="auto">
-        <List selectionMode="single" value={[currentSegment]} onChange={id => handleSave(id[0])}>
+        <List selectionMode="single" value={[segmentId]} onChange={id => handleChange(id[0])}>
           {data?.map(item => {
             return (
               <ListItem key={item.id} id={item.id}>