build(deps): bump dependencies (#2454)

* build(deps): bump react-select from 4.3.1 to 5.2.2

* build(deps): bump axios from 0.21.4 to 0.25.0

* build(deps-dev): bump lint-staged from 12.2.1 to 12.2.2

Bumps [lint-staged](https://github.com/okonet/lint-staged) from 12.2.1 to 12.2.2.
- [Release notes](https://github.com/okonet/lint-staged/releases)
- [Commits](https://github.com/okonet/lint-staged/compare/v12.2.1...v12.2.2)

---
updated-dependencies:
- dependency-name: lint-staged
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* build(deps-dev): bump typescript from 4.5.4 to 4.5.5

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.5.4 to 4.5.5.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/commits)

---
updated-dependencies:
- dependency-name: typescript
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* build(deps-dev): bump eslint-plugin-formatjs from 2.20.3 to 2.20.4

Bumps [eslint-plugin-formatjs](https://github.com/formatjs/formatjs) from 2.20.3 to 2.20.4.
- [Release notes](https://github.com/formatjs/formatjs/releases)
- [Commits](https://github.com/formatjs/formatjs/compare/eslint-plugin-formatjs@2.20.3...eslint-plugin-formatjs@2.20.4)

---
updated-dependencies:
- dependency-name: eslint-plugin-formatjs
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* build(deps-dev): bump @commitlint/cli from 16.0.3 to 16.1.0

Bumps [@commitlint/cli](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/cli) from 16.0.3 to 16.1.0.
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v16.1.0/@commitlint/cli)

---
updated-dependencies:
- dependency-name: "@commitlint/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* build(deps): bump @tanem/react-nprogress from 4.0.3 to 4.0.4

Bumps [@tanem/react-nprogress](https://github.com/tanem/react-nprogress) from 4.0.3 to 4.0.4.
- [Release notes](https://github.com/tanem/react-nprogress/releases)
- [Changelog](https://github.com/tanem/react-nprogress/blob/master/CHANGELOG.md)
- [Commits](https://github.com/tanem/react-nprogress/compare/v4.0.3...v4.0.4)

---
updated-dependencies:
- dependency-name: "@tanem/react-nprogress"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* fix: cleanup comments

* build(deps-dev): bump lint-staged from 12.2.1 to 12.3.1

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ryan Cohen <ryan@sct.dev>

src/components/LanguageSelector/index.tsx

@@ -1,9 +1,7 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { sortBy } from 'lodash';
-import dynamic from 'next/dynamic';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import type { OptionsType, OptionTypeBase } from 'react-select';
+import Select, { CSSObjectWithLabel } from 'react-select';
 import useSWR from 'swr';
 import { Language } from '../../../server/lib/settings';
 import globalMessages from '../../i18n/globalMessages';
@@ -13,8 +11,6 @@ const messages = defineMessages({
   languageServerDefault: 'Default ({language})',
 });
 
-const Select = dynamic(() => import('react-select'), { ssr: false });
-
 type OptionType = {
   value: string;
   label: string;
@@ -22,11 +18,11 @@ type OptionType = {
 };
 
 const selectStyles = {
-  multiValueLabel: (base: any, state: { data: { isFixed?: boolean } }) => {
-    return state.data.isFixed ? { ...base, paddingRight: 6 } : base;
+  multiValueLabel: (base: CSSObjectWithLabel, props: { data: OptionType }) => {
+    return props.data?.isFixed ? { ...base, paddingRight: 6 } : base;
   },
-  multiValueRemove: (base: any, state: { data: { isFixed?: boolean } }) => {
-    return state.data.isFixed ? { ...base, display: 'none' } : base;
+  multiValueRemove: (base: CSSObjectWithLabel, props: { data: OptionType }) => {
+    return props.data?.isFixed ? { ...base, display: 'none' } : base;
   },
 };
 
@@ -95,7 +91,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
   });
 
   return (
-    <Select
+    <Select<OptionType, true>
       options={options}
       isMulti
       className="react-select-container"
@@ -125,36 +121,30 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
               }),
               isFixed: true,
             }
-          : value?.split('|').map((code) => {
-              const matchedLanguage = sortedLanguages?.find(
-                (lang) => lang.iso_639_1 === code
-              );
+          : (value
+              ?.split('|')
+              .map((code) => {
+                const matchedLanguage = sortedLanguages?.find(
+                  (lang) => lang.iso_639_1 === code
+                );
 
-              if (!matchedLanguage) {
-                return undefined;
-              }
+                if (!matchedLanguage) {
+                  return undefined;
+                }
 
-              return {
-                label: matchedLanguage.name,
-                value: matchedLanguage.iso_639_1,
-              };
-            }) ?? undefined
+                return {
+                  label: matchedLanguage.name,
+                  value: matchedLanguage.iso_639_1,
+                };
+              })
+              .filter((option) => option !== undefined) as OptionType[])
       }
-      onChange={(
-        value: OptionTypeBase | OptionsType<OptionType> | null,
-        options
-      ) => {
-        if (!Array.isArray(value)) {
-          return;
-        }
-
+      onChange={(value, options) => {
         if (
           (options &&
             options.action === 'select-option' &&
             options.option?.value === 'server') ||
-          value?.every(
-            (v: { value: string; label: string }) => v.value === 'server'
-          )
+          value.every((v) => v.value === 'server')
         ) {
           return setFieldValue('originalLanguage', '');
         }
@@ -163,9 +153,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
           (options &&
             options.action === 'select-option' &&
             options.option?.value === 'all') ||
-          value?.every(
-            (v: { value: string; label: string }) => v.value === 'all'
-          )
+          value.every((v) => v.value === 'all')
         ) {
           return setFieldValue('originalLanguage', isUserSettings ? 'all' : '');
         }
@@ -173,7 +161,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         setFieldValue(
           'originalLanguage',
           value
-            ?.map((lang) => lang.value)
+            .map((lang) => lang.value)
             .filter((v) => v !== 'all')
             .join('|')
         );

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -3,10 +3,9 @@ import { Listbox, Transition } from '@headlessui/react';
 import { AdjustmentsIcon } from '@heroicons/react/outline';
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/solid';
 import { isEqual } from 'lodash';
-import dynamic from 'next/dynamic';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import type { OptionsType, OptionTypeBase } from 'react-select';
+import Select from 'react-select';
 import useSWR from 'swr';
 import type {
   ServiceCommonServer,
@@ -19,12 +18,10 @@ import { formatBytes } from '../../../utils/numberHelpers';
 import { SmallLoadingSpinner } from '../../Common/LoadingSpinner';
 
 type OptionType = {
-  value: string;
+  value: number;
   label: string;
 };
 
-const Select = dynamic(() => import('react-select'), { ssr: false });
-
 const messages = defineMessages({
   advancedoptions: 'Advanced',
   destinationserver: 'Destination Server',
@@ -474,7 +471,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
           (isValidating || !serverData || !!serverData?.tags?.length) && (
             <div className="mb-2">
               <label htmlFor="tags">{intl.formatMessage(messages.tags)}</label>
-              <Select
+              <Select<OptionType, true>
                 name="tags"
                 options={(serverData?.tags ?? []).map((tag) => ({
                   label: tag.label,
@@ -489,22 +486,26 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                 }
                 className="react-select-container react-select-container-dark"
                 classNamePrefix="react-select"
-                value={selectedTags.map((tagId) => {
-                  const foundTag = serverData?.tags.find(
-                    (tag) => tag.id === tagId
-                  );
-                  return {
-                    value: foundTag?.id,
-                    label: foundTag?.label,
-                  };
-                })}
-                onChange={(
-                  value: OptionTypeBase | OptionsType<OptionType> | null
-                ) => {
-                  if (!Array.isArray(value)) {
-                    return;
-                  }
-                  setSelectedTags(value?.map((option) => option.value));
+                value={
+                  selectedTags
+                    .map((tagId) => {
+                      const foundTag = serverData?.tags.find(
+                        (tag) => tag.id === tagId
+                      );
+
+                      if (!foundTag) {
+                        return undefined;
+                      }
+
+                      return {
+                        value: foundTag.id,
+                        label: foundTag.label,
+                      };
+                    })
+                    .filter((option) => option !== undefined) as OptionType[]
+                }
+                onChange={(value) => {
+                  setSelectedTags(value.map((option) => option.value));
                 }}
                 noOptionsMessage={() =>
                   intl.formatMessage(messages.notagoptions)

src/components/Settings/RadarrModal/index.tsx

@@ -1,10 +1,9 @@
 import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
-import dynamic from 'next/dynamic';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import type { OptionsType, OptionTypeBase } from 'react-select';
+import Select from 'react-select';
 import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
 import type { RadarrSettings } from '../../../../server/lib/settings';
@@ -14,12 +13,10 @@ import SensitiveInput from '../../Common/SensitiveInput';
 import Transition from '../../Transition';
 
 type OptionType = {
-  value: string;
+  value: number;
   label: string;
 };
 
-const Select = dynamic(() => import('react-select'), { ssr: false });
-
 const messages = defineMessages({
   createradarr: 'Add New Radarr Server',
   create4kradarr: 'Add New 4K Radarr Server',
@@ -611,7 +608,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.tags)}
                   </label>
                   <div className="form-input">
-                    <Select
+                    <Select<OptionType, true>
                       options={
                         isValidated
                           ? testResponse.tags.map((tag) => ({
@@ -631,24 +628,30 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       }
                       className="react-select-container"
                       classNamePrefix="react-select"
-                      value={values.tags.map((tagId) => {
-                        const foundTag = testResponse.tags.find(
-                          (tag) => tag.id === tagId
-                        );
-                        return {
-                          value: foundTag?.id,
-                          label: foundTag?.label,
-                        };
-                      })}
-                      onChange={(
-                        value: OptionTypeBase | OptionsType<OptionType> | null
-                      ) => {
-                        if (!Array.isArray(value)) {
-                          return;
-                        }
+                      value={
+                        values.tags
+                          .map((tagId) => {
+                            const foundTag = testResponse.tags.find(
+                              (tag) => tag.id === tagId
+                            );
+
+                            if (!foundTag) {
+                              return undefined;
+                            }
+
+                            return {
+                              value: foundTag.id,
+                              label: foundTag.label,
+                            };
+                          })
+                          .filter(
+                            (option) => option !== undefined
+                          ) as OptionType[]
+                      }
+                      onChange={(value) => {
                         setFieldValue(
                           'tags',
-                          value?.map((option) => option.value)
+                          value.map((option) => option.value)
                         );
                       }}
                       noOptionsMessage={() =>

src/components/Settings/SonarrModal/index.tsx

@@ -1,10 +1,9 @@
 import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
-import dynamic from 'next/dynamic';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import type { OptionsType, OptionTypeBase } from 'react-select';
+import Select, { OnChangeValue } from 'react-select';
 import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
 import type { SonarrSettings } from '../../../../server/lib/settings';
@@ -14,12 +13,10 @@ import SensitiveInput from '../../Common/SensitiveInput';
 import Transition from '../../Transition';
 
 type OptionType = {
-  value: string;
+  value: number;
   label: string;
 };
 
-const Select = dynamic(() => import('react-select'), { ssr: false });
-
 const messages = defineMessages({
   createsonarr: 'Add New Sonarr Server',
   create4ksonarr: 'Add New 4K Sonarr Server',
@@ -656,7 +653,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.tags)}
                   </label>
                   <div className="form-input">
-                    <Select
+                    <Select<OptionType, true>
                       options={
                         isValidated
                           ? testResponse.tags.map((tag) => ({
@@ -680,25 +677,29 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       value={
                         isTesting
                           ? []
-                          : values.tags.map((tagId) => {
-                              const foundTag = testResponse.tags.find(
-                                (tag) => tag.id === tagId
-                              );
-                              return {
-                                value: foundTag?.id,
-                                label: foundTag?.label,
-                              };
-                            })
+                          : (values.tags
+                              .map((tagId) => {
+                                const foundTag = testResponse.tags.find(
+                                  (tag) => tag.id === tagId
+                                );
+
+                                if (!foundTag) {
+                                  return undefined;
+                                }
+
+                                return {
+                                  value: foundTag.id,
+                                  label: foundTag.label,
+                                };
+                              })
+                              .filter(
+                                (option) => option !== undefined
+                              ) as OptionType[])
                       }
-                      onChange={(
-                        value: OptionTypeBase | OptionsType<OptionType> | null
-                      ) => {
-                        if (!Array.isArray(value)) {
-                          return;
-                        }
+                      onChange={(value: OnChangeValue<OptionType, true>) => {
                         setFieldValue(
                           'tags',
-                          value?.map((option) => option.value)
+                          value.map((option) => option.value)
                         );
                       }}
                       noOptionsMessage={() =>
@@ -835,7 +836,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.animeTags)}
                   </label>
                   <div className="form-input">
-                    <Select
+                    <Select<OptionType, true>
                       options={
                         isValidated
                           ? testResponse.tags.map((tag) => ({
@@ -859,25 +860,29 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       value={
                         isTesting
                           ? []
-                          : values.animeTags.map((tagId) => {
-                              const foundTag = testResponse.tags.find(
-                                (tag) => tag.id === tagId
-                              );
-                              return {
-                                value: foundTag?.id,
-                                label: foundTag?.label,
-                              };
-                            })
+                          : (values.animeTags
+                              .map((tagId) => {
+                                const foundTag = testResponse.tags.find(
+                                  (tag) => tag.id === tagId
+                                );
+
+                                if (!foundTag) {
+                                  return undefined;
+                                }
+
+                                return {
+                                  value: foundTag.id,
+                                  label: foundTag.label,
+                                };
+                              })
+                              .filter(
+                                (option) => option !== undefined
+                              ) as OptionType[])
                       }
-                      onChange={(
-                        value: OptionTypeBase | OptionsType<OptionType> | null
-                      ) => {
-                        if (!Array.isArray(value)) {
-                          return;
-                        }
+                      onChange={(value) => {
                         setFieldValue(
                           'animeTags',
-                          value?.map((option) => option.value)
+                          value.map((option) => option.value)
                         );
                       }}
                       noOptionsMessage={() =>