sidebarcategory typescript

packages/desktop-client/src/components/budget/ExpenseCategory.js → 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

@@ -19,12 +19,14 @@ type ExpenseGroupProps = {
   group: ComponentProps<typeof SidebarGroup>['group'];
   collapsed: boolean;
   editingCell: { id: string; cell: string } | null;
-  dragState: DragState;
+  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;
+  onDragChange: OnDragChangeCallback<
+    ComponentProps<typeof SidebarGroup>['group']
+  >;
   onReorderGroup: OnDropCallback;
   onReorderCategory: OnDropCallback;
   onToggleCollapse?: ComponentProps<typeof SidebarGroup>['onToggleCollapse'];

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/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,29 +14,32 @@ import { theme } from '../style';
 
 import View from './common/View';
 
-export 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({
@@ -53,7 +56,7 @@ export function useDraggable({
     collect: monitor => ({ isDragging: monitor.isDragging() }),
 
     end(item) {
-      _onDragChange.current({ state: 'end', type, item });
+      _onDragChange.current({ state: 'end', type, item: item as T });
     },
 
     canDrag() {

upcoming-release-notes/1897.md

@@ -3,4 +3,4 @@ category: Maintenance
 authors: [MikesGlitch]
 ---
 
-Convert ExpenseGroup components to Typescript.
+Convert ExpenseGroup, ExpenseCategory components to Typescript.