decompose structure

src/features/history/dateRange.ts

@@ -0,0 +1,23 @@
+import { toInputDateTimeValue } from '../../utils/format';
+
+export type DateRangeState = {
+  from: string;
+  to: string;
+};
+
+export const RANGE_PRESETS = [
+  { id: '1h', label: '1 час', hours: 1 },
+  { id: '6h', label: '6 часов', hours: 6 },
+  { id: '24h', label: '24 часа', hours: 24 },
+  { id: '7d', label: '7 дней', hours: 24 * 7 },
+  { id: '30d', label: '30 дней', hours: 24 * 30 },
+] as const;
+
+export function createRange(hours: number): DateRangeState {
+  const to = new Date();
+  const from = new Date(to.getTime() - hours * 60 * 60 * 1000);
+  return {
+    from: toInputDateTimeValue(from),
+    to: toInputDateTimeValue(to),
+  };
+}

src/features/history/useHistoryQuery.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getHistory } from '../../entities/history/api';
+import { toIsoFromInput } from '../../utils/format';
+import { getHistoryGranularity } from '../../utils/historyGranularity';
+import type { DateRangeState } from './dateRange';
+
+export function useHistoryQuery(edgeId: string, selectedTag: string | undefined, range: DateRangeState) {
+  const from = toIsoFromInput(range.from) as string;
+  const to = toIsoFromInput(range.to) as string;
+  const granularity = useMemo(() => getHistoryGranularity(from, to), [from, to]);
+
+  const query = useQuery({
+    queryKey: ['history', edgeId, selectedTag, from, to, granularity.granulate],
+    queryFn: () =>
+      getHistory({
+        edge: edgeId,
+        tag: selectedTag as string,
+        from,
+        to,
+        granulate: granularity.granulate,
+      }),
+    enabled: Boolean(edgeId && selectedTag),
+    refetchInterval: false,
+  });
+
+  return { query, from, to, granularity };
+}