feat: add segments prop to DataTableProvider (calcom#21409)

* feat: add segments prop to DataTableProvider

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* refactor: modify useSegments hook instead of creating a new one

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: implement PR feedback and fix failing test

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* clean up

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: eunjae@cal.com <hey@eunjae.dev>

Author: devin-ai-integration[bot]

packages/features/data-table/DataTableProvider.tsx

@@ -74,6 +74,7 @@ interface DataTableProviderProps {
   children: React.ReactNode;
   ctaContainerClassName?: string;
   defaultPageSize?: number;
+  segments?: FilterSegmentOutput[];
 }
 
 export function DataTableProvider({
@@ -82,6 +83,7 @@ export function DataTableProvider({
   useSegments = useSegmentsNoop,
   defaultPageSize = DEFAULT_PAGE_SIZE,
   ctaContainerClassName = CTA_CONTAINER_CLASS_NAME,
+  segments: providedSegments,
 }: DataTableProviderProps) {
   const filterToOpen = useRef<string | undefined>(undefined);
   const [activeFilters, setActiveFilters] = useQueryState("activeFilters", activeFiltersParser);
@@ -182,6 +184,7 @@ export function DataTableProvider({
       setPageSize,
       setPageIndex,
       setSearchTerm,
+      segments: providedSegments,
     }
   );
 

packages/features/data-table/hooks/useSegments.ts

@@ -26,15 +26,24 @@ export const useSegments: UseSegments = ({
   setPageSize,
   setPageIndex,
   setSearchTerm,
+  segments: providedSegments,
 }) => {
-  const { data: rawSegments, isFetching: isFetchingSegments } = trpc.viewer.filterSegments.list.useQuery({
-    tableIdentifier,
-  });
+  const { data: rawSegments, isFetching: isFetchingSegments } = trpc.viewer.filterSegments.list.useQuery(
+    {
+      tableIdentifier,
+    },
+    {
+      enabled: !providedSegments, // Only fetch if segments are not provided
+    }
+  );
 
   // Recalculate date ranges based on the current timestamp
   const segments = useMemo(() => {
-    if (!rawSegments) return [];
-    return rawSegments.map((segment) => ({
+    const segmentsSource = providedSegments || rawSegments;
+
+    if (!segmentsSource) return [];
+
+    return segmentsSource.map((segment) => ({
       ...segment,
       activeFilters: segment.activeFilters.map((filter) => {
         if (isDateRangeFilterValue(filter.v)) {
@@ -46,7 +55,7 @@ export const useSegments: UseSegments = ({
         return filter;
       }),
     }));
-  }, [rawSegments]);
+  }, [rawSegments, providedSegments]);
 
   const selectedSegment = useMemo(
     () => segments?.find((segment) => segment.id === segmentId),

packages/features/data-table/lib/types.ts

@@ -270,7 +270,7 @@ export const ZSegmentStorage = z.record(
 
 export type UseSegments = (props: UseSegmentsProps) => UseSegmentsReturn;
 
-type UseSegmentsProps = {
+export type UseSegmentsProps = {
   tableIdentifier: string;
   activeFilters: ActiveFilters;
   sorting: SortingState;
@@ -288,9 +288,10 @@ type UseSegmentsProps = {
   setPageSize: (pageSize: number) => void;
   setPageIndex: (pageIndex: number) => void;
   setSearchTerm: (searchTerm: string | null) => void;
+  segments?: FilterSegmentOutput[];
 };
 
-type UseSegmentsReturn = {
+export type UseSegmentsReturn = {
   segments: FilterSegmentOutput[];
   selectedSegment: FilterSegmentOutput | undefined;
   canSaveSegment: boolean;