Convert Root Folders to Typescript

frontend/src/Settings/MediaManagement/MediaManagement.js

@@ -10,10 +10,11 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
-import RootFoldersConnector from 'RootFolder/RootFoldersConnector';
+import RootFolders from 'RootFolder/RootFolders';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
 import NamingConnector from './Naming/NamingConnector';
-import AddRootFolderConnector from './RootFolder/AddRootFolderConnector';
+import AddRootFolder from './RootFolder/AddRootFolder';
 
 const episodeTitleRequiredOptions = [
   { key: 'always', value: 'Always' },
@@ -452,9 +453,9 @@ class MediaManagement extends Component {
               </Form> : null
           }
 
-          <FieldSet legend="Root Folders">
-            <RootFoldersConnector />
-            <AddRootFolderConnector />
+          <FieldSet legend={translate('RootFolders')}>
+            <RootFolders />
+            <AddRootFolder />
           </FieldSet>
         </PageContentBody>
       </PageContent>

frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.js

@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import { icons, kinds, sizes } from 'Helpers/Props';
-import styles from './AddRootFolder.css';
-
-class AddRootFolder extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isAddNewRootFolderModalOpen: false
-    };
-  }
-
-  //
-  // Lifecycle
-
-  onAddNewRootFolderPress = () => {
-    this.setState({ isAddNewRootFolderModalOpen: true });
-  };
-
-  onNewRootFolderSelect = ({ value }) => {
-    this.props.onNewRootFolderSelect(value);
-  };
-
-  onAddRootFolderModalClose = () => {
-    this.setState({ isAddNewRootFolderModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <div className={styles.addRootFolderButtonContainer}>
-        <Button
-          kind={kinds.PRIMARY}
-          size={sizes.LARGE}
-          onPress={this.onAddNewRootFolderPress}
-        >
-          <Icon
-            className={styles.importButtonIcon}
-            name={icons.DRIVE}
-          />
-          Add Root Folder
-        </Button>
-
-        <FileBrowserModal
-          isOpen={this.state.isAddNewRootFolderModalOpen}
-          name="rootFolderPath"
-          value=""
-          onChange={this.onNewRootFolderSelect}
-          onModalClose={this.onAddRootFolderModalClose}
-        />
-      </div>
-    );
-  }
-}
-
-AddRootFolder.propTypes = {
-  onNewRootFolderSelect: PropTypes.func.isRequired
-};
-
-export default AddRootFolder;

frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import { addRootFolder } from 'Store/Actions/rootFolderActions';
+import translate from 'Utilities/String/translate';
+import styles from './AddRootFolder.css';
+
+function AddRootFolder() {
+  const dispatch = useDispatch();
+
+  const [isAddNewRootFolderModalOpen, setIsAddNewRootFolderModalOpen] =
+    useState(false);
+
+  const onAddNewRootFolderPress = useCallback(() => {
+    setIsAddNewRootFolderModalOpen(true);
+  }, [setIsAddNewRootFolderModalOpen]);
+
+  const onNewRootFolderSelect = useCallback(
+    ({ value }: { value: string }) => {
+      dispatch(addRootFolder({ path: value }));
+    },
+    [dispatch]
+  );
+
+  const onAddRootFolderModalClose = useCallback(() => {
+    setIsAddNewRootFolderModalOpen(false);
+  }, [setIsAddNewRootFolderModalOpen]);
+
+  return (
+    <div className={styles.addRootFolderButtonContainer}>
+      <Button
+        kind={kinds.PRIMARY}
+        size={sizes.LARGE}
+        onPress={onAddNewRootFolderPress}
+      >
+        <Icon className={styles.importButtonIcon} name={icons.DRIVE} />
+        {translate('AddRootFolder')}
+      </Button>
+
+      <FileBrowserModal
+        isOpen={isAddNewRootFolderModalOpen}
+        name="rootFolderPath"
+        value=""
+        onChange={onNewRootFolderSelect}
+        onModalClose={onAddRootFolderModalClose}
+      />
+    </div>
+  );
+}
+
+export default AddRootFolder;

frontend/src/Settings/MediaManagement/RootFolder/AddRootFolderConnector.js

@@ -1,13 +0,0 @@
-import { connect } from 'react-redux';
-import { addRootFolder } from 'Store/Actions/rootFolderActions';
-import AddRootFolder from './AddRootFolder';
-
-function createMapDispatchToProps(dispatch) {
-  return {
-    onNewRootFolderSelect(path) {
-      dispatch(addRootFolder({ path }));
-    }
-  };
-}
-
-export default connect(null, createMapDispatchToProps)(AddRootFolder);