Refactor Series index to use react-window

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js

@@ -17,6 +17,8 @@ class ImportSeries extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this.scrollerRef = React.createRef();
+
     this.state = {
       allSelected: false,
       allUnselected: false,
@@ -25,13 +27,6 @@ class ImportSeries extends Component {
     };
   }
 
-  //
-  // Control
-
-  setScrollerRef = (ref) => {
-    this.setState({ scroller: ref });
-  };
-
   //
   // Listeners
 
@@ -70,10 +65,6 @@ class ImportSeries extends Component {
     this.props.onImportPress(this.getSelectedIds());
   };
 
-  onScroll = ({ scrollTop }) => {
-    this.setState({ scrollTop });
-  };
-
   //
   // Render
 
@@ -90,16 +81,12 @@ class ImportSeries extends Component {
     const {
       allSelected,
       allUnselected,
-      selectedState,
-      scroller
+      selectedState
     } = this.state;
 
     return (
       <PageContent title="Import Series">
-        <PageContentBody
-          registerScroller={this.setScrollerRef}
-          onScroll={this.onScroll}
-        >
+        <PageContentBody ref={this.scrollerRef} >
           {
             rootFoldersFetching ? <LoadingIndicator /> : null
           }
@@ -126,14 +113,14 @@ class ImportSeries extends Component {
             !rootFoldersFetching &&
             rootFoldersPopulated &&
             !!unmappedFolders.length &&
-            scroller ?
+            this.scrollerRef.current ?
               <ImportSeriesTableConnector
                 rootFolderId={rootFolderId}
                 unmappedFolders={unmappedFolders}
                 allSelected={allSelected}
                 allUnselected={allUnselected}
                 selectedState={selectedState}
-                scroller={scroller}
+                scroller={this.scrollerRef.current}
                 onSelectAllChange={this.onSelectAllChange}
                 onSelectedChange={this.onSelectedChange}
                 onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}

frontend/src/App/AppRoutes.js

@@ -12,7 +12,7 @@ import Switch from 'Components/Router/Switch';
 import SeasonPassConnector from 'SeasonPass/SeasonPassConnector';
 import SeriesDetailsPageConnector from 'Series/Details/SeriesDetailsPageConnector';
 import SeriesEditorConnector from 'Series/Editor/SeriesEditorConnector';
-import SeriesIndexConnector from 'Series/Index/SeriesIndexConnector';
+import SeriesIndex from 'Series/Index/SeriesIndex';
 import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
@@ -51,7 +51,7 @@ function AppRoutes(props) {
       <Route
         exact={true}
         path="/"
-        component={SeriesIndexConnector}
+        component={SeriesIndex}
       />
 
       {

frontend/src/App/ModelBase.ts

@@ -0,0 +1,5 @@
+interface ModelBase {
+  id: number;
+}
+
+export default ModelBase;

frontend/src/Components/Form/FormInputGroup.js

@@ -256,6 +256,9 @@ FormInputGroup.propTypes = {
   className: PropTypes.string.isRequired,
   containerClassName: PropTypes.string.isRequired,
   inputClassName: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any,
+  values: PropTypes.arrayOf(PropTypes.any),
   type: PropTypes.string.isRequired,
   unit: PropTypes.string,
   buttons: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
@@ -265,7 +268,8 @@ FormInputGroup.propTypes = {
   helpLink: PropTypes.string,
   pending: PropTypes.bool,
   errors: PropTypes.arrayOf(PropTypes.object),
-  warnings: PropTypes.arrayOf(PropTypes.object)
+  warnings: PropTypes.arrayOf(PropTypes.object),
+  onChange: PropTypes.func.isRequired
 };
 
 FormInputGroup.defaultProps = {

frontend/src/Components/Form/FormLabel.js

@@ -4,16 +4,18 @@ import React from 'react';
 import { sizes } from 'Helpers/Props';
 import styles from './FormLabel.css';
 
-function FormLabel({
-  children,
-  className,
-  errorClassName,
-  size,
-  name,
-  hasError,
-  isAdvanced,
-  ...otherProps
-}) {
+function FormLabel(props) {
+  const {
+    children,
+    className,
+    errorClassName,
+    size,
+    name,
+    hasError,
+    isAdvanced,
+    ...otherProps
+  } = props;
+
   return (
     <label
       {...otherProps}
@@ -31,13 +33,13 @@ function FormLabel({
 }
 
 FormLabel.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
   className: PropTypes.string,
   errorClassName: PropTypes.string,
   size: PropTypes.oneOf(sizes.all),
   name: PropTypes.string,
   hasError: PropTypes.bool,
-  isAdvanced: PropTypes.bool.isRequired
+  isAdvanced: PropTypes.bool
 };
 
 FormLabel.defaultProps = {

frontend/src/Components/Link/IconButton.js

@@ -38,11 +38,13 @@ function IconButton(props) {
 }
 
 IconButton.propTypes = {
+  ...Link.propTypes,
   className: PropTypes.string.isRequired,
   iconClassName: PropTypes.string,
   kind: PropTypes.string,
   name: PropTypes.object.isRequired,
   size: PropTypes.number,
+  title: PropTypes.string,
   isSpinning: PropTypes.bool,
   isDisabled: PropTypes.bool
 };

frontend/src/Components/Link/SpinnerIconButton.js

@@ -23,6 +23,8 @@ function SpinnerIconButton(props) {
 }
 
 SpinnerIconButton.propTypes = {
+  ...IconButton.propTypes,
+  className: PropTypes.string,
   name: PropTypes.object.isRequired,
   spinningName: PropTypes.object.isRequired,
   isDisabled: PropTypes.bool.isRequired,

frontend/src/Components/Menu/SortMenu.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
-import { icons } from 'Helpers/Props';
+import { align, icons } from 'Helpers/Props';
 
 function SortMenu(props) {
   const {
@@ -30,7 +30,8 @@ function SortMenu(props) {
 SortMenu.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
-  isDisabled: PropTypes.bool.isRequired
+  isDisabled: PropTypes.bool.isRequired,
+  alignMenu: PropTypes.oneOf([align.LEFT, align.RIGHT])
 };
 
 SortMenu.defaultProps = {

frontend/src/Components/Menu/ViewMenu.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
-import { icons } from 'Helpers/Props';
+import { align, icons } from 'Helpers/Props';
 
 function ViewMenu(props) {
   const {
@@ -27,7 +27,8 @@ function ViewMenu(props) {
 
 ViewMenu.propTypes = {
   children: PropTypes.node.isRequired,
-  isDisabled: PropTypes.bool.isRequired
+  isDisabled: PropTypes.bool.isRequired,
+  alignMenu: PropTypes.oneOf([align.LEFT, align.RIGHT])
 };
 
 ViewMenu.defaultProps = {

frontend/src/Components/Page/PageContentBody.js

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Scroller from 'Components/Scroller/Scroller';
-import { scrollDirections } from 'Helpers/Props';
-import { isLocked } from 'Utilities/scrollLock';
-import styles from './PageContentBody.css';
-
-class PageContentBody extends Component {
-
-  //
-  // Listeners
-
-  onScroll = (props) => {
-    const { onScroll } = this.props;
-
-    if (this.props.onScroll && !isLocked()) {
-      onScroll(props);
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      innerClassName,
-      children,
-      dispatch,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Scroller
-        className={className}
-        scrollDirection={scrollDirections.VERTICAL}
-        {...otherProps}
-        onScroll={this.onScroll}
-      >
-        <div className={innerClassName}>
-          {children}
-        </div>
-      </Scroller>
-    );
-  }
-}
-
-PageContentBody.propTypes = {
-  className: PropTypes.string,
-  innerClassName: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  onScroll: PropTypes.func,
-  dispatch: PropTypes.func
-};
-
-PageContentBody.defaultProps = {
-  className: styles.contentBody,
-  innerClassName: styles.innerContentBody
-};
-
-export default PageContentBody;

frontend/src/Components/Page/PageContentBody.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef, ReactNode, useCallback } from 'react';
+import Scroller from 'Components/Scroller/Scroller';
+import ScrollDirection from 'Helpers/Props/ScrollDirection';
+import { isLocked } from 'Utilities/scrollLock';
+import styles from './PageContentBody.css';
+
+interface PageContentBodyProps {
+  className: string;
+  innerClassName: string;
+  children: ReactNode;
+  initialScrollTop?: number;
+  onScroll?: (payload) => void;
+}
+
+const PageContentBody = forwardRef(
+  (
+    props: PageContentBodyProps,
+    ref: React.MutableRefObject<HTMLDivElement>
+  ) => {
+    const {
+      className = styles.contentBody,
+      innerClassName = styles.innerContentBody,
+      children,
+      onScroll,
+      ...otherProps
+    } = props;
+
+    const onScrollWrapper = useCallback(
+      (payload) => {
+        if (onScroll && !isLocked()) {
+          onScroll(payload);
+        }
+      },
+      [onScroll]
+    );
+
+    return (
+      <Scroller
+        ref={ref}
+        {...otherProps}
+        className={className}
+        scrollDirection={ScrollDirection.Vertical}
+        onScroll={onScrollWrapper}
+      >
+        <div className={innerClassName}>{children}</div>
+      </Scroller>
+    );
+  }
+);
+
+export default PageContentBody;

frontend/src/Components/Page/Toolbar/PageToolbarButton.js

@@ -45,7 +45,8 @@ PageToolbarButton.propTypes = {
   iconName: PropTypes.object.isRequired,
   spinningName: PropTypes.object,
   isSpinning: PropTypes.bool,
-  isDisabled: PropTypes.bool
+  isDisabled: PropTypes.bool,
+  onPress: PropTypes.func
 };
 
 PageToolbarButton.defaultProps = {

frontend/src/Components/Scroller/Scroller.js

@@ -1,95 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { scrollDirections } from 'Helpers/Props';
-import styles from './Scroller.css';
-
-class Scroller extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._scroller = null;
-  }
-
-  componentDidMount() {
-    const {
-      scrollDirection,
-      autoFocus,
-      scrollTop
-    } = this.props;
-
-    if (this.props.scrollTop != null) {
-      this._scroller.scrollTop = scrollTop;
-    }
-
-    if (autoFocus && scrollDirection !== scrollDirections.NONE) {
-      this._scroller.focus({ preventScroll: true });
-    }
-  }
-
-  //
-  // Control
-
-  _setScrollerRef = (ref) => {
-    this._scroller = ref;
-
-    this.props.registerScroller(ref);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      scrollDirection,
-      autoScroll,
-      children,
-      scrollTop,
-      onScroll,
-      registerScroller,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <div
-        ref={this._setScrollerRef}
-        className={classNames(
-          className,
-          styles.scroller,
-          styles[scrollDirection],
-          autoScroll && styles.autoScroll
-        )}
-        tabIndex={-1}
-        {...otherProps}
-      >
-        {children}
-      </div>
-    );
-  }
-
-}
-
-Scroller.propTypes = {
-  className: PropTypes.string,
-  scrollDirection: PropTypes.oneOf(scrollDirections.all).isRequired,
-  autoFocus: PropTypes.bool.isRequired,
-  autoScroll: PropTypes.bool.isRequired,
-  scrollTop: PropTypes.number,
-  children: PropTypes.node,
-  onScroll: PropTypes.func,
-  registerScroller: PropTypes.func
-};
-
-Scroller.defaultProps = {
-  scrollDirection: scrollDirections.VERTICAL,
-  autoFocus: true,
-  autoScroll: true,
-  registerScroller: () => { /* no-op */ }
-};
-
-export default Scroller;

frontend/src/Components/Scroller/Scroller.tsx

@@ -0,0 +1,90 @@
+import classNames from 'classnames';
+import { throttle } from 'lodash';
+import React, { forwardRef, ReactNode, useEffect, useRef } from 'react';
+import ScrollDirection from 'Helpers/Props/ScrollDirection';
+import styles from './Scroller.css';
+
+interface ScrollerProps {
+  className?: string;
+  scrollDirection?: ScrollDirection;
+  autoFocus?: boolean;
+  autoScroll?: boolean;
+  scrollTop?: number;
+  initialScrollTop?: number;
+  children?: ReactNode;
+  onScroll?: (payload) => void;
+}
+
+const Scroller = forwardRef(
+  (props: ScrollerProps, ref: React.MutableRefObject<HTMLDivElement>) => {
+    const {
+      className,
+      autoFocus = false,
+      autoScroll = true,
+      scrollDirection = ScrollDirection.Vertical,
+      children,
+      scrollTop,
+      initialScrollTop,
+      onScroll,
+      ...otherProps
+    } = props;
+
+    const internalRef = useRef();
+    const currentRef = ref ?? internalRef;
+
+    useEffect(
+      () => {
+        if (initialScrollTop != null) {
+          currentRef.current.scrollTop = initialScrollTop;
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+
+    useEffect(() => {
+      if (scrollTop != null) {
+        currentRef.current.scrollTop = scrollTop;
+      }
+
+      if (autoFocus && scrollDirection !== ScrollDirection.None) {
+        currentRef.current.focus({ preventScroll: true });
+      }
+    }, [autoFocus, currentRef, scrollDirection, scrollTop]);
+
+    useEffect(() => {
+      const div = currentRef.current;
+
+      const handleScroll = throttle(() => {
+        const scrollLeft = div.scrollLeft;
+        const scrollTop = div.scrollTop;
+
+        onScroll?.({ scrollLeft, scrollTop });
+      }, 10);
+
+      div.addEventListener('scroll', handleScroll);
+
+      return () => {
+        div.removeEventListener('scroll', handleScroll);
+      };
+    }, [currentRef, onScroll]);
+
+    return (
+      <div
+        {...otherProps}
+        ref={currentRef}
+        className={classNames(
+          className,
+          styles.scroller,
+          styles[scrollDirection],
+          autoScroll && styles.autoScroll
+        )}
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Scroller;

frontend/src/Components/Table/Column.ts

@@ -0,0 +1,10 @@
+interface Column {
+  name: string;
+  label: string;
+  columnLabel: string;
+  isSortable: boolean;
+  isVisible: boolean;
+  isModifiable?: boolean;
+}
+
+export default Column;

frontend/src/Components/withScrollPosition.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import scrollPositions from 'Store/scrollPositions';
-
-function withScrollPosition(WrappedComponent, scrollPositionKey) {
-  function ScrollPosition(props) {
-    const {
-      history
-    } = props;
-
-    const scrollTop = history.action === 'POP' || (history.location.state && history.location.state.restoreScrollPosition) ?
-      scrollPositions[scrollPositionKey] :
-      0;
-
-    return (
-      <WrappedComponent
-        {...props}
-        scrollTop={scrollTop}
-      />
-    );
-  }
-
-  ScrollPosition.propTypes = {
-    history: PropTypes.object.isRequired
-  };
-
-  return ScrollPosition;
-}
-
-export default withScrollPosition;

frontend/src/Components/withScrollPosition.tsx

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import scrollPositions from 'Store/scrollPositions';
+
+function withScrollPosition(WrappedComponent, scrollPositionKey) {
+  function ScrollPosition(props) {
+    const { history } = props;
+
+    const initialScrollTop =
+      history.action === 'POP' ||
+      (history.location.state && history.location.state.restoreScrollPosition)
+        ? scrollPositions[scrollPositionKey]
+        : 0;
+
+    return <WrappedComponent {...props} initialScrollTop={initialScrollTop} />;
+  }
+
+  ScrollPosition.propTypes = {
+    history: PropTypes.object.isRequired,
+  };
+
+  return ScrollPosition;
+}
+
+export default withScrollPosition;

frontend/src/Helpers/Hooks/useMeasure.ts

@@ -0,0 +1,21 @@
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
+import {
+  default as useMeasureHook,
+  Options,
+  RectReadOnly,
+} from 'react-use-measure';
+
+const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+
+export type Measurements = RectReadOnly;
+
+function useMeasure(
+  options?: Omit<Options, 'polyfill'>
+): ReturnType<typeof useMeasureHook> {
+  return useMeasureHook({
+    polyfill: ResizeObserver,
+    ...options,
+  });
+}
+
+export default useMeasure;

frontend/src/Helpers/Props/ScrollDirection.ts

@@ -0,0 +1,8 @@
+enum ScrollDirection {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical',
+  None = 'none',
+  Both = 'both',
+}
+
+export default ScrollDirection;

frontend/src/Helpers/Props/SortDirection.ts

@@ -0,0 +1,6 @@
+enum SortDirection {
+  Ascending = 'ascending',
+  Descending = 'descending',
+}
+
+export default SortDirection;

frontend/src/Series/Delete/DeleteSeriesModal.js

@@ -26,6 +26,7 @@ function DeleteSeriesModal(props) {
 }
 
 DeleteSeriesModal.propTypes = {
+  ...DeleteSeriesModalContentConnector.propTypes,
   isOpen: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/Series/Delete/DeleteSeriesModalContent.js

@@ -149,7 +149,6 @@ DeleteSeriesModalContent.propTypes = {
   statistics: PropTypes.object.isRequired,
   deleteOptions: PropTypes.object.isRequired,
   onDeleteOptionChange: PropTypes.func.isRequired,
-  onAddImportListExclusionChange: PropTypes.func.isRequired,
   onDeletePress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/Series/Edit/EditSeriesModal.js

@@ -18,6 +18,7 @@ function EditSeriesModal({ isOpen, onModalClose, ...otherProps }) {
 }
 
 EditSeriesModal.propTypes = {
+  ...EditSeriesModalContentConnector.propTypes,
   isOpen: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/Series/Edit/EditSeriesModalConnector.js

@@ -32,6 +32,7 @@ class EditSeriesModalConnector extends Component {
 }
 
 EditSeriesModalConnector.propTypes = {
+  ...EditSeriesModal.propTypes,
   onModalClose: PropTypes.func.isRequired,
   clearPendingChanges: PropTypes.func.isRequired
 };

frontend/src/Series/Index/Menus/SeriesIndexFilterMenu.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import { align } from 'Helpers/Props';
-import SeriesIndexFilterModalConnector from 'Series/Index/SeriesIndexFilterModalConnector';
+import SeriesIndexFilterModal from 'Series/Index/SeriesIndexFilterModal';
 
 function SeriesIndexFilterMenu(props) {
   const {
@@ -10,7 +10,7 @@ function SeriesIndexFilterMenu(props) {
     filters,
     customFilters,
     isDisabled,
-    onFilterSelect
+    onFilterSelect,
   } = props;
 
   return (
@@ -20,22 +20,23 @@ function SeriesIndexFilterMenu(props) {
       selectedFilterKey={selectedFilterKey}
       filters={filters}
       customFilters={customFilters}
-      filterModalConnectorComponent={SeriesIndexFilterModalConnector}
+      filterModalConnectorComponent={SeriesIndexFilterModal}
       onFilterSelect={onFilterSelect}
     />
   );
 }
 
 SeriesIndexFilterMenu.propTypes = {
-  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
-  onFilterSelect: PropTypes.func.isRequired
+  onFilterSelect: PropTypes.func.isRequired,
 };
 
 SeriesIndexFilterMenu.defaultProps = {
-  showCustomFilters: false
+  showCustomFilters: false,
 };
 
 export default SeriesIndexFilterMenu;

frontend/src/Series/Index/Menus/SeriesIndexSortMenu.tsx

@@ -6,18 +6,10 @@ import SortMenuItem from 'Components/Menu/SortMenuItem';
 import { align, sortDirections } from 'Helpers/Props';
 
 function SeriesIndexSortMenu(props) {
-  const {
-    sortKey,
-    sortDirection,
-    isDisabled,
-    onSortSelect
-  } = props;
+  const { sortKey, sortDirection, isDisabled, onSortSelect } = props;
 
   return (
-    <SortMenu
-      isDisabled={isDisabled}
-      alignMenu={align.RIGHT}
-    >
+    <SortMenu isDisabled={isDisabled} alignMenu={align.RIGHT}>
       <MenuContent>
         <SortMenuItem
           name="status"
@@ -162,7 +154,7 @@ SeriesIndexSortMenu.propTypes = {
   sortKey: PropTypes.string,
   sortDirection: PropTypes.oneOf(sortDirections.all),
   isDisabled: PropTypes.bool.isRequired,
-  onSortSelect: PropTypes.func.isRequired
+  onSortSelect: PropTypes.func.isRequired,
 };
 
 export default SeriesIndexSortMenu;

frontend/src/Series/Index/Menus/SeriesIndexViewMenu.tsx

@@ -6,31 +6,16 @@ import ViewMenuItem from 'Components/Menu/ViewMenuItem';
 import { align } from 'Helpers/Props';
 
 function SeriesIndexViewMenu(props) {
-  const {
-    view,
-    isDisabled,
-    onViewSelect
-  } = props;
+  const { view, isDisabled, onViewSelect } = props;
 
   return (
-    <ViewMenu
-      isDisabled={isDisabled}
-      alignMenu={align.RIGHT}
-    >
+    <ViewMenu isDisabled={isDisabled} alignMenu={align.RIGHT}>
       <MenuContent>
-        <ViewMenuItem
-          name="table"
-          selectedView={view}
-          onPress={onViewSelect}
-        >
+        <ViewMenuItem name="table" selectedView={view} onPress={onViewSelect}>
           Table
         </ViewMenuItem>
 
-        <ViewMenuItem
-          name="posters"
-          selectedView={view}
-          onPress={onViewSelect}
-        >
+        <ViewMenuItem name="posters" selectedView={view} onPress={onViewSelect}>
           Posters
         </ViewMenuItem>
 
@@ -49,7 +34,7 @@ function SeriesIndexViewMenu(props) {
 SeriesIndexViewMenu.propTypes = {
   view: PropTypes.string.isRequired,
   isDisabled: PropTypes.bool.isRequired,
-  onViewSelect: PropTypes.func.isRequired
+  onViewSelect: PropTypes.func.isRequired,
 };
 
 export default SeriesIndexViewMenu;

frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModal.js

@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import SeriesIndexOverviewOptionsModalContentConnector from './SeriesIndexOverviewOptionsModalContentConnector';
-
-function SeriesIndexOverviewOptionsModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <SeriesIndexOverviewOptionsModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-SeriesIndexOverviewOptionsModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default SeriesIndexOverviewOptionsModal;

frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModal.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import SeriesIndexOverviewOptionsModalContent from './SeriesIndexOverviewOptionsModalContent';
+
+interface SeriesIndexOverviewOptionsModalProps {
+  isOpen: boolean;
+  onModalClose(...args: unknown[]): void;
+}
+
+function SeriesIndexOverviewOptionsModal({
+  isOpen,
+  onModalClose,
+  ...otherProps
+}: SeriesIndexOverviewOptionsModalProps) {
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <SeriesIndexOverviewOptionsModalContent
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default SeriesIndexOverviewOptionsModal;

frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.js

@@ -1,305 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import Button from 'Components/Link/Button';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes } from 'Helpers/Props';
-
-const posterSizeOptions = [
-  { key: 'small', value: 'Small' },
-  { key: 'medium', value: 'Medium' },
-  { key: 'large', value: 'Large' }
-];
-
-class SeriesIndexOverviewOptionsModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      detailedProgressBar: props.detailedProgressBar,
-      size: props.size,
-      showMonitored: props.showMonitored,
-      showNetwork: props.showNetwork,
-      showQualityProfile: props.showQualityProfile,
-      showPreviousAiring: props.showPreviousAiring,
-      showAdded: props.showAdded,
-      showSeasonCount: props.showSeasonCount,
-      showPath: props.showPath,
-      showSizeOnDisk: props.showSizeOnDisk,
-      showSearchAction: props.showSearchAction
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      detailedProgressBar,
-      size,
-      showMonitored,
-      showNetwork,
-      showQualityProfile,
-      showPreviousAiring,
-      showAdded,
-      showSeasonCount,
-      showPath,
-      showSizeOnDisk,
-      showSearchAction
-    } = this.props;
-
-    const state = {};
-
-    if (detailedProgressBar !== prevProps.detailedProgressBar) {
-      state.detailedProgressBar = detailedProgressBar;
-    }
-
-    if (size !== prevProps.size) {
-      state.size = size;
-    }
-
-    if (showMonitored !== prevProps.showMonitored) {
-      state.showMonitored = showMonitored;
-    }
-
-    if (showNetwork !== prevProps.showNetwork) {
-      state.showNetwork = showNetwork;
-    }
-
-    if (showQualityProfile !== prevProps.showQualityProfile) {
-      state.showQualityProfile = showQualityProfile;
-    }
-
-    if (showPreviousAiring !== prevProps.showPreviousAiring) {
-      state.showPreviousAiring = showPreviousAiring;
-    }
-
-    if (showAdded !== prevProps.showAdded) {
-      state.showAdded = showAdded;
-    }
-
-    if (showSeasonCount !== prevProps.showSeasonCount) {
-      state.showSeasonCount = showSeasonCount;
-    }
-
-    if (showPath !== prevProps.showPath) {
-      state.showPath = showPath;
-    }
-
-    if (showSizeOnDisk !== prevProps.showSizeOnDisk) {
-      state.showSizeOnDisk = showSizeOnDisk;
-    }
-
-    if (showSearchAction !== prevProps.showSearchAction) {
-      state.showSearchAction = showSearchAction;
-    }
-
-    if (!_.isEmpty(state)) {
-      this.setState(state);
-    }
-  }
-
-  //
-  // Listeners
-
-  onChangeOverviewOption = ({ name, value }) => {
-    this.setState({
-      [name]: value
-    }, () => {
-      this.props.onChangeOverviewOption({ [name]: value });
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      onModalClose
-    } = this.props;
-
-    const {
-      detailedProgressBar,
-      size,
-      showMonitored,
-      showNetwork,
-      showQualityProfile,
-      showPreviousAiring,
-      showAdded,
-      showSeasonCount,
-      showPath,
-      showSizeOnDisk,
-      showSearchAction
-    } = this.state;
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          Overview Options
-        </ModalHeader>
-
-        <ModalBody>
-          <Form>
-            <FormGroup>
-              <FormLabel>Poster Size</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.SELECT}
-                name="size"
-                value={size}
-                values={posterSizeOptions}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Detailed Progress Bar</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="detailedProgressBar"
-                value={detailedProgressBar}
-                helpText="Show text on progress bar"
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Monitored</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showMonitored"
-                value={showMonitored}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Network</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showNetwork"
-                value={showNetwork}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Quality Profile</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showQualityProfile"
-                value={showQualityProfile}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Previous Airing</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showPreviousAiring"
-                value={showPreviousAiring}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Date Added</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showAdded"
-                value={showAdded}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Season Count</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showSeasonCount"
-                value={showSeasonCount}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Path</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showPath"
-                value={showPath}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Size on Disk</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showSizeOnDisk"
-                value={showSizeOnDisk}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Search</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showSearchAction"
-                value={showSearchAction}
-                helpText="Show search button on hover"
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-          </Form>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button
-            onPress={onModalClose}
-          >
-            Close
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-SeriesIndexOverviewOptionsModalContent.propTypes = {
-  size: PropTypes.string.isRequired,
-  detailedProgressBar: PropTypes.bool.isRequired,
-  showMonitored: PropTypes.bool.isRequired,
-  showNetwork: PropTypes.bool.isRequired,
-  showQualityProfile: PropTypes.bool.isRequired,
-  showPreviousAiring: PropTypes.bool.isRequired,
-  showAdded: PropTypes.bool.isRequired,
-  showSeasonCount: PropTypes.bool.isRequired,
-  showPath: PropTypes.bool.isRequired,
-  showSizeOnDisk: PropTypes.bool.isRequired,
-  showSearchAction: PropTypes.bool.isRequired,
-  onChangeOverviewOption: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default SeriesIndexOverviewOptionsModalContent;

frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import { setSeriesOverviewOption } from 'Store/Actions/seriesIndexActions';
+import selectOverviewOptions from '../selectOverviewOptions';
+
+const posterSizeOptions = [
+  { key: 'small', value: 'Small' },
+  { key: 'medium', value: 'Medium' },
+  { key: 'large', value: 'Large' },
+];
+
+interface SeriesIndexOverviewOptionsModalContentProps {
+  onModalClose(...args: unknown[]): void;
+}
+
+function SeriesIndexOverviewOptionsModalContent(
+  props: SeriesIndexOverviewOptionsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const {
+    detailedProgressBar,
+    size,
+    showMonitored,
+    showNetwork,
+    showQualityProfile,
+    showPreviousAiring,
+    showAdded,
+    showSeasonCount,
+    showPath,
+    showSizeOnDisk,
+    showSearchAction,
+  } = useSelector(selectOverviewOptions);
+
+  const dispatch = useDispatch();
+
+  const onOverviewOptionChange = useCallback(
+    ({ name, value }) => {
+      dispatch(setSeriesOverviewOption({ [name]: value }));
+    },
+    [dispatch]
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Overview Options</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>Poster Size</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="size"
+              value={size}
+              values={posterSizeOptions}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Detailed Progress Bar</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="detailedProgressBar"
+              value={detailedProgressBar}
+              helpText="Show text on progress bar"
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Monitored</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showMonitored"
+              value={showMonitored}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Network</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showNetwork"
+              value={showNetwork}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Quality Profile</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showQualityProfile"
+              value={showQualityProfile}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Previous Airing</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showPreviousAiring"
+              value={showPreviousAiring}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Date Added</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showAdded"
+              value={showAdded}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Season Count</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showSeasonCount"
+              value={showSeasonCount}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Path</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showPath"
+              value={showPath}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Size on Disk</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showSizeOnDisk"
+              value={showSizeOnDisk}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Search</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showSearchAction"
+              value={showSearchAction}
+              helpText="Show search button on hover"
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>Close</Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default SeriesIndexOverviewOptionsModalContent;

frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContentConnector.js

@@ -1,23 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { setSeriesOverviewOption } from 'Store/Actions/seriesIndexActions';
-import SeriesIndexOverviewOptionsModalContent from './SeriesIndexOverviewOptionsModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.seriesIndex,
-    (seriesIndex) => {
-      return seriesIndex.overviewOptions;
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onChangeOverviewOption(payload) {
-      dispatch(setSeriesOverviewOption(payload));
-    }
-  };
-}
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexOverviewOptionsModalContent);

frontend/src/Series/Index/Overview/SeriesIndexOverview.js

@@ -1,281 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import TextTruncate from 'react-text-truncate';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import { icons } from 'Helpers/Props';
-import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
-import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
-import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
-import SeriesPoster from 'Series/SeriesPoster';
-import dimensions from 'Styles/Variables/dimensions';
-import fonts from 'Styles/Variables/fonts';
-import SeriesIndexOverviewInfo from './SeriesIndexOverviewInfo';
-import styles from './SeriesIndexOverview.css';
-
-const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
-const columnPaddingSmallScreen = parseInt(dimensions.seriesIndexColumnPaddingSmallScreen);
-const defaultFontSize = parseInt(fonts.defaultFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
-// Hardcoded height beased on line-height of 32 + bottom margin of 10.
-// Less side-effecty than using react-measure.
-const titleRowHeight = 42;
-
-function getContentHeight(rowHeight, isSmallScreen) {
-  const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
-
-  return rowHeight - padding;
-}
-
-class SeriesIndexOverview extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onEditSeriesPress = () => {
-    this.setState({ isEditSeriesModalOpen: true });
-  };
-
-  onEditSeriesModalClose = () => {
-    this.setState({ isEditSeriesModalOpen: false });
-  };
-
-  onDeleteSeriesPress = () => {
-    this.setState({
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: true
-    });
-  };
-
-  onDeleteSeriesModalClose = () => {
-    this.setState({ isDeleteSeriesModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      id,
-      title,
-      overview,
-      monitored,
-      status,
-      titleSlug,
-      nextAiring,
-      statistics,
-      images,
-      posterWidth,
-      posterHeight,
-      qualityProfile,
-      overviewOptions,
-      showSearchAction,
-      showRelativeDates,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat,
-      rowHeight,
-      isSmallScreen,
-      isRefreshingSeries,
-      isSearchingSeries,
-      onRefreshSeriesPress,
-      onSearchPress,
-      ...otherProps
-    } = this.props;
-
-    const {
-      seasonCount,
-      episodeCount,
-      episodeFileCount,
-      totalEpisodeCount,
-      sizeOnDisk
-    } = statistics;
-
-    const {
-      isEditSeriesModalOpen,
-      isDeleteSeriesModalOpen
-    } = this.state;
-
-    const link = `/series/${titleSlug}`;
-
-    const elementStyle = {
-      width: `${posterWidth}px`,
-      height: `${posterHeight}px`
-    };
-
-    const contentHeight = getContentHeight(rowHeight, isSmallScreen);
-    const overviewHeight = contentHeight - titleRowHeight;
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.content}>
-          <div className={styles.poster}>
-            <div className={styles.posterContainer}>
-              {
-                status === 'ended' &&
-                  <div
-                    className={styles.ended}
-                    title="Ended"
-                  />
-              }
-
-              <Link
-                className={styles.link}
-                style={elementStyle}
-                to={link}
-              >
-                <SeriesPoster
-                  className={styles.poster}
-                  style={elementStyle}
-                  images={images}
-                  size={250}
-                  lazy={false}
-                  overflow={true}
-                />
-              </Link>
-            </div>
-
-            <SeriesIndexProgressBar
-              monitored={monitored}
-              status={status}
-              episodeCount={episodeCount}
-              episodeFileCount={episodeFileCount}
-              totalEpisodeCount={totalEpisodeCount}
-              posterWidth={posterWidth}
-              detailedProgressBar={overviewOptions.detailedProgressBar}
-            />
-          </div>
-
-          <div className={styles.info} style={{ maxHeight: contentHeight }}>
-            <div className={styles.titleRow}>
-              <Link
-                className={styles.title}
-                to={link}
-              >
-                {title}
-              </Link>
-
-              <div className={styles.actions}>
-                <SpinnerIconButton
-                  name={icons.REFRESH}
-                  title="Refresh series"
-                  isSpinning={isRefreshingSeries}
-                  onPress={onRefreshSeriesPress}
-                />
-
-                {
-                  showSearchAction &&
-                    <SpinnerIconButton
-                      className={styles.action}
-                      name={icons.SEARCH}
-                      title="Search for monitored episodes"
-                      isSpinning={isSearchingSeries}
-                      onPress={onSearchPress}
-                    />
-                }
-
-                <IconButton
-                  name={icons.EDIT}
-                  title="Edit Series"
-                  onPress={this.onEditSeriesPress}
-                />
-              </div>
-            </div>
-
-            <div className={styles.details}>
-              <Link
-                className={styles.overview}
-                to={link}
-              >
-                <TextTruncate
-                  line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
-                  text={overview}
-                />
-              </Link>
-
-              <SeriesIndexOverviewInfo
-                height={overviewHeight}
-                monitored={monitored}
-                nextAiring={nextAiring}
-                seasonCount={seasonCount}
-                qualityProfile={qualityProfile}
-                sizeOnDisk={sizeOnDisk}
-                showRelativeDates={showRelativeDates}
-                shortDateFormat={shortDateFormat}
-                longDateFormat={longDateFormat}
-                timeFormat={timeFormat}
-                {...overviewOptions}
-                {...otherProps}
-              />
-            </div>
-          </div>
-        </div>
-
-        <EditSeriesModalConnector
-          isOpen={isEditSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onEditSeriesModalClose}
-          onDeleteSeriesPress={this.onDeleteSeriesPress}
-        />
-
-        <DeleteSeriesModal
-          isOpen={isDeleteSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onDeleteSeriesModalClose}
-        />
-      </div>
-    );
-  }
-}
-
-SeriesIndexOverview.propTypes = {
-  id: PropTypes.number.isRequired,
-  title: PropTypes.string.isRequired,
-  overview: PropTypes.string.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  titleSlug: PropTypes.string.isRequired,
-  nextAiring: PropTypes.string,
-  statistics: PropTypes.object.isRequired,
-  images: PropTypes.arrayOf(PropTypes.object).isRequired,
-  posterWidth: PropTypes.number.isRequired,
-  posterHeight: PropTypes.number.isRequired,
-  rowHeight: PropTypes.number.isRequired,
-  qualityProfile: PropTypes.object.isRequired,
-  overviewOptions: PropTypes.object.isRequired,
-  showSearchAction: PropTypes.bool.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  isRefreshingSeries: PropTypes.bool.isRequired,
-  isSearchingSeries: PropTypes.bool.isRequired,
-  onRefreshSeriesPress: PropTypes.func.isRequired,
-  onSearchPress: PropTypes.func.isRequired
-};
-
-SeriesIndexOverview.defaultProps = {
-  statistics: {
-    seasonCount: 0,
-    episodeCount: 0,
-    episodeFileCount: 0,
-    totalEpisodeCount: 0
-  }
-};
-
-export default SeriesIndexOverview;

frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx

@@ -0,0 +1,240 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import TextTruncate from 'react-text-truncate';
+import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import { icons } from 'Helpers/Props';
+import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
+import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
+import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
+import SeriesPoster from 'Series/SeriesPoster';
+import { executeCommand } from 'Store/Actions/commandActions';
+import dimensions from 'Styles/Variables/dimensions';
+import fonts from 'Styles/Variables/fonts';
+import createSeriesIndexItemSelector from '../createSeriesIndexItemSelector';
+import selectOverviewOptions from './selectOverviewOptions';
+import SeriesIndexOverviewInfo from './SeriesIndexOverviewInfo';
+import styles from './SeriesIndexOverview.css';
+
+const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(
+  dimensions.seriesIndexColumnPaddingSmallScreen
+);
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+// Hardcoded height beased on line-height of 32 + bottom margin of 10.
+// Less side-effecty than using react-measure.
+const TITLE_HEIGHT = 42;
+
+interface SeriesIndexOverviewProps {
+  seriesId: number;
+  sortKey: string;
+  posterWidth: number;
+  posterHeight: number;
+  rowHeight: number;
+  isSmallScreen: boolean;
+}
+
+function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
+  const {
+    seriesId,
+    sortKey,
+    posterWidth,
+    posterHeight,
+    rowHeight,
+    isSmallScreen,
+  } = props;
+
+  const { series, qualityProfile, isRefreshingSeries, isSearchingSeries } =
+    useSelector(createSeriesIndexItemSelector(props.seriesId));
+
+  const overviewOptions = useSelector(selectOverviewOptions);
+
+  const {
+    title,
+    monitored,
+    status,
+    path,
+    titleSlug,
+    nextAiring,
+    previousAiring,
+    added,
+    overview,
+    statistics = {},
+    images,
+    network,
+  } = series;
+
+  const {
+    seasonCount = 0,
+    episodeCount = 0,
+    episodeFileCount = 0,
+    totalEpisodeCount = 0,
+    sizeOnDisk = 0,
+  } = statistics;
+
+  const dispatch = useDispatch();
+  const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
+  const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
+
+  const onRefreshPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: REFRESH_SERIES,
+        seriesId,
+      })
+    );
+  }, [seriesId, dispatch]);
+
+  const onSearchPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: SERIES_SEARCH,
+        seriesId,
+      })
+    );
+  }, [seriesId, dispatch]);
+
+  const onEditSeriesPress = useCallback(() => {
+    setIsEditSeriesModalOpen(true);
+  }, [setIsEditSeriesModalOpen]);
+
+  const onEditSeriesModalClose = useCallback(() => {
+    setIsEditSeriesModalOpen(false);
+  }, [setIsEditSeriesModalOpen]);
+
+  const onDeleteSeriesPress = useCallback(() => {
+    setIsEditSeriesModalOpen(false);
+    setIsDeleteSeriesModalOpen(true);
+  }, [setIsDeleteSeriesModalOpen]);
+
+  const onDeleteSeriesModalClose = useCallback(() => {
+    setIsDeleteSeriesModalOpen(false);
+  }, [setIsDeleteSeriesModalOpen]);
+
+  const link = `/series/${titleSlug}`;
+
+  const elementStyle = {
+    width: `${posterWidth}px`,
+    height: `${posterHeight}px`,
+  };
+
+  const contentHeight = useMemo(() => {
+    const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
+
+    return rowHeight - padding;
+  }, [rowHeight, isSmallScreen]);
+
+  const overviewHeight = contentHeight - TITLE_HEIGHT;
+
+  return (
+    <div>
+      <div className={styles.content}>
+        <div className={styles.poster}>
+          <div className={styles.posterContainer}>
+            {status === 'ended' && (
+              <div className={styles.ended} title="Ended" />
+            )}
+
+            <Link className={styles.link} style={elementStyle} to={link}>
+              <SeriesPoster
+                className={styles.poster}
+                style={elementStyle}
+                images={images}
+                size={250}
+                lazy={false}
+                overflow={true}
+              />
+            </Link>
+          </div>
+
+          <SeriesIndexProgressBar
+            monitored={monitored}
+            status={status}
+            episodeCount={episodeCount}
+            episodeFileCount={episodeFileCount}
+            totalEpisodeCount={totalEpisodeCount}
+            posterWidth={posterWidth}
+            detailedProgressBar={overviewOptions.detailedProgressBar}
+          />
+        </div>
+
+        <div className={styles.info} style={{ maxHeight: contentHeight }}>
+          <div className={styles.titleRow}>
+            <Link className={styles.title} to={link}>
+              {title}
+            </Link>
+
+            <div className={styles.actions}>
+              <SpinnerIconButton
+                name={icons.REFRESH}
+                title="Refresh series"
+                isSpinning={isRefreshingSeries}
+                onPress={onRefreshPress}
+              />
+
+              {overviewOptions.showSearchAction ? (
+                <SpinnerIconButton
+                  name={icons.SEARCH}
+                  title="Search for monitored episodes"
+                  isSpinning={isSearchingSeries}
+                  onPress={onSearchPress}
+                />
+              ) : null}
+
+              <IconButton
+                name={icons.EDIT}
+                title="Edit Series"
+                onPress={onEditSeriesPress}
+              />
+            </div>
+          </div>
+
+          <div className={styles.details}>
+            <Link className={styles.overview} to={link}>
+              <TextTruncate
+                line={Math.floor(
+                  overviewHeight / (defaultFontSize * lineHeight)
+                )}
+                text={overview}
+              />
+            </Link>
+
+            <SeriesIndexOverviewInfo
+              height={overviewHeight}
+              monitored={monitored}
+              network={network}
+              nextAiring={nextAiring}
+              previousAiring={previousAiring}
+              added={added}
+              seasonCount={seasonCount}
+              qualityProfile={qualityProfile}
+              sizeOnDisk={sizeOnDisk}
+              path={path}
+              sortKey={sortKey}
+              {...overviewOptions}
+            />
+          </div>
+        </div>
+      </div>
+
+      <EditSeriesModalConnector
+        isOpen={isEditSeriesModalOpen}
+        seriesId={seriesId}
+        onModalClose={onEditSeriesModalClose}
+        onDeleteSeriesPress={onDeleteSeriesPress}
+      />
+
+      <DeleteSeriesModal
+        isOpen={isDeleteSeriesModalOpen}
+        seriesId={seriesId}
+        onModalClose={onDeleteSeriesModalClose}
+      />
+    </div>
+  );
+}
+
+export default SeriesIndexOverview;

frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.js

@@ -1,265 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { icons } from 'Helpers/Props';
-import dimensions from 'Styles/Variables/dimensions';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import formatBytes from 'Utilities/Number/formatBytes';
-import SeriesIndexOverviewInfoRow from './SeriesIndexOverviewInfoRow';
-import styles from './SeriesIndexOverviewInfo.css';
-
-const infoRowHeight = parseInt(dimensions.seriesIndexOverviewInfoRowHeight);
-
-const rows = [
-  {
-    name: 'monitored',
-    showProp: 'showMonitored',
-    valueProp: 'monitored'
-  },
-  {
-    name: 'network',
-    showProp: 'showNetwork',
-    valueProp: 'network'
-  },
-  {
-    name: 'qualityProfileId',
-    showProp: 'showQualityProfile',
-    valueProp: 'qualityProfileId'
-  },
-  {
-    name: 'previousAiring',
-    showProp: 'showPreviousAiring',
-    valueProp: 'previousAiring'
-  },
-  {
-    name: 'added',
-    showProp: 'showAdded',
-    valueProp: 'added'
-  },
-  {
-    name: 'seasonCount',
-    showProp: 'showSeasonCount',
-    valueProp: 'seasonCount'
-  },
-  {
-    name: 'path',
-    showProp: 'showPath',
-    valueProp: 'path'
-  },
-  {
-    name: 'sizeOnDisk',
-    showProp: 'showSizeOnDisk',
-    valueProp: 'sizeOnDisk'
-  }
-];
-
-function isVisible(row, props) {
-  const {
-    name,
-    showProp,
-    valueProp
-  } = row;
-
-  if (props[valueProp] == null) {
-    return false;
-  }
-
-  return props[showProp] || props.sortKey === name;
-}
-
-function getInfoRowProps(row, props) {
-  const { name } = row;
-
-  if (name === 'monitored') {
-    const monitoredText = props.monitored ? 'Monitored' : 'Unmonitored';
-
-    return {
-      title: monitoredText,
-      iconName: props.monitored ? icons.MONITORED : icons.UNMONITORED,
-      label: monitoredText
-    };
-  }
-
-  if (name === 'network') {
-    return {
-      title: 'Network',
-      iconName: icons.NETWORK,
-      label: props.network
-    };
-  }
-
-  if (name === 'qualityProfileId') {
-    return {
-      title: 'Quality Profile',
-      iconName: icons.PROFILE,
-      label: props.qualityProfile.name
-    };
-  }
-
-  if (name === 'previousAiring') {
-    const {
-      previousAiring,
-      showRelativeDates,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat
-    } = props;
-
-    return {
-      title: `Previous Airing: ${formatDateTime(previousAiring, longDateFormat, timeFormat)}`,
-      iconName: icons.CALENDAR,
-      label: getRelativeDate(
-        previousAiring,
-        shortDateFormat,
-        showRelativeDates,
-        {
-          timeFormat,
-          timeForToday: true
-        }
-      )
-    };
-  }
-
-  if (name === 'added') {
-    const {
-      added,
-      showRelativeDates,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat
-    } = props;
-
-    return {
-      title: `Added: ${formatDateTime(added, longDateFormat, timeFormat)}`,
-      iconName: icons.ADD,
-      label: getRelativeDate(
-        added,
-        shortDateFormat,
-        showRelativeDates,
-        {
-          timeFormat,
-          timeForToday: true
-        }
-      )
-    };
-  }
-
-  if (name === 'seasonCount') {
-    const { seasonCount } = props;
-    let seasons = '1 season';
-
-    if (seasonCount === 0) {
-      seasons = 'No seasons';
-    } else if (seasonCount > 1) {
-      seasons = `${seasonCount} seasons`;
-    }
-
-    return {
-      title: 'Season Count',
-      iconName: icons.CIRCLE,
-      label: seasons
-    };
-  }
-
-  if (name === 'path') {
-    return {
-      title: 'Path',
-      iconName: icons.FOLDER,
-      label: props.path
-    };
-  }
-
-  if (name === 'sizeOnDisk') {
-    return {
-      title: 'Size on Disk',
-      iconName: icons.DRIVE,
-      label: formatBytes(props.sizeOnDisk)
-    };
-  }
-}
-
-function SeriesIndexOverviewInfo(props) {
-  const {
-    height,
-    nextAiring,
-    showRelativeDates,
-    shortDateFormat,
-    longDateFormat,
-    timeFormat
-  } = props;
-
-  let shownRows = 1;
-  const maxRows = Math.floor(height / (infoRowHeight + 4));
-
-  return (
-    <div className={styles.infos}>
-      {
-        !!nextAiring &&
-          <SeriesIndexOverviewInfoRow
-            title={formatDateTime(nextAiring, longDateFormat, timeFormat)}
-            iconName={icons.SCHEDULED}
-            label={getRelativeDate(
-              nextAiring,
-              shortDateFormat,
-              showRelativeDates,
-              {
-                timeFormat,
-                timeForToday: true
-              }
-            )}
-          />
-      }
-
-      {
-        rows.map((row) => {
-          if (!isVisible(row, props)) {
-            return null;
-          }
-
-          if (shownRows >= maxRows) {
-            return null;
-          }
-
-          shownRows++;
-
-          const infoRowProps = getInfoRowProps(row, props);
-
-          return (
-            <SeriesIndexOverviewInfoRow
-              key={row.name}
-              {...infoRowProps}
-            />
-          );
-        })
-      }
-    </div>
-  );
-}
-
-SeriesIndexOverviewInfo.propTypes = {
-  height: PropTypes.number.isRequired,
-  showNetwork: PropTypes.bool.isRequired,
-  showMonitored: PropTypes.bool.isRequired,
-  showQualityProfile: PropTypes.bool.isRequired,
-  showPreviousAiring: PropTypes.bool.isRequired,
-  showAdded: PropTypes.bool.isRequired,
-  showSeasonCount: PropTypes.bool.isRequired,
-  showPath: PropTypes.bool.isRequired,
-  showSizeOnDisk: PropTypes.bool.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  nextAiring: PropTypes.string,
-  network: PropTypes.string,
-  qualityProfile: PropTypes.object.isRequired,
-  previousAiring: PropTypes.string,
-  added: PropTypes.string,
-  seasonCount: PropTypes.number.isRequired,
-  path: PropTypes.string.isRequired,
-  sizeOnDisk: PropTypes.number,
-  sortKey: PropTypes.string.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired
-};
-
-export default SeriesIndexOverviewInfo;

frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx

@@ -0,0 +1,243 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { icons } from 'Helpers/Props';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import dimensions from 'Styles/Variables/dimensions';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import SeriesIndexOverviewInfoRow from './SeriesIndexOverviewInfoRow';
+import styles from './SeriesIndexOverviewInfo.css';
+
+const infoRowHeight = parseInt(dimensions.seriesIndexOverviewInfoRowHeight);
+
+const rows = [
+  {
+    name: 'monitored',
+    showProp: 'showMonitored',
+    valueProp: 'monitored',
+  },
+  {
+    name: 'network',
+    showProp: 'showNetwork',
+    valueProp: 'network',
+  },
+  {
+    name: 'qualityProfileId',
+    showProp: 'showQualityProfile',
+    valueProp: 'qualityProfileId',
+  },
+  {
+    name: 'previousAiring',
+    showProp: 'showPreviousAiring',
+    valueProp: 'previousAiring',
+  },
+  {
+    name: 'added',
+    showProp: 'showAdded',
+    valueProp: 'added',
+  },
+  {
+    name: 'seasonCount',
+    showProp: 'showSeasonCount',
+    valueProp: 'seasonCount',
+  },
+  {
+    name: 'path',
+    showProp: 'showPath',
+    valueProp: 'path',
+  },
+  {
+    name: 'sizeOnDisk',
+    showProp: 'showSizeOnDisk',
+    valueProp: 'sizeOnDisk',
+  },
+];
+
+function getInfoRowProps(row, props, uiSettings) {
+  const { name } = row;
+
+  if (name === 'monitored') {
+    const monitoredText = props.monitored ? 'Monitored' : 'Unmonitored';
+
+    return {
+      title: monitoredText,
+      iconName: props.monitored ? icons.MONITORED : icons.UNMONITORED,
+      label: monitoredText,
+    };
+  }
+
+  if (name === 'network') {
+    return {
+      title: 'Network',
+      iconName: icons.NETWORK,
+      label: props.network,
+    };
+  }
+
+  if (name === 'qualityProfileId') {
+    return {
+      title: 'Quality Profile',
+      iconName: icons.PROFILE,
+      label: props.qualityProfile.name,
+    };
+  }
+
+  if (name === 'previousAiring') {
+    const previousAiring = props.previousAiring;
+    const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+      uiSettings;
+
+    return {
+      title: `Previous Airing: ${formatDateTime(
+        previousAiring,
+        longDateFormat,
+        timeFormat
+      )}`,
+      iconName: icons.CALENDAR,
+      label: getRelativeDate(
+        previousAiring,
+        shortDateFormat,
+        showRelativeDates,
+        {
+          timeFormat,
+          timeForToday: true,
+        }
+      ),
+    };
+  }
+
+  if (name === 'added') {
+    const added = props.added;
+    const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
+      uiSettings;
+
+    return {
+      title: `Added: ${formatDateTime(added, longDateFormat, timeFormat)}`,
+      iconName: icons.ADD,
+      label: getRelativeDate(added, shortDateFormat, showRelativeDates, {
+        timeFormat,
+        timeForToday: true,
+      }),
+    };
+  }
+
+  if (name === 'seasonCount') {
+    const { seasonCount } = props;
+    let seasons = '1 season';
+
+    if (seasonCount === 0) {
+      seasons = 'No seasons';
+    } else if (seasonCount > 1) {
+      seasons = `${seasonCount} seasons`;
+    }
+
+    return {
+      title: 'Season Count',
+      iconName: icons.CIRCLE,
+      label: seasons,
+    };
+  }
+
+  if (name === 'path') {
+    return {
+      title: 'Path',
+      iconName: icons.FOLDER,
+      label: props.path,
+    };
+  }
+
+  if (name === 'sizeOnDisk') {
+    return {
+      title: 'Size on Disk',
+      iconName: icons.DRIVE,
+      label: formatBytes(props.sizeOnDisk),
+    };
+  }
+}
+
+interface SeriesIndexOverviewInfoProps {
+  height: number;
+  showNetwork: boolean;
+  showMonitored: boolean;
+  showQualityProfile: boolean;
+  showPreviousAiring: boolean;
+  showAdded: boolean;
+  showSeasonCount: boolean;
+  showPath: boolean;
+  showSizeOnDisk: boolean;
+  monitored: boolean;
+  nextAiring?: string;
+  network?: string;
+  qualityProfile: object;
+  previousAiring?: string;
+  added?: string;
+  seasonCount: number;
+  path: string;
+  sizeOnDisk?: number;
+  sortKey: string;
+}
+
+function SeriesIndexOverviewInfo(props: SeriesIndexOverviewInfoProps) {
+  const { height, nextAiring } = props;
+
+  const uiSettings = useSelector(createUISettingsSelector());
+
+  const { shortDateFormat, showRelativeDates, longDateFormat, timeFormat } =
+    uiSettings;
+
+  let shownRows = 1;
+  const maxRows = Math.floor(height / (infoRowHeight + 4));
+
+  const rowInfo = useMemo(() => {
+    return rows.map((row) => {
+      const { name, showProp, valueProp } = row;
+
+      const isVisible =
+        props[valueProp] != null && (props[showProp] || props.sortKey === name);
+
+      return {
+        ...row,
+        isVisible,
+      };
+    });
+  }, [props]);
+
+  return (
+    <div className={styles.infos}>
+      {!!nextAiring && (
+        <SeriesIndexOverviewInfoRow
+          title={formatDateTime(nextAiring, longDateFormat, timeFormat)}
+          iconName={icons.SCHEDULED}
+          label={getRelativeDate(
+            nextAiring,
+            shortDateFormat,
+            showRelativeDates,
+            {
+              timeFormat,
+              timeForToday: true,
+            }
+          )}
+        />
+      )}
+
+      {rowInfo.map((row) => {
+        if (!row.isVisible) {
+          return null;
+        }
+
+        if (shownRows >= maxRows) {
+          return null;
+        }
+
+        shownRows++;
+
+        const infoRowProps = getInfoRowProps(row, props, uiSettings);
+
+        return <SeriesIndexOverviewInfoRow key={row.name} {...infoRowProps} />;
+      })}
+    </div>
+  );
+}
+
+export default SeriesIndexOverviewInfo;

frontend/src/Series/Index/Overview/SeriesIndexOverviewInfoRow.js

@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import styles from './SeriesIndexOverviewInfoRow.css';
-
-function SeriesIndexOverviewInfoRow(props) {
-  const {
-    title,
-    iconName,
-    label
-  } = props;
-
-  return (
-    <div
-      className={styles.infoRow}
-      title={title}
-    >
-      <Icon
-        className={styles.icon}
-        name={iconName}
-        size={14}
-      />
-
-      {label}
-    </div>
-  );
-}
-
-SeriesIndexOverviewInfoRow.propTypes = {
-  title: PropTypes.string,
-  iconName: PropTypes.object.isRequired,
-  label: PropTypes.string.isRequired
-};
-
-export default SeriesIndexOverviewInfoRow;

frontend/src/Series/Index/Overview/SeriesIndexOverviewInfoRow.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from 'Components/Icon';
+import styles from './SeriesIndexOverviewInfoRow.css';
+
+interface SeriesIndexOverviewInfoRowProps {
+  title?: string;
+  iconName: object;
+  label: string;
+}
+
+function SeriesIndexOverviewInfoRow(props: SeriesIndexOverviewInfoRowProps) {
+  const { title, iconName, label } = props;
+
+  return (
+    <div className={styles.infoRow} title={title}>
+      <Icon className={styles.icon} name={iconName} size={14} />
+
+      {label}
+    </div>
+  );
+}
+
+export default SeriesIndexOverviewInfoRow;

frontend/src/Series/Index/Overview/SeriesIndexOverviews.js

@@ -1,275 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Grid, WindowScroller } from 'react-virtualized';
-import Measure from 'Components/Measure';
-import SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
-import dimensions from 'Styles/Variables/dimensions';
-import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
-import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
-import SeriesIndexOverview from './SeriesIndexOverview';
-import styles from './SeriesIndexOverviews.css';
-
-// Poster container dimensions
-const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
-const columnPaddingSmallScreen = parseInt(dimensions.seriesIndexColumnPaddingSmallScreen);
-const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
-const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
-
-function calculatePosterWidth(posterSize, isSmallScreen) {
-  const maxiumPosterWidth = isSmallScreen ? 152 : 162;
-
-  if (posterSize === 'large') {
-    return maxiumPosterWidth;
-  }
-
-  if (posterSize === 'medium') {
-    return Math.floor(maxiumPosterWidth * 0.75);
-  }
-
-  return Math.floor(maxiumPosterWidth * 0.5);
-}
-
-function calculateRowHeight(posterHeight, sortKey, isSmallScreen, overviewOptions) {
-  const {
-    detailedProgressBar
-  } = overviewOptions;
-
-  const heights = [
-    posterHeight,
-    detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
-    isSmallScreen ? columnPaddingSmallScreen : columnPadding
-  ];
-
-  return heights.reduce((acc, height) => acc + height, 0);
-}
-
-function calculatePosterHeight(posterWidth) {
-  return Math.ceil((250 / 170) * posterWidth);
-}
-
-class SeriesIndexOverviews extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      width: 0,
-      columnCount: 1,
-      posterWidth: 162,
-      posterHeight: 238,
-      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}),
-      scrollRestored: false
-    };
-
-    this._grid = null;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      items,
-      sortKey,
-      overviewOptions,
-      jumpToCharacter,
-      scrollTop,
-      isSmallScreen
-    } = this.props;
-
-    const {
-      width,
-      rowHeight,
-      scrollRestored
-    } = this.state;
-
-    if (prevProps.sortKey !== sortKey ||
-        prevProps.overviewOptions !== overviewOptions) {
-      this.calculateGrid(this.state.width, isSmallScreen);
-    }
-
-    if (
-      this._grid &&
-        (prevState.width !== width ||
-            prevState.rowHeight !== rowHeight ||
-            hasDifferentItemsOrOrder(prevProps.items, items) ||
-            prevProps.overviewOptions !== overviewOptions
-        )
-    ) {
-      // recomputeGridSize also forces Grid to discard its cache of rendered cells
-      this._grid.recomputeGridSize();
-    }
-
-    if (this._grid && scrollTop !== 0 && !scrollRestored) {
-      this.setState({ scrollRestored: true });
-      this._grid.scrollToPosition({ scrollTop });
-    }
-
-    if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
-
-      if (this._grid && index != null) {
-
-        this._grid.scrollToCell({
-          rowIndex: index,
-          columnIndex: 0
-        });
-      }
-    }
-  }
-
-  //
-  // Control
-
-  setGridRef = (ref) => {
-    this._grid = ref;
-  };
-
-  calculateGrid = (width = this.state.width, isSmallScreen) => {
-    const {
-      sortKey,
-      overviewOptions
-    } = this.props;
-
-    const posterWidth = calculatePosterWidth(overviewOptions.size, isSmallScreen);
-    const posterHeight = calculatePosterHeight(posterWidth);
-    const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, overviewOptions);
-
-    this.setState({
-      width,
-      posterWidth,
-      posterHeight,
-      rowHeight
-    });
-  };
-
-  cellRenderer = ({ key, rowIndex, style }) => {
-    const {
-      items,
-      sortKey,
-      overviewOptions,
-      showRelativeDates,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat,
-      isSmallScreen
-    } = this.props;
-
-    const {
-      posterWidth,
-      posterHeight,
-      rowHeight
-    } = this.state;
-
-    const series = items[rowIndex];
-
-    if (!series) {
-      return null;
-    }
-
-    return (
-      <div
-        className={styles.container}
-        key={key}
-        style={style}
-      >
-        <SeriesIndexItemConnector
-          key={series.id}
-          component={SeriesIndexOverview}
-          sortKey={sortKey}
-          posterWidth={posterWidth}
-          posterHeight={posterHeight}
-          rowHeight={rowHeight}
-          overviewOptions={overviewOptions}
-          showRelativeDates={showRelativeDates}
-          shortDateFormat={shortDateFormat}
-          longDateFormat={longDateFormat}
-          timeFormat={timeFormat}
-          isSmallScreen={isSmallScreen}
-          style={style}
-          seriesId={series.id}
-          qualityProfileId={series.qualityProfileId}
-        />
-      </div>
-    );
-  };
-
-  //
-  // Listeners
-
-  onMeasure = ({ width }) => {
-    this.calculateGrid(width, this.props.isSmallScreen);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      scroller,
-      items,
-      isSmallScreen
-    } = this.props;
-
-    const {
-      width,
-      rowHeight
-    } = this.state;
-
-    return (
-      <Measure
-        whitelist={['width']}
-        onMeasure={this.onMeasure}
-      >
-        <WindowScroller
-          scrollElement={isSmallScreen ? undefined : scroller}
-        >
-          {({ height, registerChild, onChildScroll, scrollTop }) => {
-            if (!height) {
-              return <div />;
-            }
-
-            return (
-              <div ref={registerChild}>
-                <Grid
-                  ref={this.setGridRef}
-                  className={styles.grid}
-                  autoHeight={true}
-                  height={height}
-                  columnCount={1}
-                  columnWidth={width}
-                  rowCount={items.length}
-                  rowHeight={rowHeight}
-                  width={width}
-                  onScroll={onChildScroll}
-                  scrollTop={scrollTop}
-                  overscanRowCount={2}
-                  cellRenderer={this.cellRenderer}
-                  scrollToAlignment={'start'}
-                  isScrollingOptOut={true}
-                />
-              </div>
-            );
-          }
-          }
-        </WindowScroller>
-      </Measure>
-    );
-  }
-}
-
-SeriesIndexOverviews.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sortKey: PropTypes.string,
-  overviewOptions: PropTypes.object.isRequired,
-  scrollTop: PropTypes.number.isRequired,
-  jumpToCharacter: PropTypes.string,
-  scroller: PropTypes.instanceOf(Element).isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  timeFormat: PropTypes.string.isRequired
-};
-
-export default SeriesIndexOverviews;

frontend/src/Series/Index/Overview/SeriesIndexOverviews.tsx

@@ -0,0 +1,203 @@
+import { throttle } from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
+import useMeasure from 'Helpers/Hooks/useMeasure';
+import Series from 'Series/Series';
+import dimensions from 'Styles/Variables/dimensions';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import selectOverviewOptions from './selectOverviewOptions';
+import SeriesIndexOverview from './SeriesIndexOverview';
+
+// Poster container dimensions
+const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(
+  dimensions.seriesIndexColumnPaddingSmallScreen
+);
+const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
+const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
+const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
+const bodyPaddingSmallScreen = parseInt(
+  dimensions.pageContentBodyPaddingSmallScreen
+);
+
+interface RowItemData {
+  items: Series[];
+  sortKey: string;
+  posterWidth: number;
+  posterHeight: number;
+  rowHeight: number;
+  isSmallScreen: boolean;
+}
+
+interface SeriesIndexOverviewsProps {
+  items: Series[];
+  sortKey?: string;
+  sortDirection?: string;
+  jumpToCharacter?: string;
+  scrollTop?: number;
+  scrollerRef: React.MutableRefObject<HTMLElement>;
+  isSmallScreen: boolean;
+}
+
+const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
+  index,
+  style,
+  data,
+}) => {
+  const { items, ...otherData } = data;
+
+  if (index >= items.length) {
+    return null;
+  }
+
+  const series = items[index];
+
+  return (
+    <div style={style}>
+      <SeriesIndexOverview seriesId={series.id} {...otherData} />
+    </div>
+  );
+};
+
+function getWindowScrollTopPosition() {
+  return document.documentElement.scrollTop || document.body.scrollTop || 0;
+}
+
+function SeriesIndexOverviews(props: SeriesIndexOverviewsProps) {
+  const { items, sortKey, jumpToCharacter, isSmallScreen, scrollerRef } = props;
+
+  const { size: posterSize, detailedProgressBar } = useSelector(
+    selectOverviewOptions
+  );
+  const listRef: React.MutableRefObject<List> = useRef();
+  const [measureRef, bounds] = useMeasure();
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  const posterWidth = useMemo(() => {
+    const maxiumPosterWidth = isSmallScreen ? 152 : 162;
+
+    if (posterSize === 'large') {
+      return maxiumPosterWidth;
+    }
+
+    if (posterSize === 'medium') {
+      return Math.floor(maxiumPosterWidth * 0.75);
+    }
+
+    return Math.floor(maxiumPosterWidth * 0.5);
+  }, [posterSize, isSmallScreen]);
+
+  const posterHeight = useMemo(() => {
+    return Math.ceil((250 / 170) * posterWidth);
+  }, [posterWidth]);
+
+  const rowHeight = useMemo(() => {
+    const heights = [
+      posterHeight,
+      detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
+      isSmallScreen ? columnPaddingSmallScreen : columnPadding,
+    ];
+
+    return heights.reduce((acc, height) => acc + height, 0);
+  }, [detailedProgressBar, posterHeight, isSmallScreen]);
+
+  useEffect(() => {
+    const current = scrollerRef.current as HTMLElement;
+
+    if (isSmallScreen) {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+
+      return;
+    }
+
+    if (current) {
+      const width = current.clientWidth;
+      const padding =
+        (isSmallScreen ? bodyPaddingSmallScreen : bodyPadding) - 5;
+
+      setSize({
+        width: width - padding * 2,
+        height: window.innerHeight,
+      });
+    }
+  }, [isSmallScreen, scrollerRef, bounds]);
+
+  useEffect(() => {
+    const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
+    const currentScrollerRef = scrollerRef.current;
+
+    const handleScroll = throttle(() => {
+      const { offsetTop = 0 } = currentScrollerRef;
+      const scrollTop =
+        (isSmallScreen
+          ? getWindowScrollTopPosition()
+          : currentScrollerRef.scrollTop) - offsetTop;
+
+      listRef.current.scrollTo(scrollTop);
+    }, 10);
+
+    currentScrollListener.addEventListener('scroll', handleScroll);
+
+    return () => {
+      handleScroll.cancel();
+
+      if (currentScrollListener) {
+        currentScrollListener.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [isSmallScreen, listRef, scrollerRef]);
+
+  useEffect(() => {
+    if (jumpToCharacter) {
+      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+
+      if (index != null) {
+        let scrollTop = index * rowHeight;
+
+        // If the offset is zero go to the top, otherwise offset
+        // by the approximate size of the header + padding (37 + 20).
+        if (scrollTop > 0) {
+          const offset = 57;
+
+          scrollTop += offset;
+        }
+
+        listRef.current.scrollTo(scrollTop);
+        scrollerRef.current.scrollTo(0, scrollTop);
+      }
+    }
+  }, [jumpToCharacter, rowHeight, items, scrollerRef, listRef]);
+
+  return (
+    <div ref={measureRef}>
+      <List<RowItemData>
+        ref={listRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          overflow: 'none',
+        }}
+        width={size.width}
+        height={size.height}
+        itemCount={items.length}
+        itemSize={rowHeight}
+        itemData={{
+          items,
+          sortKey,
+          posterWidth,
+          posterHeight,
+          rowHeight,
+          isSmallScreen,
+        }}
+      >
+        {Row}
+      </List>
+    </div>
+  );
+}
+
+export default SeriesIndexOverviews;

frontend/src/Series/Index/Overview/SeriesIndexOverviewsConnector.js

@@ -1,25 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import SeriesIndexOverviews from './SeriesIndexOverviews';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.seriesIndex.overviewOptions,
-    createUISettingsSelector(),
-    createDimensionsSelector(),
-    (overviewOptions, uiSettings, dimensions) => {
-      return {
-        overviewOptions,
-        showRelativeDates: uiSettings.showRelativeDates,
-        shortDateFormat: uiSettings.shortDateFormat,
-        longDateFormat: uiSettings.longDateFormat,
-        timeFormat: uiSettings.timeFormat,
-        isSmallScreen: dimensions.isSmallScreen
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(SeriesIndexOverviews);

frontend/src/Series/Index/Overview/selectOverviewOptions.ts

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const selectOverviewOptions = createSelector(
+  (state) => state.seriesIndex.overviewOptions,
+  (overviewOptions) => overviewOptions
+);
+
+export default selectOverviewOptions;

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModal.js

@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import SeriesIndexPosterOptionsModalContentConnector from './SeriesIndexPosterOptionsModalContentConnector';
-
-function SeriesIndexPosterOptionsModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <SeriesIndexPosterOptionsModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-SeriesIndexPosterOptionsModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default SeriesIndexPosterOptionsModal;

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModal.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import SeriesIndexPosterOptionsModalContent from './SeriesIndexPosterOptionsModalContent';
+
+interface SeriesIndexPosterOptionsModalProps {
+  isOpen: boolean;
+  onModalClose(...args: unknown[]): unknown;
+}
+
+function SeriesIndexPosterOptionsModal({
+  isOpen,
+  onModalClose,
+}: SeriesIndexPosterOptionsModalProps) {
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <SeriesIndexPosterOptionsModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default SeriesIndexPosterOptionsModal;

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.js

@@ -1,213 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import Button from 'Components/Link/Button';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes } from 'Helpers/Props';
-
-const posterSizeOptions = [
-  { key: 'small', value: 'Small' },
-  { key: 'medium', value: 'Medium' },
-  { key: 'large', value: 'Large' }
-];
-
-class SeriesIndexPosterOptionsModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      detailedProgressBar: props.detailedProgressBar,
-      size: props.size,
-      showTitle: props.showTitle,
-      showMonitored: props.showMonitored,
-      showQualityProfile: props.showQualityProfile,
-      showSearchAction: props.showSearchAction
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      detailedProgressBar,
-      size,
-      showTitle,
-      showMonitored,
-      showQualityProfile,
-      showSearchAction
-    } = this.props;
-
-    const state = {};
-
-    if (detailedProgressBar !== prevProps.detailedProgressBar) {
-      state.detailedProgressBar = detailedProgressBar;
-    }
-
-    if (size !== prevProps.size) {
-      state.size = size;
-    }
-
-    if (showTitle !== prevProps.showTitle) {
-      state.showTitle = showTitle;
-    }
-
-    if (showMonitored !== prevProps.showMonitored) {
-      state.showMonitored = showMonitored;
-    }
-
-    if (showQualityProfile !== prevProps.showQualityProfile) {
-      state.showQualityProfile = showQualityProfile;
-    }
-
-    if (showSearchAction !== prevProps.showSearchAction) {
-      state.showSearchAction = showSearchAction;
-    }
-
-    if (!_.isEmpty(state)) {
-      this.setState(state);
-    }
-  }
-
-  //
-  // Listeners
-
-  onChangePosterOption = ({ name, value }) => {
-    this.setState({
-      [name]: value
-    }, () => {
-      this.props.onChangePosterOption({ [name]: value });
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      onModalClose
-    } = this.props;
-
-    const {
-      detailedProgressBar,
-      size,
-      showTitle,
-      showMonitored,
-      showQualityProfile,
-      showSearchAction
-    } = this.state;
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          Poster Options
-        </ModalHeader>
-
-        <ModalBody>
-          <Form>
-            <FormGroup>
-              <FormLabel>Poster Size</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.SELECT}
-                name="size"
-                value={size}
-                values={posterSizeOptions}
-                onChange={this.onChangePosterOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Detailed Progress Bar</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="detailedProgressBar"
-                value={detailedProgressBar}
-                helpText="Show text on progress bar"
-                onChange={this.onChangePosterOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Title</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showTitle"
-                value={showTitle}
-                helpText="Show series title under poster"
-                onChange={this.onChangePosterOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Monitored</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showMonitored"
-                value={showMonitored}
-                helpText="Show monitored status under poster"
-                onChange={this.onChangePosterOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Quality Profile</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showQualityProfile"
-                value={showQualityProfile}
-                helpText="Show quality profile under poster"
-                onChange={this.onChangePosterOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Search</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showSearchAction"
-                value={showSearchAction}
-                helpText="Show search button on hover"
-                onChange={this.onChangePosterOption}
-              />
-            </FormGroup>
-          </Form>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button
-            onPress={onModalClose}
-          >
-            Close
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-SeriesIndexPosterOptionsModalContent.propTypes = {
-  size: PropTypes.string.isRequired,
-  showTitle: PropTypes.bool.isRequired,
-  showMonitored: PropTypes.bool.isRequired,
-  showQualityProfile: PropTypes.bool.isRequired,
-  detailedProgressBar: PropTypes.bool.isRequired,
-  showSearchAction: PropTypes.bool.isRequired,
-  onChangePosterOption: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default SeriesIndexPosterOptionsModalContent;

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContent.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import selectPosterOptions from 'Series/Index/Posters/selectPosterOptions';
+import { setSeriesPosterOption } from 'Store/Actions/seriesIndexActions';
+
+const posterSizeOptions = [
+  { key: 'small', value: 'Small' },
+  { key: 'medium', value: 'Medium' },
+  { key: 'large', value: 'Large' },
+];
+
+interface SeriesIndexPosterOptionsModalContentProps {
+  onModalClose(...args: unknown[]): unknown;
+}
+
+function SeriesIndexPosterOptionsModalContent(
+  props: SeriesIndexPosterOptionsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const posterOptions = useSelector(selectPosterOptions);
+
+  const {
+    detailedProgressBar,
+    size,
+    showTitle,
+    showMonitored,
+    showQualityProfile,
+    showSearchAction,
+  } = posterOptions;
+
+  const dispatch = useDispatch();
+
+  const onPosterOptionChange = useCallback(
+    ({ name, value }) => {
+      dispatch(setSeriesPosterOption({ [name]: value }));
+    },
+    [dispatch]
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Poster Options</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>Poster Size</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="size"
+              value={size}
+              values={posterSizeOptions}
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Detailed Progress Bar</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="detailedProgressBar"
+              value={detailedProgressBar}
+              helpText="Show text on progress bar"
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Title</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showTitle"
+              value={showTitle}
+              helpText="Show series title under poster"
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Monitored</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showMonitored"
+              value={showMonitored}
+              helpText="Show monitored status under poster"
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Quality Profile</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showQualityProfile"
+              value={showQualityProfile}
+              helpText="Show quality profile under poster"
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Show Search</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showSearchAction"
+              value={showSearchAction}
+              helpText="Show search button on hover"
+              onChange={onPosterOptionChange}
+            />
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>Close</Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default SeriesIndexPosterOptionsModalContent;

frontend/src/Series/Index/Posters/Options/SeriesIndexPosterOptionsModalContentConnector.js

@@ -1,23 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { setSeriesPosterOption } from 'Store/Actions/seriesIndexActions';
-import SeriesIndexPosterOptionsModalContent from './SeriesIndexPosterOptionsModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.seriesIndex,
-    (seriesIndex) => {
-      return seriesIndex.posterOptions;
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onChangePosterOption(payload) {
-      dispatch(setSeriesPosterOption(payload));
-    }
-  };
-}
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexPosterOptionsModalContent);

frontend/src/Series/Index/Posters/SeriesIndexPoster.js

@@ -1,291 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Label from 'Components/Label';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import { icons } from 'Helpers/Props';
-import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
-import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
-import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
-import SeriesPoster from 'Series/SeriesPoster';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import SeriesIndexPosterInfo from './SeriesIndexPosterInfo';
-import styles from './SeriesIndexPoster.css';
-
-class SeriesIndexPoster extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      hasPosterError: false,
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onEditSeriesPress = () => {
-    this.setState({ isEditSeriesModalOpen: true });
-  };
-
-  onEditSeriesModalClose = () => {
-    this.setState({ isEditSeriesModalOpen: false });
-  };
-
-  onDeleteSeriesPress = () => {
-    this.setState({
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: true
-    });
-  };
-
-  onDeleteSeriesModalClose = () => {
-    this.setState({ isDeleteSeriesModalOpen: false });
-  };
-
-  onPosterLoad = () => {
-    if (this.state.hasPosterError) {
-      this.setState({ hasPosterError: false });
-    }
-  };
-
-  onPosterLoadError = () => {
-    if (!this.state.hasPosterError) {
-      this.setState({ hasPosterError: true });
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      id,
-      title,
-      monitored,
-      status,
-      titleSlug,
-      nextAiring,
-      statistics,
-      images,
-      posterWidth,
-      posterHeight,
-      detailedProgressBar,
-      showTitle,
-      showMonitored,
-      showQualityProfile,
-      qualityProfile,
-      showSearchAction,
-      showRelativeDates,
-      shortDateFormat,
-      timeFormat,
-      isRefreshingSeries,
-      isSearchingSeries,
-      onRefreshSeriesPress,
-      onSearchPress,
-      ...otherProps
-    } = this.props;
-
-    const {
-      seasonCount,
-      episodeCount,
-      episodeFileCount,
-      totalEpisodeCount,
-      sizeOnDisk
-    } = statistics;
-
-    const {
-      hasPosterError,
-      isEditSeriesModalOpen,
-      isDeleteSeriesModalOpen
-    } = this.state;
-
-    const link = `/series/${titleSlug}`;
-
-    const elementStyle = {
-      width: `${posterWidth}px`,
-      height: `${posterHeight}px`
-    };
-
-    return (
-      <div className={styles.content}>
-        <div className={styles.posterContainer}>
-          <Label className={styles.controls}>
-            <SpinnerIconButton
-              className={styles.action}
-              name={icons.REFRESH}
-              title="Refresh series"
-              isSpinning={isRefreshingSeries}
-              onPress={onRefreshSeriesPress}
-            />
-
-            {
-              showSearchAction &&
-                <SpinnerIconButton
-                  className={styles.action}
-                  name={icons.SEARCH}
-                  title="Search for monitored episodes"
-                  isSpinning={isSearchingSeries}
-                  onPress={onSearchPress}
-                />
-            }
-
-            <IconButton
-              className={styles.action}
-              name={icons.EDIT}
-              title="Edit Series"
-              onPress={this.onEditSeriesPress}
-            />
-          </Label>
-
-          {
-            status === 'ended' &&
-              <div
-                className={styles.ended}
-                title="Ended"
-              />
-          }
-
-          <Link
-            className={styles.link}
-            style={elementStyle}
-            to={link}
-          >
-            <SeriesPoster
-              style={elementStyle}
-              images={images}
-              size={250}
-              lazy={false}
-              overflow={true}
-              onError={this.onPosterLoadError}
-              onLoad={this.onPosterLoad}
-            />
-
-            {
-              hasPosterError &&
-                <div className={styles.overlayTitle}>
-                  {title}
-                </div>
-            }
-          </Link>
-        </div>
-
-        <SeriesIndexProgressBar
-          monitored={monitored}
-          status={status}
-          episodeCount={episodeCount}
-          episodeFileCount={episodeFileCount}
-          totalEpisodeCount={totalEpisodeCount}
-          posterWidth={posterWidth}
-          detailedProgressBar={detailedProgressBar}
-        />
-
-        {
-          showTitle &&
-            <div className={styles.title}>
-              {title}
-            </div>
-        }
-
-        {
-          showMonitored &&
-            <div className={styles.title}>
-              {monitored ? 'Monitored' : 'Unmonitored'}
-            </div>
-        }
-
-        {
-          showQualityProfile &&
-            <div className={styles.title}>
-              {qualityProfile.name}
-            </div>
-        }
-
-        {
-          nextAiring &&
-            <div className={styles.nextAiring}>
-              {
-                getRelativeDate(
-                  nextAiring,
-                  shortDateFormat,
-                  showRelativeDates,
-                  {
-                    timeFormat,
-                    timeForToday: true
-                  }
-                )
-              }
-            </div>
-        }
-
-        <SeriesIndexPosterInfo
-          seasonCount={seasonCount}
-          sizeOnDisk={sizeOnDisk}
-          qualityProfile={qualityProfile}
-          showQualityProfile={showQualityProfile}
-          showRelativeDates={showRelativeDates}
-          shortDateFormat={shortDateFormat}
-          timeFormat={timeFormat}
-          {...otherProps}
-        />
-
-        <EditSeriesModalConnector
-          isOpen={isEditSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onEditSeriesModalClose}
-          onDeleteSeriesPress={this.onDeleteSeriesPress}
-        />
-
-        <DeleteSeriesModal
-          isOpen={isDeleteSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onDeleteSeriesModalClose}
-        />
-      </div>
-    );
-  }
-}
-
-SeriesIndexPoster.propTypes = {
-  id: PropTypes.number.isRequired,
-  title: PropTypes.string.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  titleSlug: PropTypes.string.isRequired,
-  nextAiring: PropTypes.string,
-  statistics: PropTypes.object.isRequired,
-  images: PropTypes.arrayOf(PropTypes.object).isRequired,
-  posterWidth: PropTypes.number.isRequired,
-  posterHeight: PropTypes.number.isRequired,
-  detailedProgressBar: PropTypes.bool.isRequired,
-  showTitle: PropTypes.bool.isRequired,
-  showMonitored: PropTypes.bool.isRequired,
-  showQualityProfile: PropTypes.bool.isRequired,
-  qualityProfile: PropTypes.object.isRequired,
-  showSearchAction: PropTypes.bool.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isRefreshingSeries: PropTypes.bool.isRequired,
-  isSearchingSeries: PropTypes.bool.isRequired,
-  onRefreshSeriesPress: PropTypes.func.isRequired,
-  onSearchPress: PropTypes.func.isRequired
-};
-
-SeriesIndexPoster.defaultProps = {
-  statistics: {
-    seasonCount: 0,
-    episodeCount: 0,
-    episodeFileCount: 0,
-    totalEpisodeCount: 0
-  }
-};
-
-export default SeriesIndexPoster;

frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
+import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import { icons } from 'Helpers/Props';
+import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
+import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
+import SeriesIndexProgressBar from 'Series/Index/ProgressBar/SeriesIndexProgressBar';
+import SeriesPoster from 'Series/SeriesPoster';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import createSeriesIndexItemSelector from '../createSeriesIndexItemSelector';
+import selectPosterOptions from './selectPosterOptions';
+import SeriesIndexPosterInfo from './SeriesIndexPosterInfo';
+import styles from './SeriesIndexPoster.css';
+
+interface SeriesIndexPosterProps {
+  seriesId: number;
+  sortKey: string;
+  posterWidth: number;
+  posterHeight: number;
+}
+
+function SeriesIndexPoster(props: SeriesIndexPosterProps) {
+  const { seriesId, sortKey, posterWidth, posterHeight } = props;
+
+  const { series, qualityProfile, isRefreshingSeries, isSearchingSeries } =
+    useSelector(createSeriesIndexItemSelector(props.seriesId));
+
+  const {
+    detailedProgressBar,
+    showTitle,
+    showMonitored,
+    showQualityProfile,
+    showSearchAction,
+  } = useSelector(selectPosterOptions);
+
+  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
+
+  const {
+    title,
+    monitored,
+    status,
+    path,
+    titleSlug,
+    nextAiring,
+    statistics,
+    images,
+  } = series;
+
+  const {
+    seasonCount,
+    episodeCount,
+    episodeFileCount,
+    totalEpisodeCount,
+    sizeOnDisk,
+  } = statistics;
+
+  const dispatch = useDispatch();
+  const [hasPosterError, setHasPosterError] = useState(false);
+  const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
+  const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
+
+  const onRefreshPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: REFRESH_SERIES,
+        seriesId,
+      })
+    );
+  }, [seriesId, dispatch]);
+
+  const onSearchPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: SERIES_SEARCH,
+        seriesId,
+      })
+    );
+  }, [seriesId, dispatch]);
+
+  const onPosterLoadError = useCallback(() => {
+    setHasPosterError(true);
+  }, [setHasPosterError]);
+
+  const onPosterLoad = useCallback(() => {
+    setHasPosterError(false);
+  }, [setHasPosterError]);
+
+  const onEditSeriesPress = useCallback(() => {
+    setIsEditSeriesModalOpen(true);
+  }, [setIsEditSeriesModalOpen]);
+
+  const onEditSeriesModalClose = useCallback(() => {
+    setIsEditSeriesModalOpen(false);
+  }, [setIsEditSeriesModalOpen]);
+
+  const onDeleteSeriesPress = useCallback(() => {
+    setIsEditSeriesModalOpen(false);
+    setIsDeleteSeriesModalOpen(true);
+  }, [setIsDeleteSeriesModalOpen]);
+
+  const onDeleteSeriesModalClose = useCallback(() => {
+    setIsDeleteSeriesModalOpen(false);
+  }, [setIsDeleteSeriesModalOpen]);
+
+  const link = `/series/${titleSlug}`;
+
+  const elementStyle = {
+    width: `${posterWidth}px`,
+    height: `${posterHeight}px`,
+  };
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.posterContainer}>
+        <Label className={styles.controls}>
+          <SpinnerIconButton
+            className={styles.action}
+            name={icons.REFRESH}
+            title="Refresh series"
+            isSpinning={isRefreshingSeries}
+            onPress={onRefreshPress}
+          />
+
+          {showSearchAction ? (
+            <SpinnerIconButton
+              className={styles.action}
+              name={icons.SEARCH}
+              title="Search for monitored episodes"
+              isSpinning={isSearchingSeries}
+              onPress={onSearchPress}
+            />
+          ) : null}
+
+          <IconButton
+            className={styles.action}
+            name={icons.EDIT}
+            title="Edit Series"
+            onPress={onEditSeriesPress}
+          />
+        </Label>
+
+        {status === 'ended' ? (
+          <div className={styles.ended} title="Ended" />
+        ) : null}
+
+        <Link className={styles.link} style={elementStyle} to={link}>
+          <SeriesPoster
+            style={elementStyle}
+            images={images}
+            size={250}
+            lazy={false}
+            overflow={true}
+            onError={onPosterLoadError}
+            onLoad={onPosterLoad}
+          />
+
+          {hasPosterError ? (
+            <div className={styles.overlayTitle}>{title}</div>
+          ) : null}
+        </Link>
+      </div>
+
+      <SeriesIndexProgressBar
+        monitored={monitored}
+        status={status}
+        episodeCount={episodeCount}
+        episodeFileCount={episodeFileCount}
+        totalEpisodeCount={totalEpisodeCount}
+        posterWidth={posterWidth}
+        detailedProgressBar={detailedProgressBar}
+      />
+
+      {showTitle ? <div className={styles.title}>{title}</div> : null}
+
+      {showMonitored ? (
+        <div className={styles.title}>
+          {monitored ? 'Monitored' : 'Unmonitored'}
+        </div>
+      ) : null}
+
+      {showQualityProfile ? (
+        <div className={styles.title}>{qualityProfile.name}</div>
+      ) : null}
+
+      {nextAiring ? (
+        <div className={styles.nextAiring}>
+          {getRelativeDate(nextAiring, shortDateFormat, showRelativeDates, {
+            timeFormat,
+            timeForToday: true,
+          })}
+        </div>
+      ) : null}
+
+      <SeriesIndexPosterInfo
+        seasonCount={seasonCount}
+        sizeOnDisk={sizeOnDisk}
+        path={path}
+        qualityProfile={qualityProfile}
+        showQualityProfile={showQualityProfile}
+        showRelativeDates={showRelativeDates}
+        sortKey={sortKey}
+        shortDateFormat={shortDateFormat}
+        timeFormat={timeFormat}
+      />
+
+      <EditSeriesModalConnector
+        isOpen={isEditSeriesModalOpen}
+        seriesId={seriesId}
+        onModalClose={onEditSeriesModalClose}
+        onDeleteSeriesPress={onDeleteSeriesPress}
+      />
+
+      <DeleteSeriesModal
+        isOpen={isDeleteSeriesModalOpen}
+        seriesId={seriesId}
+        onModalClose={onDeleteSeriesModalClose}
+      />
+    </div>
+  );
+}
+
+export default SeriesIndexPoster;

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.js

@@ -1,125 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import formatBytes from 'Utilities/Number/formatBytes';
-import styles from './SeriesIndexPosterInfo.css';
-
-function SeriesIndexPosterInfo(props) {
-  const {
-    network,
-    qualityProfile,
-    showQualityProfile,
-    previousAiring,
-    added,
-    seasonCount,
-    path,
-    sizeOnDisk,
-    sortKey,
-    showRelativeDates,
-    shortDateFormat,
-    timeFormat
-  } = props;
-
-  if (sortKey === 'network' && network) {
-    return (
-      <div className={styles.info}>
-        {network}
-      </div>
-    );
-  }
-
-  if (sortKey === 'qualityProfileId' && !showQualityProfile) {
-    return (
-      <div className={styles.info}>
-        {qualityProfile.name}
-      </div>
-    );
-  }
-
-  if (sortKey === 'previousAiring' && previousAiring) {
-    return (
-      <div className={styles.info}>
-        {
-          getRelativeDate(
-            previousAiring,
-            shortDateFormat,
-            showRelativeDates,
-            {
-              timeFormat,
-              timeForToday: true
-            }
-          )
-        }
-      </div>
-    );
-  }
-
-  if (sortKey === 'added' && added) {
-    const addedDate = getRelativeDate(
-      added,
-      shortDateFormat,
-      showRelativeDates,
-      {
-        timeFormat,
-        timeForToday: false
-      }
-    );
-
-    return (
-      <div className={styles.info}>
-        {`Added ${addedDate}`}
-      </div>
-    );
-  }
-
-  if (sortKey === 'seasonCount') {
-    let seasons = '1 season';
-
-    if (seasonCount === 0) {
-      seasons = 'No seasons';
-    } else if (seasonCount > 1) {
-      seasons = `${seasonCount} seasons`;
-    }
-
-    return (
-      <div className={styles.info}>
-        {seasons}
-      </div>
-    );
-  }
-
-  if (sortKey === 'path') {
-    return (
-      <div className={styles.info}>
-        {path}
-      </div>
-    );
-  }
-
-  if (sortKey === 'sizeOnDisk') {
-    return (
-      <div className={styles.info}>
-        {formatBytes(sizeOnDisk)}
-      </div>
-    );
-  }
-
-  return null;
-}
-
-SeriesIndexPosterInfo.propTypes = {
-  network: PropTypes.string,
-  showQualityProfile: PropTypes.bool.isRequired,
-  qualityProfile: PropTypes.object.isRequired,
-  previousAiring: PropTypes.string,
-  added: PropTypes.string,
-  seasonCount: PropTypes.number.isRequired,
-  path: PropTypes.string.isRequired,
-  sizeOnDisk: PropTypes.number,
-  sortKey: PropTypes.string.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired
-};
-
-export default SeriesIndexPosterInfo;

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import styles from './SeriesIndexPosterInfo.css';
+
+interface SeriesIndexPosterInfoProps {
+  network?: string;
+  showQualityProfile: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  qualityProfile: any;
+  previousAiring?: string;
+  added?: string;
+  seasonCount: number;
+  path: string;
+  sizeOnDisk?: number;
+  sortKey: string;
+  showRelativeDates: boolean;
+  shortDateFormat: string;
+  timeFormat: string;
+}
+
+function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
+  const {
+    network,
+    qualityProfile,
+    showQualityProfile,
+    previousAiring,
+    added,
+    seasonCount,
+    path,
+    sizeOnDisk,
+    sortKey,
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat,
+  } = props;
+
+  if (sortKey === 'network' && network) {
+    return <div className={styles.info}>{network}</div>;
+  }
+
+  if (sortKey === 'qualityProfileId' && !showQualityProfile) {
+    return <div className={styles.info}>{qualityProfile.name}</div>;
+  }
+
+  if (sortKey === 'previousAiring' && previousAiring) {
+    return (
+      <div className={styles.info}>
+        {getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
+          timeFormat,
+          timeForToday: true,
+        })}
+      </div>
+    );
+  }
+
+  if (sortKey === 'added' && added) {
+    const addedDate = getRelativeDate(
+      added,
+      shortDateFormat,
+      showRelativeDates,
+      {
+        timeFormat,
+        timeForToday: false,
+      }
+    );
+
+    return <div className={styles.info}>{`Added ${addedDate}`}</div>;
+  }
+
+  if (sortKey === 'seasonCount') {
+    let seasons = '1 season';
+
+    if (seasonCount === 0) {
+      seasons = 'No seasons';
+    } else if (seasonCount > 1) {
+      seasons = `${seasonCount} seasons`;
+    }
+
+    return <div className={styles.info}>{seasons}</div>;
+  }
+
+  if (sortKey === 'path') {
+    return <div className={styles.info}>{path}</div>;
+  }
+
+  if (sortKey === 'sizeOnDisk') {
+    return <div className={styles.info}>{formatBytes(sizeOnDisk)}</div>;
+  }
+
+  return null;
+}
+
+export default SeriesIndexPosterInfo;

frontend/src/Series/Index/Posters/SeriesIndexPosters.css

@@ -1,3 +0,0 @@
-.grid {
-  flex: 1 0 auto;
-}

frontend/src/Series/Index/Posters/SeriesIndexPosters.js

@@ -1,333 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Grid, WindowScroller } from 'react-virtualized';
-import Measure from 'Components/Measure';
-import SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
-import dimensions from 'Styles/Variables/dimensions';
-import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
-import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
-import SeriesIndexPoster from './SeriesIndexPoster';
-import styles from './SeriesIndexPosters.css';
-
-// Poster container dimensions
-const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
-const columnPaddingSmallScreen = parseInt(dimensions.seriesIndexColumnPaddingSmallScreen);
-const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
-const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
-
-const additionalColumnCount = {
-  small: 3,
-  medium: 2,
-  large: 1
-};
-
-function calculateColumnWidth(width, posterSize, isSmallScreen) {
-  const maxiumColumnWidth = isSmallScreen ? 172 : 182;
-  const columns = Math.floor(width / maxiumColumnWidth);
-  const remainder = width % maxiumColumnWidth;
-
-  if (remainder === 0 && posterSize === 'large') {
-    return maxiumColumnWidth;
-  }
-
-  return Math.floor(width / (columns + additionalColumnCount[posterSize]));
-}
-
-function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions) {
-  const {
-    detailedProgressBar,
-    showTitle,
-    showMonitored,
-    showQualityProfile
-  } = posterOptions;
-
-  const nextAiringHeight = 19;
-
-  const heights = [
-    posterHeight,
-    detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
-    nextAiringHeight,
-    isSmallScreen ? columnPaddingSmallScreen : columnPadding
-  ];
-
-  if (showTitle) {
-    heights.push(19);
-  }
-
-  if (showMonitored) {
-    heights.push(19);
-  }
-
-  if (showQualityProfile) {
-    heights.push(19);
-  }
-
-  switch (sortKey) {
-    case 'network':
-    case 'seasons':
-    case 'previousAiring':
-    case 'added':
-    case 'path':
-    case 'sizeOnDisk':
-      heights.push(19);
-      break;
-    case 'qualityProfileId':
-      if (!showQualityProfile) {
-        heights.push(19);
-      }
-      break;
-    default:
-      // No need to add a height of 0
-  }
-
-  return heights.reduce((acc, height) => acc + height, 0);
-}
-
-function calculatePosterHeight(posterWidth) {
-  return Math.ceil((250 / 170) * posterWidth);
-}
-
-class SeriesIndexPosters extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      width: 0,
-      columnWidth: 182,
-      columnCount: 1,
-      posterWidth: 162,
-      posterHeight: 238,
-      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}),
-      scrollRestored: false
-    };
-
-    this._isInitialized = false;
-    this._grid = null;
-    this._padding = props.isSmallScreen ? columnPaddingSmallScreen : columnPadding;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      items,
-      sortKey,
-      posterOptions,
-      jumpToCharacter,
-      scrollTop,
-      isSmallScreen
-    } = this.props;
-
-    const {
-      width,
-      columnWidth,
-      columnCount,
-      rowHeight,
-      scrollRestored
-    } = this.state;
-
-    if (prevProps.sortKey !== sortKey ||
-        prevProps.posterOptions !== posterOptions) {
-      this.calculateGrid(width, isSmallScreen);
-    }
-
-    if (this._grid &&
-        (prevState.width !== width ||
-            prevState.columnWidth !== columnWidth ||
-            prevState.columnCount !== columnCount ||
-            prevState.rowHeight !== rowHeight ||
-            hasDifferentItemsOrOrder(prevProps.items, items))) {
-      // recomputeGridSize also forces Grid to discard its cache of rendered cells
-      this._grid.recomputeGridSize();
-    }
-
-    if (this._grid && scrollTop !== 0 && !scrollRestored) {
-      this.setState({ scrollRestored: true });
-      this._grid.scrollToPosition({ scrollTop });
-    }
-
-    if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
-
-      if (this._grid && index != null) {
-        const row = Math.floor(index / columnCount);
-
-        this._grid.scrollToCell({
-          rowIndex: row,
-          columnIndex: 0
-        });
-      }
-    }
-  }
-
-  //
-  // Control
-
-  setGridRef = (ref) => {
-    this._grid = ref;
-  };
-
-  calculateGrid = (width = this.state.width, isSmallScreen) => {
-    const {
-      sortKey,
-      posterOptions
-    } = this.props;
-
-    const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
-    const columnCount = Math.max(Math.floor(width / columnWidth), 1);
-    const posterWidth = columnWidth - this._padding * 2;
-    const posterHeight = calculatePosterHeight(posterWidth);
-    const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
-
-    this.setState({
-      width,
-      columnWidth,
-      columnCount,
-      posterWidth,
-      posterHeight,
-      rowHeight
-    });
-  };
-
-  cellRenderer = ({ key, rowIndex, columnIndex, style }) => {
-    const {
-      items,
-      sortKey,
-      posterOptions,
-      showRelativeDates,
-      shortDateFormat,
-      timeFormat
-    } = this.props;
-
-    const {
-      posterWidth,
-      posterHeight,
-      columnCount
-    } = this.state;
-
-    const {
-      detailedProgressBar,
-      showTitle,
-      showMonitored,
-      showQualityProfile
-    } = posterOptions;
-
-    const series = items[rowIndex * columnCount + columnIndex];
-
-    if (!series) {
-      return null;
-    }
-
-    return (
-      <div
-        key={key}
-        style={{
-          ...style,
-          padding: this._padding
-        }}
-      >
-        <SeriesIndexItemConnector
-          key={series.id}
-          component={SeriesIndexPoster}
-          sortKey={sortKey}
-          posterWidth={posterWidth}
-          posterHeight={posterHeight}
-          detailedProgressBar={detailedProgressBar}
-          showTitle={showTitle}
-          showMonitored={showMonitored}
-          showQualityProfile={showQualityProfile}
-          showRelativeDates={showRelativeDates}
-          shortDateFormat={shortDateFormat}
-          timeFormat={timeFormat}
-          style={style}
-          seriesId={series.id}
-          qualityProfileId={series.qualityProfileId}
-        />
-      </div>
-    );
-  };
-
-  //
-  // Listeners
-
-  onMeasure = ({ width }) => {
-    this.calculateGrid(width, this.props.isSmallScreen);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      scroller,
-      items,
-      isSmallScreen
-    } = this.props;
-
-    const {
-      width,
-      columnWidth,
-      columnCount,
-      rowHeight
-    } = this.state;
-
-    const rowCount = Math.ceil(items.length / columnCount);
-
-    return (
-      <Measure
-        whitelist={['width']}
-        onMeasure={this.onMeasure}
-      >
-        <WindowScroller
-          scrollElement={isSmallScreen ? undefined : scroller}
-        >
-          {({ height, registerChild, onChildScroll, scrollTop }) => {
-            if (!height) {
-              return <div />;
-            }
-
-            return (
-              <div ref={registerChild}>
-                <Grid
-                  ref={this.setGridRef}
-                  className={styles.grid}
-                  autoHeight={true}
-                  height={height}
-                  columnCount={columnCount}
-                  columnWidth={columnWidth}
-                  rowCount={rowCount}
-                  rowHeight={rowHeight}
-                  width={width}
-                  onScroll={onChildScroll}
-                  scrollTop={scrollTop}
-                  overscanRowCount={2}
-                  cellRenderer={this.cellRenderer}
-                  scrollToAlignment={'start'}
-                  isScrollingOptOut={true}
-                />
-              </div>
-            );
-          }
-          }
-        </WindowScroller>
-      </Measure>
-    );
-  }
-}
-
-SeriesIndexPosters.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sortKey: PropTypes.string,
-  posterOptions: PropTypes.object.isRequired,
-  jumpToCharacter: PropTypes.string,
-  scrollTop: PropTypes.number.isRequired,
-  scroller: PropTypes.instanceOf(Element).isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  timeFormat: PropTypes.string.isRequired
-};
-
-export default SeriesIndexPosters;

frontend/src/Series/Index/Posters/SeriesIndexPosters.tsx

@@ -0,0 +1,282 @@
+import { throttle } from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { FixedSizeGrid as Grid, GridChildComponentProps } from 'react-window';
+import { createSelector } from 'reselect';
+import useMeasure from 'Helpers/Hooks/useMeasure';
+import SortDirection from 'Helpers/Props/SortDirection';
+import SeriesIndexPoster from 'Series/Index/Posters/SeriesIndexPoster';
+import Series from 'Series/Series';
+import dimensions from 'Styles/Variables/dimensions';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+
+const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
+const bodyPaddingSmallScreen = parseInt(
+  dimensions.pageContentBodyPaddingSmallScreen
+);
+const columnPadding = parseInt(dimensions.seriesIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(
+  dimensions.seriesIndexColumnPaddingSmallScreen
+);
+const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
+const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
+
+const ADDITIONAL_COLUMN_COUNT = {
+  small: 3,
+  medium: 2,
+  large: 1,
+};
+
+interface CellItemData {
+  layout: {
+    columnCount: number;
+    padding: number;
+    posterWidth: number;
+    posterHeight: number;
+  };
+  items: Series[];
+  sortKey: string;
+}
+
+interface SeriesIndexPostersProps {
+  items: Series[];
+  sortKey?: string;
+  sortDirection?: SortDirection;
+  jumpToCharacter?: string;
+  scrollTop?: number;
+  scrollerRef: React.MutableRefObject<HTMLElement>;
+  isSmallScreen: boolean;
+}
+
+const seriesIndexSelector = createSelector(
+  (state) => state.seriesIndex.posterOptions,
+  (posterOptions) => {
+    return {
+      posterOptions,
+    };
+  }
+);
+
+const Cell: React.FC<GridChildComponentProps<CellItemData>> = ({
+  columnIndex,
+  rowIndex,
+  style,
+  data,
+}) => {
+  const { layout, items, sortKey } = data;
+
+  const { columnCount, padding, posterWidth, posterHeight } = layout;
+
+  const index = rowIndex * columnCount + columnIndex;
+
+  if (index >= items.length) {
+    return null;
+  }
+
+  const series = items[index];
+
+  return (
+    <div
+      style={{
+        padding,
+        ...style,
+      }}
+    >
+      <SeriesIndexPoster
+        seriesId={series.id}
+        sortKey={sortKey}
+        posterWidth={posterWidth}
+        posterHeight={posterHeight}
+      />
+    </div>
+  );
+};
+
+function getWindowScrollTopPosition() {
+  return document.documentElement.scrollTop || document.body.scrollTop || 0;
+}
+
+export default function SeriesIndexPosters(props: SeriesIndexPostersProps) {
+  const { scrollerRef, items, sortKey, jumpToCharacter, isSmallScreen } = props;
+
+  const { posterOptions } = useSelector(seriesIndexSelector);
+  const ref: React.MutableRefObject<Grid> = useRef();
+  const [measureRef, bounds] = useMeasure();
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  const columnWidth = useMemo(() => {
+    const { width } = size;
+    const maximumColumnWidth = isSmallScreen ? 172 : 182;
+    const columns = Math.floor(width / maximumColumnWidth);
+    const remainder = width % maximumColumnWidth;
+    return remainder === 0
+      ? maximumColumnWidth
+      : Math.floor(
+          width / (columns + ADDITIONAL_COLUMN_COUNT[posterOptions.size])
+        );
+  }, [isSmallScreen, posterOptions, size]);
+
+  const columnCount = useMemo(
+    () => Math.max(Math.floor(size.width / columnWidth), 1),
+    [size, columnWidth]
+  );
+  const padding = props.isSmallScreen
+    ? columnPaddingSmallScreen
+    : columnPadding;
+  const posterWidth = columnWidth - padding * 2;
+  const posterHeight = Math.ceil((250 / 170) * posterWidth);
+
+  const rowHeight = useMemo(() => {
+    const {
+      detailedProgressBar,
+      showTitle,
+      showMonitored,
+      showQualityProfile,
+    } = posterOptions;
+
+    const nextAiringHeight = 19;
+
+    const heights = [
+      posterHeight,
+      detailedProgressBar ? detailedProgressBarHeight : progressBarHeight,
+      nextAiringHeight,
+      isSmallScreen ? columnPaddingSmallScreen : columnPadding,
+    ];
+
+    if (showTitle) {
+      heights.push(19);
+    }
+
+    if (showMonitored) {
+      heights.push(19);
+    }
+
+    if (showQualityProfile) {
+      heights.push(19);
+    }
+
+    switch (sortKey) {
+      case 'network':
+      case 'seasons':
+      case 'previousAiring':
+      case 'added':
+      case 'path':
+      case 'sizeOnDisk':
+        heights.push(19);
+        break;
+      case 'qualityProfileId':
+        if (!showQualityProfile) {
+          heights.push(19);
+        }
+        break;
+      default:
+      // No need to add a height of 0
+    }
+
+    return heights.reduce((acc, height) => acc + height, 0);
+  }, [isSmallScreen, posterOptions, sortKey, posterHeight]);
+
+  useEffect(() => {
+    const current = scrollerRef.current;
+
+    if (isSmallScreen) {
+      const padding = bodyPaddingSmallScreen - 5;
+
+      setSize({
+        width: window.innerWidth - padding * 2,
+        height: window.innerHeight,
+      });
+
+      return;
+    }
+
+    if (current) {
+      const width = current.clientWidth;
+      const padding = bodyPadding - 5;
+
+      setSize({
+        width: width - padding * 2,
+        height: window.innerHeight,
+      });
+    }
+  }, [isSmallScreen, scrollerRef, bounds]);
+
+  useEffect(() => {
+    const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
+    const currentScrollerRef = scrollerRef.current;
+
+    const handleScroll = throttle(() => {
+      const { offsetTop = 0 } = currentScrollerRef;
+      const scrollTop =
+        (isSmallScreen
+          ? getWindowScrollTopPosition()
+          : currentScrollerRef.scrollTop) - offsetTop;
+
+      ref.current.scrollTo({ scrollLeft: 0, scrollTop });
+    }, 10);
+
+    currentScrollListener.addEventListener('scroll', handleScroll);
+
+    return () => {
+      handleScroll.cancel();
+
+      if (currentScrollListener) {
+        currentScrollListener.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [isSmallScreen, ref, scrollerRef]);
+
+  useEffect(() => {
+    if (jumpToCharacter) {
+      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+
+      if (index != null) {
+        const rowIndex = Math.floor(index / columnCount);
+
+        const scrollTop = rowIndex * rowHeight + padding;
+
+        ref.current.scrollTo({ scrollLeft: 0, scrollTop });
+        scrollerRef.current.scrollTo(0, scrollTop);
+      }
+    }
+  }, [
+    jumpToCharacter,
+    rowHeight,
+    columnCount,
+    padding,
+    items,
+    scrollerRef,
+    ref,
+  ]);
+
+  return (
+    <div ref={measureRef}>
+      <Grid<CellItemData>
+        ref={ref}
+        style={{
+          width: '100%',
+          height: '100%',
+          overflow: 'none',
+        }}
+        width={size.width}
+        height={size.height}
+        columnCount={columnCount}
+        columnWidth={columnWidth}
+        rowCount={Math.ceil(items.length / columnCount)}
+        rowHeight={rowHeight}
+        itemData={{
+          layout: {
+            columnCount,
+            padding,
+            posterWidth,
+            posterHeight,
+          },
+          items,
+          sortKey,
+        }}
+      >
+        {Cell}
+      </Grid>
+    </div>
+  );
+}

frontend/src/Series/Index/Posters/SeriesIndexPostersConnector.js

@@ -1,24 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import SeriesIndexPosters from './SeriesIndexPosters';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.seriesIndex.posterOptions,
-    createUISettingsSelector(),
-    createDimensionsSelector(),
-    (posterOptions, uiSettings, dimensions) => {
-      return {
-        posterOptions,
-        showRelativeDates: uiSettings.showRelativeDates,
-        shortDateFormat: uiSettings.shortDateFormat,
-        timeFormat: uiSettings.timeFormat,
-        isSmallScreen: dimensions.isSmallScreen
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(SeriesIndexPosters);

frontend/src/Series/Index/Posters/selectPosterOptions.ts

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const selectPosterOptions = createSelector(
+  (state) => state.seriesIndex.posterOptions,
+  (posterOptions) => posterOptions
+);
+
+export default selectPosterOptions;

frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.tsx

@@ -1,11 +1,20 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import ProgressBar from 'Components/ProgressBar';
 import { sizes } from 'Helpers/Props';
 import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
 import styles from './SeriesIndexProgressBar.css';
 
-function SeriesIndexProgressBar(props) {
+interface SeriesIndexProgressBarProps {
+  monitored: boolean;
+  status: string;
+  episodeCount: number;
+  episodeFileCount: number;
+  totalEpisodeCount: number;
+  posterWidth: number;
+  detailedProgressBar: boolean;
+}
+
+function SeriesIndexProgressBar(props: SeriesIndexProgressBarProps) {
   const {
     monitored,
     status,
@@ -13,10 +22,10 @@ function SeriesIndexProgressBar(props) {
     episodeFileCount,
     totalEpisodeCount,
     posterWidth,
-    detailedProgressBar
+    detailedProgressBar,
   } = props;
 
-  const progress = episodeCount ? episodeFileCount / episodeCount * 100 : 100;
+  const progress = episodeCount ? (episodeFileCount / episodeCount) * 100 : 100;
   const text = `${episodeFileCount} / ${episodeCount}`;
 
   return (
@@ -34,14 +43,4 @@ function SeriesIndexProgressBar(props) {
   );
 }
 
-SeriesIndexProgressBar.propTypes = {
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  episodeCount: PropTypes.number.isRequired,
-  episodeFileCount: PropTypes.number.isRequired,
-  totalEpisodeCount: PropTypes.number.isRequired,
-  posterWidth: PropTypes.number.isRequired,
-  detailedProgressBar: PropTypes.bool.isRequired
-};
-
 export default SeriesIndexProgressBar;

frontend/src/Series/Index/SeriesIndex.js

@@ -1,370 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageJumpBar from 'Components/Page/PageJumpBar';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import { align, icons, sortDirections } from 'Helpers/Props';
-import NoSeries from 'Series/NoSeries';
-import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
-import SeriesIndexFilterMenu from './Menus/SeriesIndexFilterMenu';
-import SeriesIndexSortMenu from './Menus/SeriesIndexSortMenu';
-import SeriesIndexViewMenu from './Menus/SeriesIndexViewMenu';
-import SeriesIndexOverviewOptionsModal from './Overview/Options/SeriesIndexOverviewOptionsModal';
-import SeriesIndexOverviewsConnector from './Overview/SeriesIndexOverviewsConnector';
-import SeriesIndexPosterOptionsModal from './Posters/Options/SeriesIndexPosterOptionsModal';
-import SeriesIndexPostersConnector from './Posters/SeriesIndexPostersConnector';
-import SeriesIndexFooterConnector from './SeriesIndexFooterConnector';
-import SeriesIndexTableConnector from './Table/SeriesIndexTableConnector';
-import SeriesIndexTableOptionsConnector from './Table/SeriesIndexTableOptionsConnector';
-import styles from './SeriesIndex.css';
-
-function getViewComponent(view) {
-  if (view === 'posters') {
-    return SeriesIndexPostersConnector;
-  }
-
-  if (view === 'overview') {
-    return SeriesIndexOverviewsConnector;
-  }
-
-  return SeriesIndexTableConnector;
-}
-
-class SeriesIndex extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      scroller: null,
-      jumpBarItems: { order: [] },
-      jumpToCharacter: null,
-      isPosterOptionsModalOpen: false,
-      isOverviewOptionsModalOpen: false
-    };
-  }
-
-  componentDidMount() {
-    this.setJumpBarItems();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      items,
-      sortKey,
-      sortDirection
-    } = this.props;
-
-    if (sortKey !== prevProps.sortKey ||
-        sortDirection !== prevProps.sortDirection ||
-        hasDifferentItemsOrOrder(prevProps.items, items)
-    ) {
-      this.setJumpBarItems();
-    }
-
-    if (this.state.jumpToCharacter != null) {
-      this.setState({ jumpToCharacter: null });
-    }
-  }
-
-  //
-  // Control
-
-  setScrollerRef = (ref) => {
-    this.setState({ scroller: ref });
-  };
-
-  setJumpBarItems() {
-    const {
-      items,
-      sortKey,
-      sortDirection
-    } = this.props;
-
-    // Reset if not sorting by sortTitle
-    if (sortKey !== 'sortTitle') {
-      this.setState({ jumpBarItems: { order: [] } });
-      return;
-    }
-
-    const characters = _.reduce(items, (acc, item) => {
-      let char = item.sortTitle.charAt(0);
-
-      if (!isNaN(char)) {
-        char = '#';
-      }
-
-      if (char in acc) {
-        acc[char] = acc[char] + 1;
-      } else {
-        acc[char] = 1;
-      }
-
-      return acc;
-    }, {});
-
-    const order = Object.keys(characters).sort();
-
-    // Reverse if sorting descending
-    if (sortDirection === sortDirections.DESCENDING) {
-      order.reverse();
-    }
-
-    const jumpBarItems = {
-      characters,
-      order
-    };
-
-    this.setState({ jumpBarItems });
-  }
-
-  //
-  // Listeners
-
-  onPosterOptionsPress = () => {
-    this.setState({ isPosterOptionsModalOpen: true });
-  };
-
-  onPosterOptionsModalClose = () => {
-    this.setState({ isPosterOptionsModalOpen: false });
-  };
-
-  onOverviewOptionsPress = () => {
-    this.setState({ isOverviewOptionsModalOpen: true });
-  };
-
-  onOverviewOptionsModalClose = () => {
-    this.setState({ isOverviewOptionsModalOpen: false });
-  };
-
-  onJumpBarItemPress = (jumpToCharacter) => {
-    this.setState({ jumpToCharacter });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isFetching,
-      isPopulated,
-      error,
-      totalItems,
-      items,
-      columns,
-      selectedFilterKey,
-      filters,
-      customFilters,
-      sortKey,
-      sortDirection,
-      view,
-      isRefreshingSeries,
-      isRssSyncExecuting,
-      onScroll,
-      onSortSelect,
-      onFilterSelect,
-      onViewSelect,
-      onRefreshSeriesPress,
-      onRssSyncPress,
-      ...otherProps
-    } = this.props;
-
-    const {
-      scroller,
-      jumpBarItems,
-      jumpToCharacter,
-      isPosterOptionsModalOpen,
-      isOverviewOptionsModalOpen
-    } = this.state;
-
-    const ViewComponent = getViewComponent(view);
-    const isLoaded = !!(!error && isPopulated && items.length && scroller);
-    const hasNoSeries = !totalItems;
-
-    return (
-      <PageContent>
-        <PageToolbar>
-          <PageToolbarSection>
-            <PageToolbarButton
-              label="Update all"
-              iconName={icons.REFRESH}
-              spinningName={icons.REFRESH}
-              isSpinning={isRefreshingSeries}
-              isDisabled={hasNoSeries}
-              onPress={onRefreshSeriesPress}
-            />
-
-            <PageToolbarButton
-              label="RSS Sync"
-              iconName={icons.RSS}
-              isSpinning={isRssSyncExecuting}
-              isDisabled={hasNoSeries}
-              onPress={onRssSyncPress}
-            />
-
-          </PageToolbarSection>
-
-          <PageToolbarSection
-            alignContent={align.RIGHT}
-            collapseButtons={false}
-          >
-            {
-              view === 'table' ?
-                <TableOptionsModalWrapper
-                  {...otherProps}
-                  columns={columns}
-                  optionsComponent={SeriesIndexTableOptionsConnector}
-                >
-                  <PageToolbarButton
-                    label="Options"
-                    iconName={icons.TABLE}
-                  />
-                </TableOptionsModalWrapper> :
-                null
-            }
-
-            {
-              view === 'posters' ?
-                <PageToolbarButton
-                  label="Options"
-                  iconName={icons.POSTER}
-                  isDisabled={hasNoSeries}
-                  onPress={this.onPosterOptionsPress}
-                /> :
-                null
-            }
-
-            {
-              view === 'overview' ?
-                <PageToolbarButton
-                  label="Options"
-                  iconName={icons.OVERVIEW}
-                  isDisabled={hasNoSeries}
-                  onPress={this.onOverviewOptionsPress}
-                /> :
-                null
-            }
-
-            <PageToolbarSeparator />
-
-            <SeriesIndexViewMenu
-              view={view}
-              isDisabled={hasNoSeries}
-              onViewSelect={onViewSelect}
-            />
-
-            <SeriesIndexSortMenu
-              sortKey={sortKey}
-              sortDirection={sortDirection}
-              isDisabled={hasNoSeries}
-              onSortSelect={onSortSelect}
-            />
-
-            <SeriesIndexFilterMenu
-              selectedFilterKey={selectedFilterKey}
-              filters={filters}
-              customFilters={customFilters}
-              isDisabled={hasNoSeries}
-              onFilterSelect={onFilterSelect}
-            />
-          </PageToolbarSection>
-        </PageToolbar>
-
-        <div className={styles.pageContentBodyWrapper}>
-          <PageContentBody
-            registerScroller={this.setScrollerRef}
-            className={styles.contentBody}
-            innerClassName={styles[`${view}InnerContentBody`]}
-            onScroll={onScroll}
-          >
-            {
-              isFetching && !isPopulated &&
-                <LoadingIndicator />
-            }
-
-            {
-              !isFetching && !!error &&
-                <div>Unable to load series</div>
-            }
-
-            {
-              isLoaded &&
-                <div className={styles.contentBodyContainer}>
-                  <ViewComponent
-                    scroller={scroller}
-                    items={items}
-                    filters={filters}
-                    sortKey={sortKey}
-                    sortDirection={sortDirection}
-                    jumpToCharacter={jumpToCharacter}
-                    {...otherProps}
-                  />
-
-                  <SeriesIndexFooterConnector />
-                </div>
-            }
-
-            {
-              !error && isPopulated && !items.length &&
-                <NoSeries totalItems={totalItems} />
-            }
-          </PageContentBody>
-
-          {
-            isLoaded && !!jumpBarItems.order.length &&
-              <PageJumpBar
-                items={jumpBarItems}
-                onItemPress={this.onJumpBarItemPress}
-              />
-          }
-        </div>
-
-        <SeriesIndexPosterOptionsModal
-          isOpen={isPosterOptionsModalOpen}
-          onModalClose={this.onPosterOptionsModalClose}
-        />
-
-        <SeriesIndexOverviewOptionsModal
-          isOpen={isOverviewOptionsModalOpen}
-          onModalClose={this.onOverviewOptionsModalClose}
-        />
-      </PageContent>
-    );
-  }
-}
-
-SeriesIndex.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  totalItems: PropTypes.number.isRequired,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sortKey: PropTypes.string,
-  sortDirection: PropTypes.oneOf(sortDirections.all),
-  view: PropTypes.string.isRequired,
-  isRefreshingSeries: PropTypes.bool.isRequired,
-  isRssSyncExecuting: PropTypes.bool.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  onSortSelect: PropTypes.func.isRequired,
-  onFilterSelect: PropTypes.func.isRequired,
-  onViewSelect: PropTypes.func.isRequired,
-  onRefreshSeriesPress: PropTypes.func.isRequired,
-  onRssSyncPress: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired
-};
-
-export default SeriesIndex;

frontend/src/Series/Index/SeriesIndex.tsx

@@ -0,0 +1,306 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { REFRESH_SERIES, RSS_SYNC } from 'Commands/commandNames';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageJumpBar from 'Components/Page/PageJumpBar';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import { align, icons } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
+import NoSeries from 'Series/NoSeries';
+import { executeCommand } from 'Store/Actions/commandActions';
+import {
+  setSeriesFilter,
+  setSeriesSort,
+  setSeriesTableOption,
+  setSeriesView,
+} from 'Store/Actions/seriesIndexActions';
+import scrollPositions from 'Store/scrollPositions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSeriesClientSideCollectionItemsSelector from 'Store/Selectors/createSeriesClientSideCollectionItemsSelector';
+import SeriesIndexFilterMenu from './Menus/SeriesIndexFilterMenu';
+import SeriesIndexSortMenu from './Menus/SeriesIndexSortMenu';
+import SeriesIndexViewMenu from './Menus/SeriesIndexViewMenu';
+import SeriesIndexOverviewOptionsModal from './Overview/Options/SeriesIndexOverviewOptionsModal';
+import SeriesIndexOverviews from './Overview/SeriesIndexOverviews';
+import SeriesIndexPosterOptionsModal from './Posters/Options/SeriesIndexPosterOptionsModal';
+import SeriesIndexPosters from './Posters/SeriesIndexPosters';
+import SeriesIndexFooter from './SeriesIndexFooter';
+import SeriesIndexTable from './Table/SeriesIndexTable';
+import SeriesIndexTableOptions from './Table/SeriesIndexTableOptions';
+import styles from './SeriesIndex.css';
+
+function getViewComponent(view) {
+  if (view === 'posters') {
+    return SeriesIndexPosters;
+  }
+
+  if (view === 'overview') {
+    return SeriesIndexOverviews;
+  }
+
+  return SeriesIndexTable;
+}
+
+function SeriesIndex() {
+  const {
+    isFetching,
+    isPopulated,
+    error,
+    totalItems,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    customFilters,
+    sortKey,
+    sortDirection,
+    view,
+  } = useSelector(createSeriesClientSideCollectionItemsSelector('seriesIndex'));
+
+  const isRefreshingSeries = useSelector(
+    createCommandExecutingSelector(REFRESH_SERIES)
+  );
+  const isRssSyncExecuting = useSelector(
+    createCommandExecutingSelector(RSS_SYNC)
+  );
+  const { isSmallScreen } = useSelector(createDimensionsSelector());
+  const dispatch = useDispatch();
+  const scrollerRef = useRef<HTMLDivElement>();
+  const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
+  const [jumpToCharacter, setJumpToCharacter] = useState<string | null>(null);
+
+  const onRefreshSeriesPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: REFRESH_SERIES,
+      })
+    );
+  }, [dispatch]);
+
+  const onRssSyncPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: RSS_SYNC,
+      })
+    );
+  }, [dispatch]);
+
+  const onTableOptionChange = useCallback(
+    (payload) => {
+      dispatch(setSeriesTableOption(payload));
+    },
+    [dispatch]
+  );
+
+  const onViewSelect = useCallback(
+    (value) => {
+      dispatch(setSeriesView({ view: value }));
+
+      if (scrollerRef.current) {
+        scrollerRef.current.scrollTo(0, 0);
+      }
+    },
+    [scrollerRef, dispatch]
+  );
+
+  const onSortSelect = useCallback(
+    (value) => {
+      dispatch(setSeriesSort({ sortKey: value }));
+    },
+    [dispatch]
+  );
+
+  const onFilterSelect = useCallback(
+    (value) => {
+      dispatch(setSeriesFilter({ selectedFilterKey: value }));
+    },
+    [dispatch]
+  );
+
+  const onOptionsPress = useCallback(() => {
+    setIsOptionsModalOpen(true);
+  }, [setIsOptionsModalOpen]);
+
+  const onOptionsModalClose = useCallback(() => {
+    setIsOptionsModalOpen(false);
+  }, [setIsOptionsModalOpen]);
+
+  const onJumpBarItemPress = useCallback(
+    (character) => {
+      setJumpToCharacter(character);
+    },
+    [setJumpToCharacter]
+  );
+
+  const onScroll = useCallback(
+    ({ scrollTop }) => {
+      setJumpToCharacter(null);
+      scrollPositions.seriesIndex = scrollTop;
+    },
+    [setJumpToCharacter]
+  );
+
+  const jumpBarItems = useMemo(() => {
+    // Reset if not sorting by sortTitle
+    if (sortKey !== 'sortTitle') {
+      return {
+        order: [],
+      };
+    }
+
+    const characters = items.reduce((acc, item) => {
+      let char = item.sortTitle.charAt(0);
+
+      if (!isNaN(char)) {
+        char = '#';
+      }
+
+      if (char in acc) {
+        acc[char] = acc[char] + 1;
+      } else {
+        acc[char] = 1;
+      }
+
+      return acc;
+    }, {});
+
+    const order = Object.keys(characters).sort();
+
+    // Reverse if sorting descending
+    if (sortDirection === SortDirection.Descending) {
+      order.reverse();
+    }
+
+    return {
+      characters,
+      order,
+    };
+  }, [items, sortKey, sortDirection]);
+  const ViewComponent = useMemo(() => getViewComponent(view), [view]);
+
+  const isLoaded = !!(!error && isPopulated && items.length);
+  const hasNoSeries = !totalItems;
+
+  return (
+    <PageContent>
+      <PageToolbar>
+        <PageToolbarSection>
+          <PageToolbarButton
+            label="Update all"
+            iconName={icons.REFRESH}
+            spinningName={icons.REFRESH}
+            isSpinning={isRefreshingSeries}
+            isDisabled={hasNoSeries}
+            onPress={onRefreshSeriesPress}
+          />
+
+          <PageToolbarButton
+            label="RSS Sync"
+            iconName={icons.RSS}
+            isSpinning={isRssSyncExecuting}
+            isDisabled={hasNoSeries}
+            onPress={onRssSyncPress}
+          />
+        </PageToolbarSection>
+
+        <PageToolbarSection alignContent={align.RIGHT} collapseButtons={false}>
+          {view === 'table' ? (
+            <TableOptionsModalWrapper
+              columns={columns}
+              optionsComponent={SeriesIndexTableOptions}
+              onTableOptionChange={onTableOptionChange}
+            >
+              <PageToolbarButton label="Options" iconName={icons.TABLE} />
+            </TableOptionsModalWrapper>
+          ) : (
+            <PageToolbarButton
+              label="Options"
+              iconName={view === 'posters' ? icons.POSTER : icons.OVERVIEW}
+              isDisabled={hasNoSeries}
+              onPress={onOptionsPress}
+            />
+          )}
+
+          <PageToolbarSeparator />
+
+          <SeriesIndexViewMenu
+            view={view}
+            isDisabled={hasNoSeries}
+            onViewSelect={onViewSelect}
+          />
+
+          <SeriesIndexSortMenu
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            isDisabled={hasNoSeries}
+            onSortSelect={onSortSelect}
+          />
+
+          <SeriesIndexFilterMenu
+            selectedFilterKey={selectedFilterKey}
+            filters={filters}
+            customFilters={customFilters}
+            isDisabled={hasNoSeries}
+            onFilterSelect={onFilterSelect}
+          />
+        </PageToolbarSection>
+      </PageToolbar>
+      <div className={styles.pageContentBodyWrapper}>
+        <PageContentBody
+          ref={scrollerRef}
+          className={styles.contentBody}
+          innerClassName={styles[`${view}InnerContentBody`]}
+          onScroll={onScroll}
+        >
+          {isFetching && !isPopulated ? <LoadingIndicator /> : null}
+
+          {!isFetching && !!error ? <div>Unable to load series</div> : null}
+
+          {isLoaded ? (
+            <div className={styles.contentBodyContainer}>
+              <ViewComponent
+                scrollerRef={scrollerRef}
+                items={items}
+                sortKey={sortKey}
+                sortDirection={sortDirection}
+                jumpToCharacter={jumpToCharacter}
+                isSmallScreen={isSmallScreen}
+              />
+
+              <SeriesIndexFooter />
+            </div>
+          ) : null}
+
+          {!error && isPopulated && !items.length ? (
+            <NoSeries totalItems={totalItems} />
+          ) : null}
+        </PageContentBody>
+
+        {isLoaded && !!jumpBarItems.order.length ? (
+          <PageJumpBar items={jumpBarItems} onItemPress={onJumpBarItemPress} />
+        ) : null}
+      </div>
+      {view === 'posters' ? (
+        <SeriesIndexPosterOptionsModal
+          isOpen={isOptionsModalOpen}
+          onModalClose={onOptionsModalClose}
+        />
+      ) : null}
+      {view === 'overview' ? (
+        <SeriesIndexOverviewOptionsModal
+          isOpen={isOptionsModalOpen}
+          onModalClose={onOptionsModalClose}
+        />
+      ) : null}
+    </PageContent>
+  );
+}
+
+export default SeriesIndex;

frontend/src/Series/Index/SeriesIndexConnector.js

@@ -1,105 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import * as commandNames from 'Commands/commandNames';
-import withScrollPosition from 'Components/withScrollPosition';
-import { executeCommand } from 'Store/Actions/commandActions';
-import { setSeriesFilter, setSeriesSort, setSeriesTableOption, setSeriesView } from 'Store/Actions/seriesIndexActions';
-import scrollPositions from 'Store/scrollPositions';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createSeriesClientSideCollectionItemsSelector from 'Store/Selectors/createSeriesClientSideCollectionItemsSelector';
-import SeriesIndex from './SeriesIndex';
-
-function createMapStateToProps() {
-  return createSelector(
-    createSeriesClientSideCollectionItemsSelector('seriesIndex'),
-    createCommandExecutingSelector(commandNames.REFRESH_SERIES),
-    createCommandExecutingSelector(commandNames.RSS_SYNC),
-    createDimensionsSelector(),
-    (
-      series,
-      isRefreshingSeries,
-      isRssSyncExecuting,
-      dimensionsState
-    ) => {
-      return {
-        ...series,
-        isRefreshingSeries,
-        isRssSyncExecuting,
-        isSmallScreen: dimensionsState.isSmallScreen
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onTableOptionChange(payload) {
-      dispatch(setSeriesTableOption(payload));
-    },
-
-    onSortSelect(sortKey) {
-      dispatch(setSeriesSort({ sortKey }));
-    },
-
-    onFilterSelect(selectedFilterKey) {
-      dispatch(setSeriesFilter({ selectedFilterKey }));
-    },
-
-    dispatchSetSeriesView(view) {
-      dispatch(setSeriesView({ view }));
-    },
-
-    onRefreshSeriesPress() {
-      dispatch(executeCommand({
-        name: commandNames.REFRESH_SERIES
-      }));
-    },
-
-    onRssSyncPress() {
-      dispatch(executeCommand({
-        name: commandNames.RSS_SYNC
-      }));
-    }
-  };
-}
-
-class SeriesIndexConnector extends Component {
-
-  //
-  // Listeners
-
-  onViewSelect = (view) => {
-    this.props.dispatchSetSeriesView(view);
-  };
-
-  onScroll = ({ scrollTop }) => {
-    scrollPositions.seriesIndex = scrollTop;
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <SeriesIndex
-        {...this.props}
-        onViewSelect={this.onViewSelect}
-        onScroll={this.onScroll}
-      />
-    );
-  }
-}
-
-SeriesIndexConnector.propTypes = {
-  isSmallScreen: PropTypes.bool.isRequired,
-  view: PropTypes.string.isRequired,
-  dispatchSetSeriesView: PropTypes.func.isRequired
-};
-
-export default withScrollPosition(
-  connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexConnector),
-  'seriesIndex'
-);

frontend/src/Series/Index/SeriesIndexFilterModal.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setSeriesFilter } from 'Store/Actions/seriesIndexActions';
+
+function createSeriesSelector() {
+  return createSelector(
+    (state) => state.series.items,
+    (series) => {
+      return series;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state) => state.series.items,
+    (series) => {
+      return series;
+    }
+  );
+}
+
+export default function SeriesIndexFilterModal(props) {
+  const sectionItems = useSelector(createSeriesSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'series';
+
+  const dispatch = useDispatch();
+
+  const dispatchSetFilter = useCallback(
+    (payload) => {
+      dispatch(setSeriesFilter(payload));
+    },
+    [dispatch]
+  );
+
+  return (
+    <FilterModal
+      {...props}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
+      dispatchSetFilter={dispatchSetFilter}
+    />
+  );
+}

frontend/src/Series/Index/SeriesIndexFilterModalConnector.js

@@ -1,24 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import FilterModal from 'Components/Filter/FilterModal';
-import { setSeriesFilter } from 'Store/Actions/seriesIndexActions';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.series.items,
-    (state) => state.seriesIndex.filterBuilderProps,
-    (sectionItems, filterBuilderProps) => {
-      return {
-        sectionItems,
-        filterBuilderProps,
-        customFilterType: 'series'
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchSetFilter: setSeriesFilter
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(FilterModal);

frontend/src/Series/Index/SeriesIndexFooter.js

@@ -1,158 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-import formatBytes from 'Utilities/Number/formatBytes';
-import styles from './SeriesIndexFooter.css';
-
-class SeriesIndexFooter extends PureComponent {
-
-  //
-  // Render
-
-  render() {
-    const { series } = this.props;
-    const count = series.length;
-    let episodes = 0;
-    let episodeFiles = 0;
-    let ended = 0;
-    let continuing = 0;
-    let monitored = 0;
-    let totalFileSize = 0;
-
-    series.forEach((s) => {
-      const { statistics = {} } = s;
-
-      const {
-        episodeCount = 0,
-        episodeFileCount = 0,
-        sizeOnDisk = 0
-      } = statistics;
-
-      episodes += episodeCount;
-      episodeFiles += episodeFileCount;
-
-      if (s.status === 'ended') {
-        ended++;
-      } else {
-        continuing++;
-      }
-
-      if (s.monitored) {
-        monitored++;
-      }
-
-      totalFileSize += sizeOnDisk;
-    });
-
-    return (
-      <ColorImpairedConsumer>
-        {(enableColorImpairedMode) => {
-          return (
-            <div className={styles.footer}>
-              <div>
-                <div className={styles.legendItem}>
-                  <div
-                    className={classNames(
-                      styles.continuing,
-                      enableColorImpairedMode && 'colorImpaired'
-                    )}
-                  />
-                  <div>Continuing (All episodes downloaded)</div>
-                </div>
-
-                <div className={styles.legendItem}>
-                  <div
-                    className={classNames(
-                      styles.ended,
-                      enableColorImpairedMode && 'colorImpaired'
-                    )}
-                  />
-                  <div>Ended (All episodes downloaded)</div>
-                </div>
-
-                <div className={styles.legendItem}>
-                  <div
-                    className={classNames(
-                      styles.missingMonitored,
-                      enableColorImpairedMode && 'colorImpaired'
-                    )}
-                  />
-                  <div>Missing Episodes (Series monitored)</div>
-                </div>
-
-                <div className={styles.legendItem}>
-                  <div
-                    className={classNames(
-                      styles.missingUnmonitored,
-                      enableColorImpairedMode && 'colorImpaired'
-                    )}
-                  />
-                  <div>Missing Episodes (Series not monitored)</div>
-                </div>
-              </div>
-
-              <div className={styles.statistics}>
-                <DescriptionList>
-                  <DescriptionListItem
-                    title="Series"
-                    data={count}
-                  />
-
-                  <DescriptionListItem
-                    title="Ended"
-                    data={ended}
-                  />
-
-                  <DescriptionListItem
-                    title="Continuing"
-                    data={continuing}
-                  />
-                </DescriptionList>
-
-                <DescriptionList>
-                  <DescriptionListItem
-                    title="Monitored"
-                    data={monitored}
-                  />
-
-                  <DescriptionListItem
-                    title="Unmonitored"
-                    data={count - monitored}
-                  />
-                </DescriptionList>
-
-                <DescriptionList>
-                  <DescriptionListItem
-                    title="Episodes"
-                    data={episodes}
-                  />
-
-                  <DescriptionListItem
-                    title="Files"
-                    data={episodeFiles}
-                  />
-                </DescriptionList>
-
-                <DescriptionList>
-                  <DescriptionListItem
-                    title="Total File Size"
-                    data={formatBytes(totalFileSize)}
-                  />
-                </DescriptionList>
-              </div>
-            </div>
-          );
-        }}
-      </ColorImpairedConsumer>
-    );
-  }
-}
-
-SeriesIndexFooter.propTypes = {
-  series: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default SeriesIndexFooter;

frontend/src/Series/Index/SeriesIndexFooter.tsx

@@ -0,0 +1,155 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
+import formatBytes from 'Utilities/Number/formatBytes';
+import styles from './SeriesIndexFooter.css';
+
+function createUnoptimizedSelector() {
+  return createSelector(
+    createClientSideCollectionSelector('series', 'seriesIndex'),
+    (series) => {
+      return series.items.map((s) => {
+        const { monitored, status, statistics } = s;
+
+        return {
+          monitored,
+          status,
+          statistics,
+        };
+      });
+    }
+  );
+}
+
+function createSeriesSelector() {
+  return createDeepEqualSelector(
+    createUnoptimizedSelector(),
+    (series) => series
+  );
+}
+
+export default function SeriesIndexFooter() {
+  const series = useSelector(createSeriesSelector());
+  const count = series.length;
+  let episodes = 0;
+  let episodeFiles = 0;
+  let ended = 0;
+  let continuing = 0;
+  let monitored = 0;
+  let totalFileSize = 0;
+
+  series.forEach((s) => {
+    const { statistics = {} } = s;
+
+    const {
+      episodeCount = 0,
+      episodeFileCount = 0,
+      sizeOnDisk = 0,
+    } = statistics;
+
+    episodes += episodeCount;
+    episodeFiles += episodeFileCount;
+
+    if (s.status === 'ended') {
+      ended++;
+    } else {
+      continuing++;
+    }
+
+    if (s.monitored) {
+      monitored++;
+    }
+
+    totalFileSize += sizeOnDisk;
+  });
+
+  return (
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
+        return (
+          <div className={styles.footer}>
+            <div>
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.continuing,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Continuing (All episodes downloaded)</div>
+              </div>
+
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.ended,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Ended (All episodes downloaded)</div>
+              </div>
+
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.missingMonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Missing Episodes (Series monitored)</div>
+              </div>
+
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.missingUnmonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>Missing Episodes (Series not monitored)</div>
+              </div>
+            </div>
+
+            <div className={styles.statistics}>
+              <DescriptionList>
+                <DescriptionListItem title="Series" data={count} />
+
+                <DescriptionListItem title="Ended" data={ended} />
+
+                <DescriptionListItem title="Continuing" data={continuing} />
+              </DescriptionList>
+
+              <DescriptionList>
+                <DescriptionListItem title="Monitored" data={monitored} />
+
+                <DescriptionListItem
+                  title="Unmonitored"
+                  data={count - monitored}
+                />
+              </DescriptionList>
+
+              <DescriptionList>
+                <DescriptionListItem title="Episodes" data={episodes} />
+
+                <DescriptionListItem title="Files" data={episodeFiles} />
+              </DescriptionList>
+
+              <DescriptionList>
+                <DescriptionListItem
+                  title="Total File Size"
+                  data={formatBytes(totalFileSize)}
+                />
+              </DescriptionList>
+            </div>
+          </div>
+        );
+      }}
+    </ColorImpairedConsumer>
+  );
+}

frontend/src/Series/Index/SeriesIndexFooterConnector.js

@@ -1,46 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
-import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
-import SeriesIndexFooter from './SeriesIndexFooter';
-
-function createUnoptimizedSelector() {
-  return createSelector(
-    createClientSideCollectionSelector('series', 'seriesIndex'),
-    (series) => {
-      return series.items.map((s) => {
-        const {
-          monitored,
-          status,
-          statistics
-        } = s;
-
-        return {
-          monitored,
-          status,
-          statistics
-        };
-      });
-    }
-  );
-}
-
-function createSeriesSelector() {
-  return createDeepEqualSelector(
-    createUnoptimizedSelector(),
-    (series) => series
-  );
-}
-
-function createMapStateToProps() {
-  return createSelector(
-    createSeriesSelector(),
-    (series) => {
-      return {
-        series
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(SeriesIndexFooter);

frontend/src/Series/Index/SeriesIndexItemConnector.js

@@ -1,134 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import * as commandNames from 'Commands/commandNames';
-import { executeCommand } from 'Store/Actions/commandActions';
-import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector';
-import createSeriesQualityProfileSelector from 'Store/Selectors/createSeriesQualityProfileSelector';
-import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
-
-function selectShowSearchAction() {
-  return createSelector(
-    (state) => state.seriesIndex,
-    (seriesIndex) => {
-      const view = seriesIndex.view;
-
-      switch (view) {
-        case 'posters':
-          return seriesIndex.posterOptions.showSearchAction;
-        case 'overview':
-          return seriesIndex.overviewOptions.showSearchAction;
-        default:
-          return seriesIndex.tableOptions.showSearchAction;
-      }
-    }
-  );
-}
-
-function createMapStateToProps() {
-  return createSelector(
-    createSeriesSelector(),
-    createSeriesQualityProfileSelector(),
-    selectShowSearchAction(),
-    createExecutingCommandsSelector(),
-    (
-      series,
-      qualityProfile,
-      showSearchAction,
-      executingCommands
-    ) => {
-
-      // If a series is deleted this selector may fire before the parent
-      // selecors, which will result in an undefined series, if that happens
-      // we want to return early here and again in the render function to avoid
-      // trying to show a series that has no information available.
-
-      if (!series) {
-        return {};
-      }
-
-      const isRefreshingSeries = executingCommands.some((command) => {
-        return (
-          command.name === commandNames.REFRESH_SERIES &&
-          command.body.seriesId === series.id
-        );
-      });
-
-      const isSearchingSeries = executingCommands.some((command) => {
-        return (
-          command.name === commandNames.SERIES_SEARCH &&
-          command.body.seriesId === series.id
-        );
-      });
-
-      const latestSeason = _.maxBy(series.seasons, (season) => season.seasonNumber);
-
-      return {
-        ...series,
-        qualityProfile,
-        latestSeason,
-        showSearchAction,
-        isRefreshingSeries,
-        isSearchingSeries
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchExecuteCommand: executeCommand
-};
-
-class SeriesIndexItemConnector extends Component {
-
-  //
-  // Listeners
-
-  onRefreshSeriesPress = () => {
-    this.props.dispatchExecuteCommand({
-      name: commandNames.REFRESH_SERIES,
-      seriesId: this.props.id
-    });
-  };
-
-  onSearchPress = () => {
-    this.props.dispatchExecuteCommand({
-      name: commandNames.SERIES_SEARCH,
-      seriesId: this.props.id
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      id,
-      component: ItemComponent,
-      ...otherProps
-    } = this.props;
-
-    if (!id) {
-      return null;
-    }
-
-    return (
-      <ItemComponent
-        {...otherProps}
-        id={id}
-        onRefreshSeriesPress={this.onRefreshSeriesPress}
-        onSearchPress={this.onSearchPress}
-      />
-    );
-  }
-}
-
-SeriesIndexItemConnector.propTypes = {
-  id: PropTypes.number,
-  component: PropTypes.elementType.isRequired,
-  dispatchExecuteCommand: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(SeriesIndexItemConnector);

frontend/src/Series/Index/Table/SeriesIndexActionsCell.js

@@ -1,102 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import IconButton from 'Components/Link/IconButton';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
-import { icons } from 'Helpers/Props';
-import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
-import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
-
-class SeriesIndexActionsCell extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onEditSeriesPress = () => {
-    this.setState({ isEditSeriesModalOpen: true });
-  };
-
-  onEditSeriesModalClose = () => {
-    this.setState({ isEditSeriesModalOpen: false });
-  };
-
-  onDeleteSeriesPress = () => {
-    this.setState({
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: true
-    });
-  };
-
-  onDeleteSeriesModalClose = () => {
-    this.setState({ isDeleteSeriesModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      id,
-      isRefreshingSeries,
-      onRefreshSeriesPress,
-      ...otherProps
-    } = this.props;
-
-    const {
-      isEditSeriesModalOpen,
-      isDeleteSeriesModalOpen
-    } = this.state;
-
-    return (
-      <VirtualTableRowCell
-        {...otherProps}
-      >
-        <SpinnerIconButton
-          name={icons.REFRESH}
-          title="Refresh series"
-          isSpinning={isRefreshingSeries}
-          onPress={onRefreshSeriesPress}
-        />
-
-        <IconButton
-          name={icons.EDIT}
-          title="Edit Series"
-          onPress={this.onEditSeriesPress}
-        />
-
-        <EditSeriesModalConnector
-          isOpen={isEditSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onEditSeriesModalClose}
-          onDeleteSeriesPress={this.onDeleteSeriesPress}
-        />
-
-        <DeleteSeriesModal
-          isOpen={isDeleteSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onDeleteSeriesModalClose}
-        />
-      </VirtualTableRowCell>
-    );
-  }
-}
-
-SeriesIndexActionsCell.propTypes = {
-  id: PropTypes.number.isRequired,
-  isRefreshingSeries: PropTypes.bool.isRequired,
-  onRefreshSeriesPress: PropTypes.func.isRequired
-};
-
-export default SeriesIndexActionsCell;

frontend/src/Series/Index/Table/SeriesIndexHeader.js

@@ -1,86 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import IconButton from 'Components/Link/IconButton';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
-import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
-import { icons } from 'Helpers/Props';
-import hasGrowableColumns from './hasGrowableColumns';
-import SeriesIndexTableOptionsConnector from './SeriesIndexTableOptionsConnector';
-import styles from './SeriesIndexHeader.css';
-
-function SeriesIndexHeader(props) {
-  const {
-    showBanners,
-    columns,
-    onTableOptionChange,
-    ...otherProps
-  } = props;
-
-  return (
-    <VirtualTableHeader>
-      {
-        columns.map((column) => {
-          const {
-            name,
-            label,
-            isSortable,
-            isVisible
-          } = column;
-
-          if (!isVisible) {
-            return null;
-          }
-
-          if (name === 'actions') {
-            return (
-              <VirtualTableHeaderCell
-                key={name}
-                className={styles[name]}
-                name={name}
-                isSortable={false}
-                {...otherProps}
-              >
-
-                <TableOptionsModalWrapper
-                  columns={columns}
-                  optionsComponent={SeriesIndexTableOptionsConnector}
-                  onTableOptionChange={onTableOptionChange}
-                >
-                  <IconButton
-                    name={icons.ADVANCED_SETTINGS}
-                  />
-                </TableOptionsModalWrapper>
-              </VirtualTableHeaderCell>
-            );
-          }
-
-          return (
-            <VirtualTableHeaderCell
-              key={name}
-              className={classNames(
-                styles[name],
-                name === 'sortTitle' && showBanners && styles.banner,
-                name === 'sortTitle' && showBanners && !hasGrowableColumns(columns) && styles.bannerGrow
-              )}
-              name={name}
-              isSortable={isSortable}
-              {...otherProps}
-            >
-              {label}
-            </VirtualTableHeaderCell>
-          );
-        })
-      }
-    </VirtualTableHeader>
-  );
-}
-
-SeriesIndexHeader.propTypes = {
-  showBanners: PropTypes.bool.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onTableOptionChange: PropTypes.func.isRequired
-};
-
-export default SeriesIndexHeader;

frontend/src/Series/Index/Table/SeriesIndexHeaderConnector.js

@@ -1,13 +0,0 @@
-import { connect } from 'react-redux';
-import { setSeriesTableOption } from 'Store/Actions/seriesIndexActions';
-import SeriesIndexHeader from './SeriesIndexHeader';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onTableOptionChange(payload) {
-      dispatch(setSeriesTableOption(payload));
-    }
-  };
-}
-
-export default connect(undefined, createMapDispatchToProps)(SeriesIndexHeader);

frontend/src/Series/Index/Table/SeriesIndexRow.js

@@ -1,563 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import CheckInput from 'Components/Form/CheckInput';
-import HeartRating from 'Components/HeartRating';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import ProgressBar from 'Components/ProgressBar';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
-import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
-import TagListConnector from 'Components/TagListConnector';
-import { icons } from 'Helpers/Props';
-import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
-import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
-import SeriesBanner from 'Series/SeriesBanner';
-import SeriesTitleLink from 'Series/SeriesTitleLink';
-import formatBytes from 'Utilities/Number/formatBytes';
-import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
-import titleCase from 'Utilities/String/titleCase';
-import hasGrowableColumns from './hasGrowableColumns';
-import SeriesStatusCell from './SeriesStatusCell';
-import styles from './SeriesIndexRow.css';
-
-class SeriesIndexRow extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      hasBannerError: false,
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: false
-    };
-  }
-
-  onEditSeriesPress = () => {
-    this.setState({ isEditSeriesModalOpen: true });
-  };
-
-  onEditSeriesModalClose = () => {
-    this.setState({ isEditSeriesModalOpen: false });
-  };
-
-  onDeleteSeriesPress = () => {
-    this.setState({
-      isEditSeriesModalOpen: false,
-      isDeleteSeriesModalOpen: true
-    });
-  };
-
-  onDeleteSeriesModalClose = () => {
-    this.setState({ isDeleteSeriesModalOpen: false });
-  };
-
-  onUseSceneNumberingChange = () => {
-    // Mock handler to satisfy `onChange` being required for `CheckInput`.
-    //
-  };
-
-  onBannerLoad = () => {
-    if (this.state.hasBannerError) {
-      this.setState({ hasBannerError: false });
-    }
-  };
-
-  onBannerLoadError = () => {
-    if (!this.state.hasBannerError) {
-      this.setState({ hasBannerError: true });
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      id,
-      monitored,
-      status,
-      title,
-      titleSlug,
-      seriesType,
-      network,
-      originalLanguage,
-      qualityProfile,
-      nextAiring,
-      previousAiring,
-      added,
-      statistics,
-      latestSeason,
-      year,
-      path,
-      genres,
-      ratings,
-      certification,
-      tags,
-      images,
-      useSceneNumbering,
-      showBanners,
-      showSearchAction,
-      columns,
-      isRefreshingSeries,
-      isSearchingSeries,
-      onRefreshSeriesPress,
-      onSearchPress
-    } = this.props;
-
-    const {
-      seasonCount,
-      episodeCount,
-      episodeFileCount,
-      totalEpisodeCount,
-      releaseGroups,
-      sizeOnDisk
-    } = statistics;
-
-    const {
-      hasBannerError,
-      isEditSeriesModalOpen,
-      isDeleteSeriesModalOpen
-    } = this.state;
-
-    return (
-      <>
-        {
-          columns.map((column) => {
-            const {
-              name,
-              isVisible
-            } = column;
-
-            if (!isVisible) {
-              return null;
-            }
-
-            if (name === 'status') {
-              return (
-                <SeriesStatusCell
-                  key={name}
-                  className={styles[name]}
-                  monitored={monitored}
-                  status={status}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'sortTitle') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={classNames(
-                    styles[name],
-                    showBanners && styles.banner,
-                    showBanners && !hasGrowableColumns(columns) && styles.bannerGrow
-                  )}
-                >
-                  {
-                    showBanners ?
-                      <Link
-                        className={styles.link}
-                        to={`/series/${titleSlug}`}
-                      >
-                        <SeriesBanner
-                          className={styles.bannerImage}
-                          images={images}
-                          lazy={false}
-                          overflow={true}
-                          onError={this.onBannerLoadError}
-                          onLoad={this.onBannerLoad}
-                        />
-
-                        {
-                          hasBannerError &&
-                            <div className={styles.overlayTitle}>
-                              {title}
-                            </div>
-                        }
-                      </Link> :
-
-                      <SeriesTitleLink
-                        titleSlug={titleSlug}
-                        title={title}
-                      />
-                  }
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'seriesType') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {titleCase(seriesType)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'network') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {network}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'originalLanguage') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {originalLanguage.name}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'qualityProfileId') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {qualityProfile.name}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'nextAiring') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={nextAiring}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'previousAiring') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={previousAiring}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'added') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={added}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'seasonCount') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {seasonCount}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'episodeProgress') {
-              const progress = episodeCount ? episodeFileCount / episodeCount * 100 : 100;
-
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <ProgressBar
-                    progress={progress}
-                    kind={getProgressBarKind(status, monitored, progress)}
-                    showText={true}
-                    text={`${episodeFileCount} / ${episodeCount}`}
-                    title={`${episodeFileCount} / ${episodeCount} (Total: ${totalEpisodeCount})`}
-                    width={125}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'latestSeason') {
-              if (!latestSeason) {
-                return (
-                  <VirtualTableRowCell
-                    key={name}
-                    className={styles[name]}
-                  />
-                );
-              }
-
-              const seasonStatistics = latestSeason.statistics || {};
-              const progress = seasonStatistics.episodeCount ?
-                seasonStatistics.episodeFileCount / seasonStatistics.episodeCount * 100 :
-                100;
-
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <ProgressBar
-                    progress={progress}
-                    kind={getProgressBarKind(status, monitored, progress)}
-                    showText={true}
-                    text={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount}`}
-                    title={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount} (Total: ${seasonStatistics.totalEpisodeCount})`}
-                    width={125}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'episodeCount') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {totalEpisodeCount}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'year') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {year}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'path') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {path}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'sizeOnDisk') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {formatBytes(sizeOnDisk)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'genres') {
-              const joinedGenres = genres.join(', ');
-
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <span title={joinedGenres}>
-                    {joinedGenres}
-                  </span>
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'ratings') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <HeartRating
-                    rating={ratings.value}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'certification') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {certification}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'releaseGroups') {
-              const joinedReleaseGroups = releaseGroups.join(', ');
-              const truncatedReleaseGroups = releaseGroups.length > 3 ?
-                `${releaseGroups.slice(0, 3).join(', ')}...` :
-                joinedReleaseGroups;
-
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <span title={joinedReleaseGroups}>
-                    {truncatedReleaseGroups}
-                  </span>
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'tags') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <TagListConnector
-                    tags={tags}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'useSceneNumbering') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <CheckInput
-                    className={styles.checkInput}
-                    name="useSceneNumbering"
-                    value={useSceneNumbering}
-                    isDisabled={true}
-                    onChange={this.onUseSceneNumberingChange}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'actions') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <SpinnerIconButton
-                    name={icons.REFRESH}
-                    title="Refresh series"
-                    isSpinning={isRefreshingSeries}
-                    onPress={onRefreshSeriesPress}
-                  />
-
-                  {
-                    showSearchAction &&
-                      <SpinnerIconButton
-                        className={styles.action}
-                        name={icons.SEARCH}
-                        title="Search for monitored episodes"
-                        isSpinning={isSearchingSeries}
-                        onPress={onSearchPress}
-                      />
-                  }
-
-                  <IconButton
-                    name={icons.EDIT}
-                    title="Edit Series"
-                    onPress={this.onEditSeriesPress}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            return null;
-          })
-        }
-
-        <EditSeriesModalConnector
-          isOpen={isEditSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onEditSeriesModalClose}
-          onDeleteSeriesPress={this.onDeleteSeriesPress}
-        />
-
-        <DeleteSeriesModal
-          isOpen={isDeleteSeriesModalOpen}
-          seriesId={id}
-          onModalClose={this.onDeleteSeriesModalClose}
-        />
-      </>
-    );
-  }
-}
-
-SeriesIndexRow.propTypes = {
-  id: PropTypes.number.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  titleSlug: PropTypes.string.isRequired,
-  seriesType: PropTypes.string.isRequired,
-  originalLanguage: PropTypes.object.isRequired,
-  network: PropTypes.string,
-  qualityProfile: PropTypes.object.isRequired,
-  nextAiring: PropTypes.string,
-  previousAiring: PropTypes.string,
-  added: PropTypes.string,
-  statistics: PropTypes.object.isRequired,
-  latestSeason: PropTypes.object,
-  year: PropTypes.number,
-  path: PropTypes.string.isRequired,
-  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
-  ratings: PropTypes.object.isRequired,
-  certification: PropTypes.string,
-  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
-  images: PropTypes.arrayOf(PropTypes.object).isRequired,
-  useSceneNumbering: PropTypes.bool.isRequired,
-  showBanners: PropTypes.bool.isRequired,
-  showSearchAction: PropTypes.bool.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isRefreshingSeries: PropTypes.bool.isRequired,
-  isSearchingSeries: PropTypes.bool.isRequired,
-  onRefreshSeriesPress: PropTypes.func.isRequired,
-  onSearchPress: PropTypes.func.isRequired
-};
-
-SeriesIndexRow.defaultProps = {
-  statistics: {
-    seasonCount: 0,
-    episodeCount: 0,
-    episodeFileCount: 0,
-    totalEpisodeCount: 0,
-    releaseGroups: []
-  },
-  genres: [],
-  tags: []
-};
-
-export default SeriesIndexRow;

frontend/src/Series/Index/Table/SeriesIndexRow.tsx

@@ -0,0 +1,445 @@
+import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
+import CheckInput from 'Components/Form/CheckInput';
+import HeartRating from 'Components/HeartRating';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import ProgressBar from 'Components/ProgressBar';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import Column from 'Components/Table/Column';
+import TagListConnector from 'Components/TagListConnector';
+import { icons } from 'Helpers/Props';
+import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
+import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector';
+import createSeriesIndexItemSelector from 'Series/Index/createSeriesIndexItemSelector';
+import SeriesBanner from 'Series/SeriesBanner';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+import { executeCommand } from 'Store/Actions/commandActions';
+import formatBytes from 'Utilities/Number/formatBytes';
+import getProgressBarKind from 'Utilities/Series/getProgressBarKind';
+import titleCase from 'Utilities/String/titleCase';
+import hasGrowableColumns from './hasGrowableColumns';
+import selectTableOptions from './selectTableOptions';
+import SeriesStatusCell from './SeriesStatusCell';
+import styles from './SeriesIndexRow.css';
+
+interface SeriesIndexRowProps {
+  seriesId: number;
+  sortKey: string;
+  columns: Column[];
+}
+
+function SeriesIndexRow(props: SeriesIndexRowProps) {
+  const { seriesId, columns } = props;
+
+  const {
+    series,
+    qualityProfile,
+    latestSeason,
+    isRefreshingSeries,
+    isSearchingSeries,
+  } = useSelector(createSeriesIndexItemSelector(props.seriesId));
+
+  const { showBanners, showSearchAction } = useSelector(selectTableOptions);
+
+  const {
+    title,
+    monitored,
+    status,
+    path,
+    titleSlug,
+    nextAiring,
+    previousAiring,
+    added,
+    statistics = {},
+    images,
+    seriesType,
+    network,
+    originalLanguage,
+    certification,
+    year,
+    useSceneNumbering,
+    genres = [],
+    ratings,
+    tags = [],
+  } = series;
+
+  const {
+    seasonCount = 0,
+    episodeCount = 0,
+    episodeFileCount = 0,
+    totalEpisodeCount = 0,
+    sizeOnDisk = 0,
+    releaseGroups = [],
+  } = statistics;
+
+  const dispatch = useDispatch();
+  const [hasBannerError, setHasBannerError] = useState(false);
+  const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
+  const [isDeleteSeriesModalOpen, setIsDeleteSeriesModalOpen] = useState(false);
+
+  const onRefreshPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: REFRESH_SERIES,
+        seriesId,
+      })
+    );
+  }, [seriesId, dispatch]);
+
+  const onSearchPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: SERIES_SEARCH,
+        seriesId,
+      })
+    );
+  }, [seriesId, dispatch]);
+
+  const onBannerLoadError = useCallback(() => {
+    setHasBannerError(true);
+  }, [setHasBannerError]);
+
+  const onBannerLoad = useCallback(() => {
+    setHasBannerError(false);
+  }, [setHasBannerError]);
+
+  const onEditSeriesPress = useCallback(() => {
+    setIsEditSeriesModalOpen(true);
+  }, [setIsEditSeriesModalOpen]);
+
+  const onEditSeriesModalClose = useCallback(() => {
+    setIsEditSeriesModalOpen(false);
+  }, [setIsEditSeriesModalOpen]);
+
+  const onDeleteSeriesPress = useCallback(() => {
+    setIsEditSeriesModalOpen(false);
+    setIsDeleteSeriesModalOpen(true);
+  }, [setIsDeleteSeriesModalOpen]);
+
+  const onDeleteSeriesModalClose = useCallback(() => {
+    setIsDeleteSeriesModalOpen(false);
+  }, [setIsDeleteSeriesModalOpen]);
+
+  const onUseSceneNumberingChange = useCallback(() => {
+    // Mock handler to satisfy `onChange` being required for `CheckInput`.
+  }, []);
+
+  return (
+    <>
+      {columns.map((column) => {
+        const { name, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        if (name === 'status') {
+          return (
+            <SeriesStatusCell
+              key={name}
+              className={styles[name]}
+              monitored={monitored}
+              status={status}
+              component={VirtualTableRowCell}
+            />
+          );
+        }
+
+        if (name === 'sortTitle') {
+          return (
+            <VirtualTableRowCell
+              key={name}
+              className={classNames(
+                styles[name],
+                showBanners && styles.banner,
+                showBanners && !hasGrowableColumns(columns) && styles.bannerGrow
+              )}
+            >
+              {showBanners ? (
+                <Link className={styles.link} to={`/series/${titleSlug}`}>
+                  <SeriesBanner
+                    className={styles.bannerImage}
+                    images={images}
+                    lazy={false}
+                    overflow={true}
+                    onError={onBannerLoadError}
+                    onLoad={onBannerLoad}
+                  />
+
+                  {hasBannerError && (
+                    <div className={styles.overlayTitle}>{title}</div>
+                  )}
+                </Link>
+              ) : (
+                <SeriesTitleLink titleSlug={titleSlug} title={title} />
+              )}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'seriesType') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {titleCase(seriesType)}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'network') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {network}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'originalLanguage') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {originalLanguage.name}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'qualityProfileId') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {qualityProfile.name}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'nextAiring') {
+          return (
+            <RelativeDateCellConnector
+              key={name}
+              className={styles[name]}
+              date={nextAiring}
+              component={VirtualTableRowCell}
+            />
+          );
+        }
+
+        if (name === 'previousAiring') {
+          return (
+            <RelativeDateCellConnector
+              key={name}
+              className={styles[name]}
+              date={previousAiring}
+              component={VirtualTableRowCell}
+            />
+          );
+        }
+
+        if (name === 'added') {
+          return (
+            <RelativeDateCellConnector
+              key={name}
+              className={styles[name]}
+              date={added}
+              component={VirtualTableRowCell}
+            />
+          );
+        }
+
+        if (name === 'seasonCount') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {seasonCount}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'episodeProgress') {
+          const progress = episodeCount
+            ? (episodeFileCount / episodeCount) * 100
+            : 100;
+
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <ProgressBar
+                progress={progress}
+                kind={getProgressBarKind(status, monitored, progress)}
+                showText={true}
+                text={`${episodeFileCount} / ${episodeCount}`}
+                title={`${episodeFileCount} / ${episodeCount} (Total: ${totalEpisodeCount})`}
+                width={125}
+              />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'latestSeason') {
+          if (!latestSeason) {
+            return <VirtualTableRowCell key={name} className={styles[name]} />;
+          }
+
+          const seasonStatistics = latestSeason.statistics || {};
+          const progress = seasonStatistics.episodeCount
+            ? (seasonStatistics.episodeFileCount /
+                seasonStatistics.episodeCount) *
+              100
+            : 100;
+
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <ProgressBar
+                progress={progress}
+                kind={getProgressBarKind(status, monitored, progress)}
+                showText={true}
+                text={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount}`}
+                title={`${seasonStatistics.episodeFileCount} / ${seasonStatistics.episodeCount} (Total: ${seasonStatistics.totalEpisodeCount})`}
+                width={125}
+              />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'episodeCount') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {totalEpisodeCount}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'year') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {year}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'path') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {path}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'sizeOnDisk') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {formatBytes(sizeOnDisk)}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'genres') {
+          const joinedGenres = genres.join(', ');
+
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <span title={joinedGenres}>{joinedGenres}</span>
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'ratings') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <HeartRating rating={ratings.value} />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'certification') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              {certification}
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'releaseGroups') {
+          const joinedReleaseGroups = releaseGroups.join(', ');
+          const truncatedReleaseGroups =
+            releaseGroups.length > 3
+              ? `${releaseGroups.slice(0, 3).join(', ')}...`
+              : joinedReleaseGroups;
+
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <span title={joinedReleaseGroups}>{truncatedReleaseGroups}</span>
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'tags') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <TagListConnector tags={tags} />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'useSceneNumbering') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <CheckInput
+                className={styles.checkInput}
+                name="useSceneNumbering"
+                value={useSceneNumbering}
+                isDisabled={true}
+                onChange={onUseSceneNumberingChange}
+              />
+            </VirtualTableRowCell>
+          );
+        }
+
+        if (name === 'actions') {
+          return (
+            <VirtualTableRowCell key={name} className={styles[name]}>
+              <SpinnerIconButton
+                name={icons.REFRESH}
+                title="Refresh series"
+                isSpinning={isRefreshingSeries}
+                onPress={onRefreshPress}
+              />
+
+              {showSearchAction ? (
+                <SpinnerIconButton
+                  name={icons.SEARCH}
+                  title="Search for monitored episodes"
+                  isSpinning={isSearchingSeries}
+                  onPress={onSearchPress}
+                />
+              ) : null}
+
+              <IconButton
+                name={icons.EDIT}
+                title="Edit Series"
+                onPress={onEditSeriesPress}
+              />
+            </VirtualTableRowCell>
+          );
+        }
+
+        return null;
+      })}
+
+      <EditSeriesModalConnector
+        isOpen={isEditSeriesModalOpen}
+        seriesId={seriesId}
+        onModalClose={onEditSeriesModalClose}
+        onDeleteSeriesPress={onDeleteSeriesPress}
+      />
+
+      <DeleteSeriesModal
+        isOpen={isDeleteSeriesModalOpen}
+        seriesId={seriesId}
+        onModalClose={onDeleteSeriesModalClose}
+      />
+    </>
+  );
+}
+
+export default SeriesIndexRow;

frontend/src/Series/Index/Table/SeriesIndexTable.css

@@ -1,5 +1,3 @@
-.tableContainer {
-  composes: tableContainer from '~Components/Table/VirtualTable.css';
-
-  flex: 1 0 auto;
+.tableScroller {
+  position: relative;
 }

frontend/src/Series/Index/Table/SeriesIndexTable.js

@@ -1,127 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import VirtualTable from 'Components/Table/VirtualTable';
-import VirtualTableRow from 'Components/Table/VirtualTableRow';
-import { sortDirections } from 'Helpers/Props';
-import SeriesIndexItemConnector from 'Series/Index/SeriesIndexItemConnector';
-import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
-import SeriesIndexHeaderConnector from './SeriesIndexHeaderConnector';
-import SeriesIndexRow from './SeriesIndexRow';
-import styles from './SeriesIndexTable.css';
-
-class SeriesIndexTable extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      scrollIndex: null
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      items,
-      jumpToCharacter
-    } = this.props;
-
-    if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-
-      const scrollIndex = getIndexOfFirstCharacter(items, jumpToCharacter);
-
-      if (scrollIndex != null) {
-        this.setState({ scrollIndex });
-      }
-    } else if (jumpToCharacter == null && prevProps.jumpToCharacter != null) {
-      this.setState({ scrollIndex: null });
-    }
-  }
-
-  //
-  // Control
-
-  rowRenderer = ({ key, rowIndex, style }) => {
-    const {
-      items,
-      columns,
-      showBanners
-    } = this.props;
-
-    const series = items[rowIndex];
-
-    return (
-      <VirtualTableRow
-        key={key}
-        style={style}
-      >
-        <SeriesIndexItemConnector
-          key={series.id}
-          component={SeriesIndexRow}
-          columns={columns}
-          seriesId={series.id}
-          qualityProfileId={series.qualityProfileId}
-          showBanners={showBanners}
-        />
-      </VirtualTableRow>
-    );
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      items,
-      columns,
-      sortKey,
-      sortDirection,
-      showBanners,
-      isSmallScreen,
-      onSortPress,
-      scroller,
-      scrollTop
-    } = this.props;
-
-    return (
-      <VirtualTable
-        className={styles.tableContainer}
-        items={items}
-        scrollIndex={this.state.scrollIndex}
-        scrollTop={scrollTop}
-        scroller={scroller}
-        isSmallScreen={isSmallScreen}
-        rowHeight={showBanners ? 70 : 38}
-        overscanRowCount={2}
-        rowRenderer={this.rowRenderer}
-        header={
-          <SeriesIndexHeaderConnector
-            showBanners={showBanners}
-            columns={columns}
-            sortKey={sortKey}
-            sortDirection={sortDirection}
-            onSortPress={onSortPress}
-          />
-        }
-        columns={columns}
-      />
-    );
-  }
-}
-
-SeriesIndexTable.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sortKey: PropTypes.string,
-  sortDirection: PropTypes.oneOf(sortDirections.all),
-  showBanners: PropTypes.bool.isRequired,
-  jumpToCharacter: PropTypes.string,
-  scrollTop: PropTypes.number,
-  scroller: PropTypes.instanceOf(Element).isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  onSortPress: PropTypes.func.isRequired
-};
-
-export default SeriesIndexTable;

frontend/src/Series/Index/Table/SeriesIndexTable.tsx

@@ -0,0 +1,205 @@
+import { throttle } from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
+import { createSelector } from 'reselect';
+import Scroller from 'Components/Scroller/Scroller';
+import Column from 'Components/Table/Column';
+import useMeasure from 'Helpers/Hooks/useMeasure';
+import ScrollDirection from 'Helpers/Props/ScrollDirection';
+import SortDirection from 'Helpers/Props/SortDirection';
+import Series from 'Series/Series';
+import dimensions from 'Styles/Variables/dimensions';
+import getIndexOfFirstCharacter from 'Utilities/Array/getIndexOfFirstCharacter';
+import selectTableOptions from './selectTableOptions';
+import SeriesIndexRow from './SeriesIndexRow';
+import SeriesIndexTableHeader from './SeriesIndexTableHeader';
+import styles from './SeriesIndexTable.css';
+
+const bodyPadding = parseInt(dimensions.pageContentBodyPadding);
+const bodyPaddingSmallScreen = parseInt(
+  dimensions.pageContentBodyPaddingSmallScreen
+);
+
+interface RowItemData {
+  items: Series[];
+  sortKey: string;
+  columns: Column[];
+}
+
+interface SeriesIndexTableProps {
+  items: Series[];
+  sortKey?: string;
+  sortDirection?: SortDirection;
+  jumpToCharacter?: string;
+  scrollTop?: number;
+  scrollerRef: React.MutableRefObject<HTMLElement>;
+  isSmallScreen: boolean;
+}
+
+const columnsSelector = createSelector(
+  (state) => state.seriesIndex.columns,
+  (columns) => columns
+);
+
+const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
+  index,
+  style,
+  data,
+}) => {
+  const { items, sortKey, columns } = data;
+
+  if (index >= items.length) {
+    return null;
+  }
+
+  const series = items[index];
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        ...style,
+      }}
+    >
+      <SeriesIndexRow
+        seriesId={series.id}
+        sortKey={sortKey}
+        columns={columns}
+      />
+    </div>
+  );
+};
+
+function getWindowScrollTopPosition() {
+  return document.documentElement.scrollTop || document.body.scrollTop || 0;
+}
+
+function SeriesIndexTable(props: SeriesIndexTableProps) {
+  const {
+    items,
+    sortKey,
+    sortDirection,
+    jumpToCharacter,
+    isSmallScreen,
+    scrollerRef,
+  } = props;
+
+  const columns = useSelector(columnsSelector);
+  const { showBanners } = useSelector(selectTableOptions);
+  const listRef: React.MutableRefObject<List> = useRef();
+  const [measureRef, bounds] = useMeasure();
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  const rowHeight = useMemo(() => {
+    return showBanners ? 70 : 38;
+  }, [showBanners]);
+
+  useEffect(() => {
+    const current = scrollerRef.current as HTMLElement;
+
+    if (isSmallScreen) {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+
+      return;
+    }
+
+    if (current) {
+      const width = current.clientWidth;
+      const padding =
+        (isSmallScreen ? bodyPaddingSmallScreen : bodyPadding) - 5;
+
+      setSize({
+        width: width - padding * 2,
+        height: window.innerHeight,
+      });
+    }
+  }, [isSmallScreen, scrollerRef, bounds]);
+
+  useEffect(() => {
+    const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
+    const currentScrollerRef = scrollerRef.current;
+
+    const handleScroll = throttle(() => {
+      const { offsetTop = 0 } = currentScrollerRef;
+      const scrollTop =
+        (isSmallScreen
+          ? getWindowScrollTopPosition()
+          : currentScrollerRef.scrollTop) - offsetTop;
+
+      listRef.current.scrollTo(scrollTop);
+    }, 10);
+
+    currentScrollListener.addEventListener('scroll', handleScroll);
+
+    return () => {
+      handleScroll.cancel();
+
+      if (currentScrollListener) {
+        currentScrollListener.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [isSmallScreen, listRef, scrollerRef]);
+
+  useEffect(() => {
+    if (jumpToCharacter) {
+      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+
+      if (index != null) {
+        let scrollTop = index * rowHeight;
+
+        // If the offset is zero go to the top, otherwise offset
+        // by the approximate size of the header + padding (37 + 20).
+        if (scrollTop > 0) {
+          const offset = 57;
+
+          scrollTop += offset;
+        }
+
+        listRef.current.scrollTo(scrollTop);
+        scrollerRef.current.scrollTo(0, scrollTop);
+      }
+    }
+  }, [jumpToCharacter, rowHeight, items, scrollerRef, listRef]);
+
+  return (
+    <div ref={measureRef}>
+      <Scroller
+        className={styles.tableScroller}
+        scrollDirection={ScrollDirection.Horizontal}
+      >
+        <SeriesIndexTableHeader
+          showBanners={showBanners}
+          columns={columns}
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+        />
+        <List<RowItemData>
+          ref={listRef}
+          style={{
+            width: '100%',
+            height: '100%',
+            overflow: 'none',
+          }}
+          width={size.width}
+          height={size.height}
+          itemCount={items.length}
+          itemSize={rowHeight}
+          itemData={{
+            items,
+            sortKey,
+            columns,
+          }}
+        >
+          {Row}
+        </List>
+      </Scroller>
+    </div>
+  );
+}
+
+export default SeriesIndexTable;

frontend/src/Series/Index/Table/SeriesIndexTableConnector.js

@@ -1,29 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { setSeriesSort } from 'Store/Actions/seriesIndexActions';
-import SeriesIndexTable from './SeriesIndexTable';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app.dimensions,
-    (state) => state.seriesIndex.tableOptions,
-    (state) => state.seriesIndex.columns,
-    (dimensions, tableOptions, columns) => {
-      return {
-        isSmallScreen: dimensions.isSmallScreen,
-        showBanners: tableOptions.showBanners,
-        columns
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onSortPress(sortKey) {
-      dispatch(setSeriesSort({ sortKey }));
-    }
-  };
-}
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexTable);

frontend/src/Series/Index/Table/SeriesIndexTableHeader.tsx

@@ -0,0 +1,99 @@
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import IconButton from 'Components/Link/IconButton';
+import Column from 'Components/Table/Column';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import { icons } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
+import {
+  setSeriesSort,
+  setSeriesTableOption,
+} from 'Store/Actions/seriesIndexActions';
+import hasGrowableColumns from './hasGrowableColumns';
+import SeriesIndexTableOptions from './SeriesIndexTableOptions';
+import styles from './SeriesIndexTableHeader.css';
+
+interface SeriesIndexTableHeaderProps {
+  showBanners: boolean;
+  columns: Column[];
+  sortKey?: string;
+  sortDirection?: SortDirection;
+}
+
+function SeriesIndexTableHeader(props: SeriesIndexTableHeaderProps) {
+  const { showBanners, columns, sortKey, sortDirection } = props;
+
+  const dispatch = useDispatch();
+
+  const onSortPress = useCallback(
+    (value) => {
+      dispatch(setSeriesSort({ sortKey: value }));
+    },
+    [dispatch]
+  );
+
+  const onTableOptionChange = useCallback(
+    (payload) => {
+      dispatch(setSeriesTableOption(payload));
+    },
+    [dispatch]
+  );
+
+  return (
+    <VirtualTableHeader>
+      {columns.map((column) => {
+        const { name, label, isSortable, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        if (name === 'actions') {
+          return (
+            <VirtualTableHeaderCell
+              key={name}
+              className={styles[name]}
+              name={name}
+              isSortable={false}
+            >
+              <TableOptionsModalWrapper
+                columns={columns}
+                optionsComponent={SeriesIndexTableOptions}
+                onTableOptionChange={onTableOptionChange}
+              >
+                <IconButton name={icons.ADVANCED_SETTINGS} />
+              </TableOptionsModalWrapper>
+            </VirtualTableHeaderCell>
+          );
+        }
+
+        return (
+          <VirtualTableHeaderCell
+            key={name}
+            className={classNames(
+              styles[name],
+              name === 'sortTitle' && showBanners && styles.banner,
+              name === 'sortTitle' &&
+                showBanners &&
+                !hasGrowableColumns(columns) &&
+                styles.bannerGrow
+            )}
+            name={name}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            isSortable={isSortable}
+            onSortPress={onSortPress}
+          >
+            {label}
+          </VirtualTableHeaderCell>
+        );
+      })}
+    </VirtualTableHeader>
+  );
+}
+
+export default SeriesIndexTableHeader;

frontend/src/Series/Index/Table/SeriesIndexTableOptions.js

@@ -1,100 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import { inputTypes } from 'Helpers/Props';
-
-class SeriesIndexTableOptions extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      showBanners: props.showBanners,
-      showSearchAction: props.showSearchAction
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      showBanners,
-      showSearchAction
-    } = this.props;
-
-    if (
-      showBanners !== prevProps.showBanners ||
-      showSearchAction !== prevProps.showSearchAction
-    ) {
-      this.setState({
-        showBanners,
-        showSearchAction
-      });
-    }
-  }
-
-  //
-  // Listeners
-
-  onTableOptionChange = ({ name, value }) => {
-    this.setState({
-      [name]: value
-    }, () => {
-      this.props.onTableOptionChange({
-        tableOptions: {
-          ...this.state,
-          [name]: value
-        }
-      });
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      showBanners,
-      showSearchAction
-    } = this.state;
-
-    return (
-      <Fragment>
-        <FormGroup>
-          <FormLabel>Show Banners</FormLabel>
-
-          <FormInputGroup
-            type={inputTypes.CHECK}
-            name="showBanners"
-            value={showBanners}
-            helpText="Show banners instead of titles"
-            onChange={this.onTableOptionChange}
-          />
-        </FormGroup>
-
-        <FormGroup>
-          <FormLabel>Show Search</FormLabel>
-
-          <FormInputGroup
-            type={inputTypes.CHECK}
-            name="showSearchAction"
-            value={showSearchAction}
-            helpText="Show search button on hover"
-            onChange={this.onTableOptionChange}
-          />
-        </FormGroup>
-      </Fragment>
-    );
-  }
-}
-
-SeriesIndexTableOptions.propTypes = {
-  showBanners: PropTypes.bool.isRequired,
-  showSearchAction: PropTypes.bool.isRequired,
-  onTableOptionChange: PropTypes.func.isRequired
-};
-
-export default SeriesIndexTableOptions;

frontend/src/Series/Index/Table/SeriesIndexTableOptions.tsx

@@ -0,0 +1,61 @@
+import React, { Fragment, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+import selectTableOptions from './selectTableOptions';
+
+interface SeriesIndexTableOptionsProps {
+  onTableOptionChange(...args: unknown[]): unknown;
+}
+
+function SeriesIndexTableOptions(props: SeriesIndexTableOptionsProps) {
+  const { onTableOptionChange } = props;
+
+  const tableOptions = useSelector(selectTableOptions);
+
+  const { showBanners, showSearchAction } = tableOptions;
+
+  const onTableOptionChangeWrapper = useCallback(
+    ({ name, value }) => {
+      onTableOptionChange({
+        tableOptions: {
+          ...tableOptions,
+          [name]: value,
+        },
+      });
+    },
+    [tableOptions, onTableOptionChange]
+  );
+
+  return (
+    <Fragment>
+      <FormGroup>
+        <FormLabel>Show Banners</FormLabel>
+
+        <FormInputGroup
+          type={inputTypes.CHECK}
+          name="showBanners"
+          value={showBanners}
+          helpText="Show banners instead of titles"
+          onChange={onTableOptionChangeWrapper}
+        />
+      </FormGroup>
+
+      <FormGroup>
+        <FormLabel>Show Search</FormLabel>
+
+        <FormInputGroup
+          type={inputTypes.CHECK}
+          name="showSearchAction"
+          value={showSearchAction}
+          helpText="Show search button on hover"
+          onChange={onTableOptionChangeWrapper}
+        />
+      </FormGroup>
+    </Fragment>
+  );
+}
+
+export default SeriesIndexTableOptions;

frontend/src/Series/Index/Table/SeriesIndexTableOptionsConnector.js

@@ -1,14 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import SeriesIndexTableOptions from './SeriesIndexTableOptions';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.seriesIndex.tableOptions,
-    (tableOptions) => {
-      return tableOptions;
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(SeriesIndexTableOptions);

frontend/src/Series/Index/Table/SeriesStatusCell.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -6,22 +5,26 @@ import { icons } from 'Helpers/Props';
 import { getSeriesStatusDetails } from 'Series/SeriesStatus';
 import styles from './SeriesStatusCell.css';
 
-function SeriesStatusCell(props) {
+interface SeriesStatusCellProps {
+  className: string;
+  monitored: boolean;
+  status: string;
+  component?: React.ElementType;
+}
+
+function SeriesStatusCell(props: SeriesStatusCellProps) {
   const {
     className,
     monitored,
     status,
-    component: Component,
+    component: Component = VirtualTableRowCell,
     ...otherProps
   } = props;
 
   const statusDetails = getSeriesStatusDetails(status);
 
   return (
-    <Component
-      className={className}
-      {...otherProps}
-    >
+    <Component className={className} {...otherProps}>
       <Icon
         className={styles.statusIcon}
         name={monitored ? icons.MONITORED : icons.UNMONITORED}
@@ -32,22 +35,9 @@ function SeriesStatusCell(props) {
         className={styles.statusIcon}
         name={statusDetails.icon}
         title={`${statusDetails.title}: ${statusDetails.message}`}
-
       />
     </Component>
   );
 }
 
-SeriesStatusCell.propTypes = {
-  className: PropTypes.string.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  component: PropTypes.elementType
-};
-
-SeriesStatusCell.defaultProps = {
-  className: styles.status,
-  component: VirtualTableRowCell
-};
-
 export default SeriesStatusCell;

frontend/src/Series/Index/Table/hasGrowableColumns.ts

@@ -1,16 +1,8 @@
-const growableColumns = [
-  'network',
-  'qualityProfileId',
-  'path',
-  'tags'
-];
+const growableColumns = ['network', 'qualityProfileId', 'path', 'tags'];
 
 export default function hasGrowableColumns(columns) {
   return columns.some((column) => {
-    const {
-      name,
-      isVisible
-    } = column;
+    const { name, isVisible } = column;
 
     return growableColumns.includes(name) && isVisible;
   });

frontend/src/Series/Index/Table/selectTableOptions.ts

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const selectTableOptions = createSelector(
+  (state) => state.seriesIndex.tableOptions,
+  (tableOptions) => tableOptions
+);
+
+export default selectTableOptions;

frontend/src/Series/Index/createSeriesIndexItemSelector.ts

@@ -0,0 +1,51 @@
+import { maxBy } from 'lodash';
+import { createSelector } from 'reselect';
+import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
+import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector';
+import createSeriesQualityProfileSelector from 'Store/Selectors/createSeriesQualityProfileSelector';
+import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+
+function createSeriesIndexItemSelector(seriesId: number) {
+  return createSelector(
+    createSeriesSelector(seriesId),
+    createSeriesQualityProfileSelector(seriesId),
+    createExecutingCommandsSelector(),
+    (series, qualityProfile, executingCommands) => {
+      // If a series is deleted this selector may fire before the parent
+      // selectors, which will result in an undefined series, if that happens
+      // we want to return early here and again in the render function to avoid
+      // trying to show a series that has no information available.
+
+      if (!series) {
+        return {};
+      }
+
+      const isRefreshingSeries = executingCommands.some((command) => {
+        return (
+          command.name === REFRESH_SERIES && command.body.seriesId === series.id
+        );
+      });
+
+      const isSearchingSeries = executingCommands.some((command) => {
+        return (
+          command.name === SERIES_SEARCH && command.body.seriesId === series.id
+        );
+      });
+
+      const latestSeason = maxBy(
+        series.seasons,
+        (season) => season.seasonNumber
+      );
+
+      return {
+        series,
+        qualityProfile,
+        latestSeason,
+        isRefreshingSeries,
+        isSearchingSeries,
+      };
+    }
+  );
+}
+
+export default createSeriesIndexItemSelector;

frontend/src/Series/Series.ts

@@ -0,0 +1,75 @@
+import ModelBase from 'App/ModelBase';
+
+export interface Image {
+  coverType: string;
+  url: string;
+  remoteUrl: string;
+}
+
+export interface Language {
+  id: number;
+  name: string;
+}
+
+export interface Statistics {
+  episodeCount: number;
+  episodeFileCount: number;
+  percentOfEpisodes: number;
+  previousAiring?: Date;
+  releaseGroups: string[];
+  sizeOnDisk: number;
+  totalEpisodeCount: number;
+}
+
+export interface Season {
+  monitored: boolean;
+  seasonNumber: number;
+  statistics: Statistics;
+}
+
+export interface Ratings {
+  votes: number;
+  value: number;
+}
+
+export interface AlternateTitle {
+  seasonNumber: number;
+  title: string;
+}
+
+interface Series extends ModelBase {
+  added: Date;
+  alternateTitles: AlternateTitle[];
+  cleanTitle: string;
+  ended: boolean;
+  firstAired: Date;
+  genres: string[];
+  images: Image[];
+  imdbId: string;
+  monitored: boolean;
+  network: string;
+  originalLanguage: Language;
+  overview: string;
+  path: string;
+  previousAiring: Date;
+  qualityProfileId: number;
+  ratings: Ratings;
+  rootFolderPath: string;
+  runtime: number;
+  seasonFolder: boolean;
+  seasons: Season[];
+  seriesType: string;
+  sortTitle: string;
+  statistics: Statistics;
+  status: string;
+  tags: number[];
+  title: string;
+  titleSlug: string;
+  tvdbId: number;
+  tvMazeId: number;
+  tvRageId: number;
+  useSceneNumbering: boolean;
+  year: number;
+}
+
+export default Series;

frontend/src/Series/SeriesBanner.js

@@ -15,6 +15,10 @@ function SeriesBanner(props) {
 }
 
 SeriesBanner.propTypes = {
+  ...SeriesImage.propTypes,
+  coverType: PropTypes.string,
+  placeholder: PropTypes.string,
+  overflow: PropTypes.bool,
   size: PropTypes.number.isRequired
 };
 

frontend/src/Series/SeriesPoster.js

@@ -15,6 +15,10 @@ function SeriesPoster(props) {
 }
 
 SeriesPoster.propTypes = {
+  ...SeriesImage.propTypes,
+  coverType: PropTypes.string,
+  placeholder: PropTypes.string,
+  overflow: PropTypes.bool,
   size: PropTypes.number.isRequired
 };
 

frontend/src/Store/Selectors/createSeriesQualityProfileSelector.js

@@ -1,10 +1,10 @@
 import { createSelector } from 'reselect';
 import createSeriesSelector from './createSeriesSelector';
 
-function createSeriesQualityProfileSelector() {
+function createSeriesQualityProfileSelector(seriesId) {
   return createSelector(
     (state) => state.settings.qualityProfiles.items,
-    createSeriesSelector(),
+    createSeriesSelector(seriesId),
     (qualityProfiles, series = {}) => {
       return qualityProfiles.find((profile) => {
         return profile.id === series.qualityProfileId;

frontend/src/Store/Selectors/createSeriesSelector.js

@@ -1,12 +1,22 @@
 import { createSelector } from 'reselect';
 
-function createSeriesSelector() {
+function createSeriesSelector(id) {
+  if (id == null) {
+    return createSelector(
+      (state, { seriesId }) => seriesId,
+      (state) => state.series.itemMap,
+      (state) => state.series.items,
+      (seriesId, itemMap, allSeries) => {
+        return allSeries[itemMap[seriesId]];
+      }
+    );
+  }
+
   return createSelector(
-    (state, { seriesId }) => seriesId,
     (state) => state.series.itemMap,
     (state) => state.series.items,
-    (seriesId, itemMap, allSeries) => {
-      return allSeries[itemMap[seriesId]];
+    (itemMap, allSeries) => {
+      return allSeries[itemMap[id]];
     }
   );
 }

frontend/src/Utilities/Array/getIndexOfFirstCharacter.js

@@ -1,7 +1,5 @@
-import _ from 'lodash';
-
 export default function getIndexOfFirstCharacter(items, character) {
-  return _.findIndex(items, (item) => {
+  return items.findIndex((item) => {
     const firstCharacter = item.sortTitle.charAt(0);
 
     if (character === '#') {

package.json

@@ -29,6 +29,7 @@
     "@fortawesome/free-regular-svg-icons": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/react-fontawesome": "0.1.18",
+    "@juggle/resize-observer": "3.4.0",
     "@microsoft/signalr": "6.0.3",
     "@sentry/browser": "6.19.7",
     "@sentry/integrations": "6.19.7",
@@ -75,7 +76,9 @@
     "react-slider": "1.1.4",
     "react-tabs": "3.2.2",
     "react-text-truncate": "0.18.0",
+    "react-use-measure": "2.1.1",
     "react-virtualized": "9.21.1",
+    "react-window": "1.8.8",
     "redux": "4.2.0",
     "redux-actions": "2.6.5",
     "redux-batched-actions": "0.5.0",
@@ -100,6 +103,7 @@
     "@babel/preset-env": "7.18.0",
     "@babel/preset-react": "7.17.12",
     "@babel/preset-typescript": "7.18.6",
+    "@types/react-window": "1.8.5",
     "@typescript-eslint/eslint-plugin": "5.48.1",
     "@typescript-eslint/parser": "5.48.0",
     "autoprefixer": "10.4.7",

yarn.lock

@@ -1270,6 +1270,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@juggle/resize-observer@3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@microsoft/signalr@6.0.3":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@microsoft/signalr/-/signalr-6.0.3.tgz#9904efd48cd488e3c1c80930ff9fbb3c9f55895d"
@@ -1539,6 +1544,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-window@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
+  integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@18.0.26":
   version "18.0.26"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
@@ -2749,6 +2761,11 @@ cuint@^0.2.2:
   resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
   integrity sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==
 
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@^2.1.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4790,6 +4807,11 @@ memfs@^3.4.1:
   dependencies:
     fs-monkey "^1.0.3"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -5912,6 +5934,13 @@ react-themeable@^1.1.0:
   dependencies:
     object-assign "^3.0.0"
 
+react-use-measure@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
+  integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
+  dependencies:
+    debounce "^1.2.1"
+
 react-virtualized@9.21.1:
   version "9.21.1"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.1.tgz#4dbbf8f0a1420e2de3abf28fbb77120815277b3a"
@@ -5925,6 +5954,14 @@ react-virtualized@9.21.1:
     prop-types "^15.6.0"
     react-lifecycles-compat "^3.0.4"
 
+react-window@1.8.8:
+  version "1.8.8"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.8.tgz#1b52919f009ddf91970cbdb2050a6c7be44df243"
+  integrity sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"