fix: split up component rendering

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

Diff for: arduino-ide-extension/src/browser/widgets/component-list/component-list-item.tsx

@@ -1,7 +1,7 @@
 import * as React from '@theia/core/shared/react';
+import type { ArduinoComponent } from '../../../common/protocol/arduino-component';
 import { Installable } from '../../../common/protocol/installable';
-import { ArduinoComponent } from '../../../common/protocol/arduino-component';
-import { ListItemRenderer } from './list-item-renderer';
+import type { ListItemRenderer } from './list-item-renderer';
 
 export class ComponentListItem<
   T extends ArduinoComponent
@@ -28,18 +28,22 @@ export class ComponentListItem<
   }
 
   private async install(item: T): Promise<void> {
-    this.setState({ state: 'uninstalling' });
-    try {
-      await this.props.install(item, this.state.selectedVersion);
-    } finally {
-      this.setState({ state: undefined });
-    }
+    await this.withState('installing', () =>
+      this.props.install(item, this.state.selectedVersion)
+    );
   }
 
   private async uninstall(item: T): Promise<void> {
-    this.setState({ state: 'uninstalling' });
+    await this.withState('uninstalling', () => this.props.uninstall(item));
+  }
+
+  private async withState(
+    state: 'installing' | 'uninstalling',
+    task: () => Promise<unknown>
+  ): Promise<void> {
+    this.setState({ state });
     try {
-      await this.props.uninstall(item);
+      await task();
     } finally {
       this.setState({ state: undefined });
     }

Diff for: arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx

@@ -1,5 +1,5 @@
 import * as React from '@theia/core/shared/react';
-import { ItemContent, Virtuoso } from '@theia/core/shared/react-virtuoso';
+import { Virtuoso } from '@theia/core/shared/react-virtuoso';
 import { ArduinoComponent } from '../../../common/protocol/arduino-component';
 import { Installable } from '../../../common/protocol/installable';
 import { ComponentListItem } from './component-list-item';
@@ -9,25 +9,22 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
   ComponentList.Props<T>
 > {
   override render(): React.ReactNode {
-    return <Virtuoso data={this.props.items} itemContent={this.itemContent} />;
-  }
-
-  private readonly itemContent: ItemContent<T, unknown> = (
-    index: number,
-    item: T
-  ) => {
     return (
-      <ComponentListItem<T>
-        key={this.props.itemLabel(item)}
-        item={item}
-        itemRenderer={this.props.itemRenderer}
-        install={this.props.install}
-        uninstall={this.props.uninstall}
+      <Virtuoso
+        data={this.props.items}
+        itemContent={(_: number, item: T) => (
+          <ComponentListItem<T>
+            key={this.props.itemLabel(item)}
+            item={item}
+            itemRenderer={this.props.itemRenderer}
+            install={this.props.install}
+            uninstall={this.props.uninstall}
+          />
+        )}
       />
     );
-  };
+  }
 }
-
 export namespace ComponentList {
   export interface Props<T extends ArduinoComponent> {
     readonly items: T[];