style: fix organize-imports to work with tailwindcss prettier plugin (#2957) [skip ci]

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [require('./merged-prettier-plugin.js')],
+  singleQuote: true,
+  trailingComma: 'es5',
+};

merged-prettier-plugin.js

@@ -0,0 +1,21 @@
+/* eslint-disable */
+const tailwind = require('prettier-plugin-tailwindcss');
+const organizeImports = require('prettier-plugin-organize-imports');
+
+const combinedFormatter = {
+  ...tailwind,
+  parsers: {
+    ...tailwind.parsers,
+    ...Object.keys(organizeImports.parsers).reduce((acc, key) => {
+      acc[key] = {
+        ...tailwind.parsers[key],
+        preprocess(code, options) {
+          return organizeImports.parsers[key].preprocess(code, options);
+        },
+      };
+      return acc;
+    }, {}),
+  },
+};
+
+module.exports = combinedFormatter;

package.json

@@ -180,10 +180,6 @@
       "@commitlint/config-conventional"
     ]
   },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
   "release": {
     "plugins": [
       "@semantic-release/commit-analyzer",

server/api/animelist.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
-import xml2js from 'xml2js';
 import fs, { promises as fsp } from 'fs';
 import path from 'path';
+import xml2js from 'xml2js';
 import logger from '../logger';
 
 const UPDATE_INTERVAL_MSEC = 24 * 3600 * 1000; // how often to download new mapping in milliseconds

server/entity/Media.ts

@@ -12,9 +12,9 @@ import {
 import RadarrAPI from '../api/servarr/radarr';
 import SonarrAPI from '../api/servarr/sonarr';
 import { MediaStatus, MediaType } from '../constants/media';
+import { getRepository } from '../datasource';
 import type { DownloadingItem } from '../lib/downloadtracker';
 import downloadTracker from '../lib/downloadtracker';
-import { getRepository } from '../datasource';
 import { getSettings } from '../lib/settings';
 import logger from '../logger';
 import Issue from './Issue';

server/entity/Season.ts

@@ -1,9 +1,9 @@
 import {
-  Entity,
-  PrimaryGeneratedColumn,
   Column,
-  ManyToOne,
   CreateDateColumn,
+  Entity,
+  ManyToOne,
+  PrimaryGeneratedColumn,
   UpdateDateColumn,
 } from 'typeorm';
 import { MediaStatus } from '../constants/media';

server/entity/SeasonRequest.ts

@@ -1,10 +1,10 @@
 import {
-  Entity,
-  PrimaryGeneratedColumn,
   Column,
   CreateDateColumn,
-  UpdateDateColumn,
+  Entity,
   ManyToOne,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
 } from 'typeorm';
 import { MediaRequestStatus } from '../constants/media';
 import { MediaRequest } from './MediaRequest';

server/entity/Session.ts

@@ -1,5 +1,5 @@
 import type { ISession } from 'connect-typeorm';
-import { Index, Column, PrimaryColumn, Entity } from 'typeorm';
+import { Column, Entity, Index, PrimaryColumn } from 'typeorm';
 
 @Entity()
 export class Session implements ISession {

server/interfaces/api/requestInterfaces.ts

@@ -1,6 +1,6 @@
-import type { PaginatedResponse } from './common';
-import type { MediaRequest } from '../../entity/MediaRequest';
 import type { MediaType } from '../../constants/media';
+import type { MediaRequest } from '../../entity/MediaRequest';
+import type { PaginatedResponse } from './common';
 
 export interface RequestResultsResponse extends PaginatedResponse {
   results: MediaRequest[];

server/lib/watchlistsync.ts

@@ -1,9 +1,7 @@
 import PlexTvAPI from '../api/plextv';
-import { User } from '../entity/User';
+import { MediaStatus, MediaType } from '../constants/media';
+import { getRepository } from '../datasource';
 import Media from '../entity/Media';
-import logger from '../logger';
-import { MediaType } from '../constants/media';
-import { MediaStatus } from '../constants/media';
 import {
   DuplicateMediaRequestError,
   MediaRequest,
@@ -11,8 +9,9 @@ import {
   QuotaRestrictedError,
   RequestPermissionError,
 } from '../entity/MediaRequest';
+import { User } from '../entity/User';
+import logger from '../logger';
 import { Permission } from './permissions';
-import { getRepository } from '../datasource';
 
 class WatchlistSync {
   public async syncWatchlist() {

server/scripts/prepareTestDb.ts

@@ -1,8 +1,8 @@
 import { copyFileSync } from 'fs';
-import { UserType } from '../constants/user';
-import { User } from '../entity/User';
 import path from 'path';
+import { UserType } from '../constants/user';
 import dataSource, { getRepository } from '../datasource';
+import { User } from '../entity/User';
 
 const prepareDb = async () => {
   // Copy over test settings.json

src/components/Common/Button/index.tsx

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

src/components/Common/PageTitle/index.tsx

@@ -1,5 +1,5 @@
-import useSettings from '../../../hooks/useSettings';
 import Head from 'next/head';
+import useSettings from '../../../hooks/useSettings';
 
 interface PageTitleProps {
   title: string | (string | undefined)[];

src/components/Common/Tooltip/index.tsx

@@ -1,5 +1,5 @@
-import { usePopperTooltip } from 'react-popper-tooltip';
 import type { Config } from 'react-popper-tooltip';
+import { usePopperTooltip } from 'react-popper-tooltip';
 
 type TooltipProps = {
   content: React.ReactNode;

src/components/Discover/DiscoverMovieGenre/index.tsx

@@ -1,12 +1,12 @@
-import type { MovieResult } from '../../../../server/models/Search';
-import ListView from '../../Common/ListView';
-import { defineMessages, useIntl } from 'react-intl';
-import Header from '../../Common/Header';
-import PageTitle from '../../Common/PageTitle';
 import { useRouter } from 'next/router';
-import globalMessages from '../../../i18n/globalMessages';
+import { defineMessages, useIntl } from 'react-intl';
+import type { MovieResult } from '../../../../server/models/Search';
 import useDiscover from '../../../hooks/useDiscover';
+import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import ListView from '../../Common/ListView';
+import PageTitle from '../../Common/PageTitle';
 
 const messages = defineMessages({
   genreMovies: '{genre} Movies',

src/components/Discover/DiscoverMovieLanguage/index.tsx

@@ -1,12 +1,12 @@
-import type { MovieResult } from '../../../../server/models/Search';
-import ListView from '../../Common/ListView';
-import { defineMessages, useIntl } from 'react-intl';
-import Header from '../../Common/Header';
-import PageTitle from '../../Common/PageTitle';
 import { useRouter } from 'next/router';
-import globalMessages from '../../../i18n/globalMessages';
+import { defineMessages, useIntl } from 'react-intl';
+import type { MovieResult } from '../../../../server/models/Search';
 import useDiscover from '../../../hooks/useDiscover';
+import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import ListView from '../../Common/ListView';
+import PageTitle from '../../Common/PageTitle';
 
 const messages = defineMessages({
   languageMovies: '{language} Movies',

src/components/Discover/DiscoverMovies.tsx

@@ -1,10 +1,10 @@
-import type { MovieResult } from '../../../server/models/Search';
-import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';
-import Header from '../Common/Header';
+import type { MovieResult } from '../../../server/models/Search';
-import PageTitle from '../Common/PageTitle';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
+import Header from '../Common/Header';
+import ListView from '../Common/ListView';
+import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
   discovermovies: 'Popular Movies',

src/components/Discover/DiscoverNetwork/index.tsx

@@ -1,13 +1,13 @@
-import type { TvResult } from '../../../../server/models/Search';
-import ListView from '../../Common/ListView';
-import { defineMessages, useIntl } from 'react-intl';
-import Header from '../../Common/Header';
-import PageTitle from '../../Common/PageTitle';
 import { useRouter } from 'next/router';
-import globalMessages from '../../../i18n/globalMessages';
+import { defineMessages, useIntl } from 'react-intl';
+import type { TvNetwork } from '../../../../server/models/common';
+import type { TvResult } from '../../../../server/models/Search';
 import useDiscover from '../../../hooks/useDiscover';
+import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
-import type { TvNetwork } from '../../../../server/models/common';
+import Header from '../../Common/Header';
+import ListView from '../../Common/ListView';
+import PageTitle from '../../Common/PageTitle';
 
 const messages = defineMessages({
   networkSeries: '{network} Series',

src/components/Discover/DiscoverStudio/index.tsx

@@ -1,13 +1,13 @@
-import type { MovieResult } from '../../../../server/models/Search';
-import ListView from '../../Common/ListView';
-import { defineMessages, useIntl } from 'react-intl';
-import Header from '../../Common/Header';
-import PageTitle from '../../Common/PageTitle';
 import { useRouter } from 'next/router';
-import globalMessages from '../../../i18n/globalMessages';
+import { defineMessages, useIntl } from 'react-intl';
+import type { ProductionCompany } from '../../../../server/models/common';
+import type { MovieResult } from '../../../../server/models/Search';
 import useDiscover from '../../../hooks/useDiscover';
+import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
-import type { ProductionCompany } from '../../../../server/models/common';
+import Header from '../../Common/Header';
+import ListView from '../../Common/ListView';
+import PageTitle from '../../Common/PageTitle';
 
 const messages = defineMessages({
   studioMovies: '{studio} Movies',

src/components/Discover/DiscoverTv.tsx

@@ -1,10 +1,10 @@
-import type { TvResult } from '../../../server/models/Search';
-import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';
-import Header from '../Common/Header';
+import type { TvResult } from '../../../server/models/Search';
-import PageTitle from '../Common/PageTitle';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
+import Header from '../Common/Header';
+import ListView from '../Common/ListView';
+import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
   discovertv: 'Popular Series',

src/components/Discover/DiscoverTvGenre/index.tsx

@@ -1,12 +1,12 @@
-import type { TvResult } from '../../../../server/models/Search';
-import ListView from '../../Common/ListView';
-import { defineMessages, useIntl } from 'react-intl';
-import Header from '../../Common/Header';
-import PageTitle from '../../Common/PageTitle';
 import { useRouter } from 'next/router';
-import globalMessages from '../../../i18n/globalMessages';
+import { defineMessages, useIntl } from 'react-intl';
+import type { TvResult } from '../../../../server/models/Search';
 import useDiscover from '../../../hooks/useDiscover';
+import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import ListView from '../../Common/ListView';
+import PageTitle from '../../Common/PageTitle';
 
 const messages = defineMessages({
   genreSeries: '{genre} Series',

src/components/Discover/DiscoverTvLanguage/index.tsx

@@ -1,12 +1,12 @@
-import type { TvResult } from '../../../../server/models/Search';
-import ListView from '../../Common/ListView';
-import { defineMessages, useIntl } from 'react-intl';
-import Header from '../../Common/Header';
-import PageTitle from '../../Common/PageTitle';
 import { useRouter } from 'next/router';
-import globalMessages from '../../../i18n/globalMessages';
+import { defineMessages, useIntl } from 'react-intl';
+import type { TvResult } from '../../../../server/models/Search';
 import useDiscover from '../../../hooks/useDiscover';
+import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import ListView from '../../Common/ListView';
+import PageTitle from '../../Common/PageTitle';
 
 const messages = defineMessages({
   languageSeries: '{language} Series',

src/components/Discover/DiscoverTvUpcoming.tsx

@@ -1,10 +1,10 @@
-import type { TvResult } from '../../../server/models/Search';
-import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';
-import Header from '../Common/Header';
+import type { TvResult } from '../../../server/models/Search';
-import PageTitle from '../Common/PageTitle';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
+import Header from '../Common/Header';
+import ListView from '../Common/ListView';
+import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
   upcomingtv: 'Upcoming Series',

src/components/Discover/DiscoverWatchlist/index.tsx

@@ -1,10 +1,10 @@
-import ListView from '../../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';
-import Header from '../../Common/Header';
+import type { WatchlistItem } from '../../../../server/interfaces/api/discoverInterfaces';
-import PageTitle from '../../Common/PageTitle';
 import useDiscover from '../../../hooks/useDiscover';
 import Error from '../../../pages/_error';
-import type { WatchlistItem } from '../../../../server/interfaces/api/discoverInterfaces';
+import Header from '../../Common/Header';
+import ListView from '../../Common/ListView';
+import PageTitle from '../../Common/PageTitle';
 
 const messages = defineMessages({
   discoverwatchlist: 'Your Plex Watchlist',

src/components/Discover/MovieGenreSlider/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';

src/components/Discover/Trending.tsx

@@ -1,14 +1,14 @@
+import { defineMessages, useIntl } from 'react-intl';
 import type {
   MovieResult,
-  TvResult,
   PersonResult,
+  TvResult,
 } from '../../../server/models/Search';
-import ListView from '../Common/ListView';
-import { defineMessages, useIntl } from 'react-intl';
-import Header from '../Common/Header';
-import PageTitle from '../Common/PageTitle';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
+import Header from '../Common/Header';
+import ListView from '../Common/ListView';
+import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
   trending: 'Trending',

src/components/Discover/TvGenreSlider/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';

src/components/Discover/Upcoming.tsx

@@ -1,10 +1,10 @@
-import type { MovieResult } from '../../../server/models/Search';
-import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';
-import Header from '../Common/Header';
+import type { MovieResult } from '../../../server/models/Search';
-import PageTitle from '../Common/PageTitle';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
+import Header from '../Common/Header';
+import ListView from '../Common/ListView';
+import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
   upcomingmovies: 'Upcoming Movies',

src/components/JSONEditor/index.tsx

@@ -1,7 +1,7 @@
-import type { HTMLAttributes } from 'react';
-import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-dracula';
+import type { HTMLAttributes } from 'react';
+import AceEditor from 'react-ace';
 
 interface JSONEditorProps extends HTMLAttributes<HTMLDivElement> {
   name: string;

src/components/LoadingBar/index.tsx

@@ -1,7 +1,7 @@
 import { NProgress } from '@tanem/react-nprogress';
+import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useRouter } from 'next/router';
 
 interface BarProps {
   progress: number;

src/components/Search/index.tsx

@@ -1,15 +1,15 @@
 import { useRouter } from 'next/router';
+import { defineMessages, useIntl } from 'react-intl';
 import type {
-  TvResult,
   MovieResult,
   PersonResult,
+  TvResult,
 } from '../../../server/models/Search';
-import ListView from '../Common/ListView';
+import useDiscover from '../../hooks/useDiscover';
-import { defineMessages, useIntl } from 'react-intl';
+import Error from '../../pages/_error';
 import Header from '../Common/Header';
+import ListView from '../Common/ListView';
 import PageTitle from '../Common/PageTitle';
-import Error from '../../pages/_error';
-import useDiscover from '../../hooks/useDiscover';
 
 const messages = defineMessages({
   search: 'Search',

src/components/TitleCard/ErrorCard.tsx

@@ -1,9 +1,9 @@
-import { defineMessages, useIntl } from 'react-intl';
-import globalMessages from '../../i18n/globalMessages';
-import Button from '../Common/Button';
 import { CheckIcon, TrashIcon } from '@heroicons/react/solid';
 import axios from 'axios';
+import { defineMessages, useIntl } from 'react-intl';
 import { mutate } from 'swr';
+import globalMessages from '../../i18n/globalMessages';
+import Button from '../Common/Button';
 
 interface ErrorCardProps {
   id: number;

src/components/TitleCard/index.tsx

@@ -14,8 +14,8 @@ import Button from '../Common/Button';
 import CachedImage from '../Common/CachedImage';
 import RequestModal from '../RequestModal';
 import Transition from '../Transition';
-import Placeholder from './Placeholder';
 import ErrorCard from './ErrorCard';
+import Placeholder from './Placeholder';
 
 interface TitleCardProps {
   id: number;

src/components/Transition/index.tsx

@@ -1,5 +1,5 @@
+import React, { useContext, useEffect, useRef } from 'react';
 import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
-import React, { useRef, useEffect, useContext } from 'react';
 
 interface CSSTransitionProps {
   show?: boolean;

src/hooks/useDebouncedState.ts

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 /**
  * A hook to help with debouncing state

src/hooks/useInteraction.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export const INTERACTION_TYPE = {
   MOUSE: 'mouse',

src/hooks/useVerticalScroll.ts

@@ -1,6 +1,6 @@
-import type { MutableRefObject } from 'react';
-import { useState, useEffect, useRef } from 'react';
 import { debounce } from 'lodash';
+import type { MutableRefObject } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const IS_SCROLLING_CHECK_THROTTLE = 200;
 const BUFFER_HEIGHT = 200;

src/utils/polyfillIntl.ts

@@ -1,6 +1,6 @@
-import { shouldPolyfill as shouldPolyfillPluralrules } from '@formatjs/intl-pluralrules/should-polyfill';
-import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill';
 import { shouldPolyfill as shouldPolyfillDisplayNames } from '@formatjs/intl-displaynames/should-polyfill';
+import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill';
+import { shouldPolyfill as shouldPolyfillPluralrules } from '@formatjs/intl-pluralrules/should-polyfill';
 
 const polyfillLocale = async () => {
   if (shouldPolyfillLocale()) {