[Maintenance] Update ConfirmCategoryDelete, GoCardlessExternalMsg, ManageRulesModal to tsx (#1972)

packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 
+import { type CategoryGroupEntity } from 'loot-core/src/types/models';
+
 import { theme } from '../../style';
+import { type CommonModalProps } from '../../types/modals';
 import CategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
 import Block from '../common/Block';
 import Button from '../common/Button';
@@ -8,18 +11,26 @@ import Modal from '../common/Modal';
 import Text from '../common/Text';
 import View from '../common/View';
 
+type ConfirmCategoryDeleteProps = {
+  modalProps: CommonModalProps;
+  category: CategoryGroupEntity;
+  group: CategoryGroupEntity;
+  categoryGroups: CategoryGroupEntity[];
+  onDelete: (categoryId: string) => void;
+};
+
 export default function ConfirmCategoryDelete({
   modalProps,
   category,
   group,
   categoryGroups,
   onDelete,
-}) {
-  const [transferCategory, setTransferCategory] = useState(null);
-  const [error, setError] = useState(null);
+}: ConfirmCategoryDeleteProps) {
+  const [transferCategory, setTransferCategory] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const renderError = error => {
-    let msg;
+  const renderError = (error: string) => {
+    let msg: string;
 
     switch (error) {
       case 'required-transfer':

packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx

@@ -3,11 +3,16 @@ import { useDispatch } from 'react-redux';
 
 import { pushModal } from 'loot-core/src/client/actions/modals';
 import { sendCatch } from 'loot-core/src/platform/client/fetch';
+import {
+  type GoCardlessInstitution,
+  type GoCardlessToken,
+} from 'loot-core/src/types/models';
 
 import useGoCardlessStatus from '../../hooks/useGoCardlessStatus';
 import AnimatedLoading from '../../icons/AnimatedLoading';
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
 import { theme } from '../../style';
+import { type CommonModalProps } from '../../types/modals';
 import { Error, Warning } from '../alerts';
 import Autocomplete from '../autocomplete/Autocomplete';
 import Button from '../common/Button';
@@ -22,8 +27,8 @@ import { Tooltip } from '../tooltips';
 
 import { COUNTRY_OPTIONS } from './countries';
 
-function useAvailableBanks(country) {
-  const [banks, setBanks] = useState([]);
+function useAvailableBanks(country: string) {
+  const [banks, setBanks] = useState<GoCardlessInstitution[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
@@ -61,7 +66,7 @@ function useAvailableBanks(country) {
   };
 }
 
-function renderError(error) {
+function renderError(error: 'unknown' | 'timeout') {
   return (
     <Error style={{ alignSelf: 'center' }}>
       {error === 'timeout'
@@ -71,23 +76,33 @@ function renderError(error) {
   );
 }
 
+type GoCardlessExternalMsgProps = {
+  modalProps: CommonModalProps;
+  onMoveExternal: (arg: {
+    institutionId: string;
+  }) => Promise<{ error?: 'unknown' | 'timeout'; data?: GoCardlessToken }>;
+  onSuccess: (data: GoCardlessToken) => Promise<void>;
+  onClose: () => void;
+};
+
 export default function GoCardlessExternalMsg({
   modalProps,
   onMoveExternal,
   onSuccess,
   onClose: originalOnClose,
-}) {
+}: GoCardlessExternalMsgProps) {
   const dispatch = useDispatch();
 
-  let [waiting, setWaiting] = useState(null);
-  let [success, setSuccess] = useState(false);
-  let [institutionId, setInstitutionId] = useState();
-  let [country, setCountry] = useState();
-  let [error, setError] = useState(null);
-  let [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] =
-    useState(null);
-  let [menuOpen, setMenuOpen] = useState(false);
-  let data = useRef(null);
+  let [waiting, setWaiting] = useState<string | null>(null);
+  let [success, setSuccess] = useState<boolean>(false);
+  let [institutionId, setInstitutionId] = useState<string>();
+  let [country, setCountry] = useState<string>();
+  let [error, setError] = useState<'unknown' | 'timeout' | null>(null);
+  let [isGoCardlessSetupComplete, setIsGoCardlessSetupComplete] = useState<
+    boolean | null
+  >(null);
+  let [menuOpen, setMenuOpen] = useState<boolean>(false);
+  let data = useRef<GoCardlessToken | null>(null);
 
   const {
     data: bankOptions,
@@ -140,7 +155,6 @@ export default function GoCardlessExternalMsg({
           <Autocomplete
             strict
             highlightFirst
-            disabled={isConfigurationLoading}
             suggestions={COUNTRY_OPTIONS}
             onSelect={setCountry}
             value={country}

packages/desktop-client/src/components/modals/ManageRulesModal.tsx

@@ -3,10 +3,19 @@ import { useLocation } from 'react-router-dom';
 
 import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
 
+import { type CommonModalProps } from '../../types/modals';
 import Modal from '../common/Modal';
 import ManageRules from '../ManageRules';
 
-export default function ManageRulesModal({ modalProps, payeeId }) {
+type ManageRulesModalProps = {
+  modalProps: CommonModalProps;
+  payeeId?: string;
+};
+
+export default function ManageRulesModal({
+  modalProps,
+  payeeId,
+}: ManageRulesModalProps) {
   let [loading, setLoading] = useState(true);
   let location = useLocation();
   if (isNonProductionEnvironment()) {
@@ -16,6 +25,7 @@ export default function ManageRulesModal({ modalProps, payeeId }) {
       );
     }
   }
+
   return (
     <Modal
       title="Rules"
@@ -23,7 +33,6 @@ export default function ManageRulesModal({ modalProps, payeeId }) {
       loading={loading}
       {...modalProps}
       style={{
-        ...modalProps.style,
         flex: 1,
         maxWidth: '90%',
         maxHeight: '90%',

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

@@ -2,3 +2,13 @@ export type GoCardlessToken = {
   id: string;
   accounts: unknown[];
 };
+
+export type GoCardlessInstitution = {
+  id: string;
+  name: string;
+  bic?: string;
+  transaction_total_days?: string;
+  countries: string[];
+  logo: string;
+  identification_codes: string[];
+};

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

@@ -11,6 +11,7 @@ import {
   CategoryEntity,
   CategoryGroupEntity,
   GoCardlessToken,
+  GoCardlessInstitution,
 } from './models';
 import { EmptyObject } from './util';
 
@@ -209,7 +210,10 @@ export interface ServerHandlers {
 
   'gocardless-status': () => Promise<{ configured: boolean }>;
 
-  'gocardless-get-banks': (country) => Promise<unknown>;
+  'gocardless-get-banks': (country: string) => Promise<{
+    data: GoCardlessInstitution[];
+    error?: { reason: string };
+  }>;
 
   'gocardless-poll-web-token-stop': () => Promise<'ok'>;
 

upcoming-release-notes/1972.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Update ConfirmCategoryDelete, GoCardlessExternalMsg, ManageRulesModal to tsx