Maintenance: BudgetSummaries, MonthPicker, SidebarCategory components to tsx. (#1879)

packages/desktop-client/src/components/budget/BudgetSummaries.tsx

@@ -9,14 +9,22 @@ import { useSpring, animated } from 'react-spring';
 
 import { css } from 'glamor';
 
-import * as monthUtils from 'loot-core/src/shared/months';
+import { addMonths, subMonths } from 'loot-core/src/shared/months';
 
 import useResizeObserver from '../../hooks/useResizeObserver';
 import View from '../common/View';
 
 import { MonthsContext } from './MonthsContext';
+import { type BudgetSummary as ReportBudgetSummary } from './report/BudgetSummary';
+import { type BudgetSummary as RolloverBudgetSummary } from './rollover/BudgetSummary';
 
-export default function BudgetSummaries({ SummaryComponent }) {
+type BudgetSummariesProps = {
+  SummaryComponent: typeof ReportBudgetSummary | typeof RolloverBudgetSummary;
+};
+
+export default function BudgetSummaries({
+  SummaryComponent,
+}: BudgetSummariesProps) {
   let { months } = useContext(MonthsContext);
 
   let [widthState, setWidthState] = useState(0);
@@ -32,10 +40,9 @@ export default function BudgetSummaries({ SummaryComponent }) {
   );
 
   let prevMonth0 = useRef(months[0]);
-
   let allMonths = [...months];
-  allMonths.unshift(monthUtils.subMonths(months[0], 1));
-  allMonths.push(monthUtils.addMonths(months[months.length - 1], 1));
+  allMonths.unshift(subMonths(months[0], 1));
+  allMonths.push(addMonths(months[months.length - 1], 1));
   let monthWidth = widthState / months.length;
 
   useLayoutEffect(() => {
@@ -43,9 +50,11 @@ export default function BudgetSummaries({ SummaryComponent }) {
     let reversed = prevMonth > months[0];
     let offsetX = monthWidth;
     let from = reversed ? -offsetX * 2 : 0;
+
     if (prevMonth !== allMonths[0] && prevMonth !== allMonths[2]) {
       from = -offsetX;
     }
+
     let to = -offsetX;
     spring.start({ from: { x: from }, x: to });
   }, [months[0]]);

packages/desktop-client/src/components/budget/ExpenseGroup.js

@@ -13,7 +13,6 @@ function ExpenseGroup({
   collapsed,
   editingCell,
   dragState,
-  itemPos,
   MonthComponent,
   onEditName,
   onSave,

packages/desktop-client/src/components/budget/MonthPicker.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { type CSSProperties, useState } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -6,13 +6,23 @@ import useResizeObserver from '../../hooks/useResizeObserver';
 import { styles, theme } from '../../style';
 import View from '../common/View';
 
+import { type BoundsProps } from './MonthsContext';
+
+type MonthPickerProps = {
+  startMonth: string;
+  numDisplayed: number;
+  monthBounds: BoundsProps;
+  style: CSSProperties;
+  onSelect: (month: string) => void;
+};
+
 export const MonthPicker = ({
   startMonth,
   numDisplayed,
   monthBounds,
   style,
   onSelect,
-}) => {
+}: MonthPickerProps) => {
   const [hoverId, setHoverId] = useState(null);
   const [targetMonthCount, setTargetMonthCount] = useState(12);
 

packages/desktop-client/src/components/budget/MonthsContext.tsx

@@ -2,7 +2,7 @@ import React, { createContext, type ReactNode } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
-type BoundsProps = {
+export type BoundsProps = {
   start: string;
   end: string;
 };

packages/desktop-client/src/components/budget/SidebarCategory.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+import React, { type CSSProperties, type Ref, useState } from 'react';
+
+import { type CategoryEntity } from 'loot-core/src/types/models';
 
 import CheveronDown from '../../icons/v1/CheveronDown';
 import { theme } from '../../style';
@@ -6,9 +8,26 @@ import Button from '../common/Button';
 import Menu from '../common/Menu';
 import View from '../common/View';
 import NotesButton from '../NotesButton';
+import { type OnDragChangeCallback } from '../sort';
 import { InputCell } from '../table';
 import { Tooltip } from '../tooltips';
 
+type SidebarCategoryProps = {
+  innerRef: Ref<HTMLDivElement>;
+  category: CategoryEntity;
+  dragPreview?: boolean;
+  dragging?: boolean;
+  editing: boolean;
+  style: CSSProperties;
+  borderColor: string;
+  isLast?: boolean;
+  onDragChange?: OnDragChangeCallback;
+  onEditName: (id: string) => void;
+  onSave: (group) => void;
+  onDelete: (id: string) => Promise<void>;
+  onHideNewCategory: () => void;
+};
+
 function SidebarCategory({
   innerRef,
   category,
@@ -16,15 +35,13 @@ function SidebarCategory({
   dragging,
   editing,
   style,
-  borderColor = theme.tableBorder,
   isLast,
   onDragChange,
-  onEditMonth,
   onEditName,
   onSave,
   onDelete,
   onHideNewCategory,
-}) {
+}: SidebarCategoryProps) {
   const temporary = category.id === 'new';
   const [menuOpen, setMenuOpen] = useState(false);
 

packages/desktop-client/src/components/budget/SidebarGroup.tsx

@@ -1,4 +1,5 @@
 import React, { type CSSProperties, useState } from 'react';
+import { type ConnectDragSource } from 'react-dnd';
 
 import ExpandArrow from '../../icons/v0/ExpandArrow';
 import CheveronDown from '../../icons/v1/CheveronDown';
@@ -24,7 +25,7 @@ type SidebarGroupProps = {
   editing?: boolean;
   collapsed: boolean;
   dragPreview?: () => void;
-  innerRef?: () => void;
+  innerRef?: ConnectDragSource;
   borderColor?: string;
   style?: CSSProperties;
   onEdit?: (id: string) => void;

packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx

@@ -260,7 +260,7 @@ function ToBudget({
 
 type BudgetSummaryProps = {
   month: string;
-  isGoalTemplatesEnabled: boolean;
+  isGoalTemplatesEnabled?: boolean;
 };
 export function BudgetSummary({
   month,

packages/desktop-client/src/hooks/useResizeObserver.ts

@@ -1,7 +1,7 @@
 import { useRef, useCallback } from 'react';
 
 export default function useResizeObserver(
-  func: (contentRect: DOMRectReadOnly) => ResizeObserver,
+  func: (contentRect: DOMRectReadOnly) => void,
 ): (el: unknown) => void {
   let observer = useRef(null);
   if (!observer.current) {

upcoming-release-notes/1879.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Convert BudgetSummaries, MonthPicker, SidebarCategory components to Typescript.