From 9228e5dea05e1b32d6cce67b0d5b03d2848c28b4 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 27 Apr 2025 19:20:02 +0300
Subject: [PATCH] Convert ImportListList component to TypeScript

---
 frontend/src/Components/ImportListList.js     | 43 -------------------
 frontend/src/Components/ImportListList.tsx    | 35 +++++++++++++++
 .../src/Components/ImportListListConnector.js | 17 --------
 .../Overview/DiscoverMovieOverview.js         |  4 +-
 .../DiscoverMovie/Table/DiscoverMovieRow.js   |  4 +-
 5 files changed, 39 insertions(+), 64 deletions(-)
 delete mode 100644 frontend/src/Components/ImportListList.js
 create mode 100644 frontend/src/Components/ImportListList.tsx
 delete mode 100644 frontend/src/Components/ImportListListConnector.js

diff --git a/frontend/src/Components/ImportListList.js b/frontend/src/Components/ImportListList.js
deleted file mode 100644
index c7fb393f51..0000000000
--- a/frontend/src/Components/ImportListList.js
+++ /dev/null
@@ -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;
diff --git a/frontend/src/Components/ImportListList.tsx b/frontend/src/Components/ImportListList.tsx
new file mode 100644
index 0000000000..fd2ee48419
--- /dev/null
+++ b/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;
diff --git a/frontend/src/Components/ImportListListConnector.js b/frontend/src/Components/ImportListListConnector.js
deleted file mode 100644
index 8f79830480..0000000000
--- a/frontend/src/Components/ImportListListConnector.js
+++ /dev/null
@@ -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);
diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js
index 52fb0abe13..442a1f26e9 100644
--- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.js
+++ b/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>
diff --git a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js b/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js
index f3d57856f8..d4a79d8b23 100644
--- a/frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js
+++ b/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>