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

.eslintrc.json

@@ -45,6 +45,7 @@
       "error",
       "type"
     ],
+    "@typescript-eslint/no-explicit-any": "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/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/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

@@ -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/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

@@ -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/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/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);
   }
 };
 

src/core/middlewares/rtkQueryError.ts

@@ -14,7 +14,7 @@ type ProblemDetails = {
   traceId: string;
 };
 
-const isErrorObject = (target: any): target is ProblemDetails =>
+const isErrorObject = (target): target is ProblemDetails =>
   typeof target === 'object' && target !== null && typeof target.title === 'string' && typeof target.errors === 'object'
   && target.errors !== null;
 

src/core/rtkQuery/externalApi.ts

@@ -10,7 +10,7 @@ export const externalApi = createApi({
     // Get blog posts from shokoanime.com
     getShokoNewsFeed: build.query<Array<DashboardNewsType>, void>({
       query: () => ({ url: 'https://shokoanime.com/jsonfeed/index.json' }),
-      transformResponse: (response: any) => response.items ?? [],
+      transformResponse: (response: { items?: DashboardNewsType[] }) => response.items ?? [],
     }),
   }),
 });

src/core/rtkQuery/splitV3Api/seriesApi.ts

@@ -62,7 +62,7 @@ const seriesApi = splitV3Api.injectEndpoints({
     // Search the title dump for the given query or directly using the anidb id.
     getSeriesAniDBSearch: build.query<Array<SeriesAniDBSearchResult>, { query: string } & PaginationType>({
       query: ({ query, ...params }) => ({ url: `Series/AniDB/Search/${encodeURIComponent(query)}`, params }),
-      transformResponse: (response: any) => response.List,
+      transformResponse: (response: ListResultType<Array<SeriesAniDBSearchResult>>) => response.List,
       providesTags: ['SeriesSearch'],
     }),
 
@@ -132,7 +132,7 @@ const seriesApi = splitV3Api.injectEndpoints({
     // Gets anidb recommendation for the user
     getAniDBRecommendedAnime: build.query<Array<SeriesRecommendedType>, PaginationType>({
       query: params => ({ url: 'Series/AniDB/RecommendedForYou', params: { ...params, showAll: true } }),
-      transformResponse: (response: any) => response.List,
+      transformResponse: (response: ListResultType<Array<SeriesRecommendedType>>) => response.List,
     }),
 
     getSeriesWithManuallyLinkedFiles: build.query<ListResultType<Array<SeriesType>>, PaginationType>({

src/core/slices/firstrun.ts

@@ -27,7 +27,7 @@ const firstrunSlice = createSlice({
     setSaved(sliceState, action: PayloadAction<string>) {
       sliceState.saved = Object.assign({}, sliceState.saved, { [action.payload]: true });
     },
-    setUser(sliceState, action: PayloadAction<any>) {
+    setUser(sliceState, action: PayloadAction<UserType>) {
       sliceState.user = Object.assign({}, sliceState.user, action.payload);
     },
     unsetSaved(sliceState, action: PayloadAction<string>) {

src/core/slices/misc.ts

@@ -15,9 +15,9 @@ const miscSlice = createSlice({
     },
     webuiUpdateAvailable: false,
     webuiPreviewTheme: null,
-  } as any,
+  },
   reducers: {
-    setItem(sliceState, action: PayloadAction<any>) {
+    setItem(sliceState, action: PayloadAction) {
       return Object.assign({}, sliceState, action.payload);
     },
   },