Convert Page components to TypeScript

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

@@ -1,6 +1,6 @@
-import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { IconName } from 'Components/Icon';
 import { icons } from 'Helpers/Props';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import dimensions from 'Styles/Variables/dimensions';
@@ -21,7 +21,7 @@ interface RowProps {
 
 interface RowInfoProps {
   title: string;
-  iconName: IconDefinition;
+  iconName: IconName;
   label: string;
 }
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import Icon, { IconProps } from 'Components/Icon';
+import Icon, { IconName } from 'Components/Icon';
 import styles from './SeriesIndexOverviewInfoRow.css';
 
 interface SeriesIndexOverviewInfoRowProps {
   title?: string;
-  iconName: IconProps['name'];
+  iconName: IconName;
   label: string | null;
 }
 

frontend/src/Series/Index/Select/SeriesIndexSelectAllButton.tsx

@@ -1,17 +1,18 @@
 import React, { useCallback } from 'react';
 import { useSelect } from 'App/SelectContext';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarButton, {
+  PageToolbarButtonProps,
+} from 'Components/Page/Toolbar/PageToolbarButton';
 import { icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
-interface SeriesIndexSelectAllButtonProps {
-  label: string;
+interface SeriesIndexSelectAllButtonProps
+  extends Omit<PageToolbarButtonProps, 'iconName'> {
   isSelectMode: boolean;
-  overflowComponent: React.FunctionComponent<never>;
 }
 
 function SeriesIndexSelectAllButton(props: SeriesIndexSelectAllButtonProps) {
-  const { isSelectMode } = props;
+  const { isSelectMode, overflowComponent } = props;
   const [selectState, selectDispatch] = useSelect();
   const { allSelected, allUnselected } = selectState;
 
@@ -33,6 +34,7 @@ function SeriesIndexSelectAllButton(props: SeriesIndexSelectAllButtonProps) {
     <PageToolbarButton
       label={allSelected ? translate('UnselectAll') : translate('SelectAll')}
       iconName={icon}
+      overflowComponent={overflowComponent}
       onPress={onPress}
     />
   ) : null;

frontend/src/Series/Index/Select/SeriesIndexSelectModeButton.tsx

@@ -1,18 +1,16 @@
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import React, { useCallback } from 'react';
 import { useSelect } from 'App/SelectContext';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarButton, {
+  PageToolbarButtonProps,
+} from 'Components/Page/Toolbar/PageToolbarButton';
 
-interface SeriesIndexSelectModeButtonProps {
-  label: string;
-  iconName: IconDefinition;
+interface SeriesIndexSelectModeButtonProps extends PageToolbarButtonProps {
   isSelectMode: boolean;
-  overflowComponent: React.FunctionComponent<never>;
   onPress: () => void;
 }
 
 function SeriesIndexSelectModeButton(props: SeriesIndexSelectModeButtonProps) {
-  const { label, iconName, isSelectMode, onPress } = props;
+  const { label, iconName, isSelectMode, overflowComponent, onPress } = props;
   const [, selectDispatch] = useSelect();
 
   const onPressWrapper = useCallback(() => {
@@ -29,6 +27,7 @@ function SeriesIndexSelectModeButton(props: SeriesIndexSelectModeButtonProps) {
     <PageToolbarButton
       label={label}
       iconName={iconName}
+      overflowComponent={overflowComponent}
       onPress={onPressWrapper}
     />
   );

frontend/src/Series/Index/Select/SeriesIndexSelectModeMenuItem.tsx

@@ -1,11 +1,11 @@
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import React, { useCallback } from 'react';
 import { useSelect } from 'App/SelectContext';
+import { IconName } from 'Components/Icon';
 import PageToolbarOverflowMenuItem from 'Components/Page/Toolbar/PageToolbarOverflowMenuItem';
 
 interface SeriesIndexSelectModeMenuItemProps {
   label: string;
-  iconName: IconDefinition;
+  iconName: IconName;
   isSelectMode: boolean;
   onPress: () => void;
 }

frontend/src/Series/Index/SeriesIndex.tsx

@@ -14,7 +14,7 @@ import Alert from 'Components/Alert';
 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 PageJumpBar, { PageJumpBarItems } 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';
@@ -174,10 +174,11 @@ const SeriesIndex = withScrollPosition((props: SeriesIndexProps) => {
     [setJumpToCharacter]
   );
 
-  const jumpBarItems = useMemo(() => {
+  const jumpBarItems: PageJumpBarItems = useMemo(() => {
     // Reset if not sorting by sortTitle
     if (sortKey !== 'sortTitle') {
       return {
+        characters: {},
         order: [],
       };
     }