Budget tsx refactor (#1743)

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.