Convert Movie Collection Menus to TypeScript

frontend/src/App/State/MovieCollectionAppState.ts

@@ -1,10 +1,12 @@
 import AppSectionState, {
+  AppSectionFilterState,
   AppSectionSaveState,
 } from 'App/State/AppSectionState';
 import MovieCollection from 'typings/MovieCollection';
 
 interface MovieCollectionAppState
   extends AppSectionState<MovieCollection>,
+    AppSectionFilterState<MovieCollection>,
     AppSectionSaveState {
   itemMap: Record<number, number>;
 

frontend/src/Collection/Collection.js

@@ -18,9 +18,9 @@ import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import CollectionFooter from './CollectionFooter';
-import CollectionFilterMenu from './Menus/CollectionFilterMenu';
-import CollectionSortMenu from './Menus/CollectionSortMenu';
-import NoCollections from './NoCollections';
+import MovieCollectionFilterMenu from './Menus/MovieCollectionFilterMenu';
+import MovieCollectionSortMenu from './Menus/MovieCollectionSortMenu';
+import NoMovieCollections from './NoMovieCollections';
 import CollectionOverviewsConnector from './Overview/CollectionOverviewsConnector';
 import CollectionOverviewOptionsModal from './Overview/Options/CollectionOverviewOptionsModal';
 
@@ -284,14 +284,14 @@ class Collection extends Component {
                 <PageToolbarSeparator />
             }
 
-            <CollectionSortMenu
+            <MovieCollectionSortMenu
               sortKey={sortKey}
               sortDirection={sortDirection}
               isDisabled={hasNoCollection}
               onSortSelect={onSortSelect}
             />
 
-            <CollectionFilterMenu
+            <MovieCollectionFilterMenu
               selectedFilterKey={selectedFilterKey}
               filters={filters}
               customFilters={customFilters}
@@ -341,7 +341,7 @@ class Collection extends Component {
 
             {
               !error && isPopulated && !items.length &&
-                <NoCollections totalItems={totalItems} />
+                <NoMovieCollections totalItems={totalItems} />
             }
           </PageContentBody>
 

frontend/src/Collection/CollectionFilterModalConnector.js

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

frontend/src/Collection/Menus/CollectionFilterMenu.js

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import CollectionFilterModalConnector from 'Collection/CollectionFilterModalConnector';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import { align } from 'Helpers/Props';
-
-function CollectionFilterMenu(props) {
-  const {
-    selectedFilterKey,
-    filters,
-    customFilters,
-    isDisabled,
-    onFilterSelect
-  } = props;
-
-  return (
-    <FilterMenu
-      alignMenu={align.RIGHT}
-      isDisabled={isDisabled}
-      selectedFilterKey={selectedFilterKey}
-      filters={filters}
-      customFilters={customFilters}
-      filterModalConnectorComponent={CollectionFilterModalConnector}
-      onFilterSelect={onFilterSelect}
-    />
-  );
-}
-
-CollectionFilterMenu.propTypes = {
-  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
-};
-
-CollectionFilterMenu.defaultProps = {
-  showCustomFilters: false
-};
-
-export default CollectionFilterMenu;

frontend/src/Collection/Menus/MovieCollectionFilterMenu.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { CustomFilter, Filter } from 'App/State/AppState';
+import MovieCollectionFilterModal from 'Collection/MovieCollectionFilterModal';
+import FilterMenu from 'Components/Menu/FilterMenu';
+
+interface MovieCollectionFilterMenuProps {
+  selectedFilterKey: string | number;
+  filters: Filter[];
+  customFilters: CustomFilter[];
+  isDisabled: boolean;
+  onFilterSelect: (filter: number | string) => void;
+}
+
+function MovieCollectionFilterMenu({
+  selectedFilterKey,
+  filters,
+  customFilters,
+  isDisabled,
+  onFilterSelect,
+}: MovieCollectionFilterMenuProps) {
+  return (
+    <FilterMenu
+      alignMenu="right"
+      isDisabled={isDisabled}
+      selectedFilterKey={selectedFilterKey}
+      filters={filters}
+      customFilters={customFilters}
+      filterModalConnectorComponent={MovieCollectionFilterModal}
+      onFilterSelect={onFilterSelect}
+    />
+  );
+}
+
+export default MovieCollectionFilterMenu;

frontend/src/Collection/Menus/MovieCollectionSortMenu.tsx

@@ -1,24 +1,26 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import MenuContent from 'Components/Menu/MenuContent';
 import SortMenu from 'Components/Menu/SortMenu';
 import SortMenuItem from 'Components/Menu/SortMenuItem';
-import { align, sortDirections } from 'Helpers/Props';
+import { align } from 'Helpers/Props';
+import { SortDirection } from 'Helpers/Props/sortDirections';
 import translate from 'Utilities/String/translate';
 
-function CollectionSortMenu(props) {
-  const {
-    sortKey,
-    sortDirection,
-    isDisabled,
-    onSortSelect
-  } = props;
+interface MovieCollectionSortMenuProps {
+  sortKey?: string;
+  sortDirection?: SortDirection;
+  isDisabled: boolean;
+  onSortSelect(sortKey: string): void;
+}
 
+function MovieCollectionSortMenu({
+  sortKey,
+  sortDirection,
+  isDisabled,
+  onSortSelect,
+}: MovieCollectionSortMenuProps) {
   return (
-    <SortMenu
-      isDisabled={isDisabled}
-      alignMenu={align.RIGHT}
-    >
+    <SortMenu isDisabled={isDisabled} alignMenu={align.RIGHT}>
       <MenuContent>
         <SortMenuItem
           name="sortTitle"
@@ -28,6 +30,7 @@ function CollectionSortMenu(props) {
         >
           {translate('Title')}
         </SortMenuItem>
+
         <SortMenuItem
           name="missingMovies"
           sortKey={sortKey}
@@ -41,11 +44,4 @@ function CollectionSortMenu(props) {
   );
 }
 
-CollectionSortMenu.propTypes = {
-  sortKey: PropTypes.string,
-  sortDirection: PropTypes.oneOf(sortDirections.all),
-  isDisabled: PropTypes.bool.isRequired,
-  onSortSelect: PropTypes.func.isRequired
-};
-
-export default CollectionSortMenu;
+export default MovieCollectionSortMenu;

frontend/src/Collection/MovieCollectionFilterModal.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setMovieCollectionsFilter } from 'Store/Actions/movieCollectionActions';
+
+interface MovieCollectionFilterModalProps {
+  isOpen: boolean;
+}
+
+export default function MovieCollectionFilterModal(
+  props: MovieCollectionFilterModalProps
+) {
+  const sectionItems = useSelector(
+    (state: AppState) => state.movieCollections.items
+  );
+  const filterBuilderProps = useSelector(
+    (state: AppState) => state.movieCollections.filterBuilderProps
+  );
+
+  const dispatch = useDispatch();
+
+  const dispatchSetFilter = useCallback(
+    (payload: { selectedFilterKey: string | number }) => {
+      dispatch(setMovieCollectionsFilter(payload));
+    },
+    [dispatch]
+  );
+
+  return (
+    <FilterModal
+      {...props}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType="movieCollections"
+      dispatchSetFilter={dispatchSetFilter}
+    />
+  );
+}

frontend/src/Collection/NoMovieCollections.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import Button from 'Components/Link/Button';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
-import styles from './NoCollection.css';
+import styles from './NoMovieCollections.css';
 
-interface NoCollectionsProps {
+interface NoMovieCollectionsProps {
   totalItems: number;
 }
 
-function NoCollections({ totalItems }: NoCollectionsProps) {
+function NoMovieCollections({ totalItems }: NoMovieCollectionsProps) {
   if (totalItems > 0) {
     return (
       <div>
@@ -38,4 +38,4 @@ function NoCollections({ totalItems }: NoCollectionsProps) {
   );
 }
 
-export default NoCollections;
+export default NoMovieCollections;