refactor: update a few dev deps and convert to using type imports where possible (#2886)

* build: bump deps and add some new eslint rules

* refactor: run eslint --fix on code to convert to type imports where possible

src/components/Common/Button/index.tsx

@@ -1,4 +1,5 @@
-import React, { ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
+import React from 'react';
 
 export type ButtonType =
   | 'default'

src/components/Common/ButtonWithDropdown/index.tsx

@@ -1,11 +1,10 @@
 import { ChevronDownIcon } from '@heroicons/react/solid';
-import React, {
+import type {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   ReactNode,
-  useRef,
-  useState,
 } from 'react';
+import React, { useRef, useState } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { withProperties } from '../../../utils/typeHelpers';
 import Transition from '../../Transition';

src/components/Common/CachedImage/index.tsx

@@ -1,4 +1,5 @@
-import Image, { ImageProps } from 'next/image';
+import type { ImageProps } from 'next/image';
+import Image from 'next/image';
 import React from 'react';
 import useSettings from '../../../hooks/useSettings';
 

src/components/Common/ImageFader/index.tsx

@@ -1,9 +1,5 @@
-import React, {
-  ForwardRefRenderFunction,
-  HTMLAttributes,
-  useEffect,
-  useState,
-} from 'react';
+import type { ForwardRefRenderFunction, HTMLAttributes } from 'react';
+import React, { useEffect, useState } from 'react';
 import CachedImage from '../CachedImage';
 
 interface ImageFaderProps extends HTMLAttributes<HTMLDivElement> {

src/components/Common/ListView/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import {
+import type {
   MovieResult,
   PersonResult,
   TvResult,

src/components/Common/Modal/index.tsx

@@ -1,11 +1,13 @@
-import React, { MouseEvent, ReactNode, useRef } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import globalMessages from '../../../i18n/globalMessages';
 import Transition from '../../Transition';
-import Button, { ButtonType } from '../Button';
+import type { ButtonType } from '../Button';
+import Button from '../Button';
 import CachedImage from '../CachedImage';
 import LoadingSpinner from '../LoadingSpinner';
 

src/components/Common/PlayButton/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import ButtonWithDropdown from '../ButtonWithDropdown';
 
 interface PlayButtonProps {

src/components/Common/SettingsTabs/index.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { hasPermission, Permission } from '../../../../server/lib/permissions';
+import type { Permission } from '../../../../server/lib/permissions';
+import { hasPermission } from '../../../../server/lib/permissions';
 import { useUser } from '../../../hooks/useUser';
 
 export interface SettingsRoute {

src/components/Common/Table/index.tsx

@@ -1,4 +1,5 @@
-import React, { AllHTMLAttributes } from 'react';
+import type { AllHTMLAttributes } from 'react';
+import React from 'react';
 import { withProperties } from '../../../utils/typeHelpers';
 
 const TBody: React.FC = ({ children }) => {

src/components/Discover/DiscoverNetwork/index.tsx

@@ -8,7 +8,7 @@ import { useRouter } from 'next/router';
 import globalMessages from '../../../i18n/globalMessages';
 import useDiscover from '../../../hooks/useDiscover';
 import Error from '../../../pages/_error';
-import { TvNetwork } from '../../../../server/models/common';
+import type { TvNetwork } from '../../../../server/models/common';
 
 const messages = defineMessages({
   networkSeries: '{network} Series',

src/components/Discover/DiscoverStudio/index.tsx

@@ -8,7 +8,7 @@ import { useRouter } from 'next/router';
 import globalMessages from '../../../i18n/globalMessages';
 import useDiscover from '../../../hooks/useDiscover';
 import Error from '../../../pages/_error';
-import { ProductionCompany } from '../../../../server/models/common';
+import type { ProductionCompany } from '../../../../server/models/common';
 
 const messages = defineMessages({
   studioMovies: '{studio} Movies',

src/components/Discover/MovieGenreList/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
+import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
 import Error from '../../../pages/_error';
 import Header from '../../Common/Header';
 import LoadingSpinner from '../../Common/LoadingSpinner';

src/components/Discover/MovieGenreSlider/index.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
+import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
 import GenreCard from '../../GenreCard';
 import Slider from '../../Slider';
 import { genreColorMap } from '../constants';

src/components/Discover/TvGenreList/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
+import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
 import Error from '../../../pages/_error';
 import Header from '../../Common/Header';
 import LoadingSpinner from '../../Common/LoadingSpinner';

src/components/Discover/TvGenreSlider/index.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
+import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
 import GenreCard from '../../GenreCard';
 import Slider from '../../Slider';
 import { genreColorMap } from '../constants';

src/components/DownloadBlock/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
-import { DownloadingItem } from '../../../server/lib/downloadtracker';
+import type { DownloadingItem } from '../../../server/lib/downloadtracker';
 import Badge from '../Common/Badge';
 
 const messages = defineMessages({

src/components/IssueList/IssueItem/index.tsx

@@ -6,9 +6,9 @@ import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import { IssueStatus } from '../../../../server/constants/issue';
 import { MediaType } from '../../../../server/constants/media';
-import Issue from '../../../../server/entity/Issue';
-import { MovieDetails } from '../../../../server/models/Movie';
-import { TvDetails } from '../../../../server/models/Tv';
+import type Issue from '../../../../server/entity/Issue';
+import type { MovieDetails } from '../../../../server/models/Movie';
+import type { TvDetails } from '../../../../server/models/Tv';
 import { Permission, useUser } from '../../../hooks/useUser';
 import globalMessages from '../../../i18n/globalMessages';
 import Badge from '../../Common/Badge';

src/components/IssueList/index.tsx

@@ -8,7 +8,7 @@ import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { IssueResultsResponse } from '../../../server/interfaces/api/issueInterfaces';
+import type { IssueResultsResponse } from '../../../server/interfaces/api/issueInterfaces';
 import Button from '../../components/Common/Button';
 import { useUpdateQueryParams } from '../../hooks/useUpdateQueryParams';
 import globalMessages from '../../i18n/globalMessages';

src/components/IssueModal/CreateIssueModal/index.tsx

@@ -11,8 +11,8 @@ import useSWR from 'swr';
 import * as Yup from 'yup';
 import { MediaStatus } from '../../../../server/constants/media';
 import type Issue from '../../../../server/entity/Issue';
-import { MovieDetails } from '../../../../server/models/Movie';
-import { TvDetails } from '../../../../server/models/Tv';
+import type { MovieDetails } from '../../../../server/models/Movie';
+import type { TvDetails } from '../../../../server/models/Tv';
 import useSettings from '../../../hooks/useSettings';
 import { Permission, useUser } from '../../../hooks/useUser';
 import globalMessages from '../../../i18n/globalMessages';

src/components/IssueModal/constants.ts

@@ -1,4 +1,5 @@
-import { defineMessages, MessageDescriptor } from 'react-intl';
+import type { MessageDescriptor } from 'react-intl';
+import { defineMessages } from 'react-intl';
 import { IssueType } from '../../../server/constants/issue';
 
 const messages = defineMessages({

src/components/JSONEditor/index.tsx

@@ -1,4 +1,5 @@
-import React, { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-dracula';

src/components/LanguageSelector/index.tsx

@@ -1,9 +1,10 @@
 import { sortBy } from 'lodash';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import Select, { CSSObjectWithLabel } from 'react-select';
+import type { CSSObjectWithLabel } from 'react-select';
+import Select from 'react-select';
 import useSWR from 'swr';
-import { Language } from '../../../server/lib/settings';
+import type { Language } from '../../../server/lib/settings';
 import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({

src/components/Layout/LanguagePicker/index.tsx

@@ -1,10 +1,8 @@
 import { TranslateIcon } from '@heroicons/react/solid';
 import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import {
-  availableLanguages,
-  AvailableLocale,
-} from '../../../context/LanguageContext';
+import type { AvailableLocale } from '../../../context/LanguageContext';
+import { availableLanguages } from '../../../context/LanguageContext';
 import useClickOutside from '../../../hooks/useClickOutside';
 import useLocale from '../../../hooks/useLocale';
 import Transition from '../../Transition';

src/components/Layout/Sidebar/index.tsx

@@ -8,7 +8,8 @@ import {
 } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { ReactNode, useRef } from 'react';
+import type { ReactNode } from 'react';
+import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { Permission, useUser } from '../../../hooks/useUser';

src/components/Layout/VersionStatus/index.tsx

@@ -8,7 +8,7 @@ import Link from 'next/link';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { StatusResponse } from '../../../../server/interfaces/api/settingsInterfaces';
+import type { StatusResponse } from '../../../../server/interfaces/api/settingsInterfaces';
 
 const messages = defineMessages({
   streamdevelop: 'Overseerr Develop',

src/components/Layout/index.tsx

@@ -2,7 +2,7 @@ import { MenuAlt2Icon } from '@heroicons/react/outline';
 import { ArrowLeftIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import { AvailableLocale } from '../../context/LanguageContext';
+import type { AvailableLocale } from '../../context/LanguageContext';
 import useLocale from '../../hooks/useLocale';
 import useSettings from '../../hooks/useSettings';
 import { useUser } from '../../hooks/useUser';

src/components/ManageSlideOver/index.tsx

@@ -10,9 +10,9 @@ import {
   MediaRequestStatus,
   MediaStatus,
 } from '../../../server/constants/media';
-import { MediaWatchDataResponse } from '../../../server/interfaces/api/mediaInterfaces';
-import { MovieDetails } from '../../../server/models/Movie';
-import { TvDetails } from '../../../server/models/Tv';
+import type { MediaWatchDataResponse } from '../../../server/interfaces/api/mediaInterfaces';
+import type { MovieDetails } from '../../../server/models/Movie';
+import type { TvDetails } from '../../../server/models/Tv';
 import useSettings from '../../hooks/useSettings';
 import { Permission, useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';

src/components/MovieDetails/MovieCast/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { MovieDetails } from '../../../../server/models/Movie';
+import type { MovieDetails } from '../../../../server/models/Movie';
 import Error from '../../../pages/_error';
 import Header from '../../Common/Header';
 import LoadingSpinner from '../../Common/LoadingSpinner';

src/components/MovieDetails/MovieCrew/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { MovieDetails } from '../../../../server/models/Movie';
+import type { MovieDetails } from '../../../../server/models/Movie';
 import Error from '../../../pages/_error';
 import Header from '../../Common/Header';
 import LoadingSpinner from '../../Common/LoadingSpinner';

src/components/MovieDetails/index.tsx

@@ -38,7 +38,8 @@ import Button from '../Common/Button';
 import CachedImage from '../Common/CachedImage';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
-import PlayButton, { PlayButtonLink } from '../Common/PlayButton';
+import type { PlayButtonLink } from '../Common/PlayButton';
+import PlayButton from '../Common/PlayButton';
 import ExternalLinkBlock from '../ExternalLinkBlock';
 import IssueModal from '../IssueModal';
 import ManageSlideOver from '../ManageSlideOver';

src/components/NotificationTypeSelector/NotificationType/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { hasNotificationType, NotificationItem } from '..';
+import type { NotificationItem } from '..';
+import { hasNotificationType } from '..';
 
 interface NotificationTypeProps {
   option: NotificationItem;

src/components/NotificationTypeSelector/index.tsx

@@ -2,7 +2,8 @@ import { sortBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSettings from '../../hooks/useSettings';
-import { Permission, User, useUser } from '../../hooks/useUser';
+import type { User } from '../../hooks/useUser';
+import { Permission, useUser } from '../../hooks/useUser';
 import NotificationType from './NotificationType';
 
 const messages = defineMessages({

src/components/PermissionEdit/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Permission, User } from '../../hooks/useUser';
-import PermissionOption, { PermissionItem } from '../PermissionOption';
+import type { User } from '../../hooks/useUser';
+import { Permission } from '../../hooks/useUser';
+import type { PermissionItem } from '../PermissionOption';
+import PermissionOption from '../PermissionOption';
 
 export const messages = defineMessages({
   admin: 'Admin',

src/components/PermissionOption/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { hasPermission } from '../../../server/lib/permissions';
 import useSettings from '../../hooks/useSettings';
-import { Permission, User } from '../../hooks/useUser';
+import type { User } from '../../hooks/useUser';
+import { Permission } from '../../hooks/useUser';
 
 export interface PermissionItem {
   id: string;

src/components/RequestButton/index.tsx

@@ -11,8 +11,8 @@ import {
   MediaRequestStatus,
   MediaStatus,
 } from '../../../server/constants/media';
-import Media from '../../../server/entity/Media';
-import { MediaRequest } from '../../../server/entity/MediaRequest';
+import type Media from '../../../server/entity/Media';
+import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import useSettings from '../../hooks/useSettings';
 import { Permission, useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -12,7 +12,8 @@ import type {
   ServiceCommonServerWithDetails,
 } from '../../../../server/interfaces/api/serviceInterfaces';
 import type { UserResultsResponse } from '../../../../server/interfaces/api/userInterfaces';
-import { Permission, User, useUser } from '../../../hooks/useUser';
+import type { User } from '../../../hooks/useUser';
+import { Permission, useUser } from '../../../hooks/useUser';
 import globalMessages from '../../../i18n/globalMessages';
 import { formatBytes } from '../../../utils/numberHelpers';
 import { SmallLoadingSpinner } from '../../Common/LoadingSpinner';

src/components/RequestModal/CollectionRequestModal.tsx

@@ -8,17 +8,18 @@ import {
   MediaRequestStatus,
   MediaStatus,
 } from '../../../server/constants/media';
-import { MediaRequest } from '../../../server/entity/MediaRequest';
-import { QuotaResponse } from '../../../server/interfaces/api/userInterfaces';
+import type { MediaRequest } from '../../../server/entity/MediaRequest';
+import type { QuotaResponse } from '../../../server/interfaces/api/userInterfaces';
 import { Permission } from '../../../server/lib/permissions';
-import { Collection } from '../../../server/models/Collection';
+import type { Collection } from '../../../server/models/Collection';
 import { useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import Alert from '../Common/Alert';
 import Badge from '../Common/Badge';
 import CachedImage from '../Common/CachedImage';
 import Modal from '../Common/Modal';
-import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
+import type { RequestOverrides } from './AdvancedRequester';
+import AdvancedRequester from './AdvancedRequester';
 import QuotaDisplay from './QuotaDisplay';
 
 const messages = defineMessages({

src/components/RequestModal/MovieRequestModal.tsx

@@ -5,15 +5,16 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import { MediaStatus } from '../../../server/constants/media';
-import { MediaRequest } from '../../../server/entity/MediaRequest';
-import { QuotaResponse } from '../../../server/interfaces/api/userInterfaces';
+import type { MediaRequest } from '../../../server/entity/MediaRequest';
+import type { QuotaResponse } from '../../../server/interfaces/api/userInterfaces';
 import { Permission } from '../../../server/lib/permissions';
-import { MovieDetails } from '../../../server/models/Movie';
+import type { MovieDetails } from '../../../server/models/Movie';
 import { useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import Alert from '../Common/Alert';
 import Modal from '../Common/Modal';
-import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
+import type { RequestOverrides } from './AdvancedRequester';
+import AdvancedRequester from './AdvancedRequester';
 import QuotaDisplay from './QuotaDisplay';
 
 const messages = defineMessages({

src/components/RequestModal/QuotaDisplay/index.tsx

@@ -2,7 +2,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { QuotaStatus } from '../../../../server/interfaces/api/userInterfaces';
+import type { QuotaStatus } from '../../../../server/interfaces/api/userInterfaces';
 import ProgressCircle from '../../Common/ProgressCircle';
 
 const messages = defineMessages({

src/components/RequestModal/SearchByNameModal/index.tsx

@@ -2,7 +2,7 @@ import { DownloadIcon } from '@heroicons/react/outline';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { SonarrSeries } from '../../../../server/api/servarr/sonarr';
+import type { SonarrSeries } from '../../../../server/api/servarr/sonarr';
 import globalMessages from '../../../i18n/globalMessages';
 import Alert from '../../Common/Alert';
 import { SmallLoadingSpinner } from '../../Common/LoadingSpinner';

src/components/RequestModal/TvRequestModal.tsx

@@ -9,18 +9,19 @@ import {
   MediaRequestStatus,
   MediaStatus,
 } from '../../../server/constants/media';
-import { MediaRequest } from '../../../server/entity/MediaRequest';
-import SeasonRequest from '../../../server/entity/SeasonRequest';
-import { QuotaResponse } from '../../../server/interfaces/api/userInterfaces';
+import type { MediaRequest } from '../../../server/entity/MediaRequest';
+import type SeasonRequest from '../../../server/entity/SeasonRequest';
+import type { QuotaResponse } from '../../../server/interfaces/api/userInterfaces';
 import { Permission } from '../../../server/lib/permissions';
-import { TvDetails } from '../../../server/models/Tv';
+import type { TvDetails } from '../../../server/models/Tv';
 import useSettings from '../../hooks/useSettings';
 import { useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import Alert from '../Common/Alert';
 import Badge from '../Common/Badge';
 import Modal from '../Common/Modal';
-import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
+import type { RequestOverrides } from './AdvancedRequester';
+import AdvancedRequester from './AdvancedRequester';
 import QuotaDisplay from './QuotaDisplay';
 import SearchByNameModal from './SearchByNameModal';
 

src/components/RequestModal/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MediaStatus } from '../../../server/constants/media';
-import { MediaRequest } from '../../../server/entity/MediaRequest';
+import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import Transition from '../Transition';
 import CollectionRequestModal from './CollectionRequestModal';
 import MovieRequestModal from './MovieRequestModal';

src/components/Search/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import {
+import type {
   TvResult,
   MovieResult,
   PersonResult,

src/components/ServiceWorkerSetup/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import axios from 'axios';
-import React, { useEffect } from 'react';
+import type React from 'react';
+import { useEffect } from 'react';
 import useSettings from '../../hooks/useSettings';
 import { useUser } from '../../hooks/useUser';
 

src/components/Settings/SettingsAbout/index.tsx

@@ -2,7 +2,7 @@ import { InformationCircleIcon } from '@heroicons/react/solid';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import {
+import type {
   SettingsAboutResponse,
   StatusResponse,
 } from '../../../../server/interfaces/api/settingsInterfaces';

src/components/Settings/SettingsJobsCache/index.tsx

@@ -2,16 +2,12 @@ import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/outline';
 import { PencilIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import React, { useState } from 'react';
-import {
-  defineMessages,
-  FormattedRelativeTime,
-  MessageDescriptor,
-  useIntl,
-} from 'react-intl';
+import type { MessageDescriptor } from 'react-intl';
+import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
-import { CacheItem } from '../../../../server/interfaces/api/settingsInterfaces';
-import { JobId } from '../../../../server/lib/settings';
+import type { CacheItem } from '../../../../server/interfaces/api/settingsInterfaces';
+import type { JobId } from '../../../../server/lib/settings';
 import Spinner from '../../../assets/spinner.svg';
 import globalMessages from '../../../i18n/globalMessages';
 import { formatBytes } from '../../../utils/numberHelpers';

src/components/Settings/SettingsLayout.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import globalMessages from '../../i18n/globalMessages';
 import PageTitle from '../Common/PageTitle';
-import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
+import type { SettingsRoute } from '../Common/SettingsTabs';
+import SettingsTabs from '../Common/SettingsTabs';
 
 const messages = defineMessages({
   menuGeneralSettings: 'General',

src/components/Settings/SettingsLogs/index.tsx

@@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
-import {
+import type {
   LogMessage,
   LogsResultsResponse,
 } from '../../../../server/interfaces/api/settingsInterfaces';

src/components/Settings/SettingsMain.tsx

@@ -7,12 +7,10 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
 import * as Yup from 'yup';
-import { UserSettingsGeneralResponse } from '../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsGeneralResponse } from '../../../server/interfaces/api/userSettingsInterfaces';
 import type { MainSettings } from '../../../server/lib/settings';
-import {
-  availableLanguages,
-  AvailableLocale,
-} from '../../context/LanguageContext';
+import type { AvailableLocale } from '../../context/LanguageContext';
+import { availableLanguages } from '../../context/LanguageContext';
 import useLocale from '../../hooks/useLocale';
 import { Permission, useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';

src/components/Settings/SettingsNotifications.tsx

@@ -10,7 +10,8 @@ import SlackLogo from '../../assets/extlogos/slack.svg';
 import TelegramLogo from '../../assets/extlogos/telegram.svg';
 import globalMessages from '../../i18n/globalMessages';
 import PageTitle from '../Common/PageTitle';
-import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
+import type { SettingsRoute } from '../Common/SettingsTabs';
+import SettingsTabs from '../Common/SettingsTabs';
 
 const messages = defineMessages({
   notifications: 'Notifications',

src/components/Settings/SonarrModal/index.tsx

@@ -3,7 +3,8 @@ import axios from 'axios';
 import { Field, Formik } from 'formik';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import Select, { OnChangeValue } from 'react-select';
+import type { OnChangeValue } from 'react-select';
+import Select from 'react-select';
 import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
 import type { SonarrSettings } from '../../../../server/lib/settings';

src/components/Slider/index.tsx

@@ -1,12 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/outline';
 import { debounce } from 'lodash';
-import React, {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import type { ReactNode } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useSpring } from 'react-spring';
 import globalMessages from '../../i18n/globalMessages';

src/components/StatusChacker/index.tsx

@@ -2,7 +2,7 @@ import { SparklesIcon } from '@heroicons/react/outline';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { StatusResponse } from '../../../server/interfaces/api/settingsInterfaces';
+import type { StatusResponse } from '../../../server/interfaces/api/settingsInterfaces';
 import Modal from '../Common/Modal';
 import Transition from '../Transition';
 

src/components/ToastContainer/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToastContainerProps } from 'react-toast-notifications';
+import type { ToastContainerProps } from 'react-toast-notifications';
 
 const ToastContainer: React.FC<ToastContainerProps> = ({
   hasToasts,

src/components/TvDetails/TvRecommendations.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { TvResult } from '../../../server/models/Search';
-import { TvDetails } from '../../../server/models/Tv';
+import type { TvDetails } from '../../../server/models/Tv';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
 import Header from '../Common/Header';

src/components/TvDetails/index.tsx

@@ -16,8 +16,8 @@ import type { RTRating } from '../../../server/api/rottentomatoes';
 import { ANIME_KEYWORD_ID } from '../../../server/api/themoviedb/constants';
 import { IssueStatus } from '../../../server/constants/issue';
 import { MediaStatus } from '../../../server/constants/media';
-import { Crew } from '../../../server/models/common';
-import { TvDetails as TvDetailsType } from '../../../server/models/Tv';
+import type { Crew } from '../../../server/models/common';
+import type { TvDetails as TvDetailsType } from '../../../server/models/Tv';
 import RTAudFresh from '../../assets/rt_aud_fresh.svg';
 import RTAudRotten from '../../assets/rt_aud_rotten.svg';
 import RTFresh from '../../assets/rt_fresh.svg';
@@ -33,7 +33,8 @@ import Button from '../Common/Button';
 import CachedImage from '../Common/CachedImage';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
-import PlayButton, { PlayButtonLink } from '../Common/PlayButton';
+import type { PlayButtonLink } from '../Common/PlayButton';
+import PlayButton from '../Common/PlayButton';
 import ExternalLinkBlock from '../ExternalLinkBlock';
 import IssueModal from '../IssueModal';
 import ManageSlideOver from '../ManageSlideOver';

src/components/UserList/BulkEditModal.tsx

@@ -3,7 +3,8 @@ import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
-import { User, useUser } from '../../hooks/useUser';
+import type { User } from '../../hooks/useUser';
+import { useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import Modal from '../Common/Modal';
 import PermissionEdit from '../PermissionEdit';

src/components/UserList/index.tsx

@@ -20,7 +20,8 @@ import type { UserResultsResponse } from '../../../server/interfaces/api/userInt
 import { hasPermission } from '../../../server/lib/permissions';
 import useSettings from '../../hooks/useSettings';
 import { useUpdateQueryParams } from '../../hooks/useUpdateQueryParams';
-import { Permission, User, UserType, useUser } from '../../hooks/useUser';
+import type { User } from '../../hooks/useUser';
+import { Permission, UserType, useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import Alert from '../Common/Alert';
 import Badge from '../Common/Badge';

src/components/UserProfile/ProfileHeader/index.tsx

@@ -2,7 +2,8 @@ import { CogIcon, UserIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Permission, User, useUser } from '../../../hooks/useUser';
+import type { User } from '../../../hooks/useUser';
+import { Permission, useUser } from '../../../hooks/useUser';
 import Button from '../../Common/Button';
 
 const messages = defineMessages({

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -7,11 +7,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
-import { UserSettingsGeneralResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
-import {
-  availableLanguages,
-  AvailableLocale,
-} from '../../../../context/LanguageContext';
+import type { UserSettingsGeneralResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { AvailableLocale } from '../../../../context/LanguageContext';
+import { availableLanguages } from '../../../../context/LanguageContext';
 import useLocale from '../../../../hooks/useLocale';
 import useSettings from '../../../../hooks/useSettings';
 import { Permission, UserType, useUser } from '../../../../hooks/useUser';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -7,7 +7,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
-import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx

@@ -7,7 +7,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
-import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Badge from '../../../Common/Badge';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx

@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
-import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx

@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
-import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import useSettings from '../../../../hooks/useSettings';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx

@@ -7,7 +7,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
-import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
-import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import DiscordLogo from '../../../../assets/extlogos/discord.svg';
 import PushbulletLogo from '../../../../assets/extlogos/pushbullet.svg';
 import PushoverLogo from '../../../../assets/extlogos/pushover.svg';
@@ -13,7 +13,8 @@ import globalMessages from '../../../../i18n/globalMessages';
 import Error from '../../../../pages/_error';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
 import PageTitle from '../../../Common/PageTitle';
-import SettingsTabs, { SettingsRoute } from '../../../Common/SettingsTabs';
+import type { SettingsRoute } from '../../../Common/SettingsTabs';
+import SettingsTabs from '../../../Common/SettingsTabs';
 
 const messages = defineMessages({
   notifications: 'Notifications',

src/components/UserProfile/UserSettings/index.tsx

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import { UserSettingsNotificationsResponse } from '../../../../server/interfaces/api/userSettingsInterfaces';
+import type { UserSettingsNotificationsResponse } from '../../../../server/interfaces/api/userSettingsInterfaces';
 import { hasPermission, Permission } from '../../../../server/lib/permissions';
 import useSettings from '../../../hooks/useSettings';
 import { useUser } from '../../../hooks/useUser';
@@ -11,7 +11,8 @@ import Error from '../../../pages/_error';
 import Alert from '../../Common/Alert';
 import LoadingSpinner from '../../Common/LoadingSpinner';
 import PageTitle from '../../Common/PageTitle';
-import SettingsTabs, { SettingsRoute } from '../../Common/SettingsTabs';
+import type { SettingsRoute } from '../../Common/SettingsTabs';
+import SettingsTabs from '../../Common/SettingsTabs';
 import ProfileHeader from '../ProfileHeader';
 
 const messages = defineMessages({

src/components/UserProfile/index.tsx

@@ -4,13 +4,13 @@ import { useRouter } from 'next/router';
 import React, { useCallback, useEffect, useState } from 'react';
 import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
 import useSWR from 'swr';
-import {
+import type {
   QuotaResponse,
   UserRequestsResponse,
   UserWatchDataResponse,
 } from '../../../server/interfaces/api/userInterfaces';
-import { MovieDetails } from '../../../server/models/Movie';
-import { TvDetails } from '../../../server/models/Tv';
+import type { MovieDetails } from '../../../server/models/Movie';
+import type { TvDetails } from '../../../server/models/Tv';
 import { Permission, UserType, useUser } from '../../hooks/useUser';
 import Error from '../../pages/_error';
 import ImageFader from '../Common/ImageFader';