Maintenance: Converting Utils and Sort to typescript (#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