misc: update tmdb show settings modal

ShokoAnime · Feb 11, 2025 · 1e316bc · 1e316bc
1 parent b35912a
commit 1e316bc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 47 deletions.
diff --git a/src/components/Collection/SeriesMetadata.tsx b/src/components/Collection/SeriesMetadata.tsx
@@ -1,11 +1,5 @@
 import React, { useMemo } from 'react';
-import {
-  mdiCloseCircleOutline,
-  mdiCogOutline,
-  mdiOpenInNew,
-  mdiPencilCircleOutline,
-  mdiPlusCircleOutline,
-} from '@mdi/js';
+import { mdiCloseCircleOutline, mdiOpenInNew, mdiPencilCircleOutline, mdiPlusCircleOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 
 import Button from '@/components/Input/Button';
@@ -16,13 +10,12 @@ import useNavigateVoid from '@/hooks/useNavigateVoid';
 
 type Props = {
   id?: number;
-  openTmdbShowSettings?: (showId: number) => void;
   seriesId: number;
   site: 'AniDB' | 'TMDB' | 'TraktTv';
   type?: 'Movie' | 'Show';
 };
 
-const MetadataLink = ({ id, openTmdbShowSettings, seriesId, site, type }: Props) => {
+const MetadataLink = ({ id, seriesId, site, type }: Props) => {
   const navigate = useNavigateVoid();
   const { mutate: deleteTmdbLink } = useDeleteTmdbLinkMutation(seriesId, type ?? 'Movie');
 
@@ -41,23 +34,13 @@ const MetadataLink = ({ id, openTmdbShowSettings, seriesId, site, type }: Props)
   }, [id, site, type]);
 
   const canAddLink = useMemo(() => site === 'TMDB', [site]);
-  const canOpenSettings = useMemo(() => site === 'TMDB' && type === 'Show' && openTmdbShowSettings != null, [
-    site,
-    type,
-    openTmdbShowSettings,
-  ]);
   const canEditLink = useMemo(() => site === 'TMDB', [site]);
   const canRemoveLink = useMemo(() => site === 'TMDB', [site]);
 
   const addLink = useEventCallback(() => {
     navigate('../tmdb-linking');
   });
 
-  const openSettings = useEventCallback(() => {
-    if (!id || !type || !canOpenSettings) return;
-    openTmdbShowSettings!(id);
-  });
-
   const editLink = useEventCallback(() => {
     if (!id || !type) return;
     navigate(`../tmdb-linking?type=${type}&id=${id}`);
@@ -105,11 +88,6 @@ const MetadataLink = ({ id, openTmdbShowSettings, seriesId, site, type }: Props)
             {id
               ? (
                 <>
-                  {canOpenSettings && (
-                    <Button onClick={openSettings} tooltip="Open Settings">
-                      <Icon className="text-panel-icon-action" path={mdiCogOutline} size={1} />
-                    </Button>
-                  )}
                   {canEditLink && (
                     <Button onClick={editLink} tooltip="Edit Link">
                       <Icon className="text-panel-icon-action" path={mdiPencilCircleOutline} size={1} />

diff --git a/src/components/Dialogs/TmdbShowSettingsModal.tsx b/src/components/Dialogs/TmdbShowSettingsModal.tsx
@@ -41,19 +41,17 @@ function orderingToDescription(ordering: AlternateOrderingTypeEnum | undefined):
 
 function TmdbShowSettingsModal({ onClose, show, showId }: Props) {
   const orderingQuery = useTmdbShowOrderingQuery(showId, show && showId > 0);
-  const { mutate: setOrdering, status: setOrderingStatus, submittedAt } = useSetPreferredTmdbShowOrderingMutation(
+  const { mutate: setOrdering, status: setOrderingStatus } = useSetPreferredTmdbShowOrderingMutation(
     showId,
   );
-  const { data: orderingList, fetchStatus } = orderingQuery;
+  const { data: orderingList } = orderingQuery;
   const [selectedOrderingId, setSelectedOrderingId] = useState<string>('');
   const selectedOrdering = useMemo(() => orderingList.find(ordering => ordering.OrderingID === selectedOrderingId), [
     orderingList,
     selectedOrderingId,
   ]);
 
-  const lockedControls = fetchStatus === 'fetching' && submittedAt - Date.now() > 100;
-  const canSave = !lockedControls && setOrderingStatus !== 'pending' && selectedOrdering != null
-    && !selectedOrdering.InUse;
+  const canSave = setOrderingStatus !== 'pending' && selectedOrdering != null && !selectedOrdering.InUse;
 
   const handleClose = useEventCallback(() => {
     setSelectedOrderingId('');
@@ -96,10 +94,9 @@ function TmdbShowSettingsModal({ onClose, show, showId }: Props) {
 
   useLayoutEffect(() => {
     if (show) {
-      orderingQuery.refetch({ cancelRefetch: true }).catch(console.error);
+      orderingQuery.refetch().catch(console.error);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [show, showId]);
+  }, [show, showId, orderingQuery]);
 
   return (
     <ModalPanel
@@ -121,10 +118,8 @@ function TmdbShowSettingsModal({ onClose, show, showId }: Props) {
               onClick={handleOrderingClick}
               className={cx(
                 'flex flex-row justify-between transition-colors',
-                lockedControls && 'opacity-65',
-                !lockedControls && !ordering.InUse && 'cursor-pointer',
-                !lockedControls && ordering.InUse
-                  && (!selectedOrdering || selectedOrdering.OrderingID !== ordering.OrderingID)
+                !ordering.InUse && 'cursor-pointer',
+                ordering.InUse && (!selectedOrdering || selectedOrdering.OrderingID !== ordering.OrderingID)
                   && 'text-panel-text-primary',
                 selectedOrdering?.OrderingID === ordering.OrderingID && 'text-panel-text-important',
               )}

diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
@@ -8,7 +8,6 @@ import { flatMap, get, map, round } from 'lodash';
 import CharacterImage from '@/components/CharacterImage';
 import EpisodeSummary from '@/components/Collection/Episode/EpisodeSummary';
 import SeriesMetadata from '@/components/Collection/SeriesMetadata';
-import TmdbShowSettingsModal from '@/components/Dialogs/TmdbShowSettingsModal';
 import MultiStateButton from '@/components/Input/MultiStateButton';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import SeriesPoster from '@/components/SeriesPoster';
@@ -30,10 +29,6 @@ const MetadataLinks = ['AniDB', 'TMDB', 'TraktTv'] as const;
 const SeriesOverview = () => {
   const { series } = useOutletContext<SeriesContextType>();
 
-  const [selectedTmdbShowId, setSelectedTmdbShowId] = useState<number>(-1);
-  const showTmdbSettingsModal = selectedTmdbShowId > 0;
-  const handleTmdbSettingsClose = useEventCallback(() => setSelectedTmdbShowId(-1));
-
   const nextUpEpisodeQuery = useSeriesNextUpQuery(series.IDs.ID, {
     includeDataFrom: ['AniDB'],
     includeMissing: false,
@@ -100,7 +95,6 @@ const SeriesOverview = () => {
                             id={id}
                             seriesId={series.IDs.ID}
                             type={type}
-                            openTmdbShowSettings={setSelectedTmdbShowId}
                           />
                         ))),
                       /* Show row to add new TMDB links */
@@ -236,11 +230,6 @@ const SeriesOverview = () => {
             </div>
           ))}
         </div>
-        <TmdbShowSettingsModal
-          show={showTmdbSettingsModal}
-          onClose={handleTmdbSettingsClose}
-          showId={selectedTmdbShowId}
-        />
       </ShokoPanel>
     </>
   );