[Maintenance] Convert ExpenseGroup, ExpenseCategory, IncomeCategory components to Typescript. (#1897)

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

@@ -1,16 +1,39 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
+
+import { type CategoryEntity } from 'loot-core/src/types/models';
 
 import { theme } from '../../style';
 import View from '../common/View';
-import { useDraggable, useDroppable, DropHighlight } from '../sort';
+import {
+  useDraggable,
+  useDroppable,
+  DropHighlight,
+  type DragState,
+  type OnDragChangeCallback,
+  type OnDropCallback,
+} from '../sort';
 import { Row } from '../table';
 
 import RenderMonths from './RenderMonths';
 import SidebarCategory from './SidebarCategory';
 
+type ExpenseCategoryProps = {
+  cat: CategoryEntity;
+  editingCell: { id: string; cell: string } | null;
+  dragState: DragState<CategoryEntity>;
+  MonthComponent: ComponentProps<typeof RenderMonths>['component'];
+  onEditName?: ComponentProps<typeof SidebarCategory>['onEditName'];
+  onEditMonth?: (id: string, monthIndex: number) => void;
+  onSave?: ComponentProps<typeof SidebarCategory>['onSave'];
+  onDelete?: ComponentProps<typeof SidebarCategory>['onDelete'];
+  onDragChange: OnDragChangeCallback<CategoryEntity>;
+  onBudgetAction: (idx: number, action: string, arg: unknown) => void;
+  onShowActivity: (name: string, id: string, idx: number) => void;
+  onReorder: OnDropCallback;
+};
+
 function ExpenseCategory({
   cat,
-  budgetArray,
   editingCell,
   dragState,
   MonthComponent,
@@ -22,7 +45,7 @@ function ExpenseCategory({
   onShowActivity,
   onDragChange,
   onReorder,
-}) {
+}: ExpenseCategoryProps) {
   let dragging = dragState && dragState.item === cat;
 
   if (dragState && dragState.item.id === cat.cat_group) {
@@ -67,7 +90,6 @@ function ExpenseCategory({
           onEditName={onEditName}
           onSave={onSave}
           onDelete={onDelete}
-          onDragChange={onDragChange}
         />
 
         <RenderMonths

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

@@ -1,13 +1,38 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { theme } from '../../style';
 import View from '../common/View';
-import { useDraggable, useDroppable, DropHighlight } from '../sort';
+import {
+  useDraggable,
+  useDroppable,
+  DropHighlight,
+  type OnDragChangeCallback,
+  type OnDropCallback,
+  type DragState,
+} from '../sort';
 import { Row, ROW_HEIGHT } from '../table';
 
 import RenderMonths from './RenderMonths';
 import SidebarGroup from './SidebarGroup';
 
+type ExpenseGroupProps = {
+  group: ComponentProps<typeof SidebarGroup>['group'];
+  collapsed: boolean;
+  editingCell: { id: string; cell: string } | null;
+  dragState: DragState<ComponentProps<typeof SidebarGroup>['group']>;
+  MonthComponent: ComponentProps<typeof RenderMonths>['component'];
+  onEditName?: ComponentProps<typeof SidebarGroup>['onEdit'];
+  onSave?: ComponentProps<typeof SidebarGroup>['onSave'];
+  onDelete?: ComponentProps<typeof SidebarGroup>['onDelete'];
+  onDragChange: OnDragChangeCallback<
+    ComponentProps<typeof SidebarGroup>['group']
+  >;
+  onReorderGroup: OnDropCallback;
+  onReorderCategory: OnDropCallback;
+  onToggleCollapse?: ComponentProps<typeof SidebarGroup>['onToggleCollapse'];
+  onShowNewCategory?: ComponentProps<typeof SidebarGroup>['onShowNewCategory'];
+};
+
 function ExpenseGroup({
   group,
   collapsed,
@@ -22,7 +47,7 @@ function ExpenseGroup({
   onReorderCategory,
   onToggleCollapse,
   onShowNewCategory,
-}) {
+}: ExpenseGroupProps) {
   let dragging = dragState && dragState.item === group;
 
   let { dragRef } = useDraggable({

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

@@ -1,11 +1,34 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
-import { useDraggable, useDroppable, DropHighlight } from '../sort';
+import { type CategoryEntity } from 'loot-core/src/types/models';
+
+import {
+  useDraggable,
+  useDroppable,
+  DropHighlight,
+  type OnDragChangeCallback,
+  type OnDropCallback,
+} from '../sort';
 import { Row } from '../table';
 
 import RenderMonths from './RenderMonths';
 import SidebarCategory from './SidebarCategory';
 
+type IncomeCategoryProps = {
+  cat: CategoryEntity;
+  isLast?: boolean;
+  editingCell: { id: string; cell: string } | null;
+  MonthComponent: ComponentProps<typeof RenderMonths>['component'];
+  onEditName: ComponentProps<typeof SidebarCategory>['onEditName'];
+  onEditMonth?: (id: string, monthIndex: number) => void;
+  onSave: ComponentProps<typeof SidebarCategory>['onSave'];
+  onDelete: ComponentProps<typeof SidebarCategory>['onDelete'];
+  onDragChange: OnDragChangeCallback<CategoryEntity>;
+  onBudgetAction: (idx: number, action: string, arg: unknown) => void;
+  onReorder: OnDropCallback;
+  onShowActivity: (name: string, id: string, idx: number) => void;
+};
+
 function IncomeCategory({
   cat,
   isLast,
@@ -19,7 +42,7 @@ function IncomeCategory({
   onBudgetAction,
   onReorder,
   onShowActivity,
-}) {
+}: IncomeCategoryProps) {
   let { dragRef } = useDraggable({
     type: 'income-category',
     onDragChange,

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

@@ -14,7 +14,7 @@ import { MonthsContext } from './MonthsContext';
 
 type RenderMonthsProps = {
   component?: ComponentType<{ monthIndex: number; editing: boolean }>;
-  editingIndex?: undefined;
+  editingIndex?: string | number;
   args?: object;
   style?: CSSProperties;
 };

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

@@ -8,7 +8,6 @@ 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';
 
@@ -18,14 +17,13 @@ type SidebarCategoryProps = {
   dragPreview?: boolean;
   dragging?: boolean;
   editing: boolean;
-  style: CSSProperties;
-  borderColor: string;
+  style?: CSSProperties;
+  borderColor?: string;
   isLast?: boolean;
-  onDragChange?: OnDragChangeCallback;
   onEditName: (id: string) => void;
   onSave: (group) => void;
   onDelete: (id: string) => Promise<void>;
-  onHideNewCategory: () => void;
+  onHideNewCategory?: () => void;
 };
 
 function SidebarCategory({
@@ -36,7 +34,6 @@ function SidebarCategory({
   editing,
   style,
   isLast,
-  onDragChange,
   onEditName,
   onSave,
   onDelete,

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

@@ -24,7 +24,7 @@ type SidebarGroupProps = {
   };
   editing?: boolean;
   collapsed: boolean;
-  dragPreview?: () => void;
+  dragPreview?: boolean;
   innerRef?: ConnectDragSource;
   borderColor?: string;
   style?: CSSProperties;

packages/desktop-client/src/components/sidebar/Account.tsx

@@ -41,7 +41,7 @@ type AccountProps = {
   updated?: boolean;
   style?: CSSProperties;
   outerStyle?: CSSProperties;
-  onDragChange?: OnDragChangeCallback;
+  onDragChange?: OnDragChangeCallback<{ id: string }>;
   onDrop?: OnDropCallback;
 };
 

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

@@ -14,28 +14,32 @@ import { theme } from '../style';
 
 import View from './common/View';
 
-type DragState = {
+export type DragState<T> = {
   state: 'start-preview' | 'start' | 'end';
   type?: string;
-  item?: unknown;
+  item?: T;
+  preview?: boolean;
 };
 
 export type DropPosition = 'top' | 'bottom';
 
-export type OnDragChangeCallback = (drag: DragState) => Promise<void> | void;
-type UseDraggableArgs = {
-  item: unknown;
+export type OnDragChangeCallback<T> = (
+  drag: DragState<T>,
+) => Promise<void> | void;
+
+type UseDraggableArgs<T> = {
+  item?: T;
   type: string;
   canDrag: boolean;
-  onDragChange: OnDragChangeCallback;
+  onDragChange: OnDragChangeCallback<T>;
 };
 
-export function useDraggable({
+export function useDraggable<T>({
   item,
   type,
   canDrag,
   onDragChange,
-}: UseDraggableArgs) {
+}: UseDraggableArgs<T>) {
   let _onDragChange = useRef(onDragChange);
 
   const [, dragRef] = useDrag({
@@ -51,8 +55,8 @@ export function useDraggable({
     },
     collect: monitor => ({ isDragging: monitor.isDragging() }),
 
-    end(item) {
-      _onDragChange.current({ state: 'end', type, item });
+    end(dragState) {
+      _onDragChange.current({ state: 'end', type, item: dragState.item });
     },
 
     canDrag() {

upcoming-release-notes/1897.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Convert ExpenseGroup, ExpenseCategory, IncomeCategory components to Typescript.