[Maintenance] BudgetTotals, GoCardlessLink, Import, WelcomeScreen com…

…ponents to Typescript. (#2004)

packages/desktop-client/src/components/budget/BudgetTotals.js → packages/desktop-client/src/components/budget/BudgetTotals.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { type ComponentProps, memo, useState } from 'react';
 
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
 import { theme, styles } from '../../style';
@@ -10,12 +10,19 @@ import { Tooltip } from '../tooltips';
 import RenderMonths from './RenderMonths';
 import { getScrollbarWidth } from './util';
 
+type BudgetTotalsProps = {
+  MonthComponent: ComponentProps<typeof RenderMonths>['component'];
+  toggleHiddenCategories: () => void;
+  expandAllCategories: () => void;
+  collapseAllCategories: () => void;
+};
+
 const BudgetTotals = memo(function BudgetTotals({
   MonthComponent,
   toggleHiddenCategories,
   expandAllCategories,
   collapseAllCategories,
-}) {
+}: BudgetTotalsProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   return (
     <View

packages/desktop-client/src/components/manager/Import.js → packages/desktop-client/src/components/manager/Import.tsx

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
 
+import { type BoundActions } from '../../hooks/useActions';
 import { styles, theme } from '../../style';
+import { type CommonModalProps } from '../../types/modals';
 import Block from '../common/Block';
 import Button from '../common/Button';
 import Modal from '../common/Modal';
 import Text from '../common/Text';
 import View from '../common/View';
 
-function getErrorMessage(error) {
+function getErrorMessage(error: 'not-ynab4' | boolean) {
   switch (error) {
     case 'not-ynab4':
       return 'This file is not valid. Please select a .ynab4 file';
@@ -16,10 +18,15 @@ function getErrorMessage(error) {
   }
 }
 
-function Import({ modalProps, actions }) {
+type ImportProps = {
+  modalProps: CommonModalProps;
+  actions: BoundActions;
+};
+
+function Import({ modalProps, actions }: ImportProps) {
   const [error] = useState(false);
 
-  function onSelectType(type) {
+  function onSelectType(type: 'ynab4' | 'ynab5' | 'actual') {
     switch (type) {
       case 'ynab4':
         actions.pushModal('import-ynab4');

packages/desktop-client/src/components/manager/WelcomeScreen.js → packages/desktop-client/src/components/manager/WelcomeScreen.tsx

@@ -63,7 +63,7 @@ export default function WelcomeScreen() {
         }}
       >
         <Button onClick={() => pushModal('import')}>Import my budget</Button>
-        <Button type="primary" onClick={createBudget}>
+        <Button type="primary" onClick={() => createBudget()}>
           Start fresh
         </Button>
       </View>

packages/loot-core/src/client/actions/budgets.ts

@@ -110,10 +110,7 @@ export function closeBudgetUI() {
   };
 }
 
-export function deleteBudget(
-  id: string | undefined,
-  cloudFileId: string | undefined,
-) {
+export function deleteBudget(id?: string, cloudFileId?: string) {
   return async (dispatch: Dispatch) => {
     await send('delete-budget', { id, cloudFileId });
     await dispatch(loadAllFiles());

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

@@ -1,8 +1,8 @@
+import { type File } from '../../types/file';
 import type { AccountEntity, GoCardlessToken } from '../../types/models';
 import type { RuleEntity } from '../../types/models/rule';
 import type { EmptyObject, StripNever } from '../../types/util';
 import type * as constants from '../constants';
-
 export type ModalType = keyof FinanceModals;
 
 export type OptionlessModal = {
@@ -70,6 +70,16 @@ type FinanceModals = {
     onSuccess: (data: GoCardlessToken) => Promise<void>;
   };
 
+  'delete-budget': { file: File };
+
+  import: null;
+
+  'import-ynab4': null;
+
+  'import-ynab5': null;
+
+  'import-actual': null;
+
   'create-encryption-key': { recreate?: boolean };
   'fix-encryption-key': {
     hasExistingKey?: boolean;

packages/loot-core/src/types/file.d.ts

@@ -11,18 +11,21 @@ export type FileState =
 export type LocalFile = Omit<Budget, 'cloudFileId' | 'groupId'> & {
   state: 'local';
 };
+
 export type SyncableLocalFile = Budget & {
   cloudFileId: string;
   groupId: string;
   state: 'broken' | 'unknown';
 };
+
 export type SyncedLocalFile = Budget & {
   cloudFileId: string;
   groupId: string;
   encryptKeyId?: string;
   hasKey: boolean;
   state: 'synced' | 'detached';
 };
+
 export type RemoteFile = {
   cloudFileId: string;
   groupId: string;

upcoming-release-notes/2004.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Convert BudgetTotals, GoCardlessLink, Import, WelcomeScreen components to Typescript.