Custom Reports: Fix live range

packages/desktop-client/src/components/reports/ReportSidebar.jsx

@@ -11,14 +11,10 @@ import { View } from '../common/View';
 import { Tooltip } from '../tooltips';
 
 import { CategorySelector } from './CategorySelector';
+import { getLiveRange } from './getLiveRange';
 import { ModeButton } from './ModeButton';
 import { ReportOptions } from './ReportOptions';
-import {
-  getSpecificRange,
-  validateEnd,
-  validateRange,
-  validateStart,
-} from './reportRanges';
+import { validateEnd, validateStart } from './reportRanges';
 
 export function ReportSidebar({
   customReportItems,
@@ -48,38 +44,7 @@ export function ReportSidebar({
   const onSelectRange = cond => {
     onReportChange({ type: 'modify' });
     setDateRange(cond);
-    let dateStart;
-    let dateEnd;
-    switch (cond) {
-      case 'All time':
-        onChangeDates(earliestTransaction, monthUtils.currentDay());
-        break;
-      case 'Year to date':
-        [dateStart, dateEnd] = validateRange(
-          earliestTransaction,
-          monthUtils.getYearStart(monthUtils.currentMonth()) + '-01',
-          monthUtils.currentDay(),
-        );
-        onChangeDates(dateStart, dateEnd);
-        break;
-      case 'Last year':
-        [dateStart, dateEnd] = validateRange(
-          earliestTransaction,
-          monthUtils.getYearStart(
-            monthUtils.prevYear(monthUtils.currentMonth()),
-          ) + '-01',
-          monthUtils.getYearEnd(monthUtils.prevYear(monthUtils.currentDate())) +
-            '-31',
-        );
-        onChangeDates(dateStart, dateEnd);
-        break;
-      default:
-        [dateStart, dateEnd] = getSpecificRange(
-          ReportOptions.dateRangeMap.get(cond),
-          cond === 'Last month' ? 0 : null,
-        );
-        onChangeDates(dateStart, dateEnd);
-    }
+    onChangeDates(...getLiveRange(cond, earliestTransaction));
   };
 
   const onChangeMode = cond => {

packages/desktop-client/src/components/reports/getLiveRange.ts

@@ -0,0 +1,44 @@
+import * as monthUtils from 'loot-core/src/shared/months';
+
+import { ReportOptions } from './ReportOptions';
+import { getSpecificRange, validateRange } from './reportRanges';
+
+export function getLiveRange(cond: string, earliestTransaction: string) {
+  let dateStart;
+  let dateEnd;
+  const rangeName = ReportOptions.dateRangeMap.get(cond);
+  switch (rangeName) {
+    case 'yearToDate':
+      [dateStart, dateEnd] = validateRange(
+        earliestTransaction,
+        monthUtils.getYearStart(monthUtils.currentMonth()) + '-01',
+        monthUtils.currentDay(),
+      );
+      break;
+    case 'lastYear':
+      [dateStart, dateEnd] = validateRange(
+        earliestTransaction,
+        monthUtils.getYearStart(
+          monthUtils.prevYear(monthUtils.currentMonth()),
+        ) + '-01',
+        monthUtils.getYearEnd(monthUtils.prevYear(monthUtils.currentDate())) +
+          '-31',
+      );
+      break;
+    case 'allMonths':
+      dateStart = earliestTransaction;
+      dateEnd = monthUtils.currentDay();
+      break;
+    default:
+      if (typeof rangeName === 'number') {
+        [dateStart, dateEnd] = getSpecificRange(
+          rangeName,
+          cond === 'Last month' ? 0 : null,
+        );
+      } else {
+        break;
+      }
+  }
+
+  return [dateStart, dateEnd];
+}

packages/desktop-client/src/components/reports/reportRanges.ts

@@ -115,7 +115,7 @@ function boundedRange(
   return [start, end];
 }
 
-export function getSpecificRange(offset: number, addNumber: number) {
+export function getSpecificRange(offset: number, addNumber: number | null) {
   const currentDay = monthUtils.currentDay();
   const dateStart = monthUtils.subMonths(currentDay, offset) + '-01';
   const dateEnd = monthUtils.getMonthEnd(

packages/desktop-client/src/components/reports/reports/CustomReport.jsx

@@ -21,6 +21,7 @@ import { AppliedFilters } from '../../filters/AppliedFilters';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { ChooseGraph } from '../ChooseGraph';
 import { defaultsList, disabledList } from '../disabledList';
+import { getLiveRange } from '../getLiveRange';
 import { Header } from '../Header';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { ReportLegend } from '../ReportLegend';
@@ -93,18 +94,6 @@ export function CustomReport() {
     location.state ? (location.state.report ? 'saved' : 'new') : 'new',
   );
 
-  useEffect(() => {
-    const format =
-      ReportOptions.intervalMap.get(interval).toLowerCase() + 'FromDate';
-
-    const dateStart = monthUtils[format](startDate);
-    const dateEnd = monthUtils[format](endDate);
-
-    setIntervals(
-      monthUtils[ReportOptions.intervalRange.get(interval)](dateStart, dateEnd),
-    );
-  }, [interval, startDate, endDate]);
-
   useEffect(() => {
     if (selectedCategories === undefined && categories.list.length !== 0) {
       setSelectedCategories(categories.list);
@@ -138,10 +127,31 @@ export function CustomReport() {
         .reverse();
 
       setAllIntervals(allInter);
+
+      if (!isDateStatic) {
+        const [dateStart, dateEnd] = getLiveRange(
+          dateRange,
+          trans ? trans.date : monthUtils.currentDay(),
+        );
+        setStartDate(dateStart);
+        setEndDate(dateEnd);
+      }
     }
     run();
   }, [interval]);
 
+  useEffect(() => {
+    const format =
+      ReportOptions.intervalMap.get(interval).toLowerCase() + 'FromDate';
+
+    const dateStart = monthUtils[format](startDate);
+    const dateEnd = monthUtils[format](endDate);
+
+    setIntervals(
+      monthUtils[ReportOptions.intervalRange.get(interval)](dateStart, dateEnd),
+    );
+  }, [interval, startDate, endDate]);
+
   const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
   const payees = usePayees();
   const accounts = useAccounts();

packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx

@@ -1,6 +1,7 @@
-import React, { createRef, useMemo, useState } from 'react';
+import React, { createRef, useEffect, useMemo, useState } from 'react';
 
 import { send, sendCatch } from 'loot-core/platform/client/fetch/index';
+import * as monthUtils from 'loot-core/src/shared/months';
 import { type CustomReportEntity } from 'loot-core/types/models/reports';
 
 import { useAccounts } from '../../../hooks/useAccounts';
@@ -72,6 +73,7 @@ export function CustomReportListCards({
   const [err, setErr] = useState('');
   const [name, setName] = useState('');
   const inputRef = createRef<HTMLInputElement>();
+  const [earliestTransaction, setEarliestTransaction] = useState('');
 
   const payees = usePayees();
   const accounts = useAccounts();
@@ -85,6 +87,14 @@ export function CustomReportListCards({
     onDeleteMenuOpen(reportData === undefined ? '' : reportData, false);
   };
 
+  useEffect(() => {
+    async function run() {
+      const trans = await send('get-earliest-transaction');
+      setEarliestTransaction(trans ? trans.date : monthUtils.currentDay());
+    }
+    run();
+  }, []);
+
   const onAddUpdate = async ({
     reportData,
   }: {
@@ -216,6 +226,7 @@ export function CustomReportListCards({
                         payees={payees}
                         accounts={accounts}
                         categories={categories}
+                        earliestTransaction={earliestTransaction}
                       />
                     </View>
                   </ReportCard>

packages/desktop-client/src/components/reports/reports/GetCardData.tsx

@@ -11,6 +11,7 @@ import { styles } from '../../../style/styles';
 import { theme } from '../../../style/theme';
 import { Text } from '../../common/Text';
 import { ChooseGraph } from '../ChooseGraph';
+import { getLiveRange } from '../getLiveRange';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { ReportOptions } from '../ReportOptions';
 import { createCustomSpreadsheet } from '../spreadsheets/custom-spreadsheet';
@@ -35,16 +36,30 @@ export function GetCardData({
   payees,
   accounts,
   categories,
+  earliestTransaction,
 }: {
   report: CustomReportEntity;
   payees: PayeeEntity[];
   accounts: AccountEntity[];
   categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] };
+  earliestTransaction: string;
 }) {
+  let startDate = report.startDate;
+  let endDate = report.endDate;
+
+  if (!report.isDateStatic) {
+    const [dateStart, dateEnd] = getLiveRange(
+      report.dateRange,
+      earliestTransaction,
+    );
+    startDate = dateStart || report.startDate;
+    endDate = dateEnd || report.startDate;
+  }
+
   const getGroupData = useMemo(() => {
     return createGroupedSpreadsheet({
-      startDate: report.startDate,
-      endDate: report.endDate,
+      startDate,
+      endDate,
       interval: report.interval,
       categories,
       selectedCategories: report.selectedCategories ?? categories.list,
@@ -56,11 +71,11 @@ export function GetCardData({
       showUncategorized: report.showUncategorized,
       balanceTypeOp: ReportOptions.balanceTypeMap.get(report.balanceType),
     });
-  }, [report, categories]);
+  }, [report, categories, startDate, endDate]);
   const getGraphData = useMemo(() => {
     return createCustomSpreadsheet({
-      startDate: report.startDate,
-      endDate: report.endDate,
+      startDate,
+      endDate,
       interval: report.interval,
       categories,
       selectedCategories: report.selectedCategories ?? categories.list,
@@ -76,7 +91,7 @@ export function GetCardData({
       accounts,
       graphType: report.graphType,
     });
-  }, [report, categories, payees, accounts]);
+  }, [report, categories, payees, accounts, startDate, endDate]);
   const graphData = useReport('default' + report.name, getGraphData);
   const groupedData = useReport('grouped' + report.name, getGroupData);
 
@@ -86,8 +101,8 @@ export function GetCardData({
   return data?.data ? (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <ChooseGraph
-        startDate={report.startDate}
-        endDate={report.endDate}
+        startDate={startDate}
+        endDate={endDate}
         data={data}
         mode={report.mode}
         graphType={report.graphType}

upcoming-release-notes/2557.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [carkom]
+---
+
+Fixes live dateRange not updating with new month (interval).