Add eslint rules (#644)

* Add @typescript-eslint/no-explicit-any (issue #626)

* Remove rule and extend the plugin

* Add @typescript-eslint/array-type

.eslintrc.json

@@ -3,7 +3,8 @@
     "airbnb",
     "airbnb-typescript",
     "airbnb/hooks",
-    "plugin:tailwindcss/recommended"
+    "plugin:tailwindcss/recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
   "ignorePatterns": [
     "/*",
@@ -45,6 +46,7 @@
       "error",
       "type"
     ],
+    "@typescript-eslint/array-type": "error",
     "arrow-parens": [
       "error",
       "as-needed",

src/components/BackgroundImagePlaceholderDiv.tsx

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import type { ImageType } from '@/core/types/api/common';
 
 type Props = {
-  children?: any;
+  children?: React.ReactNode;
   className?: string;
   image: ImageType | null;
   hidePlaceholderOnHover?: boolean;

src/components/CharacterImage.tsx

@@ -4,7 +4,7 @@ import { Icon } from '@mdi/react';
 import cx from 'classnames';
 
 type Props = {
-  children?: any;
+  children?: React.ReactNode;
   className?: string;
   imageSrc: string | null;
   hidePlaceholderOnHover?: boolean;

src/components/Collection/AnidbDescription.tsx

@@ -15,7 +15,7 @@ const AnidbDescription = ({ text }: { text: string }) => {
       .replaceAll(RemoveSummaryRegex, '')
       .replaceAll(CleanMultiEmptyLinesRegex, '\n');
 
-    const lines = [] as Array<React.ReactNode>;
+    const lines = [] as React.ReactNode[];
     let prevPos = 0;
     let pos = 0;
     let link = LinkRegex.exec(cleanedText);

src/components/Collection/CardViewItem.tsx

@@ -25,7 +25,7 @@ import type { SeriesSizesFileSourcesType } from '@/core/types/api/series';
 import type { WebuiGroupExtra } from '@/core/types/api/webui';
 
 const renderFileSources = (sources: SeriesSizesFileSourcesType): string => {
-  const output: Array<string> = [];
+  const output: string[] = [];
   forEach(sources, (source, type) => {
     if (source !== 0) output.push(type);
   });

src/components/Dialogs/ActionsModal.tsx

@@ -11,6 +11,7 @@ import toast from '@/components/Toast';
 import TransitionDiv from '@/components/TransitionDiv';
 import quickActions from '@/core/quick-actions';
 import { useRunActionMutation } from '@/core/rtkQuery/splitV3Api/actionsApi';
+import { isErrorWithMessage } from '@/core/util';
 
 const actions = {
   import: {
@@ -89,10 +90,13 @@ const Action = ({ actionKey }: { actionKey: string }) => {
   const [runActionTrigger] = useRunActionMutation();
 
   const runAction = async (name: string, action) => {
-    // TODO: figure out better type for this
-    const result: any = await runActionTrigger(action);
-    if (!result.error) {
+    try {
+      await runActionTrigger(action);
       toast.success(`Running action "${name}"`);
+    } catch (err) {
+      if (isErrorWithMessage(err)) {
+        console.error(err.message);
+      }
     }
   };
 

src/components/Dialogs/FiltersModal.tsx

@@ -17,9 +17,9 @@ type Props = {
 function FiltersModal({ onClose, show }: Props) {
   const [trigger, filtersResult] = useLazyGetTopFiltersQuery({});
   const [triggerSubFilter, subFiltersResult] = useLazyGetFiltersQuery({});
-  const filters: Array<CollectionFilterType> = filtersResult?.data?.List ?? [] as Array<CollectionFilterType>;
-  const subFilters: Array<CollectionFilterType> = useMemo(
-    () => subFiltersResult?.data?.List ?? [] as Array<CollectionFilterType>,
+  const filters: CollectionFilterType[] = filtersResult?.data?.List ?? [] as CollectionFilterType[];
+  const subFilters: CollectionFilterType[] = useMemo(
+    () => subFiltersResult?.data?.List ?? [] as CollectionFilterType[],
     [subFiltersResult],
   );
 

src/components/Dialogs/ImportFolderModal.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/core/rtkQuery/splitV3Api/importFolderApi';
 import { setStatus as setBrowseStatus } from '@/core/slices/modals/browseFolder';
 import { setStatus } from '@/core/slices/modals/importFolder';
+import { isErrorWithMessage } from '@/core/util';
 
 import BrowseFolderModal from './BrowseFolderModal';
 
@@ -53,7 +54,7 @@ function ImportFolderModal() {
     }
   };
 
-  const handleInputChange = (event: any) => {
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const name = event.target.id;
     const value = name === 'WatchForNewFiles' ? event.target.value === '1' : event.target.value;
     setImportFolder({ ...importFolder, [name]: value });
@@ -62,28 +63,37 @@ function ImportFolderModal() {
   const handleBrowse = () => dispatch(setBrowseStatus(true));
   const handleClose = () => dispatch(setStatus(false));
   const handleDelete = async () => {
-    // TODO: can this be better typed?
-    const result: any = await deleteFolder({ folderId: ID });
-    if (!result.error) {
+    try {
+      await deleteFolder({ folderId: ID }).unwrap();
       toast.success('Import folder deleted!');
       dispatch(setStatus(false));
+    } catch (err) {
+      if (isErrorWithMessage(err)) {
+        console.error(err.message);
+      }
     }
   };
 
   const handleSave = async () => {
-    // TODO: can this be better typed?
-    let result;
     if (edit) {
-      result = await updateFolder(importFolder);
-      if (!result.error) {
+      try {
+        await updateFolder(importFolder);
         toast.success('Import folder edited!');
         dispatch(setStatus(false));
+      } catch (err) {
+        if (isErrorWithMessage(err)) {
+          console.error(err.message);
+        }
       }
     } else {
-      result = await createFolder(importFolder);
-      if (!result.error) {
+      try {
+        await createFolder(importFolder);
         toast.success('Import folder added!');
         dispatch(setStatus(false));
+      } catch (err) {
+        if (isErrorWithMessage(err)) {
+          console.error(err.message);
+        }
       }
     }
   };

src/components/Dialogs/LanguagesModal.tsx

@@ -76,7 +76,7 @@ function LanguagesModal({ onClose, type }: Props) {
   );
   const [patchSettings] = usePatchSettingsMutation();
 
-  const [languages, setLanguages] = useState([] as Array<string>);
+  const [languages, setLanguages] = useState([] as string[]);
 
   const handleSave = useCallback(() => {
     patchSettings({
@@ -94,7 +94,7 @@ function LanguagesModal({ onClose, type }: Props) {
     if (type !== null) setLanguages(LanguagePreference);
   }, [type, LanguagePreference]);
 
-  const handleInputChange = (event: any) => {
+  const handleInputChange = (event) => {
     const { checked: value, id } = event.target;
 
     const newLanguages = languages.slice();

src/components/Dialogs/QueueModal.tsx

@@ -116,7 +116,7 @@ const QueueModal = ({ onClose, show: showModal }: Props) => {
     }, 500), [getQuery]);
 
   const tabs = useMemo(() =>
-    map(Object.keys(names) as Array<QueueName>, (key, index, { length }) => (
+    map(Object.keys(names) as QueueName[], (key, index, { length }) => (
       index !== length - 1
         ? (
           <React.Fragment key={key}>

src/components/DnDList/DnDList.tsx

@@ -6,7 +6,7 @@ import PortalAwareItem from './PortalAwareItem';
 
 type Props = {
   onDragEnd: (result: DropResult) => void;
-  children: Array<{ key: string, item: React.ReactNode }>;
+  children: { key: string, item: React.ReactNode }[];
 };
 
 function DnDList(props: Props) {

src/components/Input/Button.tsx

@@ -6,11 +6,11 @@ import cx from 'classnames';
 type Props = {
   buttonType?: string;
   className?: string;
-  children: any;
+  children: React.ReactNode;
   disabled?: boolean;
   loading?: boolean;
   loadingSize?: number;
-  onClick?: (...args: any) => void;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
   submit?: boolean;
   tooltip?: string;
 };

src/components/Input/Checkbox.tsx

@@ -13,7 +13,7 @@ type Props = {
   className?: string;
   labelRight?: boolean;
   justify?: boolean;
-  onChange: (event: any) => void;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
 };
 
 function Checkbox({ className, id, intermediate, isChecked, justify, label, labelRight, onChange }: Props) {

src/components/Input/Input.tsx

@@ -8,15 +8,15 @@ type Props = {
   type: string;
   placeholder?: string;
   value: string | number;
-  onChange: (event: any) => void;
-  onKeyUp?: (event: any) => void;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
   className?: string;
   inputClassName?: string;
   autoFocus?: boolean;
   disabled?: boolean;
   center?: boolean;
   endIcon?: string;
-  endIconClick?: (event: any) => void;
+  endIconClick?: React.MouseEventHandler<HTMLDivElement>;
   startIcon?: string;
   inline?: boolean;
 };

src/components/Input/InputSmall.tsx

@@ -5,8 +5,8 @@ type Props = {
   type: string;
   placeholder?: string;
   value: string | number;
-  onChange: (event: any) => void;
-  onKeyUp?: (event: any) => void;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
   className?: string;
   autoFocus?: boolean;
   disabled?: boolean;

src/components/Input/Select.tsx

@@ -5,9 +5,9 @@ import { Icon } from '@mdi/react';
 type Props = {
   id: string;
   value: string | number;
-  onChange: (event: any) => void;
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
   className?: string;
-  children: any;
+  children: React.ReactNode;
   label?: string;
 };
 

src/components/Input/SelectEpisodeList.tsx

@@ -47,7 +47,7 @@ type Option = {
 };
 
 type Props = {
-  options: Array<Option>;
+  options: Option[];
   value: number;
   onChange: (optionValue: number, label: string) => void;
   className?: string;
@@ -98,8 +98,8 @@ const SelectEpisodeList = (
 ) => {
   const [epFilter, setEpFilter] = useState(0);
   const [selected, setSelected] = useState(options[0]);
-  const [portalEl, setPortalEl] = useState(null as any);
-  const [displayNode, setDisplayNode] = React.useState(null as any);
+  const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null);
+  const [displayNode, setDisplayNode] = React.useState<HTMLDivElement | null>(null);
   const displayRef = useRef(null);
   const buttonRef = useRef(null);
 

src/components/Input/SelectSmall.tsx

@@ -5,9 +5,9 @@ import { Icon } from '@mdi/react';
 type Props = {
   id: string;
   value: string | number;
-  onChange: (event: any) => void;
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
   className?: string;
-  children: any;
+  children: React.ReactNode;
   label?: string;
 };
 

src/components/Layout/MenuItem.tsx

@@ -32,7 +32,7 @@ export type MenuItemProps = {
   icon: IconType;
   label: string;
   className?: string;
-  onClick: (event: any) => void;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
 };
 
 function MenuItem(props: MenuItemProps) {

src/components/Panels/ModalPanel.tsx

@@ -3,7 +3,7 @@ import Modal from 'react-modal';
 import cx from 'classnames';
 
 type Props = {
-  children: any;
+  children: React.ReactNode;
   show: boolean;
   title: React.ReactNode;
   size?: 'sm' | 'md' | 'lg';

src/components/Panels/ShokoPanel.tsx

@@ -5,8 +5,8 @@ import cx from 'classnames';
 
 type Props = {
   title: ReactNode;
-  children: any;
-  options?: any;
+  children: React.ReactNode;
+  options?: React.ReactNode;
   className?: string;
   isFetching?: boolean;
   editMode?: boolean;

src/components/Settings/AvatarEditorModal.tsx

@@ -30,7 +30,8 @@ const AvatarEditorModal = (props: Props) => {
   }, [show]);
 
   const handleSave = () => {
-    const canvas: HTMLCanvasElement = imageEditor.current?.getImage();
+    if (!imageEditor.current) return;
+    const canvas: HTMLCanvasElement = imageEditor.current.getImage();
 
     if (canvas.width > 512) {
       const resizedCanvas = document.createElement('canvas');

src/components/TransitionDiv.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Transition } from '@headlessui/react';
 
 type Props = {
-  children: any;
+  children: React.ReactNode;
   className?: string;
   enter?: string;
   enterFrom?: string;

src/components/TreeView/TreeNode.tsx

@@ -51,7 +51,7 @@ function TreeNode(props: Props) {
     event.stopPropagation();
   };
 
-  const children: Array<React.ReactNode> = [];
+  const children: React.ReactNode[] = [];
   const data = nodeId === 0 ? drives.data! : folders.data!;
   if (expanded) {
     forEach(data, (node: DriveType | FolderType) => {

src/components/Utilities/Unrecognized/ManuallyLinkedFilesRow.tsx

@@ -54,7 +54,7 @@ function ManuallyLinkedFilesRow(props: Props) {
             id={`checkbox-${seriesId}-all`}
             isChecked={table.getIsAllRowsSelected()}
             onChange={() => {
-              const selectedIds: Array<number> = [];
+              const selectedIds: number[] = [];
               table.getRowModel().flatRows.reduce((result, row) => {
                 result.push(row.original.ID);
                 return result;

src/components/Utilities/Unrecognized/MenuButton.tsx

@@ -6,7 +6,7 @@ import Button from '@/components/Input/Button';
 
 const MenuButton = (
   { disabled, highlight = false, icon, name, onClick }: {
-    onClick: (...args: any) => void;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
     icon: string;
     name: string;
     highlight?: boolean;

src/components/Utilities/UtilitiesTable.tsx

@@ -57,7 +57,7 @@ function UtilitiesTable(props: Props) {
       const lrIndex = lastRowSelected?.current?.index ?? row.index;
       const fromIndex = Math.min(lrIndex, row.index);
       const toIndex = Math.max(lrIndex, row.index);
-      const rowSelection: any = {};
+      const rowSelection = {};
       for (let i = fromIndex; i <= toIndex; i += 1) {
         rowSelection[i] = lastRowSelected.current?.getIsSelected() ?? true;
       }

src/core/localStorage.ts

@@ -18,16 +18,16 @@ export const loadState = (): RootState => {
     const serializedState = JSON.parse(globalThis.sessionStorage.getItem('state') ?? '{}');
     const apiSessionString = globalThis.localStorage.getItem('apiSession');
     if (apiSessionString === null) {
-      return checkVersion(get(serializedState, 'apiSession.version', '')) ? serializedState : {} as any;
+      return checkVersion(get(serializedState, 'apiSession.version', '')) ? serializedState : {} as RootState;
     }
     const apiSession = JSON.parse(apiSessionString);
     if (!checkVersion(get(apiSession, 'version', ''))) {
       globalThis.localStorage.clear();
-      return {} as any;
+      return {} as RootState;
     }
     return { ...serializedState, apiSession };
   } catch (err) {
-    return ({} as any);
+    return ({} as RootState);
   }
 };