From 19f0efb65482a72fb62c8531739764ff471eef39 Mon Sep 17 00:00:00 2001 From: Michael Clark <5285928+MikesGlitch@users.noreply.github.com> Date: Sun, 22 Oct 2023 16:18:59 +0100 Subject: [PATCH] Maintenance: Converting Utils and Sort to typescript (#1823) --- .../{ManageRules.js => ManageRules.tsx} | 32 ++++++++++++++++--- .../components/budget/{util.js => util.ts} | 25 +++++++++++---- ...aidExternalMsg.js => PlaidExternalMsg.tsx} | 10 +++++- .../desktop-client/src/components/sort.tsx | 5 +-- .../util/{DisplayId.js => DisplayId.tsx} | 8 ++++- .../src/server/rules/types/handlers.ts | 2 +- packages/loot-core/src/shared/rules.ts | 2 +- packages/loot-core/src/types/models/rule.d.ts | 4 ++- upcoming-release-notes/1823.md | 6 ++++ 9 files changed, 76 insertions(+), 18 deletions(-) rename packages/desktop-client/src/components/{ManageRules.js => ManageRules.tsx} (93%) rename packages/desktop-client/src/components/budget/{util.js => util.ts} (72%) rename packages/desktop-client/src/components/modals/{PlaidExternalMsg.js => PlaidExternalMsg.tsx} (93%) rename packages/desktop-client/src/components/util/{DisplayId.js => DisplayId.tsx} (89%) create mode 100644 upcoming-release-notes/1823.md diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.tsx similarity index 93% rename from packages/desktop-client/src/components/ManageRules.js rename to packages/desktop-client/src/components/ManageRules.tsx index ee5c4e9bd4..5a3ddad2b7 100644 --- a/packages/desktop-client/src/components/ManageRules.js +++ b/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>; +}; + +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>; +}; + export default function ManageRules({ isModal, payeeId, setLoading = () => {}, -}) { +}: ManageRulesProps) { return ( !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 { diff --git a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js b/packages/desktop-client/src/components/modals/PlaidExternalMsg.tsx similarity index 93% rename from packages/desktop-client/src/components/modals/PlaidExternalMsg.js rename to packages/desktop-client/src/components/modals/PlaidExternalMsg.tsx index a07ebc1abd..1130d66d47 100644 --- a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js +++ b/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; + 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); diff --git a/packages/desktop-client/src/components/sort.tsx b/packages/desktop-client/src/components/sort.tsx index 375b62ced9..1d9fa4286f 100644 --- a/packages/desktop-client/src/components/sort.tsx +++ b/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; 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 = createContext(null); type DropHighlightProps = { - pos: 'top' | 'bottom'; + pos: DropPosition; offset?: { top?: number; bottom?: number; diff --git a/packages/desktop-client/src/components/util/DisplayId.js b/packages/desktop-client/src/components/util/DisplayId.tsx similarity index 89% rename from packages/desktop-client/src/components/util/DisplayId.js rename to packages/desktop-client/src/components/util/DisplayId.tsx index 3947f9f1e5..0a66bf34f2 100644 --- a/packages/desktop-client/src/components/util/DisplayId.js +++ b/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) { diff --git a/packages/loot-core/src/server/rules/types/handlers.ts b/packages/loot-core/src/server/rules/types/handlers.ts index 27e09e3e82..721172c484 100644 --- a/packages/loot-core/src/server/rules/types/handlers.ts +++ b/packages/loot-core/src/server/rules/types/handlers.ts @@ -23,7 +23,7 @@ export interface RulesHandlers { rule: Partial, ) => Promise<{ error: ValidationError } | object>; - 'rule-delete': (rule: RuleEntity) => Promise; + 'rule-delete': (rule: Required) => Promise; 'rule-delete-all': ( ids: string[], diff --git a/packages/loot-core/src/shared/rules.ts b/packages/loot-core/src/shared/rules.ts index d0fa730a44..3857aff31e 100644 --- a/packages/loot-core/src/shared/rules.ts +++ b/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) { diff --git a/packages/loot-core/src/types/models/rule.d.ts b/packages/loot-core/src/types/models/rule.d.ts index a374ed29bc..fee3e04782 100644 --- a/packages/loot-core/src/types/models/rule.d.ts +++ b/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 { diff --git a/upcoming-release-notes/1823.md b/upcoming-release-notes/1823.md new file mode 100644 index 0000000000..4df7bd57b6 --- /dev/null +++ b/upcoming-release-notes/1823.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MikesGlitch] +--- + +Convert Sort Utils, DisplayId, PlaidExternalMsg components to Typescript