Further Improvement eslint WIP

.eslintrc

@@ -7,6 +7,7 @@
   },
   "extends": [
     "standard",
+    "plugin:import/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:react/jsx-runtime",
@@ -23,11 +24,16 @@
     "sourceType": "module"
   },
   "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    },
     "react": {
       "version": "detect"
     }
   },
-  "plugins": ["react", "react-hooks", "vitest", "cypress", "n", "promise", "no-only-tests"],
+  "plugins": ["react", "react-hooks", "vitest", "cypress", "n", "promise", "no-only-tests", "import"],
   "globals": {
     "vi": true
   },
@@ -42,7 +48,21 @@
         "functions": "never"
       }
     ],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    "import/newline-after-import": ["error", { "count": 2 }],
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "caseInsensitive": true,
+          "order": "asc"
+        },
+        "groups": ["type", "builtin", "external", "internal", ["sibling", "parent"], "index", "object"],
+        "newlines-between": "always"
+      }
+    ],
     "multiline-ternary": "off",
+    "no-multiple-empty-lines": "off",
     "no-console": "warn",
     "no-only-tests/no-only-tests": "error",
     "no-unused-vars": "warn",

cypress/e2e/scrobbleSong/scrobble-song-submit.spec.js

@@ -1,5 +1,6 @@
 import qs from 'qs';
 
+
 const scrobblingBaseDate = Date.UTC(2023, 5, 30, 23, 59, 4, 123);
 
 describe('Scrobble song (scrobbling)', () => {

cypress/plugins/index.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
+
 module.exports = (on, config) => {
   /*
    * Override config for particular environments

package.json

@@ -99,7 +99,7 @@
     "start:services": "docker-compose up",
     "build": "yarn typecheck && vite build",
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint": "eslint src/ cypress/",
+    "lint": "eslint \"./src\" \"./cypress\" --ext .js,.jsx,.ts,.tsx",
     "fix": "yarn prettier && yarn lint --fix",
     "test": "yarn test:unit && yarn test:e2e",
     "test:e2e": "TZ=Etc/GMT-3 start-test 'yarn start:server --port 3030' 3030 'cypress run'",

src/App.tsx

@@ -1,28 +1,26 @@
-import { Suspense, useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
-import qs from 'qs';
+import { useGrowthBook } from '@growthbook/growthbook-react';
+import * as Sentry from '@sentry/react';
+import AlertZone from 'components/AlertZone';
+import AnalyticsListener from 'components/AnalyticsListener';
+import Footer from 'components/Footer';
+import Navigation from 'components/Navigation';
+import { SettingsModalContext } from 'components/SettingsModal/SettingsModalContext';
+import Spinner from 'components/Spinner';
+import UpdateToast from 'components/UpdateToast';
+import { useLanguage } from 'hooks/useLanguage';
+import { useUserData } from 'hooks/useUserData';
 import { find } from 'lodash-es';
+import qs from 'qs';
+import { Suspense, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import lazyWithPreload from 'react-lazy-with-preload';
-
-import * as Sentry from '@sentry/react';
+import { useDispatch } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router-dom';
+import Routes from 'Routes';
 import { interceptAxios } from 'utils/axios';
 import { languageList, fallbackLng } from 'utils/i18n';
-
-import { useTranslation } from 'react-i18next';
 import { useRegisterSW } from 'virtual:pwa-register/react';
-import { useGrowthBook } from '@growthbook/growthbook-react';
-import { useUserData } from 'hooks/useUserData';
-import { useLanguage } from 'hooks/useLanguage';
 
-import Routes from 'Routes';
-import Navigation from 'components/Navigation';
-import Footer from 'components/Footer';
-import AlertZone from 'components/AlertZone';
-import AnalyticsListener from 'components/AnalyticsListener';
-import UpdateToast from 'components/UpdateToast';
-import Spinner from 'components/Spinner';
-import { SettingsModalContext } from 'components/SettingsModal/SettingsModalContext';
 
 const SettingsModal = lazyWithPreload(() => import('components/SettingsModal'));
 

src/Routes.tsx

@@ -1,17 +1,18 @@
 // import { useSelector } from 'react-redux';
-import { Navigate, Route, Routes as Switch } from 'react-router-dom';
-
-import Home from 'domains/home';
 import PrivateRoute from 'components/PrivateRoute';
-import { ScrobbleSong } from './domains/scrobbleSong';
+import Home from 'domains/home';
+import { Callback } from 'domains/lastfm/Callback';
 import {
   ScrobbleAlbumSearch,
   ScrobbleArtistResults,
   ScrobbleAlbumResults,
   ScrobbleAlbumTracklist,
 } from 'domains/scrobbleAlbum';
+import { Navigate, Route, Routes as Switch } from 'react-router-dom';
+
+import { ScrobbleSong } from './domains/scrobbleSong';
 import { ScrobbleUserSearch, ScrobbleUserResults } from './domains/scrobbleUser';
-import { Callback } from 'domains/lastfm/Callback';
+
 
 export default function Routes() {
   return (

src/components/AlbumCard.tsx

@@ -1,11 +1,12 @@
-import { CSSProperties } from 'react';
-import { random } from 'lodash-es';
+import type { AlbumCover, AlbumCoverSizes } from 'utils/types/album';
 
+import { random } from 'lodash-es';
+import { CSSProperties } from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import 'react-lazy-load-image-component/src/effects/opacity.css';
 
 import './AlbumCard.css';
-import { AlbumCover, AlbumCoverSizes } from 'utils/types/album';
+
 
 interface AlbumCardProps {
   artist?: string;

src/components/AlertZone/AlertZone.tsx

@@ -1,11 +1,12 @@
+import type { RootState } from 'store';
+
 import { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-
 import { clearAlerts } from 'store/actions/alertActions';
 
 import AlertItem from './partials/AlertItem';
-import type { RootState } from 'store';
+
 
 export default function AlertZone() {
   const location = useLocation();

src/components/AlertZone/partials/AlertItem.tsx

@@ -1,13 +1,13 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-
 import { Trans } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { Alert as ReactstrapAlert } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
 import { dismissAlert } from 'store/actions/alertActions';
+
 import { Alert } from '../types';
 
+
 export default function AlertItem({ id: alertId, type, errorNumber, title, message, rawMessage, icon }: Alert) {
   const [isOpen, setOpenState] = useState(true);
   const dispatch = useDispatch();

src/components/AlertZone/types.ts

@@ -1,7 +1,7 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
-
 import type { ReactNode } from 'react';
 
+
 export type Alert = {
   id: string;
   type: 'danger' | 'success' | 'info' | 'warning';

src/components/AnalyticsListener.ts

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import ReactGA from 'react-ga-neo';
-
 import { useLocation } from 'react-router-dom';
 
+
 function sendPageChange(page) {
   ReactGA.send({ hitType: 'pageview', page });
 }

src/components/Avatar.tsx

@@ -1,14 +1,13 @@
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons';
-
 import type { SizeProp } from '@fortawesome/fontawesome-svg-core';
-
 import type { AvatarSizes } from 'utils/types/avatar';
 
+import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
 import './Avatar.css';
 
+
 interface AvatarProps {
   alt: string;
   className?: string;

src/components/DateTimePicker.test.tsx

@@ -1,7 +1,9 @@
 import { render } from '@testing-library/react';
+
 import DateTimePicker from './DateTimePicker';
 import i18n from '../utils/i18n';
 
+
 const use12Hours = false;
 vi.mock('hooks/useSettings', async() => ({
   ...(await vi.importActual('hooks/useSettings')),

src/components/DateTimePicker.tsx

@@ -1,24 +1,20 @@
-import { forwardRef, useMemo, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import ReactGA from 'react-ga-neo';
-
+import { faCalendarAlt, faClock } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import addDays from 'date-fns/addDays';
-import subDays from 'date-fns/subDays';
 import format from 'date-fns/format';
-
-import { Input, InputGroup, InputGroupText, Modal, ModalBody, ModalHeader } from 'reactstrap';
-import TimeKeeper from 'react-timekeeper';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCalendarAlt, faClock } from '@fortawesome/free-regular-svg-icons';
-
+import subDays from 'date-fns/subDays';
 import { useSettings } from 'hooks/useSettings';
-
+import { forwardRef, useMemo, useState } from 'react';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
+import ReactGA from 'react-ga-neo';
+import { Trans, useTranslation } from 'react-i18next';
+import TimeKeeper from 'react-timekeeper';
+import { Input, InputGroup, InputGroupText, Modal, ModalBody, ModalHeader } from 'reactstrap';
 
 import 'react-day-picker/lib/style.css';
 import './DateTimePicker.scss';
 
+
 function DatePickerInput(props = {}) {
   return (
     <InputGroup size="sm">

src/components/EmptyScrobbleListFiller.tsx

@@ -1,7 +1,7 @@
+import { faQuestion, faUserAstronaut } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Trans } from 'react-i18next';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestion, faUserAstronaut } from '@fortawesome/free-solid-svg-icons';
 
 export default function EmptyScrobbleListFiller() {
   return (

src/components/Footer.test.tsx

@@ -1,7 +1,9 @@
 import { render, screen } from '@testing-library/react';
+
 import Footer from './Footer';
 import i18n from '../utils/i18n';
 
+
 const returnedLocation = {
   pathName: '',
 };

src/components/Footer.tsx

@@ -1,11 +1,11 @@
-import { useLocation } from 'react-router-dom';
-import { Trans } from 'react-i18next';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub, faDiscord, faPatreon } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Trans } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
 
 import './Footer.css';
 
+
 function Footer() {
   const location = useLocation();
 

src/components/Navigation/Navigation.tsx

@@ -1,21 +1,21 @@
+import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
+import { faHeadphonesAlt, faCompactDisc, faSignInAlt, faUserFriends } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { LASTFM_AUTH_URL } from 'Constants';
+import { useSettings } from 'hooks/useSettings';
+import { useUserData } from 'hooks/useUserData';
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHeadphonesAlt, faCompactDisc, faSignInAlt, faUserFriends } from '@fortawesome/free-solid-svg-icons';
-import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
-
 import { useBootstrapBreakpoint, BS_SIZE_SM } from 'utils/bootstrapBreakpoints';
-import { useUserData } from 'hooks/useUserData';
-import { useSettings } from 'hooks/useSettings';
 
 import LanguageSelector from './partials/LanguageSelector';
 import NavigationItem from './partials/NavigationItem';
 import UserDropdown from './partials/UserDropdown';
-import { LASTFM_AUTH_URL } from 'Constants';
 
 import './Navigation.scss';
 
+
 export default function Navigation() {
   const { isLoggedIn } = useUserData();
   const { settings } = useSettings();

src/components/Navigation/partials/LanguageSelector.tsx

@@ -1,16 +1,16 @@
-import { languageList } from 'utils/i18n';
-import ReactGA from 'react-ga-neo';
-import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
-import { useTranslation } from 'react-i18next';
-
-import { useUserData } from 'hooks/useUserData';
-import { useSettings } from 'hooks/useSettings';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useLanguage } from 'hooks/useLanguage';
+import { useSettings } from 'hooks/useSettings';
+import { useUserData } from 'hooks/useUserData';
+import ReactGA from 'react-ga-neo';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { languageList } from 'utils/i18n';
 
 import './LanguageSelector.scss';
 
+
 export default function LanguageSelector({ className = '' }: { className?: string }) {
   const { t } = useTranslation();
   const { isLoggedIn } = useUserData();

src/components/Navigation/partials/NavigationItem.tsx

@@ -1,8 +1,10 @@
-import { NavLink as RouterNavLink } from 'react-router-dom';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Trans } from 'react-i18next';
+import { NavLink as RouterNavLink } from 'react-router-dom';
 import { NavItem, NavLink } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+
 
 export default function NavigationItem({
   external = false,