Typings cleanup and improvements

Appease linter (cherry picked from commit b2c43fb2a67965d68d3d35b72302b0cddb5aca23) (cherry picked from commit 3b5e83670b844cf7c20bf7d744d9fbc96fde6902) Closes #3516 Closes #3510 Closes #2778
Lidarr · Feb 6, 2024 · efe0a3d · efe0a3d
1 parent 8e5942d
commit efe0a3d
Show file tree

Hide file tree

Showing 46 changed files with 420 additions and 269 deletions.
diff --git a/frontend/src/Artist/Index/ArtistIndex.tsx b/frontend/src/Artist/Index/ArtistIndex.tsx
@@ -7,6 +7,8 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { SelectProvider } from 'App/SelectContext';
+import ArtistAppState, { ArtistIndexAppState } from 'App/State/ArtistAppState';
+import ClientSideCollectionAppState from 'App/State/ClientSideCollectionAppState';
 import NoArtist from 'Artist/NoArtist';
 import { RSS_SYNC } from 'Commands/commandNames';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -89,16 +91,19 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
     sortKey,
     sortDirection,
     view,
-  } = useSelector(createArtistClientSideCollectionItemsSelector('artistIndex'));
+  }: ArtistAppState & ArtistIndexAppState & ClientSideCollectionAppState =
+    useSelector(createArtistClientSideCollectionItemsSelector('artistIndex'));
 
   const isRssSyncExecuting = useSelector(
     createCommandExecutingSelector(RSS_SYNC)
   );
   const { isSmallScreen } = useSelector(createDimensionsSelector());
   const dispatch = useDispatch();
-  const scrollerRef = useRef<HTMLDivElement>();
+  const scrollerRef = useRef<HTMLDivElement>(null);
   const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
-  const [jumpToCharacter, setJumpToCharacter] = useState<string | null>(null);
+  const [jumpToCharacter, setJumpToCharacter] = useState<string | undefined>(
+    undefined
+  );
   const [isSelectMode, setIsSelectMode] = useState(false);
 
   useEffect(() => {
@@ -118,14 +123,14 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
   }, [isSelectMode, setIsSelectMode]);
 
   const onTableOptionChange = useCallback(
-    (payload) => {
+    (payload: unknown) => {
       dispatch(setArtistTableOption(payload));
     },
     [dispatch]
   );
 
   const onViewSelect = useCallback(
-    (value) => {
+    (value: string) => {
       dispatch(setArtistView({ view: value }));
 
       if (scrollerRef.current) {
@@ -136,14 +141,14 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
   );
 
   const onSortSelect = useCallback(
-    (value) => {
+    (value: string) => {
       dispatch(setArtistSort({ sortKey: value }));
     },
     [dispatch]
   );
 
   const onFilterSelect = useCallback(
-    (value) => {
+    (value: string) => {
       dispatch(setArtistFilter({ selectedFilterKey: value }));
     },
     [dispatch]
@@ -158,15 +163,15 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
   }, [setIsOptionsModalOpen]);
 
   const onJumpBarItemPress = useCallback(
-    (character) => {
+    (character: string) => {
       setJumpToCharacter(character);
     },
     [setJumpToCharacter]
   );
 
   const onScroll = useCallback(
-    ({ scrollTop }) => {
-      setJumpToCharacter(null);
+    ({ scrollTop }: { scrollTop: number }) => {
+      setJumpToCharacter(undefined);
       scrollPositions.artistIndex = scrollTop;
     },
     [setJumpToCharacter]
@@ -180,10 +185,10 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
       };
     }
 
-    const characters = items.reduce((acc, item) => {
+    const characters = items.reduce((acc: Record<string, number>, item) => {
       let char = item.sortName.charAt(0);
 
-      if (!isNaN(char)) {
+      if (!isNaN(Number(char))) {
         char = '#';
       }
 
@@ -300,6 +305,8 @@ const ArtistIndex = withScrollPosition((props: ArtistIndexProps) => {
           <PageContentBody
             ref={scrollerRef}
             className={styles.contentBody}
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             innerClassName={styles[`${view}InnerContentBody`]}
             initialScrollTop={props.initialScrollTop}
             onScroll={onScroll}

diff --git a/frontend/src/Artist/Index/ArtistIndexFilterModal.tsx b/frontend/src/Artist/Index/ArtistIndexFilterModal.tsx
@@ -23,22 +23,29 @@ function createFilterBuilderPropsSelector() {
   );
 }
 
-export default function ArtistIndexFilterModal(props) {
+interface ArtistIndexFilterModalProps {
+  isOpen: boolean;
+}
+
+export default function ArtistIndexFilterModal(
+  props: ArtistIndexFilterModalProps
+) {
   const sectionItems = useSelector(createArtistSelector());
   const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
   const customFilterType = 'artist';
 
   const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    (payload) => {
+    (payload: unknown) => {
       dispatch(setArtistFilter(payload));
     },
     [dispatch]
   );
 
   return (
     <FilterModal
+      // TODO: Don't spread all the props
       {...props}
       sectionItems={sectionItems}
       filterBuilderProps={filterBuilderProps}

diff --git a/frontend/src/Artist/Index/Banners/ArtistIndexBanner.tsx b/frontend/src/Artist/Index/Banners/ArtistIndexBanner.tsx
@@ -206,7 +206,7 @@ function ArtistIndexBanner(props: ArtistIndexBannerProps) {
         </div>
       ) : null}
 
-      {showQualityProfile ? (
+      {showQualityProfile && !!qualityProfile?.name ? (
         <div className={styles.title} title={translate('QualityProfile')}>
           {qualityProfile.name}
         </div>

diff --git a/frontend/src/Artist/Index/Banners/ArtistIndexBanners.tsx b/frontend/src/Artist/Index/Banners/ArtistIndexBanners.tsx
@@ -1,8 +1,9 @@
 import { throttle } from 'lodash';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FixedSizeGrid as Grid, GridChildComponentProps } from 'react-window';
 import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import Artist from 'Artist/Artist';
 import ArtistIndexBanner from 'Artist/Index/Banners/ArtistIndexBanner';
 import useMeasure from 'Helpers/Hooks/useMeasure';
@@ -21,7 +22,7 @@ const columnPaddingSmallScreen = parseInt(
 const progressBarHeight = parseInt(dimensions.progressBarSmallHeight);
 const detailedProgressBarHeight = parseInt(dimensions.progressBarMediumHeight);
 
-const ADDITIONAL_COLUMN_COUNT = {
+const ADDITIONAL_COLUMN_COUNT: Record<string, number> = {
   small: 3,
   medium: 2,
   large: 1,
@@ -41,17 +42,17 @@ interface CellItemData {
 
 interface ArtistIndexBannersProps {
   items: Artist[];
-  sortKey?: string;
+  sortKey: string;
   sortDirection?: SortDirection;
   jumpToCharacter?: string;
   scrollTop?: number;
-  scrollerRef: React.MutableRefObject<HTMLElement>;
+  scrollerRef: RefObject<HTMLElement>;
   isSelectMode: boolean;
   isSmallScreen: boolean;
 }
 
 const artistIndexSelector = createSelector(
-  (state) => state.artistIndex.bannerOptions,
+  (state: AppState) => state.artistIndex.bannerOptions,
   (bannerOptions) => {
     return {
       bannerOptions,
@@ -108,7 +109,7 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
   } = props;
 
   const { bannerOptions } = useSelector(artistIndexSelector);
-  const ref: React.MutableRefObject<Grid> = useRef();
+  const ref = useRef<Grid>(null);
   const [measureRef, bounds] = useMeasure();
   const [size, setSize] = useState({ width: 0, height: 0 });
 
@@ -222,8 +223,8 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
   }, [isSmallScreen, scrollerRef, bounds]);
 
   useEffect(() => {
-    const currentScrollListener = isSmallScreen ? window : scrollerRef.current;
-    const currentScrollerRef = scrollerRef.current;
+    const currentScrollerRef = scrollerRef.current as HTMLElement;
+    const currentScrollListener = isSmallScreen ? window : currentScrollerRef;
 
     const handleScroll = throttle(() => {
       const { offsetTop = 0 } = currentScrollerRef;
@@ -232,7 +233,7 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
           ? getWindowScrollTopPosition()
           : currentScrollerRef.scrollTop) - offsetTop;
 
-      ref.current.scrollTo({ scrollLeft: 0, scrollTop });
+      ref.current?.scrollTo({ scrollLeft: 0, scrollTop });
     }, 10);
 
     currentScrollListener.addEventListener('scroll', handleScroll);
@@ -255,8 +256,8 @@ export default function ArtistIndexBanners(props: ArtistIndexBannersProps) {
 
         const scrollTop = rowIndex * rowHeight + padding;
 
-        ref.current.scrollTo({ scrollLeft: 0, scrollTop });
-        scrollerRef.current.scrollTo(0, scrollTop);
+        ref.current?.scrollTo({ scrollLeft: 0, scrollTop });
+        scrollerRef.current?.scrollTo(0, scrollTop);
       }
     }
   }, [

diff --git a/frontend/src/Artist/Index/Banners/Options/ArtistIndexBannerOptionsModalContent.tsx b/frontend/src/Artist/Index/Banners/Options/ArtistIndexBannerOptionsModalContent.tsx
@@ -59,7 +59,7 @@ function ArtistIndexBannerOptionsModalContent(
   const dispatch = useDispatch();
 
   const onBannerOptionChange = useCallback(
-    ({ name, value }) => {
+    ({ name, value }: { name: string; value: unknown }) => {
       dispatch(setArtistBannerOption({ [name]: value }));
     },
     [dispatch]

diff --git a/frontend/src/Artist/Index/Menus/ArtistIndexFilterMenu.tsx b/frontend/src/Artist/Index/Menus/ArtistIndexFilterMenu.tsx
@@ -1,10 +1,18 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import { CustomFilter } from 'App/State/AppState';
 import ArtistIndexFilterModal from 'Artist/Index/ArtistIndexFilterModal';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import { align } from 'Helpers/Props';
 
-function ArtistIndexFilterMenu(props) {
+interface ArtistIndexFilterMenuProps {
+  selectedFilterKey: string | number;
+  filters: object[];
+  customFilters: CustomFilter[];
+  isDisabled: boolean;
+  onFilterSelect(filterName: string): unknown;
+}
+
+function ArtistIndexFilterMenu(props: ArtistIndexFilterMenuProps) {
   const {
     selectedFilterKey,
     filters,
@@ -26,15 +34,6 @@ function ArtistIndexFilterMenu(props) {
   );
 }
 
-ArtistIndexFilterMenu.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,
-};
-
 ArtistIndexFilterMenu.defaultProps = {
   showCustomFilters: false,
 };