Convert ImportListList component to TypeScript

frontend/src/Components/ImportListList.js

@@ -1,43 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { kinds, sizes } from 'Helpers/Props';
-import Label from './Label';
-import styles from './ImportListList.css';
-
-function ImportListList({ lists, importListList }) {
-  return (
-    <div className={styles.lists}>
-      {
-        lists.map((t) => {
-          const list = _.find(importListList, { id: t });
-
-          if (!list) {
-            return null;
-          }
-
-          return (
-            <Label
-              key={list.id}
-              kind={kinds.SUCCESS}
-              size={sizes.MEDIUM}
-            >
-              {list.name}
-            </Label>
-          );
-        })
-      }
-    </div>
-  );
-}
-
-ImportListList.propTypes = {
-  lists: PropTypes.arrayOf(PropTypes.number).isRequired,
-  importListList: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-ImportListList.defaultProps = {
-  lists: []
-};
-
-export default ImportListList;

frontend/src/Components/ImportListList.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Label from './Label';
+import styles from './ImportListList.css';
+
+interface ImportListListProps {
+  lists: number[];
+}
+
+function ImportListList({ lists }: ImportListListProps) {
+  const allImportLists = useSelector(
+    (state: AppState) => state.settings.importLists.items
+  );
+
+  return (
+    <div className={styles.lists}>
+      {lists.map((id) => {
+        const importList = allImportLists.find((list) => list.id === id);
+
+        if (!importList) {
+          return null;
+        }
+
+        return (
+          <Label key={importList.id} kind="success" size="medium">
+            {importList.name}
+          </Label>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ImportListList;

frontend/src/Components/ImportListListConnector.js

@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createImportListSelector from 'Store/Selectors/createImportListSelector';
-import ImportListList from './ImportListList';
-
-function createMapStateToProps() {
-  return createSelector(
-    createImportListSelector(),
-    (importListList) => {
-      return {
-        importListList
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(ImportListList);

frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import TextTruncate from 'react-text-truncate';
 import CheckInput from 'Components/Form/CheckInput';
 import Icon from 'Components/Icon';
-import ImportListListConnector from 'Components/ImportListListConnector';
+import ImportListList from 'Components/ImportListList';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
@@ -242,7 +242,7 @@ class DiscoverMovieOverview extends Component {
                   null
               }
 
-              <ImportListListConnector
+              <ImportListList
                 lists={lists}
               />
             </div>

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
-import ImportListListConnector from 'Components/ImportListListConnector';
+import ImportListList from 'Components/ImportListList';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
@@ -328,7 +328,7 @@ class DiscoverMovieRow extends Component {
                   key={name}
                   className={styles[name]}
                 >
-                  <ImportListListConnector
+                  <ImportListList
                     lists={lists}
                   />
                 </VirtualTableRowCell>