Maintenance: Converting Utils and Sort to typescript (actualbudget#1823)

packages/desktop-client/src/components/ManageRules.js → packages/desktop-client/src/components/ManageRules.tsx

@@ -1,4 +1,11 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  type SetStateAction,
+  type Dispatch,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { pushModal } from 'loot-core/src/client/actions/modals';
@@ -7,6 +14,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import * as undo from 'loot-core/src/platform/client/undo';
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 import { describeSchedule } from 'loot-core/src/shared/schedules';
+import { type RuleEntity } from 'loot-core/src/types/models';
 
 import useCategories from '../hooks/useCategories';
 import useSelected, { SelectedProvider } from '../hooks/useSelected';
@@ -76,7 +84,17 @@ function ruleToString(rule, data) {
   );
 }
 
-function ManageRulesContent({ isModal, payeeId, setLoading }) {
+type ManageRulesContentProps = {
+  isModal: boolean;
+  payeeId: string | null;
+  setLoading?: Dispatch<SetStateAction<boolean>>;
+};
+
+function ManageRulesContent({
+  isModal,
+  payeeId,
+  setLoading,
+}: ManageRulesContentProps) {
   let [allRules, setAllRules] = useState(null);
   let [rules, setRules] = useState(null);
   let [filter, setFilter] = useState('');
@@ -191,7 +209,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
   }, []);
 
   function onCreateRule() {
-    let rule = {
+    let rule: RuleEntity = {
       stage: null,
       conditionsOp: 'and',
       conditions: [
@@ -314,11 +332,17 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
   );
 }
 
+type ManageRulesProps = {
+  isModal: boolean;
+  payeeId: string | null;
+  setLoading?: Dispatch<SetStateAction<boolean>>;
+};
+
 export default function ManageRules({
   isModal,
   payeeId,
   setLoading = () => {},
-}) {
+}: ManageRulesProps) {
   return (
     <SchedulesQuery.Provider>
       <ManageRulesContent

packages/desktop-client/src/components/budget/util.js → packages/desktop-client/src/components/budget/util.ts

@@ -1,6 +1,9 @@
+import { type CategoryGroupEntity } from 'loot-core/src/types/models';
+
 import { styles, theme } from '../../style';
+import { type DropPosition } from '../sort';
 
-export function addToBeBudgetedGroup(groups) {
+export function addToBeBudgetedGroup(groups: CategoryGroupEntity[]) {
   return [
     {
       id: 'to-be-budgeted',
@@ -11,20 +14,20 @@ export function addToBeBudgetedGroup(groups) {
   ];
 }
 
-export function separateGroups(categoryGroups) {
+export function separateGroups(categoryGroups: CategoryGroupEntity[]) {
   return [
     categoryGroups.filter(g => !g.is_income),
     categoryGroups.find(g => g.is_income),
   ];
 }
 
-export function makeAmountGrey(value) {
+export function makeAmountGrey(value: number | string) {
   return value === 0 || value === '0' || value === ''
     ? { color: theme.altMenuItemText }
     : null;
 }
 
-export function makeAmountStyle(value) {
+export function makeAmountStyle(value: number) {
   const greyed = makeAmountGrey(value);
   if (greyed) {
     return greyed;
@@ -35,7 +38,7 @@ export function makeAmountStyle(value) {
   }
 }
 
-export function makeAmountFullStyle(value) {
+export function makeAmountFullStyle(value: number) {
   return {
     color:
       value < 0
@@ -46,7 +49,11 @@ export function makeAmountFullStyle(value) {
   };
 }
 
-export function findSortDown(arr, pos, targetId) {
+export function findSortDown(
+  arr: CategoryGroupEntity[],
+  pos: DropPosition,
+  targetId: string,
+) {
   if (pos === 'top') {
     return { targetId };
   } else {
@@ -66,7 +73,11 @@ export function findSortDown(arr, pos, targetId) {
   }
 }
 
-export function findSortUp(arr, pos, targetId) {
+export function findSortUp(
+  arr: CategoryGroupEntity[],
+  pos: DropPosition,
+  targetId: string,
+) {
   if (pos === 'bottom') {
     return { targetId };
   } else {

packages/desktop-client/src/components/modals/PlaidExternalMsg.js → packages/desktop-client/src/components/modals/PlaidExternalMsg.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 
 import AnimatedLoading from '../../icons/AnimatedLoading';
 import { theme } from '../../style';
+import { type CommonModalProps } from '../../types/modals';
 import { Error } from '../alerts';
 import Button from '../common/Button';
 import Modal, { ModalButtons } from '../common/Modal';
@@ -19,12 +20,19 @@ function renderError(error) {
   );
 }
 
+type PlainExternalMsgProps = {
+  modalProps: CommonModalProps;
+  onMoveExternal: () => Promise<{ error; data }>;
+  onSuccess: (data: unknown) => Promise<void>;
+  onClose?: () => void;
+};
+
 export default function PlaidExternalMsg({
   modalProps,
   onMoveExternal,
   onSuccess,
   onClose: originalOnClose,
-}) {
+}: PlainExternalMsgProps) {
   let [waiting, setWaiting] = useState(null);
   let [success, setSuccess] = useState(false);
   let [error, setError] = useState(null);

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

@@ -20,6 +20,8 @@ type DragState = {
   item?: unknown;
 };
 
+export type DropPosition = 'top' | 'bottom';
+
 export type OnDragChangeCallback = (drag: DragState) => Promise<void> | void;
 type UseDraggableArgs = {
   item: unknown;
@@ -64,7 +66,6 @@ export function useDraggable({
 
   return { dragRef };
 }
-type DropPosition = 'top' | 'bottom';
 
 export type OnDropCallback = (
   id: unknown,
@@ -129,7 +130,7 @@ export const DropHighlightPosContext: Context<ItemPosition> =
   createContext(null);
 
 type DropHighlightProps = {
-  pos: 'top' | 'bottom';
+  pos: DropPosition;
   offset?: {
     top?: number;
     bottom?: number;

packages/desktop-client/src/components/util/DisplayId.js → packages/desktop-client/src/components/util/DisplayId.tsx

@@ -6,11 +6,17 @@ import { CachedPayees } from 'loot-core/src/client/data-hooks/payees';
 import { theme } from '../../style';
 import Text from '../common/Text';
 
+type DisplayIdProps = {
+  type: 'accounts' | 'payees';
+  id: string;
+  noneColor?: string;
+};
+
 export default function DisplayId({
   type,
   id,
   noneColor = theme.pageTextSubdued,
-}) {
+}: DisplayIdProps) {
   let DataComponent;
 
   switch (type) {

packages/loot-core/src/server/rules/types/handlers.ts

@@ -23,7 +23,7 @@ export interface RulesHandlers {
     rule: Partial<RuleEntity>,
   ) => Promise<{ error: ValidationError } | object>;
 
-  'rule-delete': (rule: RuleEntity) => Promise<false | void>;
+  'rule-delete': (rule: Required<RuleEntity>) => Promise<false | void>;
 
   'rule-delete-all': (
     ids: string[],

packages/loot-core/src/shared/rules.ts

@@ -45,7 +45,7 @@ export const FIELD_TYPES = new Map(
   }),
 );
 
-export function mapField(field, opts) {
+export function mapField(field, opts?) {
   opts = opts || {};
 
   switch (field) {

packages/loot-core/src/types/models/rule.d.ts

@@ -1,7 +1,7 @@
 import { type ScheduleEntity } from './schedule';
 
 export interface RuleEntity {
-  id: string;
+  id?: string;
   stage: string;
   conditionsOp: 'any' | 'and';
   conditions: RuleConditionEntity[];
@@ -15,6 +15,7 @@ interface RuleConditionEntity {
   value: unknown;
   options?: unknown;
   conditionsOp?: unknown;
+  type?: string;
 }
 
 export type RuleActionEntity =
@@ -26,6 +27,7 @@ export interface SetRuleActionEntity {
   op: 'set';
   value: unknown;
   options?: unknown;
+  type?: string;
 }
 
 export interface LinkScheduleRuleActionEntity {

upcoming-release-notes/1823.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Convert Sort Utils, DisplayId, PlaidExternalMsg components to Typescript