Update React Lint rules for TSX

(cherry picked from commit 1299a97579bec52ee3d16ab8d05c9e22edd80330)

frontend/src/Indexer/Add/AddIndexerModal.tsx

@@ -29,8 +29,8 @@ function AddIndexerModal({
     <Modal
       isOpen={isOpen}
       size={sizes.EXTRA_LARGE}
-      onModalClose={onModalClosePress}
       className={styles.modal}
+      onModalClose={onModalClosePress}
     >
       <AddIndexerModalContent
         {...otherProps}

frontend/src/Indexer/Add/AddIndexerModalContent.tsx

@@ -168,6 +168,34 @@ function AddIndexerModalContent(props: AddIndexerModalContentProps) {
     [setFilter]
   );
 
+  const onFilterProtocolsChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterProtocols(value);
+    },
+    [setFilterProtocols]
+  );
+
+  const onFilterLanguagesChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterLanguages(value);
+    },
+    [setFilterLanguages]
+  );
+
+  const onFilterPrivacyLevelsChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterPrivacyLevels(value);
+    },
+    [setFilterPrivacyLevels]
+  );
+
+  const onFilterCategoriesChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setFilterCategories(value);
+    },
+    [setFilterCategories]
+  );
+
   const onIndexerSelect = useCallback(
     ({
       implementation,
@@ -304,9 +332,7 @@ function AddIndexerModalContent(props: AddIndexerModalContentProps) {
               name="indexerProtocols"
               value={filterProtocols}
               values={PROTOCOLS}
-              onChange={({ value }: { value: string[] }) =>
-                setFilterProtocols(value)
-              }
+              onChange={onFilterProtocolsChange}
             />
           </div>
 
@@ -319,9 +345,7 @@ function AddIndexerModalContent(props: AddIndexerModalContentProps) {
               name="indexerLanguages"
               value={filterLanguages}
               values={languages}
-              onChange={({ value }: { value: string[] }) =>
-                setFilterLanguages(value)
-              }
+              onChange={onFilterLanguagesChange}
             />
           </div>
 
@@ -331,9 +355,7 @@ function AddIndexerModalContent(props: AddIndexerModalContentProps) {
               name="indexerPrivacyLevels"
               value={filterPrivacyLevels}
               values={PRIVACY_LEVELS}
-              onChange={({ value }: { value: string[] }) =>
-                setFilterPrivacyLevels(value)
-              }
+              onChange={onFilterPrivacyLevelsChange}
             />
           </div>
 
@@ -345,9 +367,7 @@ function AddIndexerModalContent(props: AddIndexerModalContentProps) {
             <NewznabCategorySelectInputConnector
               name="indexerCategories"
               value={filterCategories}
-              onChange={({ value }: { value: number[] }) =>
-                setFilterCategories(value)
-              }
+              onChange={onFilterCategoriesChange}
             />
           </div>
         </div>

frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx

@@ -2,6 +2,7 @@ import { uniqBy } from 'lodash';
 import React from 'react';
 import Label from 'Components/Label';
 import { IndexerCapabilities } from 'Indexer/Indexer';
+import translate from 'Utilities/String/translate';
 
 interface CapabilitiesLabelProps {
   capabilities: IndexerCapabilities;
@@ -38,7 +39,7 @@ function CapabilitiesLabel(props: CapabilitiesLabelProps) {
         );
       })}
 
-      {filteredList.length === 0 ? <Label>{'None'}</Label> : null}
+      {filteredList.length === 0 ? <Label>{translate('None')}</Label> : null}
     </span>
   );
 }

frontend/src/Indexer/Index/Table/IndexerIndexTable.tsx

@@ -46,11 +46,7 @@ const columnsSelector = createSelector(
   (columns) => columns
 );
 
-const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
-  index,
-  style,
-  data,
-}) => {
+function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
   const { items, sortKey, columns, isSelectMode, onCloneIndexerPress } = data;
 
   if (index >= items.length) {
@@ -77,7 +73,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
       />
     </div>
   );
-};
+}
 
 function getWindowScrollTopPosition() {
   return document.documentElement.scrollTop || document.body.scrollTop || 0;

frontend/src/Indexer/Index/Table/IndexerIndexTableOptions.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -32,19 +32,17 @@ function IndexerIndexTableOptions(props: IndexerIndexTableOptionsProps) {
   );
 
   return (
-    <Fragment>
-      <FormGroup>
-        <FormLabel>{translate('ShowSearch')}</FormLabel>
+    <FormGroup>
+      <FormLabel>{translate('ShowSearch')}</FormLabel>
 
-        <FormInputGroup
-          type={inputTypes.CHECK}
-          name="showSearchAction"
-          value={showSearchAction}
-          helpText={translate('ShowSearchHelpText')}
-          onChange={onTableOptionChangeWrapper}
-        />
-      </FormGroup>
-    </Fragment>
+      <FormInputGroup
+        type={inputTypes.CHECK}
+        name="showSearchAction"
+        value={showSearchAction}
+        helpText={translate('ShowSearchHelpText')}
+        onChange={onTableOptionChangeWrapper}
+      />
+    </FormGroup>
   );
 }
 

frontend/src/Indexer/Index/Table/IndexerStatusCell.tsx

@@ -38,14 +38,12 @@ function IndexerStatusCell(props: IndexerStatusCellProps) {
 
   return (
     <Component className={className} {...otherProps}>
-      {
-        <Icon
-          className={styles.statusIcon}
-          kind={enabled ? enableKind : kinds.DEFAULT}
-          name={enabled ? enableIcon : icons.BLOCKLIST}
-          title={enabled ? enableTitle : translate('Disabled')}
-        />
-      }
+      <Icon
+        className={styles.statusIcon}
+        kind={enabled ? enableKind : kinds.DEFAULT}
+        name={enabled ? enableIcon : icons.BLOCKLIST}
+        title={enabled ? enableTitle : translate('Disabled')}
+      />
       {status ? (
         <Popover
           className={styles.indexerStatusTooltip}

frontend/src/Indexer/Info/History/IndexerHistoryRow.tsx

@@ -83,8 +83,8 @@ function IndexerHistoryRow(props: IndexerHistoryRowProps) {
       <TableRowCell className={styles.details}>
         <IconButton
           name={icons.INFO}
-          onPress={onDetailsModalPress}
           title={translate('HistoryDetails')}
+          onPress={onDetailsModalPress}
         />
       </TableRowCell>
 

frontend/src/Indexer/NoIndexer.tsx

@@ -28,7 +28,7 @@ function NoIndexer(props: NoIndexerProps) {
       </div>
 
       <div className={styles.buttonContainer}>
-        <Button onPress={onAddIndexerPress} kind={kinds.PRIMARY}>
+        <Button kind={kinds.PRIMARY} onPress={onAddIndexerPress}>
           {translate('AddNewIndexer')}
         </Button>
       </div>

frontend/src/Indexer/Stats/IndexerStats.tsx

@@ -230,9 +230,9 @@ function IndexerStats() {
             selectedFilterKey={selectedFilterKey}
             filters={filters}
             customFilters={customFilters}
-            onFilterSelect={onFilterSelect}
             filterModalConnectorComponent={IndexerStatsFilterModal}
             isDisabled={false}
+            onFilterSelect={onFilterSelect}
           />
         </PageToolbarSection>
       </PageToolbar>