feat: radarr/sonarr tag support (#1366)

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -1,7 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { Listbox, Transition } from '@headlessui/react';
+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 useSWR from 'swr';
 import type {
   ServiceCommonServer,
@@ -13,6 +16,13 @@ import globalMessages from '../../../i18n/globalMessages';
 import { formatBytes } from '../../../utils/numberHelpers';
 import { SmallLoadingSpinner } from '../../Common/LoadingSpinner';
 
+type OptionType = {
+  value: string;
+  label: string;
+};
+
+const Select = dynamic(() => import('react-select'), { ssr: false });
+
 const messages = defineMessages({
   advancedoptions: 'Advanced Options',
   destinationserver: 'Destination Server',
@@ -23,12 +33,16 @@ const messages = defineMessages({
   folder: '{path} ({space})',
   requestas: 'Request As',
   languageprofile: 'Language Profile',
+  tags: 'Tags',
+  selecttags: 'Select tags',
+  notagoptions: 'No Tags',
 });
 
 export type RequestOverrides = {
   server?: number;
   profile?: number;
   folder?: string;
+  tags?: number[];
   language?: number;
   user?: User;
 };
@@ -77,6 +91,10 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
     defaultOverrides?.language ?? -1
   );
 
+  const [selectedTags, setSelectedTags] = useState<number[]>(
+    defaultOverrides?.tags ?? []
+  );
+
   const {
     data: serverData,
     isValidating,
@@ -150,6 +168,9 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
             ? serverData.server.activeAnimeLanguageProfileId
             : serverData.server.activeLanguageProfileId)
       );
+      const defaultTags = isAnime
+        ? serverData.server.activeAnimeTags
+        : serverData.server.activeTags;
 
       if (
         defaultProfile &&
@@ -174,46 +195,43 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
       ) {
         setSelectedLanguage(defaultLanguage.id);
       }
+
+      if (
+        defaultTags &&
+        !isEqual(defaultTags, selectedTags) &&
+        (!defaultOverrides || defaultOverrides.tags === null)
+      ) {
+        setSelectedTags(defaultTags);
+      }
     }
   }, [serverData]);
 
   useEffect(() => {
-    if (
-      defaultOverrides &&
-      defaultOverrides.server !== null &&
-      defaultOverrides.server !== undefined
-    ) {
+    if (defaultOverrides && defaultOverrides.server != null) {
       setSelectedServer(defaultOverrides.server);
     }
 
-    if (
-      defaultOverrides &&
-      defaultOverrides.profile !== null &&
-      defaultOverrides.profile !== undefined
-    ) {
+    if (defaultOverrides && defaultOverrides.profile != null) {
       setSelectedProfile(defaultOverrides.profile);
     }
 
-    if (
-      defaultOverrides &&
-      defaultOverrides.folder !== null &&
-      defaultOverrides.folder !== undefined
-    ) {
+    if (defaultOverrides && defaultOverrides.folder != null) {
       setSelectedFolder(defaultOverrides.folder);
     }
 
-    if (
-      defaultOverrides &&
-      defaultOverrides.language !== null &&
-      defaultOverrides.language !== undefined
-    ) {
+    if (defaultOverrides && defaultOverrides.language != null) {
       setSelectedLanguage(defaultOverrides.language);
     }
+
+    if (defaultOverrides && defaultOverrides.tags != null) {
+      setSelectedTags(defaultOverrides.tags);
+    }
   }, [
     defaultOverrides?.server,
     defaultOverrides?.folder,
     defaultOverrides?.profile,
     defaultOverrides?.language,
+    defaultOverrides?.tags,
   ]);
 
   useEffect(() => {
@@ -224,6 +242,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
         server: selectedServer ?? undefined,
         user: selectedUser ?? undefined,
         language: selectedLanguage ?? undefined,
+        tags: selectedTags,
       });
     }
   }, [
@@ -232,6 +251,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
     selectedProfile,
     selectedUser,
     selectedLanguage,
+    selectedTags,
   ]);
 
   if (!data && !error) {
@@ -436,9 +456,43 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
             </div>
           </>
         )}
+        {!!data && selectedServer !== null && (
+          <div className="mt-0 sm:mt-2">
+            <label htmlFor="tags">{intl.formatMessage(messages.tags)}</label>
+            <Select
+              name="tags"
+              options={(serverData?.tags ?? []).map((tag) => ({
+                label: tag.label,
+                value: tag.id,
+              }))}
+              isMulti
+              placeholder={intl.formatMessage(messages.selecttags)}
+              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));
+              }}
+              noOptionsMessage={() => intl.formatMessage(messages.notagoptions)}
+            />
+          </div>
+        )}
         {hasPermission([Permission.MANAGE_REQUESTS, Permission.MANAGE_USERS]) &&
           selectedUser && (
-            <div className="first:mt-0 sm:mt-4">
+            <div className="mt-2 first:mt-0">
               <Listbox
                 as="div"
                 value={selectedUser}