From bdf5d36ebbf0b26eca9edf32872135e477d26648 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Fri, 19 Jan 2024 22:39:09 +0000
Subject: [PATCH] Clean-up some custom reports code (#2254)

* work

* missed

* notes

* change element name

* update

* update changes

* merge fixes
---
 .../src/components/reports/ReportSidebar.jsx  | 124 ++++++++++--------
 .../src/components/reports/ReportTopbar.jsx   |  41 +++---
 .../reports/reports/CustomReport.jsx          |  51 ++++---
 upcoming-release-notes/2254.md                |   6 +
 4 files changed, 131 insertions(+), 91 deletions(-)
 create mode 100644 upcoming-release-notes/2254.md

diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
index 49857c63d88..dc2fdd24768 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -20,34 +20,23 @@ import { ModeButton } from './ModeButton';
 import { ReportOptions } from './ReportOptions';
 
 export function ReportSidebar({
-  startDate,
-  endDate,
-  onChangeDates,
-  dateRange,
-  setDateRange,
+  customReportItems,
+  categories,
   dateRangeLine,
   allMonths,
-  graphType,
-  setGraphType,
+  setDateRange,
   typeDisabled,
   setTypeDisabled,
-  groupBy,
+  setGraphType,
   setGroupBy,
-  balanceType,
   setBalanceType,
-  mode,
   setMode,
-  isDateStatic,
   setIsDateStatic,
-  showEmpty,
   setShowEmpty,
-  showOffBudgetHidden,
   setShowOffBudgetHidden,
-  showUncategorized,
   setShowUncategorized,
-  categories,
-  selectedCategories,
   setSelectedCategories,
+  onChangeDates,
   onChangeViews,
 }) {
   const onSelectRange = cond => {
@@ -86,26 +75,26 @@ export function ReportSidebar({
   const onChangeMode = cond => {
     setMode(cond);
     if (cond === 'time') {
-      if (graphType === 'TableGraph') {
+      if (customReportItems.graphType === 'TableGraph') {
         setTypeDisabled([]);
       } else {
         setTypeDisabled(['Net']);
-        if (['Net'].includes(balanceType)) {
+        if (['Net'].includes(customReportItems.balanceType)) {
           setBalanceType('Payment');
         }
       }
-      if (graphType === 'BarGraph') {
+      if (customReportItems.graphType === 'BarGraph') {
         setGraphType('StackedBarGraph');
       }
-      if (['AreaGraph', 'DonutGraph'].includes(graphType)) {
+      if (['AreaGraph', 'DonutGraph'].includes(customReportItems.graphType)) {
         setGraphType('TableGraph');
         onChangeViews('viewLegend', false);
       }
-      if (['Month', 'Year'].includes(groupBy)) {
+      if (['Month', 'Year'].includes(customReportItems.groupBy)) {
         setGroupBy('Category');
       }
     } else {
-      if (graphType === 'StackedBarGraph') {
+      if (customReportItems.graphType === 'StackedBarGraph') {
         setGraphType('BarGraph');
       } else {
         setTypeDisabled([]);
@@ -115,12 +104,17 @@ export function ReportSidebar({
 
   const onChangeSplit = cond => {
     setGroupBy(cond);
-    if (mode === 'total') {
-      if (graphType !== 'TableGraph') {
-        setTypeDisabled(!['Month', 'Year'].includes(groupBy) ? [] : ['Net']);
+    if (customReportItems.mode === 'total') {
+      if (customReportItems.graphType !== 'TableGraph') {
+        setTypeDisabled(
+          !['Month', 'Year'].includes(customReportItems.groupBy) ? [] : ['Net'],
+        );
       }
     }
-    if (['Net'].includes(balanceType) && graphType !== 'TableGraph') {
+    if (
+      ['Net'].includes(customReportItems.balanceType) &&
+      customReportItems.graphType !== 'TableGraph'
+    ) {
       setBalanceType('Payment');
     }
   };
@@ -158,13 +152,13 @@ export function ReportSidebar({
             Mode:
           </Text>
           <ModeButton
-            selected={mode === 'total'}
+            selected={customReportItems.mode === 'total'}
             onSelect={() => onChangeMode('total')}
           >
             Total
           </ModeButton>
           <ModeButton
-            selected={mode === 'time'}
+            selected={customReportItems.mode === 'time'}
             onSelect={() => onChangeMode('time')}
           >
             Time
@@ -181,16 +175,16 @@ export function ReportSidebar({
             Split:
           </Text>
           <Select
-            value={groupBy}
+            value={customReportItems.groupBy}
             onChange={e => onChangeSplit(e)}
             options={ReportOptions.groupBy.map(option => [
               option.description,
               option.description,
             ])}
             disabledKeys={
-              mode === 'time'
+              customReportItems.mode === 'time'
                 ? ['Month', 'Year']
-                : graphType === 'AreaGraph'
+                : customReportItems.graphType === 'AreaGraph'
                   ? ['Category', 'Group', 'Payee', 'Account', 'Year']
                   : ['Year']
             }
@@ -207,7 +201,7 @@ export function ReportSidebar({
             Type:
           </Text>
           <Select
-            value={balanceType}
+            value={customReportItems.balanceType}
             onChange={setBalanceType}
             options={ReportOptions.balanceType.map(option => [
               option.description,
@@ -251,9 +245,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-empty-columns"
-            checked={showEmpty}
-            value={showEmpty}
-            onChange={() => setShowEmpty(!showEmpty)}
+            checked={customReportItems.showEmpty}
+            value={customReportItems.showEmpty}
+            onChange={() => setShowEmpty(!customReportItems.showEmpty)}
           />
           <label
             htmlFor="show-empty-columns"
@@ -274,9 +268,11 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-hidden-columns"
-            checked={showOffBudgetHidden}
-            value={showOffBudgetHidden}
-            onChange={() => setShowOffBudgetHidden(!showOffBudgetHidden)}
+            checked={customReportItems.showOffBudgetHidden}
+            value={customReportItems.showOffBudgetHidden}
+            onChange={() =>
+              setShowOffBudgetHidden(!customReportItems.showOffBudgetHidden)
+            }
           />
           <label
             htmlFor="show-hidden-columns"
@@ -297,9 +293,11 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-uncategorized"
-            checked={showUncategorized}
-            value={showUncategorized}
-            onChange={() => setShowUncategorized(!showUncategorized)}
+            checked={customReportItems.showUncategorized}
+            value={customReportItems.showUncategorized}
+            onChange={() =>
+              setShowUncategorized(!customReportItems.showUncategorized)
+            }
           />
           <label
             htmlFor="show-uncategorized"
@@ -330,25 +328,28 @@ export function ReportSidebar({
           </Text>
           <View style={{ flex: 1 }} />
           <ModeButton
-            selected={!isDateStatic}
+            selected={!customReportItems.isDateStatic}
             onSelect={() => {
               setIsDateStatic(false);
-              onSelectRange(dateRange);
+              onSelectRange(customReportItems.dateRange);
             }}
           >
             Live
           </ModeButton>
           <ModeButton
-            selected={isDateStatic}
+            selected={customReportItems.isDateStatic}
             onSelect={() => {
               setIsDateStatic(true);
-              onChangeDates(startDate, endDate);
+              onChangeDates(
+                customReportItems.startDate,
+                customReportItems.endDate,
+              );
             }}
           >
             Static
           </ModeButton>
         </View>
-        {!isDateStatic ? (
+        {!customReportItems.isDateStatic ? (
           <View
             style={{
               flexDirection: 'row',
@@ -360,7 +361,7 @@ export function ReportSidebar({
               Range:
             </Text>
             <Select
-              value={dateRange}
+              value={customReportItems.dateRange}
               onChange={e => {
                 onSelectRange(e);
               }}
@@ -385,10 +386,19 @@ export function ReportSidebar({
               </Text>
               <Select
                 onChange={newValue =>
-                  onChangeDates(...validateStart(allMonths, newValue, endDate))
+                  onChangeDates(
+                    ...validateStart(
+                      allMonths,
+                      newValue,
+                      customReportItems.endDate,
+                    ),
+                  )
                 }
-                value={startDate}
-                defaultLabel={monthUtils.format(startDate, 'MMMM, yyyy')}
+                value={customReportItems.startDate}
+                defaultLabel={monthUtils.format(
+                  customReportItems.startDate,
+                  'MMMM, yyyy',
+                )}
                 options={allMonths.map(({ name, pretty }) => [name, pretty])}
               />
             </View>
@@ -404,9 +414,15 @@ export function ReportSidebar({
               </Text>
               <Select
                 onChange={newValue =>
-                  onChangeDates(...validateEnd(allMonths, startDate, newValue))
+                  onChangeDates(
+                    ...validateEnd(
+                      allMonths,
+                      customReportItems.startDate,
+                      newValue,
+                    ),
+                  )
                 }
-                value={endDate}
+                value={customReportItems.endDate}
                 options={allMonths.map(({ name, pretty }) => [name, pretty])}
               />
             </View>
@@ -421,7 +437,7 @@ export function ReportSidebar({
           }}
         />
       </View>
-      {['Category', 'Group'].includes(groupBy) && (
+      {['Category', 'Group'].includes(customReportItems.groupBy) && (
         <View
           style={{
             marginTop: 10,
@@ -431,7 +447,7 @@ export function ReportSidebar({
           <CategorySelector
             categoryGroups={categories.grouped}
             categories={categories.list}
-            selectedCategories={selectedCategories}
+            selectedCategories={customReportItems.selectedCategories}
             setSelectedCategories={setSelectedCategories}
           />
         </View>
diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.jsx b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
index 3a29388cfc2..0704c7c8a18 100644
--- a/packages/desktop-client/src/components/reports/ReportTopbar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
@@ -17,15 +17,12 @@ import { GraphButton } from './GraphButton';
 import { SaveReportMenuButton } from './SaveReport';
 
 export function ReportTopbar({
-  graphType,
+  customReportItems,
   setGraphType,
-  mode,
-  viewLegend,
   setTypeDisabled,
-  balanceType,
   setBalanceType,
-  groupBy,
   setGroupBy,
+  viewLegend,
   viewSummary,
   viewLabels,
   onApplyFilter,
@@ -41,7 +38,7 @@ export function ReportTopbar({
       }}
     >
       <GraphButton
-        selected={graphType === 'TableGraph'}
+        selected={customReportItems.graphType === 'TableGraph'}
         title="Data Table"
         onSelect={() => {
           setGraphType('TableGraph');
@@ -53,15 +50,24 @@ export function ReportTopbar({
         <SvgQueue width={15} height={15} />
       </GraphButton>
       <GraphButton
-        title={mode === 'total' ? 'Bar Graph' : 'Stacked Bar Graph'}
-        selected={graphType === 'BarGraph' || graphType === 'StackedBarGraph'}
+        title={
+          customReportItems.mode === 'total' ? 'Bar Graph' : 'Stacked Bar Graph'
+        }
+        selected={
+          customReportItems.graphType === 'BarGraph' ||
+          customReportItems.graphType === 'StackedBarGraph'
+        }
         onSelect={() => {
-          if (mode === 'total') {
+          if (customReportItems.mode === 'total') {
             setGraphType('BarGraph');
-            if (['Net'].includes(balanceType)) {
+            if (['Net'].includes(customReportItems.balanceType)) {
               setBalanceType('Payment');
             }
-            setTypeDisabled(['Month', 'Year'].includes(groupBy) ? [] : ['Net']);
+            setTypeDisabled(
+              ['Month', 'Year'].includes(customReportItems.groupBy)
+                ? []
+                : ['Net'],
+            );
           } else {
             setGraphType('StackedBarGraph');
             setTypeDisabled(['Net']);
@@ -74,7 +80,7 @@ export function ReportTopbar({
       </GraphButton>
       <GraphButton
         title="Area Graph"
-        selected={graphType === 'AreaGraph'}
+        selected={customReportItems.graphType === 'AreaGraph'}
         onSelect={() => {
           setGraphType('AreaGraph');
           setGroupBy('Month');
@@ -82,20 +88,20 @@ export function ReportTopbar({
           setTypeDisabled([]);
         }}
         style={{ marginRight: 15 }}
-        disabled={mode === 'total' ? false : true}
+        disabled={customReportItems.mode === 'total' ? false : true}
       >
         <SvgChart width={15} height={15} />
       </GraphButton>
       <GraphButton
         title="Donut Graph"
-        selected={graphType === 'DonutGraph'}
+        selected={customReportItems.graphType === 'DonutGraph'}
         onSelect={() => {
           setGraphType('DonutGraph');
           setTypeDisabled(['Net']);
           setBalanceType('Payment');
         }}
         style={{ marginRight: 15 }}
-        disabled={mode === 'total' ? false : true}
+        disabled={customReportItems.mode === 'total' ? false : true}
       >
         <SvgChartPie width={15} height={15} />
       </GraphButton>
@@ -116,7 +122,10 @@ export function ReportTopbar({
         style={{ marginRight: 15 }}
         title="Show Legend"
         disabled={
-          graphType === 'TableGraph' || graphType === 'AreaGraph' ? true : false
+          customReportItems.graphType === 'TableGraph' ||
+          customReportItems.graphType === 'AreaGraph'
+            ? true
+            : false
         }
       >
         <SvgListBullet width={15} height={15} />
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
index 07666855a66..476057dcade 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -129,13 +129,18 @@ export function CustomReport() {
   }, [
     startDate,
     endDate,
+    groupBy,
+    balanceType,
     categories,
     selectedCategories,
+    payees,
+    accounts,
     filters,
     conditionsOp,
     showEmpty,
     showOffBudgetHidden,
     showUncategorized,
+    graphType,
   ]);
 
   const getGraphData = useMemo(() => {
@@ -178,6 +183,24 @@ export function CustomReport() {
 
   const data = { ...graphData, groupedData };
 
+  const customReportItems = {
+    id: null,
+    mode,
+    groupBy,
+    balanceType,
+    showEmpty,
+    showOffBudgetHidden,
+    showUncategorized,
+    graphType,
+    startDate,
+    endDate,
+    selectedCategories,
+    isDateStatic,
+    dateRange,
+    filters,
+    conditionsOp,
+    data,
+  };
   const [scrollWidth, setScrollWidth] = useState(0);
 
   if (!allMonths || !data) {
@@ -214,34 +237,23 @@ export function CustomReport() {
         }}
       >
         <ReportSidebar
-          startDate={startDate}
-          endDate={endDate}
-          onChangeDates={onChangeDates}
-          dateRange={dateRange}
-          setDateRange={setDateRange}
+          customReportItems={customReportItems}
+          categories={categories}
           dateRangeLine={dateRangeLine}
           allMonths={allMonths}
-          graphType={graphType}
-          setGraphType={setGraphType}
+          setDateRange={setDateRange}
           typeDisabled={typeDisabled}
           setTypeDisabled={setTypeDisabled}
-          groupBy={groupBy}
+          setGraphType={setGraphType}
           setGroupBy={setGroupBy}
-          balanceType={balanceType}
           setBalanceType={setBalanceType}
-          mode={mode}
           setMode={setMode}
-          isDateStatic={isDateStatic}
           setIsDateStatic={setIsDateStatic}
-          showEmpty={showEmpty}
           setShowEmpty={setShowEmpty}
-          showOffBudgetHidden={showOffBudgetHidden}
           setShowOffBudgetHidden={setShowOffBudgetHidden}
-          showUncategorized={showUncategorized}
           setShowUncategorized={setShowUncategorized}
-          categories={categories}
-          selectedCategories={selectedCategories}
           setSelectedCategories={setSelectedCategories}
+          onChangeDates={onChangeDates}
           onChangeViews={onChangeViews}
         />
         <View
@@ -250,15 +262,12 @@ export function CustomReport() {
           }}
         >
           <ReportTopbar
-            graphType={graphType}
+            customReportItems={customReportItems}
             setGraphType={setGraphType}
-            mode={mode}
-            viewLegend={viewLegend}
             setTypeDisabled={setTypeDisabled}
-            balanceType={balanceType}
             setBalanceType={setBalanceType}
-            groupBy={groupBy}
             setGroupBy={setGroupBy}
+            viewLegend={viewLegend}
             viewSummary={viewSummary}
             viewLabels={viewLabels}
             onApplyFilter={onApplyFilter}
diff --git a/upcoming-release-notes/2254.md b/upcoming-release-notes/2254.md
new file mode 100644
index 00000000000..b4c01bb4301
--- /dev/null
+++ b/upcoming-release-notes/2254.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Making custom reports code more compact and efficient.