From 60e2d8a563ca408303fce89ca6255533c29b25d9 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 21 Feb 2024 16:15:09 +0000
Subject: [PATCH] typescript update

---
 .../src/components/reports/ChooseGraph.tsx    |   1 +
 .../src/components/reports/Overview.jsx       |   2 +-
 .../reports/reports/CustomReportListCards.tsx | 188 ++++++++++--------
 3 files changed, 110 insertions(+), 81 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index ad8f0c3a857..dce8850f8fa 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -176,4 +176,5 @@ export function ChooseGraph({
       </View>
     );
   }
+  return null;
 }
diff --git a/packages/desktop-client/src/components/reports/Overview.jsx b/packages/desktop-client/src/components/reports/Overview.jsx
index 63332794a12..ce0c49b4499 100644
--- a/packages/desktop-client/src/components/reports/Overview.jsx
+++ b/packages/desktop-client/src/components/reports/Overview.jsx
@@ -56,7 +56,7 @@ export function Overview() {
           <View
             style={{
               height: 1,
-              backgroundColor: theme.sidebarBackground,
+              backgroundColor: theme.pillBorderDark,
               marginTop: 10,
               flexShrink: 0,
             }}
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
index 4ea7663da43..40d7742a73c 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
@@ -1,7 +1,7 @@
-// @ts-strict-ignore
 import React, { useMemo, useState } from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';
+import { type CustomReportEntity } from 'loot-core/types/models/reports';
 
 import { styles } from '../../../style';
 import { Block } from '../../common/Block';
@@ -43,24 +43,35 @@ function CardMenu({ onClose, onMenuSelect, reportId }: CardMenuProps) {
   );
 }
 
-function index(data) {
-  return data.reduce((carry, report) => ({ ...carry, [report.id]: false }), []);
+function index(data: CustomReportEntity[]): { [key: string]: boolean }[] {
+  return data.reduce((carry, report) => {
+    const reportId: string = report.id === undefined ? '' : report.id;
+
+    return {
+      ...carry,
+      [reportId]: false,
+    };
+  }, []);
 }
 
-export function CustomReportListCards({ reports }) {
-  const result = index(reports);
+export function CustomReportListCards({
+  reports,
+}: {
+  reports: CustomReportEntity[];
+}) {
+  const result: { [key: string]: boolean }[] = index(reports);
   const [reportMenu, setReportMenu] = useState(result);
 
-  const [isCardHovered, setIsCardHovered] = useState(null);
+  const [isCardHovered, setIsCardHovered] = useState('');
 
-  const onMenuSelect = async (item, reportId) => {
+  const onMenuSelect = async (item: string, reportId: string) => {
     if (item === 'delete') {
       onMenuOpen(reportId, false);
       await send('report/delete', reportId);
     }
   };
 
-  const onMenuOpen = (item, state) => {
+  const onMenuOpen = (item: string, state: boolean) => {
     setReportMenu({ ...reportMenu, [item]: state });
   };
 
@@ -68,7 +79,7 @@ export function CustomReportListCards({ reports }) {
 
   const groups = useMemo(() => {
     return reports
-      .map((e, i) => {
+      .map((report: CustomReportEntity, i: number) => {
         return i % chunkSize === 0 ? reports.slice(i, i + chunkSize) : null;
       })
       .filter(e => {
@@ -89,86 +100,103 @@ export function CustomReportListCards({ reports }) {
             flexDirection: 'row',
           }}
         >
-          {group.map((report, id) => (
-            <View key={id} style={{ position: 'relative', flex: '1' }}>
-              <View style={{ width: '100%', height: '100%' }}>
-                <ReportCard to="/reports/custom" report={report}>
-                  <View
-                    style={{ flex: 1, padding: 10 }}
-                    onMouseEnter={() => setIsCardHovered(report.id)}
-                    onMouseLeave={() => {
-                      setIsCardHovered(null);
-                      onMenuOpen(report.id, false);
-                    }}
-                  >
+          {group &&
+            group.map((report, id) => (
+              <View key={id} style={{ position: 'relative', flex: '1' }}>
+                <View style={{ width: '100%', height: '100%' }}>
+                  <ReportCard to="/reports/custom" report={report}>
                     <View
-                      style={{
-                        flexDirection: 'row',
-                        flexShrink: 0,
-                        paddingBottom: 5,
+                      style={{ flex: 1, padding: 10 }}
+                      onMouseEnter={() =>
+                        setIsCardHovered(
+                          report.id === undefined ? '' : report.id,
+                        )
+                      }
+                      onMouseLeave={() => {
+                        setIsCardHovered('');
+                        onMenuOpen(
+                          report.id === undefined ? '' : report.id,
+                          false,
+                        );
                       }}
                     >
-                      <View style={{ flex: 1 }}>
-                        <Block
-                          style={{
-                            ...styles.mediumText,
-                            fontWeight: 500,
-                            marginBottom: 5,
-                          }}
-                          role="heading"
-                        >
-                          {report.name}
-                        </Block>
-                        <DateRange
-                          start={report.startDate}
-                          end={report.endDate}
-                        />
+                      <View
+                        style={{
+                          flexDirection: 'row',
+                          flexShrink: 0,
+                          paddingBottom: 5,
+                        }}
+                      >
+                        <View style={{ flex: 1 }}>
+                          <Block
+                            style={{
+                              ...styles.mediumText,
+                              fontWeight: 500,
+                              marginBottom: 5,
+                            }}
+                            role="heading"
+                          >
+                            {report.name}
+                          </Block>
+                          <DateRange
+                            start={report.startDate}
+                            end={report.endDate}
+                          />
+                        </View>
                       </View>
-                    </View>
 
-                    {report.data ? (
-                      <ChooseGraph
-                        startDate={report.startDate}
-                        endDate={report.endDate}
-                        data={report.data}
-                        mode={report.mode}
-                        graphType={report.graphType}
-                        balanceType={report.balanceType}
-                        groupBy={report.groupBy}
-                        compact={true}
-                        style={{ height: 'auto', flex: 1 }}
-                      />
-                    ) : (
-                      <LoadingIndicator />
-                    )}
-                  </View>
-                </ReportCard>
-              </View>
-              <View
-                style={{
-                  textAlign: 'right',
-                  position: 'absolute',
-                  right: 25,
-                  top: 25,
-                }}
-              >
-                <MenuButton
-                  onClick={() => onMenuOpen(report.id, true)}
+                      {report.data ? (
+                        <ChooseGraph
+                          startDate={report.startDate}
+                          endDate={report.endDate}
+                          data={report.data}
+                          mode={report.mode}
+                          graphType={report.graphType}
+                          balanceType={report.balanceType}
+                          groupBy={report.groupBy}
+                          compact={true}
+                          style={{ height: 'auto', flex: 1 }}
+                        />
+                      ) : (
+                        <LoadingIndicator />
+                      )}
+                    </View>
+                  </ReportCard>
+                </View>
+                <View
                   style={{
-                    color:
-                      isCardHovered === report.id ? 'inherit' : 'transparent',
+                    textAlign: 'right',
+                    position: 'absolute',
+                    right: 25,
+                    top: 25,
                   }}
-                />
-                {reportMenu[report.id] && (
-                  <CardMenu
-                    onMenuSelect={onMenuSelect}
-                    onClose={() => onMenuOpen(report.id, false)}
-                    reportId={report.id}
+                >
+                  <MenuButton
+                    onClick={() =>
+                      onMenuOpen(report.id === undefined ? '' : report.id, true)
+                    }
+                    style={{
+                      color:
+                        isCardHovered === report.id ? 'inherit' : 'transparent',
+                    }}
                   />
-                )}
+                  {report.id === undefined
+                    ? null
+                    : reportMenu[report.id as keyof typeof reportMenu] && (
+                        <CardMenu
+                          onMenuSelect={onMenuSelect}
+                          onClose={() =>
+                            onMenuOpen(
+                              report.id === undefined ? '' : report.id,
+                              false,
+                            )
+                          }
+                          reportId={report.id}
+                        />
+                      )}
+                </View>
               </View>
-            </View>
-          ))}
+            ))}
           {remainder !== 3 &&
             i + 1 === groups.length &&
             [...Array(remainder)].map((e, i) => (