Convert SelectMovieRow to TypeScript

(cherry picked from commit 32ce09648cb9eb13c46b060f2665f3ce837261f2)

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx

@@ -65,7 +65,7 @@ interface RowItemData {
 }
 
 function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
-  const { items, columns, onMovieSelect } = data;
+  const { items, onMovieSelect } = data;
   const movie = index >= items.length ? null : items[index];
 
   const handlePress = useCallback(() => {
@@ -88,13 +88,11 @@ function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
       onPress={handlePress}
     >
       <SelectMovieRow
-        id={movie.id}
+        key={movie.id}
         title={movie.title}
         tmdbId={movie.tmdbId}
         imdbId={movie.imdbId}
         year={movie.year}
-        columns={columns}
-        onMovieSelect={onMovieSelect}
       />
     </VirtualTableRowButton>
   );

frontend/src/InteractiveImport/Movie/SelectMovieRow.js

@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Label from 'Components/Label';
-import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
-import styles from './SelectMovieRow.css';
-
-class SelectMovieRow extends Component {
-
-  //
-  // Listeners
-
-  onPress = () => {
-    this.props.onMovieSelect(this.props.id);
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <>
-        <VirtualTableRowCell className={styles.title}>
-          {this.props.title}
-        </VirtualTableRowCell>
-
-        <VirtualTableRowCell className={styles.year}>
-          {this.props.year}
-        </VirtualTableRowCell>
-
-        <VirtualTableRowCell className={styles.imdbId}>
-          {
-            this.props.imdbId ?
-              <Label>{this.props.imdbId}</Label> :
-              null
-          }
-        </VirtualTableRowCell>
-
-        <VirtualTableRowCell className={styles.tmdbId}>
-          <Label>{this.props.tmdbId}</Label>
-        </VirtualTableRowCell>
-      </>
-    );
-  }
-}
-
-SelectMovieRow.propTypes = {
-  id: PropTypes.number.isRequired,
-  title: PropTypes.string.isRequired,
-  tmdbId: PropTypes.number.isRequired,
-  imdbId: PropTypes.string,
-  year: PropTypes.number.isRequired,
-  onMovieSelect: PropTypes.func.isRequired
-};
-
-export default SelectMovieRow;

frontend/src/InteractiveImport/Movie/SelectMovieRow.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Label from 'Components/Label';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import styles from './SelectMovieRow.css';
+
+interface SelectMovieRowProps {
+  title: string;
+  tmdbId: number;
+  imdbId?: string;
+  year: number;
+}
+
+function SelectMovieRow({ title, year, tmdbId, imdbId }: SelectMovieRowProps) {
+  return (
+    <>
+      <VirtualTableRowCell className={styles.title}>
+        {title}
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.year}>{year}</VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.imdbId}>
+        {imdbId ? <Label>{imdbId}</Label> : null}
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.tmdbId}>
+        <Label>{tmdbId}</Label>
+      </VirtualTableRowCell>
+    </>
+  );
+}
+
+export default SelectMovieRow;