cortena-ui 1.4.2 → 1.5.0

package/src/components/data-table/types.ts

@@ -109,6 +109,52 @@ export type DataTableTable<Row extends RowData> = ReactTable<DataTableFeatures<R
 
 export type DataTablePaginationMode = "pages" | "infinite" | "none";
 
+/* ---------------------------------------------------------------------- */
+/* Freshness (DESIGN-D19 / P-39)                                           */
+/* ---------------------------------------------------------------------- */
+
+/**
+ * Opt-in polling for a server source, for tables that are *watched* rather
+ * than edited — runs in progress, alert lists, a board left open on a wall
+ * screen. It renders an on/off switch beside the Refresh button, off until
+ * the user turns it on, and it is never a substitute for push: a table that
+ * subscribes to a notification stream should call `refresh()` from the stream
+ * and leave the interval as the fallback for when the stream is unavailable.
+ */
+export interface DataTableAutoRefresh {
+  /**
+   * Poll interval while the switch is on. Clamped to a 30 s floor; anything
+   * shorter is a load problem wearing a freshness costume. @default 60000
+   */
+  intervalMs?: number;
+  /**
+   * An extra pause the app owns — a pending mutation, a wizard mid-flight.
+   * The tab being hidden, an open inline editor and a live selection are
+   * already handled by the component.
+   */
+  paused?: boolean;
+}
+
+/** Why the interval is not running even though the switch is on. */
+export type DataTableRefreshPause = "hidden" | "editing" | "selection" | "mutation" | "app";
+
+/** The auto-refresh half of the toolbar's freshness controls. */
+export interface DataTableAutoRefreshState {
+  /** The user's switch, remembered per `stateKey`. False until they turn it on. */
+  enabled: boolean;
+  setEnabled: (on: boolean) => void;
+  /** `enabled` and nothing is pausing it: the interval is really running. */
+  active: boolean;
+  /** Set while `enabled` but paused, so the UI can say why. */
+  pausedBy: DataTableRefreshPause | null;
+  /** The interval in force, including error back-off. */
+  intervalMs: number;
+  /** The configured interval after the 30 s clamp. */
+  baseIntervalMs: number;
+  /** True while consecutive failures have stretched the interval. */
+  backingOff: boolean;
+}
+
 export interface UseDataTableOptions<Row extends RowData> {
   columns: ReadonlyArray<DataTableColumnDef<Row, any>>;
   dataSource: DataSource<Row>;
@@ -147,6 +193,19 @@ export interface UseDataTableOptions<Row extends RowData> {
   onRowSelectionChange?: (rows: Row[]) => void;
   /** Debounce applied to the search box before it reaches a server source. @default 250 */
   searchDebounceMs?: number;
+  /**
+   * Turns on the auto-refresh switch beside the Refresh button (server
+   * sources only). Off by default; `stateKey` is required with it, because
+   * the user's choice is remembered per table.
+   */
+  autoRefresh?: DataTableAutoRefresh;
+  /**
+   * Identity of this table for anything remembered between visits. Required
+   * when `autoRefresh` is set: the choice is stored under
+   * `cortena.data-table.auto-refresh.<stateKey>`, so turning polling on for
+   * the runs list does not turn it on for every other table.
+   */
+  stateKey?: string;
 }
 
 export interface DataTableEditingCell {
@@ -173,6 +232,15 @@ export interface DataTableInstance<Row extends RowData> {
   hasNextPage: boolean;
   /** Search text the server last received (debounced), for consumers rendering their own toolbar. */
   searchQuery: string;
+  /**
+   * `Date.now()` of the last successful server response, for the "Updated
+   * hh:mm" stamp. Null before the first one, and for a client source.
+   */
+  lastUpdatedAt: number | null;
+  /** `Date.now()` of the last failed one; the toolbar shows it briefly. */
+  lastErrorAt: number | null;
+  /** Null unless `autoRefresh` was configured on a server source. */
+  autoRefresh: DataTableAutoRefreshState | null;
   editing: {
     cell: DataTableEditingCell | null;
     start: (cell: DataTableEditingCell) => void;

package/src/components/data-table/use-data-table.ts

@@ -5,6 +5,7 @@ import {
   type ColumnFiltersState,
   type PaginationState,
   type RowData,
+  type RowSelectionState,
   type SortingState,
 } from "@tanstack/react-table";
 import * as React from "react";
@@ -12,9 +13,11 @@ import { createColumnHelper, dataTableFeatures } from "./features";
 import { expandColumn, selectColumn } from "./system-columns";
 import type {
   DataSource,
+  DataTableAutoRefreshState,
   DataTableColumnDef,
   DataTableEditingCell,
   DataTableInstance,
+  DataTableRefreshPause,
   DataTableRow,
   DataTableTable,
   TableQuery,
@@ -24,6 +27,66 @@ import { useServerSource } from "./use-server-source";
 
 const EMPTY_ROWS: never[] = [];
 
+/** The floor on `autoRefresh.intervalMs`; anything shorter is load, not freshness. */
+export const AUTO_REFRESH_MIN_MS = 30_000;
+/** Used when `autoRefresh` names no interval. */
+export const AUTO_REFRESH_DEFAULT_MS = 60_000;
+/** `cortena.data-table.auto-refresh.<stateKey>` holds `"on"` or `"off"`. */
+export const AUTO_REFRESH_STORAGE_PREFIX = "cortena.data-table.auto-refresh.";
+
+/** One warning per process, not one per render. */
+const warned = { missingStateKey: false };
+
+function readStoredFlag(key: string): boolean {
+  try {
+    return window.localStorage.getItem(key) === "on";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * The user's auto-refresh choice, remembered per table.
+ *
+ * It starts off and is read from storage in an effect rather than in the
+ * initial state, so a server-rendered table and its first client render agree
+ * — a switch that hydrates in the opposite position is a React mismatch and,
+ * worse, a table that starts polling before the page is interactive.
+ */
+function usePersistedFlag(storageKey: string | null): [boolean, (on: boolean) => void] {
+  const [on, setOn] = React.useState(false);
+  React.useEffect(() => {
+    setOn(storageKey ? readStoredFlag(storageKey) : false);
+  }, [storageKey]);
+  const set = React.useCallback(
+    (next: boolean) => {
+      setOn(next);
+      if (!storageKey) return;
+      try {
+        window.localStorage.setItem(storageKey, next ? "on" : "off");
+      } catch {
+        /* Private mode, or storage full: the switch still works for this visit. */
+      }
+    },
+    [storageKey],
+  );
+  return [on, set];
+}
+
+const subscribeVisibility = (onChange: () => void) => {
+  document.addEventListener("visibilitychange", onChange);
+  return () => document.removeEventListener("visibilitychange", onChange);
+};
+
+/** True while the tab is in the background. Polling a tab nobody is looking at is a battery bill. */
+function useDocumentHidden(): boolean {
+  return React.useSyncExternalStore(
+    subscribeVisibility,
+    () => document.visibilityState === "hidden",
+    () => false,
+  );
+}
+
 function useDebounced<T>(value: T, ms: number): T {
   const [debounced, setDebounced] = React.useState(value);
   React.useEffect(() => {
@@ -73,6 +136,8 @@ export function useDataTable<Row extends RowData>(
     onCellCommit,
     onRowSelectionChange,
     searchDebounceMs = 250,
+    autoRefresh,
+    stateKey,
   } = options;
 
   const isServer = dataSource.kind === "server";
@@ -89,6 +154,13 @@ export function useDataTable<Row extends RowData>(
   const [pagination, setPagination] = React.useState<PaginationState>(
     initialState?.pagination ?? { pageIndex: 0, pageSize },
   );
+  // Selection and the open editor are lifted for the same reason the query
+  // slices are: auto-refresh has to know about them before the query for this
+  // render is declared, and `table.state` only exists after `useTable`.
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(
+    initialState?.rowSelection ?? {},
+  );
+  const [editingCell, setEditingCell] = React.useState<DataTableEditingCell | null>(null);
 
   const searchQuery = useDebounced(globalFilter, isServer ? searchDebounceMs : 0);
 
@@ -116,7 +188,44 @@ export function useDataTable<Row extends RowData>(
     [searchQuery, columnFilters, sorting, pagination.pageIndex, pagination.pageSize],
   );
 
-  const server = useServerSource<Row>(isServer ? dataSource : undefined, query, paginationMode);
+  /* Freshness (DESIGN-D19 / P-39) -------------------------------------- */
+
+  const wantsAuto = isServer && autoRefresh !== undefined;
+  React.useEffect(() => {
+    if (!wantsAuto || stateKey || warned.missingStateKey) return;
+    warned.missingStateKey = true;
+    console.warn(
+      "[cortena-ui] DataTable: `autoRefresh` needs a `stateKey`. Without one the " +
+        "user's on/off choice cannot be remembered between visits, and two tables " +
+        "on one screen would share the same setting.",
+    );
+  }, [wantsAuto, stateKey]);
+  const storageKey = wantsAuto && stateKey ? AUTO_REFRESH_STORAGE_PREFIX + stateKey : null;
+  const [autoEnabled, setAutoEnabled] = usePersistedFlag(storageKey);
+  const hidden = useDocumentHidden();
+  const baseIntervalMs = Math.max(
+    autoRefresh?.intervalMs ?? AUTO_REFRESH_DEFAULT_MS,
+    AUTO_REFRESH_MIN_MS,
+  );
+  // The polite rules, in the order a user would explain them. Each one is a
+  // reason the interval is not running, and the toolbar says which.
+  const pausedBy: DataTableRefreshPause | null = hidden
+    ? "hidden"
+    : editingCell
+      ? "editing"
+      : Object.keys(rowSelection).length > 0
+        ? "selection"
+        : autoRefresh?.paused
+          ? "app"
+          : null;
+  const autoActive = wantsAuto && autoEnabled && pausedBy === null;
+
+  const server = useServerSource<Row>(
+    isServer ? dataSource : undefined,
+    query,
+    paginationMode,
+    wantsAuto ? { intervalMs: baseIntervalMs, active: autoActive } : undefined,
+  );
 
   const data: ReadonlyArray<Row> = isServer ? server.rows : dataSource.rows;
 
@@ -147,11 +256,12 @@ export function useDataTable<Row extends RowData>(
     getRowId,
     getSubRows,
     initialState,
-    state: { globalFilter, columnFilters, sorting, pagination },
+    state: { globalFilter, columnFilters, sorting, pagination, rowSelection },
     onGlobalFilterChange: setGlobalFilter,
     onColumnFiltersChange: setColumnFilters,
     onSortingChange: setSorting,
     onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
     manualFiltering: isServer,
     manualSorting: isServer,
     manualPagination: isServer || paginationMode !== "pages",
@@ -173,7 +283,6 @@ export function useDataTable<Row extends RowData>(
   });
 
   // Selection callback with original rows, for consumers that keep selection outside.
-  const rowSelection = table.state.rowSelection;
   const onSelectionRef = React.useRef(onRowSelectionChange);
   onSelectionRef.current = onRowSelectionChange;
   const firstSelection = React.useRef(true);
@@ -186,7 +295,6 @@ export function useDataTable<Row extends RowData>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rowSelection]);
 
-  const [editingCell, setEditingCell] = React.useState<DataTableEditingCell | null>(null);
   const commit = React.useCallback(
     async (row: DataTableRow<Row>, columnId: string, value: unknown) => {
       const meta = table.getColumn(columnId)?.columnDef.meta;
@@ -205,6 +313,43 @@ export function useDataTable<Row extends RowData>(
     [editingCell, commit],
   );
 
+  // The stamp keeps the last real response time: with keepPreviousData a page
+  // change puts a placeholder on screen whose `dataUpdatedAt` is zero, and the
+  // stamp must not blink out while the next page loads.
+  const lastUpdatedRef = React.useRef<number | null>(null);
+  if (server.lastUpdatedAt && server.lastUpdatedAt > (lastUpdatedRef.current ?? 0)) {
+    lastUpdatedRef.current = server.lastUpdatedAt;
+  }
+  const lastUpdatedAt = lastUpdatedRef.current;
+
+  const autoState = React.useMemo<DataTableAutoRefreshState | null>(
+    () =>
+      wantsAuto
+        ? {
+            enabled: autoEnabled,
+            setEnabled: setAutoEnabled,
+            active: autoActive && !server.mutating,
+            // A mutation in flight is the one pause only the query layer can
+            // see; it is folded in here so the toolbar can still say why.
+            pausedBy: autoEnabled ? (pausedBy ?? (server.mutating ? "mutation" : null)) : null,
+            intervalMs: server.intervalMs === false ? baseIntervalMs : server.intervalMs,
+            baseIntervalMs,
+            backingOff: server.failures > 0,
+          }
+        : null,
+    [
+      wantsAuto,
+      autoEnabled,
+      setAutoEnabled,
+      autoActive,
+      pausedBy,
+      server.mutating,
+      server.intervalMs,
+      server.failures,
+      baseIntervalMs,
+    ],
+  );
+
   const total = isServer
     ? (server.total ?? 0)
     : paginationMode === "pages"
@@ -224,6 +369,9 @@ export function useDataTable<Row extends RowData>(
     fetchNextPage: server.fetchNextPage,
     hasNextPage: server.hasNextPage,
     searchQuery,
+    lastUpdatedAt,
+    lastErrorAt: server.lastErrorAt,
+    autoRefresh: autoState,
     editing,
   };
 }

package/src/components/data-table/use-server-source.ts

@@ -4,6 +4,7 @@ import {
   keepPreviousData,
   QueryClientContext,
   useInfiniteQuery,
+  useIsMutating,
   useQuery,
 } from "@tanstack/react-query";
 import * as React from "react";
@@ -18,6 +19,62 @@ export interface ServerSourceState<Row> {
   refetch: () => void;
   fetchNextPage: () => void;
   hasNextPage: boolean;
+  /** `Date.now()` of the last successful response; null before the first. */
+  lastUpdatedAt: number | null;
+  /** `Date.now()` of the last failure; null before the first. */
+  lastErrorAt: number | null;
+  /** Consecutive failures. Doubles the interval; zero again after a success. */
+  failures: number;
+  /** The interval actually scheduled, false when nothing is polling. */
+  intervalMs: number | false;
+  /** A mutation is in flight on the query client, so polling is held. */
+  mutating: boolean;
+}
+
+/** What the interval needs from the caller; the pauses it cannot see are already applied. */
+export interface ServerSourceAutoRefresh {
+  /** Base interval, already clamped to the 30 s floor. */
+  intervalMs: number;
+  /** The switch is on and nothing the table can see is pausing it. */
+  active: boolean;
+}
+
+/** Errors stretch the interval rather than hammering a failing endpoint. */
+export const AUTO_REFRESH_MAX_MS = 300_000;
+
+function backoffOf(base: number, failures: number): number {
+  return Math.min(base * 2 ** failures, AUTO_REFRESH_MAX_MS);
+}
+
+export interface RequestStamps {
+  ok: number | null;
+  err: number | null;
+}
+
+/**
+ * Consecutive failures, counted from the timestamps the source reports: one
+ * more for every new error, back to zero on any success.
+ *
+ * It is state, and it is read *before* the query is declared, so the interval
+ * handed to `refetchInterval` on the next render already carries the back-off.
+ * The timestamps only exist after the query, hence the ref: the effect runs
+ * after the commit, by which time the render has filled it in.
+ */
+function useFailureCount(stamps: React.RefObject<RequestStamps>): number {
+  const [failures, setFailures] = React.useState(0);
+  const seen = React.useRef<RequestStamps>({ ok: null, err: null });
+  React.useEffect(() => {
+    const { ok, err } = stamps.current;
+    if (err !== null && err !== seen.current.err) {
+      seen.current.err = err;
+      setFailures((n) => n + 1);
+    }
+    if (ok !== null && ok !== seen.current.ok) {
+      seen.current.ok = ok;
+      setFailures(0);
+    }
+  });
+  return failures;
 }
 
 const EMPTY: never[] = [];
@@ -48,30 +105,43 @@ export function useServerSource<Row>(
   source: ServerSource<Row> | undefined,
   query: TableQuery,
   mode: "pages" | "infinite" | "none",
+  auto?: ServerSourceAutoRefresh,
 ): ServerSourceState<Row> {
   const client = React.useContext(QueryClientContext);
   const [strategy] = React.useState<"query" | "local">(() => (client ? "query" : "local"));
   // Hook order is stable for the life of the component because `strategy` is.
   return strategy === "query"
-    ? useQueryStrategy(source, query, mode)
-    : useLocalStrategy(source, query, mode);
+    ? useQueryStrategy(source, query, mode, auto)
+    : useLocalStrategy(source, query, mode, auto);
 }
 
 function useQueryStrategy<Row>(
   source: ServerSource<Row> | undefined,
   query: TableQuery,
   mode: "pages" | "infinite" | "none",
+  auto?: ServerSourceAutoRefresh,
 ): ServerSourceState<Row> {
   const id = React.useId();
   const base = source?.queryKey ?? ["cortena-data-table", id];
   const infinite = mode === "infinite";
   const fetch = source?.fetch;
 
+  // A mutation in flight is the fifth pause: refetching over a save the user
+  // has just fired shows them the row as it was a moment before it changed.
+  const mutating = useIsMutating() > 0;
+  // The interval and the Refresh button are the same query: `refetchInterval`
+  // and `refetch()` on one `useQuery`, never a second fetch path beside it.
+  const stamps = React.useRef<RequestStamps>({ ok: null, err: null });
+  const failures = useFailureCount(stamps);
+  const refetchInterval =
+    auto && auto.active && !mutating ? backoffOf(auto.intervalMs, failures) : (false as const);
+
   const page = useQuery({
     queryKey: [...base, "page", query],
     queryFn: ({ signal }) => fetch!(query, signal),
     enabled: Boolean(fetch) && !infinite,
     placeholderData: keepPreviousData,
+    refetchInterval: infinite ? false : refetchInterval,
   });
 
   const scope = scopeOf(query);
@@ -85,8 +155,14 @@ function useQueryStrategy<Row>(
     },
     enabled: Boolean(fetch) && infinite,
     placeholderData: keepPreviousData,
+    refetchInterval: infinite ? refetchInterval : false,
   });
 
+  const live = infinite ? pages : page;
+  const lastUpdatedAt = live.dataUpdatedAt || null;
+  const lastErrorAt = live.errorUpdatedAt || null;
+  stamps.current = { ok: lastUpdatedAt, err: lastErrorAt };
+
   const flatRows = React.useMemo(
     () => (pages.data ? pages.data.pages.flatMap((p) => p.rows) : EMPTY),
     [pages.data],
@@ -102,6 +178,11 @@ function useQueryStrategy<Row>(
       refetch: () => {},
       fetchNextPage: () => {},
       hasNextPage: false,
+      lastUpdatedAt: null,
+      lastErrorAt: null,
+      failures: 0,
+      intervalMs: false,
+      mutating,
     };
   }
 
@@ -117,6 +198,11 @@ function useQueryStrategy<Row>(
         if (pages.hasNextPage && !pages.isFetchingNextPage) void pages.fetchNextPage();
       },
       hasNextPage: pages.hasNextPage,
+      lastUpdatedAt,
+      lastErrorAt,
+      failures,
+      intervalMs: refetchInterval,
+      mutating,
     };
   }
 
@@ -129,6 +215,11 @@ function useQueryStrategy<Row>(
     refetch: () => void page.refetch(),
     fetchNextPage: () => {},
     hasNextPage: false,
+    lastUpdatedAt,
+    lastErrorAt,
+    failures,
+    intervalMs: refetchInterval,
+    mutating,
   };
 }
 
@@ -136,14 +227,19 @@ interface LocalState<Row> {
   pages: TableResult<Row>[];
   scopeKey: string;
   page: number;
+  /** The refresh generation this state answers; `tick` moving on means stale. */
+  tick: number;
   isFetching: boolean;
   error: Error | null;
+  updatedAt: number | null;
+  errorAt: number | null;
 }
 
 function useLocalStrategy<Row>(
   source: ServerSource<Row> | undefined,
   query: TableQuery,
   mode: "pages" | "infinite" | "none",
+  auto?: ServerSourceAutoRefresh,
 ): ServerSourceState<Row> {
   const infinite = mode === "infinite";
   const fetch = source?.fetch;
@@ -157,15 +253,26 @@ function useLocalStrategy<Row>(
     pages: [],
     scopeKey,
     page: -1,
+    tick: -1,
     isFetching: false,
     error: null,
+    updatedAt: null,
+    errorAt: null,
   });
 
   const loadedForScope = state.scopeKey === scopeKey ? state.pages : EMPTY;
-  const targetPage = infinite ? loadedForScope.length : query.page;
-  const needs = infinite
-    ? loadedForScope.length < wantedPages
-    : !(state.scopeKey === scopeKey && state.page === query.page && state.pages.length > 0);
+  // A refresh — the button or the interval — bumps `tick`; the rows already on
+  // screen stay there until the new ones arrive, exactly as keepPreviousData
+  // behaves under a provider. Nothing about sort, filters, page or selection
+  // is touched, because none of them live here.
+  const stale = state.tick !== tick;
+  const restart = stale || state.scopeKey !== scopeKey;
+  const targetPage = infinite ? (restart ? 0 : loadedForScope.length) : query.page;
+  const needs =
+    stale ||
+    (infinite
+      ? loadedForScope.length < wantedPages
+      : !(state.scopeKey === scopeKey && state.page === query.page && state.pages.length > 0));
   const requestKey = `${scopeKey}|${targetPage}|${tick}`;
 
   // The consumer's `fetch` is usually an inline arrow — `fetch: q => api.list(q)`
@@ -188,16 +295,27 @@ function useLocalStrategy<Row>(
       (result) => {
         if (controller.signal.aborted) return;
         setState((s) => ({
-          pages: infinite && s.scopeKey === scopeKey ? [...s.pages, result] : [result],
+          pages: infinite && !restart && s.scopeKey === scopeKey ? [...s.pages, result] : [result],
           scopeKey,
           page: targetPage,
+          tick,
           isFetching: false,
           error: null,
+          updatedAt: Date.now(),
+          errorAt: s.errorAt,
         }));
       },
       (err: unknown) => {
         if (controller.signal.aborted) return;
-        setState((s) => ({ ...s, isFetching: false, error: toError(err) }));
+        // `tick` is recorded on the failure too: without it the request stays
+        // "wanted" and a single dead endpoint is retried on every render.
+        setState((s) => ({
+          ...s,
+          tick,
+          isFetching: false,
+          error: toError(err),
+          errorAt: Date.now(),
+        }));
       },
     );
     return () => controller.abort();
@@ -206,6 +324,19 @@ function useLocalStrategy<Row>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasFetch, requestKey, needs]);
 
+  const stamps = React.useRef<RequestStamps>({ ok: null, err: null });
+  stamps.current = { ok: state.updatedAt, err: state.errorAt };
+  const failures = useFailureCount(stamps);
+  const intervalMs = auto && auto.active ? backoffOf(auto.intervalMs, failures) : (false as const);
+
+  // Without a QueryClientProvider there is no `refetchInterval` to lean on, so
+  // the same `tick` the button bumps is bumped on a timer. Still one path.
+  React.useEffect(() => {
+    if (intervalMs === false) return;
+    const id = setInterval(() => setTick((t) => t + 1), intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+
   // Like keepPreviousData: the last result stays on screen while the next loads.
   const rows = React.useMemo(
     () => (infinite ? state.pages.flatMap((p) => p.rows) : (state.pages[0]?.rows ?? EMPTY)),
@@ -224,6 +355,11 @@ function useLocalStrategy<Row>(
       refetch: () => {},
       fetchNextPage: () => {},
       hasNextPage: false,
+      lastUpdatedAt: null,
+      lastErrorAt: null,
+      failures: 0,
+      intervalMs: false,
+      mutating: false,
     };
   }
 
@@ -233,13 +369,15 @@ function useLocalStrategy<Row>(
     isLoading: state.pages.length === 0 && !state.error,
     isFetching: state.isFetching,
     error: state.error,
-    refetch: () => {
-      setState((s) => ({ ...s, pages: [], page: -1, error: null }));
-      setTick((t) => t + 1);
-    },
+    refetch: () => setTick((t) => t + 1),
     fetchNextPage: () => {
       if (hasNextPage && !state.isFetching) setWanted({ scopeKey, n: loadedForScope.length + 1 });
     },
     hasNextPage,
+    lastUpdatedAt: state.updatedAt,
+    lastErrorAt: state.errorAt,
+    failures,
+    intervalMs,
+    mutating: false,
   };
 }