Budget tsx refactor

packages/desktop-client/src/components/budget/IncomeGroup.js → packages/desktop-client/src/components/budget/IncomeGroup.tsx

@@ -6,6 +6,25 @@ import { Row } from '../table';
 import RenderMonths from './RenderMonths';
 import SidebarGroup from './SidebarGroup';
 
+type IncomeGroupProps = {
+ group: {
+ id: string;
+ hidden: number;
+ categories: object[];
+ is_income: number;
+ name: string;
+ sort_order: number;
+ tombstone: number;
+ };
+ editingCell: { id: string; cell: string } | null;
+ collapsed: boolean;
+ MonthComponent: () => JSX.Element;
+ onEditName: (id: string) => void;
+ onSave: (group: object) => Promise<void>;
+ onToggleCollapse: (id: string) => void;
+ onShowNewCategory: (groupId: string) => void;
+};
+
 function IncomeGroup({
  group,
  editingCell,
@@ -15,7 +34,7 @@ function IncomeGroup({
  onSave,
  onToggleCollapse,
  onShowNewCategory,
-}) {
+}: IncomeGroupProps) {
  return (
  <Row
  collapsed={true}

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

@@ -1,12 +1,12 @@
-import React, { type ReactNode } from 'react';
+import React from 'react';
 
 import Button from '../common/Button';
 import View from '../common/View';
 
 import RenderMonths from './RenderMonths';
 
 type IncomeHeaderProps = {
- MonthComponent?: ReactNode;
+ MonthComponent?: () => JSX.Element;
  onShowNewGroup: () => void;
 };
 
@@ -27,8 +27,6 @@ function IncomeHeader({ MonthComponent, onShowNewGroup }: IncomeHeaderProps) {
  <RenderMonths
  component={MonthComponent}
  style={{ border: 0, justifyContent: 'flex-end' }}
- editingIndex={undefined}
- args={undefined}
  />
  </View>
  );

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

@@ -1,23 +1,45 @@
-import React, { createContext } from 'react';
+import React, { createContext, type ReactNode } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
-export function getValidMonthBounds(bounds, startMonth, endMonth) {
+type BoundsProps = {
+ start: string;
+ end: string;
+};
+
+export function getValidMonthBounds(
+ bounds: BoundsProps,
+ startMonth: undefined | string,
+ endMonth: string,
+) {
  return {
  start: startMonth < bounds.start ? bounds.start : startMonth,
  end: endMonth > bounds.end ? bounds.end : endMonth,
  };
 }
 
-export let MonthsContext = createContext();
+type MonthsContextProps = {
+ months: string[];
+ type: string;
+};
+
+export let MonthsContext = createContext<MonthsContextProps>(null);
+
+type MonthsProviderProps = {
+ startMonth: string | undefined;
+ numMonths: number;
+ monthBounds: BoundsProps;
+ type: string;
+ children: ReactNode;
+};
 
 export function MonthsProvider({
  startMonth,
  numMonths,
  monthBounds,
  type,
  children,
-}) {
+}: MonthsProviderProps) {
  let endMonth = monthUtils.addMonths(startMonth, numMonths - 1);
  let bounds = getValidMonthBounds(monthBounds, startMonth, endMonth);
  let months = monthUtils.rangeInclusive(bounds.start, bounds.end);

packages/desktop-client/src/components/budget/RenderMonths.js → packages/desktop-client/src/components/budget/RenderMonths.tsx

@@ -1,4 +1,8 @@
-import React, { useContext } from 'react';
+import React, {
+ useContext,
+ type CSSProperties,
+ type ComponentType,
+} from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -8,16 +12,28 @@ import NamespaceContext from '../spreadsheet/NamespaceContext';
 
 import { MonthsContext } from './MonthsContext';
 
-function RenderMonths({ component: Component, editingIndex, args, style }) {
- let { months, type } = useContext(MonthsContext);
+type RenderMonthsProps = {
+ component?: ComponentType<{ monthIndex: number; editing: boolean }>;
+ editingIndex?: undefined;
+ args?: object;
+ style?: CSSProperties;
+};
+
+function RenderMonths({
+ component: Component,
+ editingIndex,
+ args,
+ style,
+}: RenderMonthsProps) {
+ let { months } = useContext(MonthsContext);
 
  return months.map((month, index) => {
  let editing = editingIndex === index;
 
  return (
  <NamespaceContext.Provider
  key={index}
- value={monthUtils.sheetForMonth(month, type)}
+ value={monthUtils.sheetForMonth(month)}
  >
  <View
  style={{
@@ -30,7 +46,7 @@ function RenderMonths({ component: Component, editingIndex, args, style }) {
  </View>
  </NamespaceContext.Provider>
  );
- });
+ }) as unknown as JSX.Element;
 }
 
 export default RenderMonths;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { type CSSProperties, useState } from 'react';
 
 import ExpandArrow from '../../icons/v0/ExpandArrow';
 import CheveronDown from '../../icons/v1/CheveronDown';
@@ -11,6 +11,30 @@ import NotesButton from '../NotesButton';
 import { InputCell } from '../table';
 import { Tooltip } from '../tooltips';
 
+type SidebarGroupProps = {
+ group: {
+ id: string;
+ hidden: number;
+ categories: object[];
+ is_income: number;
+ name: string;
+ sort_order: number;
+ tombstone: number;
+ };
+ editing?: boolean;
+ collapsed: boolean;
+ dragPreview?: () => void;
+ innerRef?: () => void;
+ borderColor?: string;
+ style?: CSSProperties;
+ onEdit?: (id: string) => void;
+ onSave?: (group: object) => Promise<void>;
+ onDelete?: (id: string) => Promise<void>;
+ onShowNewCategory?: (groupId: string) => void;
+ onHideNewGroup?: () => void;
+ onToggleCollapse?: (id: string) => void;
+};
+
 function SidebarGroup({
  group,
  editing,
@@ -25,7 +49,7 @@ function SidebarGroup({
  onShowNewCategory,
  onHideNewGroup,
  onToggleCollapse,
-}) {
+}: SidebarGroupProps) {
  const temporary = group.id === 'new';
  const [menuOpen, setMenuOpen] = useState(false);
 
@@ -160,6 +184,7 @@ function SidebarGroup({
  onBlur={() => onEdit(null)}
  style={{ fontWeight: 600 }}
  inputProps={{
+ value: undefined,
  style: { marginLeft: 20 },
  placeholder: temporary ? 'New Group Name' : '',
  }}

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

@@ -45,6 +45,7 @@ function Budget(props) {
  const [prewarmStartMonth, setPrewarmStartMonth] = useState(
  props.startMonth || currentMonth,
  );
+
  const [newCategoryForGroup, setNewCategoryForGroup] = useState(null);
  const [isAddingGroup, setIsAddingGroup] = useState(false);
  const [collapsed, setCollapsed] = useState(props.collapsedPrefs || []);

packages/desktop-client/src/components/table.tsx

@@ -131,7 +131,7 @@ export function UnexposedCellContent({
 }
 
 type CellProps = Omit<ComponentProps<typeof View>, 'children' | 'value'> & {
- formatter?: (value: string, type?: unknown) => string;
+ formatter?: (value: string, type?: unknown) => string | JSX.Element;
  focused?: boolean;
  textAlign?: CSSProperties['textAlign'];
  alignItems?: CSSProperties['alignItems'];

upcoming-release-notes/1743.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [Jod929]
+---
+
+refactor the following to tsx: IncomeGroup, IncomeHeader, MonthsContext, RenderMonths, SidebarGroup.