Maintenance: Convert FixEncryptionKey, Loading, AnimatedLoading components to TypeScript (#1784)

packages/desktop-client/src/components/common/Modal.tsx

@@ -18,7 +18,7 @@ import Text from './Text';
 import View from './View';
 
 export type ModalProps = {
-  title: string;
+  title?: string;
   isCurrent?: boolean;
   isHidden?: boolean;
   children: ReactNode | (() => ReactNode);

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

 import React, { useState } from 'react';
 
+import { type FinanceModals } from 'loot-core/src/client/state-types/modals';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getTestKeyError } from 'loot-core/src/shared/errors';
 
+import { type BoundActions } from '../../hooks/useActions';
 import { theme } from '../../style';
+import { type CommonModalProps } from '../../types/modals';
 import Button, { ButtonWithLoading } from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
 import InitialFocus from '../common/InitialFocus';
@@ -13,11 +16,17 @@ import Paragraph from '../common/Paragraph';
 import Text from '../common/Text';
 import View from '../common/View';
 
+type FixEncryptionKeyProps = {
+  modalProps: CommonModalProps;
+  actions: BoundActions;
+  options: FinanceModals['fix-encryption-key'];
+};
+
 export default function FixEncryptionKey({
   modalProps,
   actions,
   options = {},
-}) {
+}: FixEncryptionKeyProps) {
   let { hasExistingKey, cloudFileId, onSuccess } = options;
 
   let [password, setPassword] = useState('');

packages/desktop-client/src/icons/AnimatedLoading.js → packages/desktop-client/src/icons/AnimatedLoading.tsx

-import React from 'react';
+import React, { type SVGProps } from 'react';
 
-import { css } from 'glamor';
+import { css, keyframes } from 'glamor';
 
 import Loading from './Loading';
 
-const rotation = css.keyframes({
+const rotation = keyframes({
   '0%': { transform: 'rotate(-90deg)' },
   '100%': { transform: 'rotate(666deg)' },
 });
 
-function AnimatedLoading(props) {
+function AnimatedLoading(props: SVGProps<SVGSVGElement>) {
   return (
     <span
       className={`${css({

packages/desktop-client/src/icons/Loading.js → packages/desktop-client/src/icons/Loading.tsx

-import React, { useState } from 'react';
+import React, { type SVGProps, useState } from 'react';
 
-const SvgLoading = props => {
+const SvgLoading = (props: SVGProps<SVGSVGElement>) => {
   let { color = 'currentColor' } = props;
   let [gradientId] = useState('gradient-' + Math.random());
 

packages/loot-core/src/client/state-types/queries.d.ts

@@ -8,7 +8,7 @@ export type QueriesState = {
   updatedAccounts: string[];
   accounts: AccountEntity[];
   categories: Awaited<ReturnType<Handlers['get-categories']>>;
-  payees: unknown[];
+  payees: Awaited<ReturnType<Handlers['payees-get']>>;
   earliestTransaction: unknown | null;
 };
 
@@ -51,7 +51,7 @@ type LoadCategoriesAction = {
 
 type LoadPayeesAction = {
   type: typeof constants.LOAD_PAYEES;
-  payees: unknown[];
+  payees: State['payees'];
 };
 
 export type QueriesActions =

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

@@ -5,7 +5,7 @@ import { Backup } from '../server/backups';
 import { RemoteFile } from '../server/cloud-storage';
 import { Message } from '../server/sync';
 
-import { AccountEntity } from './models';
+import { AccountEntity, PayeeEntity } from './models';
 import { EmptyObject } from './util';
 
 export interface ServerHandlers {
@@ -95,7 +95,7 @@ export interface ServerHandlers {
 
   'payee-create': (arg: { name }) => Promise<unknown>;
 
-  'payees-get': () => Promise<unknown[]>;
+  'payees-get': () => Promise<PayeeEntity[]>;
 
   'payees-get-rule-counts': () => Promise<unknown>;
 

upcoming-release-notes/1784.md

+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Convert FixEncryptionKey, Loading, AnimatedLoading components to TypeScript and update get-payee query type.