♻️ (typescript) move some files to strict mode (actualbudget#2403)

packages/desktop-client/src/components/FatalError.tsx

@@ -166,7 +166,9 @@ export function FatalError({ buttonText, error }: FatalErrorProps) {
       >
         {showSimpleRender ? <RenderSimple error={error} /> : <RenderUIError />}
         <Paragraph>
-          <Button onClick={() => window.Actual.relaunch()}>{buttonText}</Button>
+          <Button onClick={() => window.Actual?.relaunch()}>
+            {buttonText}
+          </Button>
         </Paragraph>
         <Paragraph isLast={true} style={{ fontSize: 11 }}>
           <LinkButton onClick={() => setShowError(true)}>Show Error</LinkButton>

packages/desktop-client/src/components/GlobalKeys.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useEffect } from 'react';
 
 import * as Platform from 'loot-core/src/client/platform';
@@ -8,7 +7,7 @@ import { useNavigate } from '../hooks/useNavigate';
 export function GlobalKeys() {
   const navigate = useNavigate();
   useEffect(() => {
-    const handleKeys = e => {
+    const handleKeys = (e: KeyboardEvent) => {
       if (Platform.isBrowser) {
         return;
       }

packages/desktop-client/src/components/accounts/Account.jsx

@@ -470,7 +470,7 @@ class AccountInternal extends PureComponent {
     const categories = await this.props.getCategories();
 
     if (account) {
-      const res = await window.Actual.openFileDialog({
+      const res = await window.Actual?.openFileDialog({
         filters: [
           {
             name: 'Financial Files',
@@ -502,7 +502,7 @@ class AccountInternal extends PureComponent {
       accountName && accountName.replace(/[()]/g, '').replace(/\s+/g, '-');
     const filename = `${normalizedName || 'transactions'}.csv`;
 
-    window.Actual.saveFile(
+    window.Actual?.saveFile(
       exportedTransactions,
       filename,
       'Export Transactions',

packages/desktop-client/src/components/manager/ImportActual.tsx

@@ -38,7 +38,7 @@ export function ImportActual({ modalProps }: ImportProps) {
   const [importing, setImporting] = useState(false);
 
   async function onImport() {
-    const res = await window.Actual.openFileDialog({
+    const res = await window.Actual?.openFileDialog({
       properties: ['openFile'],
       filters: [{ name: 'actual', extensions: ['zip', 'blob'] }],
     });

packages/desktop-client/src/components/manager/ImportYNAB4.tsx

@@ -30,7 +30,7 @@ export function ImportYNAB4({ modalProps }: ImportProps) {
   const [importing, setImporting] = useState(false);
 
   async function onImport() {
-    const res = await window.Actual.openFileDialog({
+    const res = await window.Actual?.openFileDialog({
       properties: ['openFile'],
       filters: [{ name: 'ynab', extensions: ['zip'] }],
     });

packages/desktop-client/src/components/manager/ImportYNAB5.tsx

@@ -33,7 +33,7 @@ export function ImportYNAB5({ modalProps }: ImportProps) {
   const [importing, setImporting] = useState(false);
 
   async function onImport() {
-    const res = await window.Actual.openFileDialog({
+    const res = await window.Actual?.openFileDialog({
       properties: ['openFile'],
       filters: [{ name: 'ynab', extensions: ['json'] }],
     });

packages/desktop-client/src/components/manager/ManagementApp.jsx

@@ -42,7 +42,7 @@ function Version() {
         },
       }}
     >
-      {`App: v${window.Actual.ACTUAL_VERSION} | Server: ${version}`}
+      {`App: v${window.Actual?.ACTUAL_VERSION} | Server: ${version}`}
     </Text>
   );
 }

packages/desktop-client/src/components/modals/ImportTransactions.jsx

@@ -849,7 +849,7 @@ export function ImportTransactions({ modalProps, options }) {
   }
 
   async function onNewFile() {
-    const res = await window.Actual.openFileDialog({
+    const res = await window.Actual?.openFileDialog({
       filters: [
         {
           name: 'Financial Files',

packages/desktop-client/src/components/settings/Export.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { useState } from 'react';
 
 import { format } from 'date-fns';
@@ -32,7 +31,7 @@ export function ExportBudget() {
       return;
     }
 
-    window.Actual.saveFile(
+    window.Actual?.saveFile(
       response.data,
       `${format(new Date(), 'yyyy-MM-dd')}-${budgetId}.zip`,
       'Export budget',

packages/desktop-client/src/components/settings/FixSplits.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { useState } from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -54,7 +53,7 @@ function renderResults(results: Results) {
 
 export function FixSplits() {
   const [loading, setLoading] = useState(false);
-  const [results, setResults] = useState<Results>(null);
+  const [results, setResults] = useState<Results | null>(null);
 
   async function onFix() {
     setLoading(true);

packages/desktop-client/src/components/settings/Global.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { useState, useEffect, useRef } from 'react';
 
 import { useGlobalPref } from '../../hooks/useGlobalPref';
@@ -23,7 +22,7 @@ export function GlobalSettings() {
   }, []);
 
   async function onChooseDocumentDir() {
-    const res = await window.Actual.openFileDialog({
+    const res = await window.Actual?.openFileDialog({
       properties: ['openDirectory'],
     });
     if (res) {

packages/desktop-client/src/components/settings/Reset.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { useState } from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';

packages/desktop-client/src/components/settings/index.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { type ReactNode, useEffect } from 'react';
 
 import { media } from 'glamor';
@@ -58,7 +57,7 @@ function About() {
         })}`}
         data-vrt-mask
       >
-        <Text>Client version: v{window.Actual.ACTUAL_VERSION}</Text>
+        <Text>Client version: v{window.Actual?.ACTUAL_VERSION}</Text>
         <Text>Server version: {version}</Text>
         {isOutdated ? (
           <ExternalLink
@@ -140,7 +139,7 @@ export function Settings() {
     <Page
       title="Settings"
       style={{
-        backgroundColor: isNarrowWidth && theme.mobilePageBackground,
+        backgroundColor: isNarrowWidth ? theme.mobilePageBackground : undefined,
         marginInline: floatingSidebar && !isNarrowWidth ? 'auto' : 0,
       }}
     >

packages/desktop-client/src/gocardless.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import type { pushModal as pushModalAction } from 'loot-core/src/client/actions/modals';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { type GoCardlessToken } from 'loot-core/src/types/models';
@@ -24,7 +23,7 @@ function _authorize(
 
       if ('error' in resp) return resp;
       const { link, requisitionId } = resp;
-      window.Actual.openURLInBrowser(link);
+      window.Actual?.openURLInBrowser(link);
 
       return send('gocardless-poll-web-token', {
         upgradingAccountId,

packages/desktop-client/src/hooks/useFeatureFlag.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useSelector } from 'react-redux';
 
 import { type State } from 'loot-core/src/client/state-types';

packages/desktop-client/src/plaid.js

@@ -10,7 +10,7 @@ function _authorize(pushModal, plaidToken, { onSuccess, onClose }) {
       if (plaidToken) {
         url = url + '&plaidToken=' + plaidToken;
       }
-      window.Actual.openURLInBrowser(url);
+      window.Actual?.openURLInBrowser(url);
 
       const { error, data } = await send('poll-web-token', { token });
 

packages/desktop-client/src/tokens.ts

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 enum BreakpointNames {
   small = 'small',
   medium = 'medium',
@@ -27,7 +26,10 @@ type BreakpointsPx = {
 // }
 export const tokens: BreakpointsPx = Object.entries(
   breakpoints,
-).reduce<BreakpointsPx>((acc, [key, val]) => {
-  acc[`breakpoint_${key}`] = `${val}px`;
-  return acc;
-}, {} as BreakpointsPx);
+).reduce<BreakpointsPx>(
+  (acc, [key, val]) => ({
+    ...acc,
+    [`breakpoint_${key}`]: `${val}px`,
+  }),
+  {} as BreakpointsPx,
+);

packages/desktop-client/src/util/versions.ts

@@ -30,7 +30,7 @@ export async function getLatestVersion(): Promise<string | 'unknown'> {
     const json = await response.json();
     const tags = json
       .map(t => t.name)
-      .concat([`v${window.Actual.ACTUAL_VERSION}`]);
+      .concat([`v${window.Actual?.ACTUAL_VERSION}`]);
     tags.sort(cmpSemanticVersion);
 
     return tags[tags.length - 1];
@@ -41,7 +41,7 @@ export async function getLatestVersion(): Promise<string | 'unknown'> {
 }
 
 export async function getIsOutdated(latestVersion: string): Promise<boolean> {
-  const clientVersion = window.Actual.ACTUAL_VERSION;
+  const clientVersion = window.Actual?.ACTUAL_VERSION;
   if (latestVersion === 'unknown') {
     return Promise.resolve(false);
   }

upcoming-release-notes/2403.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Move some TypeScript files to strict mode