update linting

.eslintrc.js

@@ -23,6 +23,11 @@ module.exports = {
     project: "./tsconfig.json",
     tsconfigRootDir: "./",
   },
+  settings: {
+    "import/resolver": {
+      typescript: {},
+    },
+  },
   plugins: ["@typescript-eslint", "import"],
   rules: {
     "react/jsx-uses-react": "off",

package.json

@@ -26,7 +26,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .tsx,.ts src",
-    "lint:strict": "eslint --ext .tsx,.ts --max-warnings 0 src",
+    "lint:fix": "eslint --fix --ext .tsx,.ts src",
     "lint:report": "eslint --ext .tsx,.ts --output-file eslint_report.json --format json src"
   },
   "browserslist": {

src/components/Dropdown.tsx

@@ -57,5 +57,5 @@ export function Dropdown(props: DropdownProps) {
         )}
       </Listbox>
     </div>
-  )
+  );
 }

src/components/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { MWMediaType, MWQuery } from "@/providers";
 import { useTranslation } from "react-i18next";
+import { MWMediaType, MWQuery } from "@/providers";
 import { DropdownButton } from "./buttons/DropdownButton";
 import { Icon, Icons } from "./Icon";
 import { TextInputControl } from "./text-inputs/TextInputControl";

src/components/layout/Backdrop.tsx

@@ -1,6 +1,6 @@
 import React, { createRef, useEffect, useState } from "react";
-import { useFade } from "@/hooks/useFade";
 import { createPortal } from "react-dom";
+import { useFade } from "@/hooks/useFade";
 
 interface BackdropProps {
   onClick?: (e: MouseEvent) => void;

src/components/layout/BrandPill.tsx

@@ -1,5 +1,5 @@
-import { Icon, Icons } from "@/components/Icon";
 import { useTranslation } from "react-i18next";
+import { Icon, Icons } from "@/components/Icon";
 
 export function BrandPill(props: { clickable?: boolean }) {
   const { t } = useTranslation();

src/components/layout/Loading.tsx

@@ -8,10 +8,10 @@ export function Loading(props: LoadingProps) {
     <div className={props.className}>
       <div className="flex flex-col items-center justify-center">
         <div className="flex h-12 items-center justify-center">
-          <div className="animate-loading-pin bg-denim-300 mx-1 h-2 w-2 rounded-full" />
+          <div className="mx-1 h-2 w-2 animate-loading-pin rounded-full bg-denim-300" />
-          <div className="animate-loading-pin bg-denim-300 mx-1 h-2 w-2 rounded-full [animation-delay:150ms]" />
+          <div className="mx-1 h-2 w-2 animate-loading-pin rounded-full bg-denim-300 [animation-delay:150ms]" />
-          <div className="animate-loading-pin bg-denim-300 mx-1 h-2 w-2 rounded-full [animation-delay:300ms]" />
+          <div className="mx-1 h-2 w-2 animate-loading-pin rounded-full bg-denim-300 [animation-delay:300ms]" />
-          <div className="animate-loading-pin bg-denim-300 mx-1 h-2 w-2 rounded-full [animation-delay:450ms]" />
+          <div className="mx-1 h-2 w-2 animate-loading-pin rounded-full bg-denim-300 [animation-delay:450ms]" />
         </div>
         {props.text && props.text.length ? (
           <p className="mt-3 max-w-xs text-sm opacity-75">{props.text}</p>

src/components/layout/Paper.tsx

@@ -1,14 +1,16 @@
 import { ReactNode } from "react";
 
 export interface PaperProps {
-  children?: ReactNode,
+  children?: ReactNode;
-  className?: string,
+  className?: string;
 }
 
 export function Paper(props: PaperProps) {
   return (
-    <div className={`bg-denim-200 lg:rounded-xl px-4 sm:px-8 md:px-12 py-6 sm:py-8 md:py-12 ${props.className}`}>
+    <div
+      className={`bg-denim-200 px-4 py-6 sm:px-8 sm:py-8 md:px-12 md:py-12 lg:rounded-xl ${props.className}`}
+    >
       {props.children}
     </div>
-  )
+  );
 }

src/components/layout/Seasons.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Dropdown, OptionItem } from "@/components/Dropdown";
 import { Icons } from "@/components/Icon";
@@ -14,7 +15,6 @@ import {
   MWPortableMedia,
 } from "@/providers";
 import { getSeasonDataFromMedia } from "@/providers/methods/seasons";
-import { useTranslation } from "react-i18next";
 
 export interface SeasonsProps {
   media: MWMedia;
@@ -37,7 +37,7 @@ export function LoadingSeasons(props: { error?: boolean }) {
       ) : (
         <div className="flex items-center space-x-3">
           <IconPatch icon={Icons.WARNING} className="text-red-400" />
-          <p>{t('seasons.failed')}</p>
+          <p>{t("seasons.failed")}</p>
         </div>
       )}
     </div>
@@ -75,7 +75,7 @@ export function Seasons(props: SeasonsProps) {
 
   const mapSeason = (season: MWMediaSeason) => ({
     id: season.id,
-    name: season.title || `${t('seasons.season', { season: season.sort })}`,
+    name: season.title || `${t("seasons.season", { season: season.sort })}`,
   });
 
   const options = seasons.seasons.map(mapSeason);

src/components/media/EpisodeButton.tsx

@@ -9,12 +9,12 @@ export function Episode(props: EpisodeProps) {
   return (
     <div
       onClick={props.onClick}
-      className={`bg-denim-500 hover:bg-denim-400 transition-[background-color, transform, box-shadow] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded font-bold text-white active:scale-110 ${
+      className={`transition-[background-color, transform, box-shadow] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded bg-denim-500 font-bold text-white hover:bg-denim-400 active:scale-110 ${
-        props.active ? "shadow-bink-500 shadow-[inset_0_0_0_2px]" : ""
+        props.active ? "shadow-[inset_0_0_0_2px] shadow-bink-500" : ""
       }`}
     >
       <div
-        className="bg-bink-500 absolute bottom-0 top-0 left-0 bg-opacity-50"
+        className="absolute bottom-0 top-0 left-0 bg-bink-500 bg-opacity-50"
         style={{
           width: `${props.progress || 0}%`,
         }}

src/components/text/DotList.tsx

@@ -5,7 +5,7 @@ export interface DotListProps {
 
 export function DotList(props: DotListProps) {
   return (
-    <p className={`text-denim-700 font-semibold ${props.className || ""}`}>
+    <p className={`font-semibold text-denim-700 ${props.className || ""}`}>
       {props.content.map((item, index) => (
         <span key={item}>
           {index !== 0 ? (

src/components/text/Link.tsx

@@ -16,22 +16,27 @@ interface ILinkPropsInternal extends ILinkPropsBase {
   to: string;
 }
 
-type LinkProps =
+type LinkProps = ILinkPropsExternal | ILinkPropsInternal | ILinkPropsBase;
-  | ILinkPropsExternal
-  | ILinkPropsInternal
-  | ILinkPropsBase;
 
 export function Link(props: LinkProps) {
   const isExternal = !!(props as ILinkPropsExternal).url;
   const isInternal = !!(props as ILinkPropsInternal).to;
   const content = (
-    <span className="text-bink-600 hover:text-bink-700 cursor-pointer font-bold">
+    <span className="cursor-pointer font-bold text-bink-600 hover:text-bink-700">
       {props.children}
     </span>
   );
 
   if (isExternal)
-    return <a target={(props as ILinkPropsExternal).newTab ? "_blank" : undefined} rel="noreferrer" href={(props as ILinkPropsExternal).url}>{content}</a>;
+    return (
+      <a
+        target={(props as ILinkPropsExternal).newTab ? "_blank" : undefined}
+        rel="noreferrer"
+        href={(props as ILinkPropsExternal).url}
+      >
+        {content}
+      </a>
+    );
   if (isInternal)
     return (
       <LinkRouter to={(props as ILinkPropsInternal).to}>{content}</LinkRouter>

src/hooks/useDebounce.ts

@@ -4,17 +4,14 @@ export function useDebounce<T>(value: T, delay: number): T {
   // State and setters for debounced value
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
-  useEffect(
+  useEffect(() => {
-    () => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
     return () => {
       clearTimeout(handler);
     };
-    },
+  }, [value, delay]);
-    [value, delay]
-  );
 
   return debouncedValue;
 }

src/hooks/useFade.ts

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
-import './useFade.css'
+import "./useFade.css";
 
-export const useFade = (initial = false): [boolean, React.Dispatch<React.SetStateAction<boolean>>, any] => {
+export const useFade = (
+  initial = false
+): [boolean, React.Dispatch<React.SetStateAction<boolean>>, any] => {
   const [show, setShow] = useState<boolean>(initial);
   const [isVisible, setVisible] = useState<boolean>(show);
 
@@ -20,7 +22,7 @@ export const useFade = (initial = false): [boolean, React.Dispatch<React.SetStat
   // These props go on the fading DOM element
   const fadeProps = {
     style,
-    onAnimationEnd
+    onAnimationEnd,
   };
 
   return [isVisible, setShow, fadeProps];

src/setup/i18n.ts

@@ -1,8 +1,8 @@
-import i18n from 'i18next';
+import i18n from "i18next";
-import { initReactI18next } from 'react-i18next';
+import { initReactI18next } from "react-i18next";
 
-import Backend from 'i18next-http-backend';
+import Backend from "i18next-http-backend";
-import LanguageDetector from 'i18next-browser-languagedetector';
+import LanguageDetector from "i18next-browser-languagedetector";
 
 i18n
   // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
@@ -17,12 +17,11 @@ i18n
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
-    fallbackLng: 'en-GB',
+    fallbackLng: "en-GB",
 
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
-    }
+    },
   });
 
-
 export default i18n;

src/views/MediaView.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Navigation } from "@/components/layout/Navigation";
@@ -29,7 +30,6 @@ import {
   useBookmarkContext,
 } from "@/state/bookmark";
 import { getWatchedFromPortable, useWatchedContext } from "@/state/watched";
-import { useTranslation } from "react-i18next";
 import { NotFoundChecks } from "./notfound/NotFoundChecks";
 
 interface StyledMediaViewProps {

src/views/notfound/NotFoundView.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Navigation } from "@/components/layout/Navigation";
 import { ArrowLink } from "@/components/text/ArrowLink";
 import { Title } from "@/components/text/Title";
-import { useTranslation } from "react-i18next";
 
 function NotFoundWrapper(props: { children?: ReactNode }) {
   return (

src/views/search/HomeView.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
@@ -7,7 +8,6 @@ import {
   useBookmarkContext,
 } from "@/state/bookmark";
 import { useWatchedContext } from "@/state/watched";
-import { useTranslation } from "react-i18next";
 
 function Bookmarks() {
   const { t } = useTranslation();

src/views/search/SearchLoadingView.tsx

@@ -1,5 +1,5 @@
-import { Loading } from "@/components/layout/Loading";
 import { useTranslation } from "react-i18next";
+import { Loading } from "@/components/layout/Loading";
 
 export function SearchLoadingView() {
   const { t } = useTranslation();

src/views/search/SearchResultsPartial.tsx

@@ -1,6 +1,6 @@
+import { useEffect, useMemo, useState } from "react";
 import { useDebounce } from "@/hooks/useDebounce";
 import { MWQuery } from "@/providers";
-import { useEffect, useMemo, useState } from "react";
 import { HomeView } from "./HomeView";
 import { SearchLoadingView } from "./SearchLoadingView";
 import { SearchResultsView } from "./SearchResultsView";

src/views/search/SearchResultsView.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
@@ -5,8 +7,6 @@ import { MediaGrid } from "@/components/media/MediaGrid";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
 import { useLoading } from "@/hooks/useLoading";
 import { MWMassProviderOutput, MWQuery, SearchProviders } from "@/providers";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { SearchLoadingView } from "./SearchLoadingView";
 
 function SearchSuffix(props: {

src/views/search/SearchView.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useState } from "react";
+import Sticky from "react-stickynode";
+import { useTranslation } from "react-i18next";
 import { Navigation } from "@/components/layout/Navigation";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { SearchBarInput } from "@/components/SearchBar";
-import Sticky from "react-stickynode";
 import { Title } from "@/components/text/Title";
 import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { WideContainer } from "@/components/layout/WideContainer";
-import { useTranslation } from "react-i18next";
 import { SearchResultsPartial } from "./SearchResultsPartial";
 
 export function SearchView() {