Release notes

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

@@ -1,4 +1,4 @@
-import React, { Component, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
 
@@ -9,29 +9,33 @@ import { Modal } from '../common/Modal';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { Row, Cell } from '../table';
+import { Backup } from 'loot-core/server/backups';
+import { CommonModalProps } from '../../types/modals';
+import { BoundActions } from '../../hooks/useActions';
 
-class BackupTable extends Component {
+type LoadBackupProps = {
-  state = { hoveredBackup: null };
+  backups: Backup[];
+  onSelect: (id) => void;
+};
 
-  onHover = id => {
+function BackupTable({ backups, onSelect }: LoadBackupProps) {
-    this.setState({ hoveredBackup: id });
+  const [hoveredBackup, setHoveredBackup] = useState(null);
+
+  const onHover = id => {
+    setHoveredBackup(id);
   };
 
-  render() {
-    const { backups, onSelect } = this.props;
-    const { hoveredBackup } = this.state;
-
   return (
     <View
       style={{ flex: 1, maxHeight: 200, overflow: 'auto' }}
-        onMouseLeave={() => this.onHover(null)}
+      onMouseLeave={() => onHover(null)}
     >
       {backups.map((backup, idx) => (
         <Row
           key={backup.id}
           collapsed={idx !== 0}
           focused={hoveredBackup === backup.id}
-            onMouseEnter={() => this.onHover(backup.id)}
+          onMouseEnter={() => onHover(backup.id)}
           onClick={() => onSelect(backup.id)}
           style={{ cursor: 'pointer' }}
         >
@@ -44,17 +48,24 @@ class BackupTable extends Component {
       ))}
     </View>
   );
-  }
 }
 
+type LoadBackupProps = {
+  budgetId: string;
+  watchUpdates: boolean;
+  backupDisabled: boolean;
+  actions: BoundActions;
+  modalProps: CommonModalProps;
+};
+
 export function LoadBackup({
   budgetId,
   watchUpdates,
   backupDisabled,
   actions,
   modalProps,
-}) {
+}: LoadBackupProps) {
-  const [backups, setBackups] = useState([]);
+  const [backups, setBackups] = useState<Backup>([]);
 
   useEffect(() => {
     send('backups-get', { id: budgetId }).then(setBackups);

upcoming-release-notes/2299.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Migrate LoadBackup to ts